Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(304)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: tools/telemetry/support/html_output/results-template.html

Issue 654203006: Turning TableRow into a class (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <title>Telemetry Performance Test Results</title> 4 <title>Telemetry Performance Test Results</title>
5 <style type="text/css"> 5 <style type="text/css">
6 6
7 section { 7 section {
8 background: white; 8 background: white;
9 padding: 10px; 9 padding: 10px;
10 position: relative; 10 position: relative;
(...skipping 580 matching lines...) Expand 10 before | Expand all | Expand 10 after
591 }).reduce(function (markup, cell) { return markup + cell; }, '') + '</tr></h ead><tbody></tbody>'); 591 }).reduce(function (markup, cell) { return markup + cell; }, '') + '</tr></h ead><tbody></tbody>');
592 592
593 var testNames = []; 593 var testNames = [];
594 for (testName in tests) 594 for (testName in tests)
595 testNames.push(testName); 595 testNames.push(testName);
596 596
597 window.isFirstImportantRow = true; 597 window.isFirstImportantRow = true;
598 598
599 testNames.sort().map(function (testName) { 599 testNames.sort().map(function (testName) {
600 var test = tests[testName]; 600 var test = tests[testName];
601 if (test.isMemoryTest() != shouldIgnoreMemory) 601 if (test.isMemoryTest() != shouldIgnoreMemory) {
602 createTableRow(runs, test, referenceIndex, useLargeLinePlots); 602 var row = new TableRow(runs, test, referenceIndex, useLargeLinePlots );
603 row.Construct();
604 }
603 }); 605 });
604 606
605 $('.closeButton').click(function(event) { 607 $('.closeButton').click(function(event) {
606 for (var i = 0; i < runs.length; i++) { 608 for (var i = 0; i < runs.length; i++) {
607 if (runs[i].id() == event.target.parentNode.id) { 609 if (runs[i].id() == event.target.parentNode.id) {
608 runs[i].hide(); 610 runs[i].hide();
609 undeleteManager.ondelete(runs[i].id()); 611 undeleteManager.ondelete(runs[i].id());
610 location.reload(); 612 location.reload();
611 break; 613 break;
612 } 614 }
(...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after
675 var intercept = sumY / points.length - slope * sumX / points.length; 677 var intercept = sumY / points.length - slope * sumX / points.length;
676 return {slope: slope, intercept: intercept, rSquared: r * r}; 678 return {slope: slope, intercept: intercept, rSquared: r * r};
677 } 679 }
678 680
679 var warningSign = '<svg viewBox="0 0 100 100" style="width: 18px; height: 18px; vertical-align: bottom;" version="1.1">' 681 var warningSign = '<svg viewBox="0 0 100 100" style="width: 18px; height: 18px; vertical-align: bottom;" version="1.1">'
680 + '<polygon fill="red" points="50,10 90,80 10,80 50,10" stroke="red" stroke- width="10" stroke-linejoin="round" />' 682 + '<polygon fill="red" points="50,10 90,80 10,80 50,10" stroke="red" stroke- width="10" stroke-linejoin="round" />'
681 + '<polygon fill="white" points="47,30 48,29, 50, 28.7, 52,29 53,30 50,60" s troke="white" stroke-width="10" stroke-linejoin="round" />' 683 + '<polygon fill="white" points="47,30 48,29, 50, 28.7, 52,29 53,30 50,60" s troke="white" stroke-width="10" stroke-linejoin="round" />'
682 + '<circle cx="50" cy="73" r="6" fill="white" />' 684 + '<circle cx="50" cy="73" r="6" fill="white" />'
683 + '</svg>'; 685 + '</svg>';
684 686
685 function createTableRow(runs, test, referenceIndex, useLargeLinePlots) { 687 function TableRow(runs, test, referenceIndex, useLargeLinePlots) {
686 var tableRow = $('<tr><td class="test collapsed"' + (test.isImportant ? ' st yle="font-weight:bold"' : '') + '>' + test.name() + '</td><td class="unit">' + t est.unit() + '</td></tr>'); 688 this.runs = runs;
689 this.test = test;
690 this.referenceIndex = referenceIndex;
691 this.useLargeLinePlots = useLargeLinePlots;
692 }
687 693
688 function markupForRun(result, referenceResult) { 694 TableRow.prototype.Construct = function() {
petrcermak 2014/10/20 15:06:29 Is there any reason for having a separate Construc
picksi1 2014/10/20 17:11:34 Done.
689 var comparisonCell = ''; 695 this.tableRow = $('<tr><td class="test collapsed"' + (this.test.isImportant ? ' style="font-weight:bold"' : '') + '>' + this.test.name() + '</td><td class=" unit">' + this.test.unit() + '</td></tr>');
690 var hiddenValue = '';
691 var shouldCompare = result !== referenceResult;
692 if (shouldCompare && referenceResult) {
693 var percentDifference = referenceResult.percentDifference(result);
694 var better = test.biggerIsBetter() ? percentDifference > 0 : percent Difference < 0;
695 var comparison = '';
696 var className = 'comparison';
697 if (referenceResult.isStatisticallySignificant(result)) {
698 comparison = formatPercentage(Math.abs(percentDifference)) + (be tter ? ' Better' : ' Worse&nbsp;');
699 className += better ? ' better' : ' worse';
700 }
701 hiddenValue = '<span style="display: none">|' + comparison + '</span >';
702 comparisonCell = '<td class="' + className + '">' + comparison + '</ td>';
703 } else if (shouldCompare)
704 comparisonCell = '<td class="comparison"></td>';
705
706 var values = result.values();
707 var warning = '';
708 var regressionAnalysis = '';
709 if (result.histogramValues) {
710 // Don't calculate regression result for histograms.
711 }
712 else if (values && values.length > 3) {
713 regressionResult = linearRegression(values);
714 regressionAnalysis = 'slope=' + toFixedWidthPrecision(regressionResu lt.slope)
715 + ', R^2=' + toFixedWidthPrecision(regressionResult.rSquared);
716 if (regressionResult.rSquared > 0.6 && Math.abs(regressionResult.slo pe) > 0.01) {
717 warning = ' <span class="regression-warning" title="Detected a t ime dependency with ' + regressionAnalysis + '">' + warningSign + ' </span>';
718 }
719 }
720
721 var statistics = '&sigma;=' + toFixedWidthPrecision(result.confidenceInt ervalDelta()) + ', min=' + toFixedWidthPrecision(result.min())
722 + ', max=' + toFixedWidthPrecision(result.max()) + '\n' + regression Analysis;
723
724 // Tablesorter doesn't know about the second cell so put the comparison in the invisible element.
725 return '<td class="result" title="' + statistics + '">' + toFixedWidthPr ecision(result.mean()) + hiddenValue
726 + '</td><td class="confidenceIntervalDelta" title="' + statistics + '">&plusmn; '
727 + formatPercentage(result.confidenceIntervalDeltaRatio()) + warning + '</td>' + comparisonCell;
728 }
729
730 function markupForMissingRun(isReference) {
731 return '<td colspan="' + (isReference ? 2 : 3) + '" class="missing">Miss ing</td>';
732 }
733 696
734 var runIndex = 0; 697 var runIndex = 0;
735 var results = test.results(); 698 var results = this.test.results();
736 var referenceResult = undefined; 699 var referenceResult = undefined;
737 var resultIndexMap = {}; 700 var resultIndexMap = {};
738 for (var i = 0; i < results.length; i++) { 701 for (var i = 0; i < results.length; i++) {
739 while (runs[runIndex] !== results[i].run()) 702 while (this.runs[runIndex] !== results[i].run())
740 runIndex++; 703 runIndex++;
741 if (runIndex == referenceIndex) 704 if (runIndex == this.referenceIndex)
742 referenceResult = results[i]; 705 referenceResult = results[i];
743 resultIndexMap[runIndex] = i; 706 resultIndexMap[runIndex] = i;
744 } 707 }
745 for (var i = 0; i < runs.length; i++) { 708 for (var i = 0; i < this.runs.length; i++) {
746 var resultIndex = resultIndexMap[i]; 709 var resultIndex = resultIndexMap[i];
747 if (resultIndex == undefined) 710 if (resultIndex == undefined)
748 tableRow.append(markupForMissingRun(i == referenceIndex)); 711 this.tableRow.append(this.markupForMissingRun(i == this.referenceInd ex));
749 else 712 else
750 tableRow.append(markupForRun(results[resultIndex], referenceResult)) ; 713 this.tableRow.append(this.markupForRun(results[resultIndex], this.re ferenceResult));
751 } 714 }
752 715
753 $('#container').children('tbody').last().append(tableRow); 716 $('#container').children('tbody').last().append(this.tableRow);
754 717
755 function toggle() { 718 if (this.test.isImportant && window.isFirstImportantRow) {
756 var firstCell = tableRow.children('td').first(); 719 window.isFirstImportantRow = false;
757 if (firstCell.children('section').length) { 720 this.toggle();
758 firstCell.children('section').remove(); 721 }
759 tableRow.children('td').css({'padding-bottom': ''});
760 tableRow.children('td').first().addClass('collapsed');
761 tableRow.children('td').first().removeClass('expanded');
762 } else {
763 var plot = createPlot(firstCell, test, useLargeLinePlots);
764 plot.css({'position': 'absolute', 'z-index': 2});
765 var offset = tableRow.offset();
766 offset.left += 1;
767 offset.top += tableRow.outerHeight();
768 plot.offset(offset);
769 tableRow.children('td').css({'padding-bottom': plot.outerHeight() + 5});
770 tableRow.children('td').first().removeClass('collapsed');
771 tableRow.children('td').first().addClass('expanded');
772 }
773 722
774 return false; 723 var owningObject = this;
775 }; 724 this.tableRow.click(function(event) {
776 725 if (event.target != owningObject.tableRow[0] && event.target.parentNode != owningObject.tableRow[0])
777 tableRow.click(function(event) {
778 if (event.target != tableRow[0] && event.target.parentNode != tableRow[0 ])
779 return; 726 return;
780 727
petrcermak 2014/10/20 15:06:29 Since you're already refactoring this, I would sug
picksi1 2014/10/20 17:11:34 I've removed some whitespace around here, but I wa
781 event.preventDefault(); 728 event.preventDefault();
782 729
783 toggle(); 730 owningObject.toggle();
784 }); 731 });
732 }
785 733
786 if (test.isImportant && window.isFirstImportantRow) { 734 TableRow.prototype.markupForRun = function(result, referenceResult) {
787 window.isFirstImportantRow = false; 735 var comparisonCell = '';
788 toggle(); 736 var hiddenValue = '';
737 var shouldCompare = result !== referenceResult;
738 if (shouldCompare && referenceResult) {
739 var percentDifference = referenceResult.percentDifference(result);
740 var better = this.test.biggerIsBetter() ? percentDifference > 0 : percen tDifference < 0;
741 var comparison = '';
742 var className = 'comparison';
743 if (referenceResult.isStatisticallySignificant(result)) {
744 comparison = formatPercentage(Math.abs(percentDifference)) + (better ? ' Better' : ' Worse&nbsp;');
745 className += better ? ' better' : ' worse';
746 }
747 hiddenValue = '<span style="display: none">|' + comparison + '</span>';
748 comparisonCell = '<td class="' + className + '">' + comparison + '</td>' ;
749 } else if (shouldCompare)
750 comparisonCell = '<td class="comparison"></td>';
751
752 var values = result.values();
753 var warning = '';
754 var regressionAnalysis = '';
755 if (result.histogramValues) {
756 // Don't calculate regression result for histograms.
789 } 757 }
758 else if (values && values.length > 3) {
petrcermak 2014/10/20 15:06:30 nit - "} else if {"
picksi1 2014/10/20 17:11:34 Done.
759 regressionResult = linearRegression(values);
760 regressionAnalysis = 'slope=' + toFixedWidthPrecision(regressionResult.s lope)
761 + ', R^2=' + toFixedWidthPrecision(regressionResult.rSquared);
762 if (regressionResult.rSquared > 0.6 && Math.abs(regressionResult.slope) > 0.01) {
petrcermak 2014/10/20 15:06:29 I find most of the code below quite difficult to u
picksi1 2014/10/20 17:11:34 There are a lot of long lines in this file. I'll n
763 warning = ' <span class="regression-warning" title="Detected a time dependency with ' + regressionAnalysis + '">' + warningSign + ' </span>';
764 }
765 }
766
767 var statistics = '&sigma;=' + toFixedWidthPrecision(result.confidenceInterva lDelta()) + ', min=' + toFixedWidthPrecision(result.min())
768 + ', max=' + toFixedWidthPrecision(result.max()) + '\n' + regressionAnal ysis;
769
770 // Tablesorter doesn't know about the second cell so put the comparison in t he invisible element.
771 return '<td class="result" title="' + statistics + '">' + toFixedWidthPrecis ion(result.mean()) + hiddenValue
772 + '</td><td class="confidenceIntervalDelta" title="' + statistics + '">& plusmn; '
773 + formatPercentage(result.confidenceIntervalDeltaRatio()) + warning + '< /td>' + comparisonCell;
774 }
775
776 TableRow.prototype.markupForMissingRun = function(isReference) {
777 return '<td colspan="' + (isReference ? 2 : 3) + '" class="missing">Missing< /td>';
778 }
779
780 TableRow.prototype.toggle = function() {
781 var firstCell = this.tableRow.children('td').first();
782 if (firstCell.children('section').length) {
783 firstCell.children('section').remove();
784 this.tableRow.children('td').css({'padding-bottom': ''});
785 this.tableRow.children('td').first().addClass('collapsed');
786 this.tableRow.children('td').first().removeClass('expanded');
787 } else {
788 var plot = createPlot(firstCell, this.test, this.useLargeLinePlots);
789 plot.css({'position': 'absolute', 'z-index': 2});
790 var offset = this.tableRow.offset();
791 offset.left += 1;
792 offset.top += this.tableRow.outerHeight();
793 plot.offset(offset);
794 this.tableRow.children('td').css({'padding-bottom': plot.outerHeight() + 5});
795 this.tableRow.children('td').first().removeClass('collapsed');
796 this.tableRow.children('td').first().addClass('expanded');
797 }
798
799 return false;
790 } 800 }
791 801
792 function init() { 802 function init() {
793 $.tablesorter.addParser({ 803 $.tablesorter.addParser({
794 id: 'comparison', 804 id: 'comparison',
795 is: function(s) { 805 is: function(s) {
796 return s.indexOf('|') >= 0; 806 return s.indexOf('|') >= 0;
797 }, 807 },
798 format: function(s) { 808 format: function(s) {
799 var parsed = parseFloat(s.substring(s.indexOf('|') + 1)); 809 var parsed = parseFloat(s.substring(s.indexOf('|') + 1));
(...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after
879 } else { 889 } else {
880 $('#undelete').hide(); 890 $('#undelete').hide();
881 } 891 }
882 } 892 }
883 893
884 </script> 894 </script>
885 <script id="results-json" type="application/json">%json_results%</script> 895 <script id="results-json" type="application/json">%json_results%</script>
886 <script id="units-json" type="application/json">%json_units%</script> 896 <script id="units-json" type="application/json">%json_units%</script>
887 </body> 897 </body>
888 </html> 898 </html>
OLDNEW
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698