| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Skia Performance Monitoring | Clusters</title> |
| |
| {{template "header.html" .}} |
| |
| <style type="text/css" media="screen"> |
| sort-sk { |
| display: block; |
| padding: 1em; |
| } |
| |
| cluster-summary-sk { |
| border: solid lightgray 1px; |
| display: block; |
| margin: 1em; |
| padding: 1em; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <perf-scaffold-sk responsiveWidth="700px"> |
| <div id="container"> |
| <section id=clustering> |
| <h2>Trace Clustering</h2> |
| <p> |
| <paper-input value="0.001" id="_stddev" label="Standard Deviation Threshhold" floatingLabel></paper-input> |
| </p> |
| <p> |
| <paper-input value="50" id="_k" label="Number Of Clusters" floatingLabel></paper-input> |
| </p> |
| <p class=issue> |
| <label for="_issue">Issue:</label> |
| <select name="_issue" id="_issue" size="1"> |
| <option selected> </option> |
| </select> |
| </p> |
| <query-sk fast></query-sk> |
| <br/> |
| <button class=raised id="start">Calculate</button> |
| |
| <sort-sk target=clResults> |
| <button data-key="clustersize">Cluster Size </button> |
| <button data-key="stepregression" data-default=up>Regression </button> |
| <button data-key="stepsize">Step Size </button> |
| <button data-key="steplse">Least Squares</button> |
| <button data-key="timestamp">Step Time</button> |
| </sort-sk> |
| <div id="clResults"> |
| </div> |
| </section> |
| </div> |
| </perf-scaffold-sk> |
| <script type="text/javascript" charset="utf-8"> |
| (function() { |
| |
| /** |
| * beginClustering by clearing out the old results and starting the XHR |
| * request to get new clustering results. |
| */ |
| function beginClustering(k, stddev, issue, selections) { |
| sk.clearChildren($$$('#clResults')); |
| |
| document.body.style.cursor = 'wait'; |
| var url = '/clustering/?_k=' + k + '&_stddev=' + stddev + '&_issue=' + issue + '&' + selections; |
| sk.get(url).then(JSON.parse).then(function(json) { |
| var container = $$$('#clResults'); |
| json.Clusters.forEach(function(c){ |
| var sum = document.createElement('cluster-summary-sk'); |
| container.appendChild(sum); |
| sum.setSummary(c); |
| }); |
| document.body.style.cursor = 'auto'; |
| }).catch(function(e){ |
| sk.errorMessage(e); |
| document.body.style.cursor = 'auto'; |
| }); |
| } |
| |
| function onLoad() { |
| $$$('#start').addEventListener('click', function(){ |
| beginClustering( |
| $$$('#_k').value, $$$('#_stddev').value, $$$('#_issue').value, $$$('query-sk').currentquery); |
| }); |
| |
| $$('input[name="sort"]').forEach(function(ele) { |
| ele.addEventListener('click', sort); |
| }); |
| |
| sk.get('/tiles/0/-1/').then(JSON.parse).then(function(json) { |
| sk.Mailbox.send("tileinfo", json); |
| $$$('query-sk').setParamSet(json.paramset); |
| }).catch(sk.errorMessage); |
| |
| }; |
| |
| sk.DomReady.then(onLoad); |
| |
| })(); |
| </script> |
| </body> |
| </html> |
