Merge from go

README.md

@@ -1 +1,11 @@
-MLPerf Inference Visualization Template
+# MLPerf Inference Visualization Template
+
+If you have a [docinit](https://raw.githubusercontent.com/GATEOverflow/inference_results_v4.1/main/docinit.sh) script, just run that in the root of your MLPerf inference_results repository.
+
+```
+bash docinit.sh
+```
+
+This will copy the template code including CSS/HTML overrides and the JS files from this template repository to the docs site of the inference results repository.
+
+

javascripts/common.js

@@ -12,10 +12,9 @@ models_edge_ = [ "gptj-99", "gptj-99.9", "bert-99", "stable-diffusion-xl", "reti
 models_datacenter = [];
 models_edge = [];
 
-const dbName = "mlperf_inference";
-//config results_version; defined in config.js
+const dbName = "mlperf_inference_" + results_version;//results_version defined in config.js
 //const dbVersion = 4; defined in config.js
-const objStore = "inference_results_"+results_version; //results_version defined in config.js
+const objStore = "inference_results";
 
 async function fetchAndStoreData(db) {
     try {
@@ -65,12 +64,6 @@ function readAllData() {
         request.onsuccess = async function(event) {
             const db = event.target.result;
 
-            // Ensure the object store exists
-            if (!db.objectStoreNames.contains(objStore)) {
-                const objectStore = db.createObjectStore(objStore, { autoIncrement: true });
-                console.log("Object store created");
-                await fetchAndStoreData(db);
-            }
 
             // Start a transaction to read data
             const transaction = db.transaction([objStore], "readonly");

javascripts/results_tablesorter.js

@@ -146,24 +146,64 @@ function drawChartResults(){
 }
 
 function reConstructTables(category, division, with_power, data){
-    availabilities = [ "Available", "Preview", "RDI" ]; 
+    availabilities = [ "Available", "Preview", "RDI" ];
+    total_count = 0;
+    if(with_power) {
+        result_prefix = "power"
+    }
+    else {
+        result_prefix = "performance"
+    }
     availabilities.forEach(function(availability) {
         // filtered data as per the user choice
         const filteredResults = filterDataResultsTable(category, division, with_power, availability, data);
-        //console.log(filteredResults.length);
-        var html_table = constructTable(category, division, with_power, availability, filteredResults);
-        var tableHeading = `${category} Category: ${availability} submissions in ${division} division`;
+        var html_table = null;
+        var tableHeading = null;
+        //console.log(filteredResults);
+        total_count += filteredResults.length;
+        if(filteredResults.length == 0) {
+            tableHeading = `${category} Category: No ${availability} ${result_prefix} submissions in ${division} division`;
+        }
+        else {
+            //console.log(filteredResults.length);
+            html_table = constructTable(category, division, with_power, availability, filteredResults);
+            tableHeading = `${category} Category: ${availability} ${result_prefix} submissions in ${division} division`;
+        }
         // replacing the old table with the newly constructed one
         var elemIdTable = `results_table_${availability.toLowerCase()}` 
         var elemIdTableHeading = `results_heading_${availability.toLowerCase()}`
+        $("#"+elemIdTableHeading).html(tableHeading);
+        $("#"+elemIdTableHeading).show();
+
         if (html_table) {
-            document.getElementById(elemIdTable).innerHTML = html_table;
-            document.getElementById(elemIdTableHeading).innerHTML = tableHeading;
+            $("#"+elemIdTable).html(html_table);
+            $("#"+elemIdTable).show();
+        }
+        else {
+            $("#"+elemIdTable).hide();
         }
     });
-    var countResultsTable = constructSummaryTable(data, category, division, with_power)
     var elemIdTableSummary = `results_summary`
-    document.getElementById(elemIdTableSummary).innerHTML = countResultsTable;
+    if(total_count == 0) {
+        tableHeading = `${category} Category: No ${result_prefix} submissions in ${division} division`;
+        $("#results_heading_available").html(tableHeading);
+        $("#results_heading_preview").hide();
+        $("#results_heading_RDI").hide();
+        $("#"+elemIdTableSummary).hide();
+        $(".counttable_wrapper").hide();
+        $("#submittervssubmissionchartContainer").hide();
+        $("#modelvssubmissionchartContainer").hide();
+        $("#count_heading").hide();
+    }
+    else {
+        var countResultsTable = constructSummaryTable(data, category, division, with_power)
+        $("#"+elemIdTableSummary).html(countResultsTable);
+        $("#"+elemIdTableSummary).show();
+        $(".counttable_wrapper").show();
+        $("#submittervssubmissionchartContainer").show();
+        $("#modelvssubmissionchartContainer").show();
+        $("#count_heading").show();
+    }
     $('table').tablesorter();
     $("table").trigger("updateAll");
 }

javascripts/topresults.js

@@ -25,15 +25,31 @@ $('#printChart3').hide();
 $('#chartContainer2').hide();
 $('#printChart2').hide();
 
+function animateToTop() {
+$('html, body').animate({
+            scrollTop: 0
+        }, 'slow');
+}
 function updateContent(myData) {
     //$("#topresults_table_wrapper").focus();
     model = $("#model").val();
     scenario = $("#scenario").val();
     division = $("#division").val(); 
     category = $("#category").val(); 
-    metric = $("#metric").val(); 
+    metric = $("#metric").val();
+    metric_str = metric.replace("_", " ");
     //updateScenarioUnits(myData);
-    $("#topresults_heading").text(`${model} results in ${category} category, ${division} division`);
+    if(myData.length == 0) {
+        $("#topresults_heading").text(`No ${model} results in ${category} category, ${division} division for ${metric_str} metric`);
+        $("#topresults_table_wrapper").hide();
+        $(".chart").hide();
+        $(".btn-chart").hide();
+        $("button.print").hide();
+        animateToTop();
+        return;
+    }
+    $("#topresults_table_wrapper").show();
+    $("#topresults_heading").text(`${model} results in ${category} category, ${division} division, ${scenario} scenario for ${metric_str} metric`);
     tablehtml = constructTable(division, scenario, model, metric, myData);
     //console.log(division+scenario);
     //console.log(tablehtml);
@@ -50,47 +66,10 @@ function updateContent(myData) {
         //drawPowerChart();
         drawPerfCharts();
     });
-$('html, body').animate({
-            scrollTop: 0
-        }, 'slow');
+    animateToTop();
 }
 
 $(document).ready(function() {
-    allData = [];
-    readAllData().then(function(global_data) {
-        //console.log(allData);
-        allData = global_data;
-        keys = [ "Suite", "Category" ];
-        values = [ "datacenter", "closed" ];
-        myData = filterData(allData, keys, values);
-        var models = getUniqueValues(myData, "Model");
-        scenario = "Offline";
-        division = "closed"; 
-        category = "datacenter";
-        keys = ["Model", "Scenario"];
-        values = ["llama2-70b-99.9", scenario];
-        myData = filterData(myData, keys, values);
-        //console.log(myData);
-        $("#model").append('<option selected value="llama2-70b-99.9">Llama 2</option>');
-        var devices = getUniqueValuesCombined(myData, " x ", [ "Accelerator", "a#" ]);
-        var platforms = getUniqueValuesCombined(myData, " : ", [ "version", "Platform" ]);
-        var scenarios = validScenarios["datacenter"];// getUniqueValues(myData, "Scenario");
-        model = $("#model").val();
-        updateScenarioUnits(myData);
-        buildSelectOption(models, "model", model);
-        buildSelectOption(scenarios, "scenario", scenario);
-        platforms.unshift("All systems");
-        buildSelectOption(platforms, "filter_systems", "All systems");
-        devices.unshift("All devices");
-        buildSelectOption(devices, "filter_devices", "All devices");
-        charttitlesuffix = ` for ${model} ${scenario} scenario in ${division} division ${category} category`;
-        chart1title = "Performance " + charttitlesuffix;
-       // chart2title = "Performance per accelerator " + charttitlesuffix;
-        //chart2ytitle = "Samples per second per accelerator";
-        updateContent(myData);
-    }).catch(function(error) {
-        console.error(error);
-    });
 
     //console.log("The page is fully loaded.");
 });
@@ -207,19 +186,60 @@ function constructTable(division, scenario, model, metric, result) {
 }
 
 
-
+function updateFilters(myData) {
+        var platforms = getUniqueValuesCombined(myData, " : ", [ "version", "Platform" ]);
+        platforms.unshift("All systems");
+        buildSelectOption(platforms, "filter_systems", "All systems");
+	var devices = getUniqueValuesCombined(myData, " x ", [ "Accelerator", "a#" ]);
+        devices.unshift("All devices");
+        buildSelectOption(devices, "filter_devices", "All devices");
+}
 
 
 
 $(document).ready(function() {
+    allData = [];
+    readAllData().then(function(global_data) {
+        //console.log(allData);
+        allData = global_data;
+        keys = [ "Suite", "Category" ];
+        values = [ "datacenter", "closed" ];
+        myData = filterData(allData, keys, values);
+        var models = getUniqueValues(myData, "Model");
+        scenario = "Offline";
+        division = "closed"; 
+        category = "datacenter";
+        keys = ["Model", "Scenario"];
+        values = ["llama2-70b-99.9", scenario];
+        myData = filterData(myData, keys, values);
+        //console.log(myData);
+        $("#model").append('<option selected value="llama2-70b-99.9">Llama 2</option>');
+        var scenarios = validScenarios["datacenter"];// getUniqueValues(myData, "Scenario");
+        model = $("#model").val();
+        updateScenarioUnits(myData);
+        buildSelectOption(models, "model", model);
+        buildSelectOption(scenarios, "scenario", scenario);
+
+	updateFilters(myData);
+
+	charttitlesuffix = ` for ${model} ${scenario} scenario in ${division} division ${category} category`;
+        chart1title = "Performance " + charttitlesuffix;
+       // chart2title = "Performance per accelerator " + charttitlesuffix;
+        //chart2ytitle = "Samples per second per accelerator";
+        updateContent(myData);
+    }).catch(function(error) {
+        console.error(error);
+    });
+
+
     $('.myFilter').on('change', function() {
         var category = $('#category').val();
         var division = $('#division').val();
         var availability = $('#availability').val();
         var model = $('#model').val();
         var scenario = $('#scenario').val();
-        keys = [ "Suite", "Category", "Availability" ];
-        values = [ category, division, availability ];
+        keys = [ "Suite", "Category" ];
+        values = [ category, division ];
         if(availability != 'all') {
             keys.push("Availability");
             values.push(availability);
@@ -228,29 +248,31 @@ $(document).ready(function() {
         myData = filterData(allData, keys, values);
         //console.log(scenario);
         var models = getUniqueValues(myData, "Model");
-        var devices = getUniqueValuesCombined(myData, " x ", [ "Accelerator", "a#" ]);
-        var platforms = getUniqueValuesCombined(myData, " : ", [ "version", "Platform" ]);
         var scenarios = validScenarios[category];// getUniqueValues(myData, "Scenario");
-        platforms.unshift("All systems");
-        devices.unshift("All devices");
-        buildSelectOption(models, "model", model);
+	buildSelectOption(models, "model", model);
         buildSelectOption(scenarios, "scenario", scenario);
-        buildSelectOption(platforms, "filter_systems", "All systems");
-        buildSelectOption(devices, "filter_devices", "All devices");
+
+	updateFilters(myData);
     });
 
+
     $('#model').on('change', function() {
         var category = $('#category').val();
         var division = $('#division').val();
         var availability = $('#availability').val();
         var model = $('#model').val();
-        keys = [ "Suite", "Category", "Availability", "Model" ];
-        values = [ category, division, availability, model ];
+        keys = [ "Suite", "Category", "Model" ];
+        values = [ category, division, model ];
+        if(availability != 'all') {
+            keys.push("Availability");
+            values.push(availability);
+        }
         //console.log(allData);
         myData = filterData(allData, keys, values);
         //console.log(category+division+scenario);
         var scenarios = getUniqueValues(myData, "Scenario");
         buildSelectOption(scenarios, "scenario", scenario);
+	updateFilters(myData);
     });
 
     $('#resultSelectionForm').submit(function(event) {

top_results/index.md

@@ -14,14 +14,14 @@ hide:
 
 <hr>
 
-  <div id="chartContainer1" class="bgtext" style="height: 370px; width: 100%;"></div>
-<button class="btn btn-primary"  id="printChart1">Download</button>
+  <div id="chartContainer1" class="bgtext chart" style="height: 370px; width: 100%;"></div>
+<button class="btn btn-primary btn-chart"  id="printChart1">Download</button>
 
-<div id="chartContainer2" class="bgtext" style="height: 370px; width: 100%;"></div>
-<button class="btn btn-primary"  id="printChart2">Download</button>
+<div id="chartContainer2" class="bgtext chart" style="height: 370px; width: 100%;"></div>
+<button class="btn btn-primary btn-chart"  id="printChart2">Download</button>
 
-<div id="chartContainer3" class="bgtext" style="height: 370px; width: 100%;"></div>
-<button class="btn btn-primary"  id="printChart3">Download</button>
+<div id="chartContainer3" class="bgtext chart" style="height: 370px; width: 100%;"></div>
+<button class="btn btn-primary btn-chart"  id="printChart3">Download</button>