Add target to runtime compare page filters

Author: Kobzol

site/frontend/src/pages/compare/compile/common.ts

@@ -1,6 +1,11 @@
-import {BenchmarkFilter, CompareResponse, StatComparison} from "../types";
+import {
+  BenchmarkFilter,
+  CompareResponse,
+  StatComparison,
+  TargetSet,
+} from "../types";
 import {calculateComparison, TestCaseComparison} from "../data";
-import {benchmarkNameMatchesFilter} from "../shared";
+import {benchmarkNameMatchesFilter, targetMatchesFilter} from "../shared";
 
 export type CompileBenchmarkFilter = {
   profile: {
@@ -19,9 +24,7 @@ export type CompileBenchmarkFilter = {
     llvm: boolean;
     cranelift: boolean;
   };
-  target: {
-    x86_64_unknown_linux_gnu: boolean;
-  };
+  target: TargetSet;
   category: {
     primary: boolean;
     secondary: boolean;
@@ -160,15 +163,6 @@ export function computeCompileComparisonsWithNonRelevant(
     }
   }
 
-  function targetFilter(target: Target): boolean {
-    if (target === "x86_64-unknown-linux-gnu") {
-      return filter.target.x86_64_unknown_linux_gnu;
-    } else {
-      // Unknown, but by default we should show things
-      return true;
-    }
-  }
-
   function artifactFilter(metadata: CompileBenchmarkMetadata | null): boolean {
     if (metadata?.binary === null) return true;
 
@@ -201,7 +195,7 @@ export function computeCompileComparisonsWithNonRelevant(
       profileFilter(comparison.testCase.profile) &&
       scenarioFilter(comparison.testCase.scenario) &&
       backendFilter(comparison.testCase.backend) &&
-      targetFilter(comparison.testCase.target) &&
+      targetMatchesFilter(comparison.testCase.target, filter.target) &&
       categoryFilter(comparison.testCase.category) &&
       artifactFilter(benchmarkMap[comparison.testCase.benchmark] ?? null) &&
       changeFilter(comparison) &&

site/frontend/src/pages/compare/compile/compile-page.vue

@@ -18,7 +18,7 @@ import {
 } from "./common";
 import {BenchmarkInfo} from "../../../api";
 import {importantCompileMetrics} from "../metrics";
-import {getBoolOrDefault} from "../shared";
+import {getBoolOrDefault, loadTargetSetFromUrl} from "../shared";
 
 const props = defineProps<{
   data: CompareResponse;
@@ -78,13 +78,7 @@ function loadFilterFromUrl(
         defaultFilter.backend.cranelift
       ),
     },
-    target: {
-      x86_64_unknown_linux_gnu: getBoolOrDefault(
-        urlParams,
-        "target-x86_64-unknown-linux-gnu",
-        defaultFilter.target.x86_64_unknown_linux_gnu
-      ),
-    },
+    target: loadTargetSetFromUrl(urlParams, defaultFilter.target),
     category: {
       primary: getBoolOrDefault(
         urlParams,

site/frontend/src/pages/compare/runtime/common.ts

@@ -1,19 +1,24 @@
-import {BenchmarkFilter, StatComparison} from "../types";
+import {BenchmarkFilter, StatComparison, TargetSet} from "../types";
 import {calculateComparison, TestCaseComparison} from "../data";
-import {benchmarkNameMatchesFilter} from "../shared";
+import {benchmarkNameMatchesFilter, targetMatchesFilter} from "../shared";
 import {Target} from "../compile/common";
 
 export interface RuntimeTestCase {
   benchmark: string;
   target: Target;
 }
 
-export type RuntimeBenchmarkFilter = BenchmarkFilter;
+export type RuntimeBenchmarkFilter = {
+  target: TargetSet;
+} & BenchmarkFilter;
 
 export const defaultRuntimeFilter: RuntimeBenchmarkFilter = {
   name: null,
   nonRelevant: false,
   showRawData: false,
+  target: {
+    x86_64_unknown_linux_gnu: true,
+  },
 };
 
 export interface RuntimeBenchmarkComparison {
@@ -29,9 +34,9 @@ export function computeRuntimeComparisonsWithNonRelevant(
   function shouldShowTestCase(
     comparison: TestCaseComparison<RuntimeTestCase>
   ): boolean {
-    return benchmarkNameMatchesFilter(
-      comparison.testCase.benchmark,
-      filter.name
+    return (
+      benchmarkNameMatchesFilter(comparison.testCase.benchmark, filter.name) &&
+      targetMatchesFilter(comparison.testCase.target, filter.target)
     );
   }
 

site/frontend/src/pages/compare/runtime/filters.vue

@@ -45,6 +45,26 @@ const opened = createPersistedRef(PREF_FILTERS_OPENED);
             <div class="section-heading">Filter</div>
             <input id="filter" type="text" v-model="filter.name" />
           </div>
+          <div class="section section-list-wrapper">
+            <div class="section-heading">
+              <div style="width: 160px">
+                <span>Targets</span>
+                <Tooltip>The target of the compiled benchmark. </Tooltip>
+              </div>
+            </div>
+            <ul class="states-list">
+              <li>
+                <label>
+                  <input
+                    type="checkbox"
+                    v-model="filter.target.x86_64_unknown_linux_gnu"
+                  />
+                  <span class="label">x86_64-unknown-linux-gnu</span>
+                </label>
+                <Tooltip>The default Linux x64 target.</Tooltip>
+              </li>
+            </ul>
+          </div>
           <div class="section">
             <div class="section-heading">
               <span>Show non-relevant results</span>

site/frontend/src/pages/compare/runtime/runtime-page.vue

@@ -12,7 +12,7 @@ import MetricSelector from "../metric-selector.vue";
 import {BenchmarkInfo} from "../../../api";
 import {importantRuntimeMetrics} from "../metrics";
 import ComparisonsTable from "./comparisons-table.vue";
-import {getBoolOrDefault} from "../shared";
+import {getBoolOrDefault, loadTargetSetFromUrl} from "../shared";
 import {changeUrl, getUrlParams} from "../../../utils/navigation";
 import Filters from "./filters.vue";
 
@@ -28,6 +28,7 @@ function loadFilterFromUrl(
 ): RuntimeBenchmarkFilter {
   return {
     name: urlParams["runtimeName"] ?? defaultFilter.name,
+    target: loadTargetSetFromUrl(urlParams, defaultFilter.target),
     nonRelevant: getBoolOrDefault(
       urlParams,
       "nonRelevant",
@@ -65,6 +66,11 @@ function storeFilterToUrl(
   }
 
   storeOrReset("runtimeName", filter.name || null, defaultFilter.name);
+  storeOrReset(
+    "target-x86_64-unknown-linux-gnu",
+    filter.target.x86_64_unknown_linux_gnu,
+    defaultFilter.target.x86_64_unknown_linux_gnu
+  );
   storeOrReset("nonRelevant", filter.nonRelevant, defaultFilter.nonRelevant);
   storeOrReset("showRawData", filter.showRawData, defaultFilter.showRawData);
   changeUrl(urlParams);

site/frontend/src/pages/compare/shared.ts

@@ -1,4 +1,5 @@
 import {Target} from "./compile/common";
+import {TargetSet} from "./types";
 
 export function formatDate(dateString: string): string {
   const date = new Date(dateString);
@@ -96,6 +97,31 @@ export function benchmarkNameMatchesFilter(
   }
 }
 
+export function targetMatchesFilter(
+  target: Target,
+  target_set: TargetSet
+): boolean {
+  if (target === "x86_64-unknown-linux-gnu") {
+    return target_set.x86_64_unknown_linux_gnu;
+  } else {
+    // Unknown, but by default we should show things
+    return true;
+  }
+}
+
+export function loadTargetSetFromUrl(
+  urlParams: Dict<string>,
+  defaultTargetSet: TargetSet
+): TargetSet {
+  return {
+    x86_64_unknown_linux_gnu: getBoolOrDefault(
+      urlParams,
+      "target-x86_64-unknown-linux-gnu",
+      defaultTargetSet.x86_64_unknown_linux_gnu
+    ),
+  };
+}
+
 const TARGET_SHORTCUTS: {[target in Target]: string} = {
   "x86_64-unknown-linux-gnu": "x64",
 };

site/frontend/src/pages/compare/types.ts

@@ -57,3 +57,7 @@ export enum Tab {
   Bootstrap = "bootstrap",
   ArtifactSize = "artifact-size",
 }
+
+export interface TargetSet {
+  x86_64_unknown_linux_gnu: boolean;
+}