Move compare backends checkbox to the filter section

The `Filters` component assumes that it manages the state of the filter. This invariant was broken before. This PR moves the checkbox into the `Filters` component, which restores the invariant.

Author: Kobzol

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

@@ -193,13 +193,6 @@ function updateFilter(newFilter: CompileBenchmarkFilter) {
   refreshQuickLinks();
 }
 
-// We pass the event target here, because Parcel cannot handle the `as`
-// cast directly in the template.
-function updateSelfCompareBackend(target: EventTarget) {
-  const element = target as HTMLInputElement;
-  updateFilter({...filter.value, selfCompareBackend: element.checked});
-}
-
 /**
  * When the filter changes, the URL is updated.
  * After that happens, we want to re-render the quick links component, because
@@ -261,20 +254,10 @@ const filteredSummary = computed(() => computeSummary(comparisons.value));
     :selected-metric="selector.stat"
     :metrics="benchmarkInfo.compile_metrics"
   />
-  <div
-    v-if="canCompareBackends"
-    :title="`Compare codegen backends for commit '${props.data.a.commit}'`"
-  >
-    Compare codegen backends for this commit:
-    <input
-      type="checkbox"
-      :checked="selfCompareBackend"
-      @change="(e) => updateSelfCompareBackend(e.target)"
-    />
-  </div>
   <Filters
-    :defaultFilter="defaultCompileFilter"
-    :initialFilter="filter"
+    :default-filter="defaultCompileFilter"
+    :initial-filter="filter"
+    :can-compare-backends="canCompareBackends"
     @change="updateFilter"
     @export="exportData"
   />

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

@@ -12,6 +12,7 @@ const props = defineProps<{
   defaultFilter: CompileBenchmarkFilter;
   // Initialize the filter with this value
   initialFilter: CompileBenchmarkFilter;
+  canCompareBackends: boolean;
 }>();
 const emit = defineEmits<{
   (e: "change", filter: CompileBenchmarkFilter): void;
@@ -192,7 +193,7 @@ const opened = createPersistedRef(PREF_FILTERS_OPENED);
                   <input type="checkbox" v-model="filter.backend.llvm" />
                   <span class="label">LLVM</span>
                 </label>
-                <Tooltip>The default LLVM backend. </Tooltip>
+                <Tooltip>The default LLVM backend.</Tooltip>
               </li>
               <li>
                 <label>
@@ -289,6 +290,14 @@ const opened = createPersistedRef(PREF_FILTERS_OPENED);
               style="margin-left: 20px"
             />
           </div>
+          <div
+            class="section"
+            v-if="canCompareBackends"
+            :title="`Compare codegen backends for this commit`"
+          >
+            Compare codegen backends for this commit:
+            <input type="checkbox" v-model="filter.selfCompareBackend" />
+          </div>
           <button @click="reset" style="margin-right: 10px">
             Reset filters
           </button>