| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Clusters</title> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width"/> |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
| <script src="/res/js/flot/jquery.flot.js"></script> |
| <link rel="stylesheet" href="/res/css/clusters.css" type="text/css"> |
| <script src="/res/js/clusters.js" type="text/javascript" charset="utf-8"></script> |
| </head> |
| <body> |
| <p>Clustering of measurement traces by shape.</p> |
| <details> |
| <summary>Traces clustered into {{.K}} clusters. Traces with stddev<{{.StdDevThreshhold}} won't have their standard deviation normalized to 1.0.</summary> |
| <form action="" method="post" accept-charset="utf-8"> |
| <p><label for="stddev">StdDev Threshhold:</label> <input type="text" name="stddev" value="{{.StdDevThreshhold}}" id="stddev"></p> |
| <p><label for="k">Num Clusters:</label> <input type="text" name="k" value="{{.K}}" id="k"></p> |
| <p><input type="submit" value="Recalculate"></p> |
| </form> |
| </details> |
| |
| <div id="sort"> |
| Sort by: |
| <input type="radio" name="sort" value="clusterSize" checked>ClusterSize</input> |
| <input type="radio" name="sort" value="stepFit">StepFit</input> |
| <input type="radio" name="sort" value="stepSize">StepSize</input> |
| <input type="radio" name="sort" value="stepDeviation">StepDeviation</input> |
| </div> |
| <div id="container"> |
| <!-- Draw a plot and a word cloud for each cluster. --> |
| {{range $i, $summary := .Clusters}} |
| <div class="result" data-clustersize="{{len $summary.Keys}}" data-stepdeviation="{{$summary.StepFit.Deviation}}" data-stepsize="{{$summary.StepFit.StepSize}}"> |
| <div id="placeholder{{$i}}" class=graph></div> |
| <a id="trace-shortcut{{$i}}" href="#">View on dashboard</a> |
| Cluster has {{len $summary.Keys}} members, with StepFit deviation {{$summary.StepFit.Deviation}} in step size {{$summary.StepFit.StepSize}}. |
| <button type="submit" class=expander>+</button> |
| <!-- Draw a word cloud based on the parameters for each member of cluster. --> |
| <div class=cloud> |
| {{range $summary.ParamSummaries}} |
| <div class=cloudParam> |
| {{range .}} |
| <div style="font-size:{{.Weight}}px">{{.Value}} </div> |
| {{end}} |
| </div> |
| {{end}} |
| </div> |
| </div> |
| {{end}} |
| </div> |
| <script type="text/javascript" charset="utf-8"> |
| function openShortcut(keys) { |
| var data = {"keys": keys}; |
| var req = new XMLHttpRequest(); |
| req.addEventListener('load', function() { |
| if (req.response && req.status==200) { |
| var resp = JSON.parse(req.responseText); |
| var dataset_name = window.location.pathname.indexOf("micro") >= 0 ? "micro" : "skps"; |
| window.open('/#set=' + dataset_name + '&shortcut=' + resp.id, '_blank'); |
| } |
| }); |
| req.open("POST", "/shortcuts/", true); |
| req.setRequestHeader("Content-type","application/x-www-form-urlencoded"); |
| req.send("data=" + JSON.stringify(data)); |
| } |
| |
| window.addEventListener('load', function() { |
| {{range $i, $summary := .Clusters}} |
| $.plot("#placeholder{{$i}}", |
| [ |
| {{range $j, $trace := $summary.Traces}} |
| {{if $j}},{{end}} |
| { |
| color: "{{if $j}}lightgrey{{else}}black{{end}}", |
| data: {{$trace}} |
| } |
| {{end}} |
| // Redraw the first line, the centroid, so it shows up on top. |
| ,{ |
| color: "black", |
| data: {{index $summary.Traces 0}} |
| } |
| ], {}); |
| document.querySelector('#trace-shortcut{{$i}}').addEventListener('click', function(e) { |
| openShortcut({{$summary.Keys}}.slice(1, 11)); |
| }); |
| {{end}} |
| }); |
| </script> |
| </body> |
| </html> |
