Reformat code

Author: Kobzol

site/frontend/src/pages/detailed-query/page.vue

@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import {ref, onMounted, Ref, computed} from "vue";
-import {
-  getUrlParams,
-  changeUrl
-} from "../../utils/navigation";
+import {getUrlParams, changeUrl} from "../../utils/navigation";
 import {postMsgpack} from "../../utils/requests";
 import {SELF_PROFILE_DATA_URL} from "../../urls";
 import {openTraceInPerfetto} from "../../perfetto";
@@ -13,7 +10,7 @@ import {
   createTitleData,
   createDownloadLinksData,
   createTableData,
-  createArtifactData
+  createArtifactData,
 } from "./utils";
 
 const loading = ref(true);
@@ -64,15 +61,23 @@ const tableData = computed(() => {
         aValue = a.executions;
         bValue = b.executions;
         // Use percentage change as secondary sort for equal absolute values
-        aSecondary = a.executionsDelta.hasData ? Math.abs(a.executionsDelta.percentage) : 0;
-        bSecondary = b.executionsDelta.hasData ? Math.abs(b.executionsDelta.percentage) : 0;
+        aSecondary = a.executionsDelta.hasData
+          ? Math.abs(a.executionsDelta.percentage)
+          : 0;
+        bSecondary = b.executionsDelta.hasData
+          ? Math.abs(b.executionsDelta.percentage)
+          : 0;
         break;
       case "incrementalLoading": // Incremental loading (s)
         aValue = a.incrementalLoading;
         bValue = b.incrementalLoading;
         // Use percentage change as secondary sort for equal absolute values
-        aSecondary = a.incrementalLoadingDelta.hasData ? Math.abs(a.incrementalLoadingDelta.percentage) : 0;
-        bSecondary = b.incrementalLoadingDelta.hasData ? Math.abs(b.incrementalLoadingDelta.percentage) : 0;
+        aSecondary = a.incrementalLoadingDelta.hasData
+          ? Math.abs(a.incrementalLoadingDelta.percentage)
+          : 0;
+        bSecondary = b.incrementalLoadingDelta.hasData
+          ? Math.abs(b.incrementalLoadingDelta.percentage)
+          : 0;
         break;
       case "timePercent": // Time (%)
         aValue = a.timePercent.value;
@@ -86,18 +91,34 @@ const tableData = computed(() => {
         bSecondary = b.timeDelta.hasData ? Math.abs(b.timeDelta.percentage) : 0;
         break;
       case "executionsDelta": // Executions delta
-        aValue = a.executionsDelta.hasData ? a.executionsDelta.value : -Infinity;
-        bValue = b.executionsDelta.hasData ? b.executionsDelta.value : -Infinity;
+        aValue = a.executionsDelta.hasData
+          ? a.executionsDelta.value
+          : -Infinity;
+        bValue = b.executionsDelta.hasData
+          ? b.executionsDelta.value
+          : -Infinity;
         // Use percentage as secondary sort for equal delta values
-        aSecondary = a.executionsDelta.hasData ? Math.abs(a.executionsDelta.percentage) : 0;
-        bSecondary = b.executionsDelta.hasData ? Math.abs(b.executionsDelta.percentage) : 0;
+        aSecondary = a.executionsDelta.hasData
+          ? Math.abs(a.executionsDelta.percentage)
+          : 0;
+        bSecondary = b.executionsDelta.hasData
+          ? Math.abs(b.executionsDelta.percentage)
+          : 0;
         break;
       case "incrementalLoadingDelta": // Incremental loading delta
-        aValue = a.incrementalLoadingDelta.hasData ? a.incrementalLoadingDelta.value : -Infinity;
-        bValue = b.incrementalLoadingDelta.hasData ? b.incrementalLoadingDelta.value : -Infinity;
+        aValue = a.incrementalLoadingDelta.hasData
+          ? a.incrementalLoadingDelta.value
+          : -Infinity;
+        bValue = b.incrementalLoadingDelta.hasData
+          ? b.incrementalLoadingDelta.value
+          : -Infinity;
         // Use percentage as secondary sort for equal delta values
-        aSecondary = a.incrementalLoadingDelta.hasData ? Math.abs(a.incrementalLoadingDelta.percentage) : 0;
-        bSecondary = b.incrementalLoadingDelta.hasData ? Math.abs(b.incrementalLoadingDelta.percentage) : 0;
+        aSecondary = a.incrementalLoadingDelta.hasData
+          ? Math.abs(a.incrementalLoadingDelta.percentage)
+          : 0;
+        bSecondary = b.incrementalLoadingDelta.hasData
+          ? Math.abs(b.incrementalLoadingDelta.percentage)
+          : 0;
         break;
       default:
         aValue = a.label;
@@ -112,7 +133,11 @@ const tableData = computed(() => {
       comparison = (aValue as number) - (bValue as number);
 
       // If primary values are equal and we have secondary sort criteria, use percentage change
-      if (comparison === 0 && aSecondary !== undefined && bSecondary !== undefined) {
+      if (
+        comparison === 0 &&
+        aSecondary !== undefined &&
+        bSecondary !== undefined
+      ) {
         comparison = bSecondary - aSecondary; // Higher percentage change comes first
       }
     }
@@ -144,9 +169,10 @@ function loadSortFromUrl(urlParams: Dict<string>) {
 
 function storeSortToUrl() {
   const params = getUrlParams();
-  const sortValue = currentSortDirection.value === "desc"
-    ? `-${currentSortColumn.value}`
-    : currentSortColumn.value;
+  const sortValue =
+    currentSortDirection.value === "desc"
+      ? `-${currentSortColumn.value}`
+      : currentSortColumn.value;
   params["sort"] = sortValue;
   changeUrl(params);
 }
@@ -162,7 +188,7 @@ async function loadData() {
     commit,
     base_commit: base_commit ?? null,
     benchmark,
-    scenario
+    scenario,
   };
   selector.value = currentSelector;
 
@@ -202,7 +228,7 @@ function sortTable(columnName: string, defaultDirection: number) {
 function getSortAttributes(columnName: string) {
   if (currentSortColumn.value === columnName) {
     return {
-      "data-sorted-by": currentSortDirection.value
+      "data-sorted-by": currentSortDirection.value,
     };
   }
   return {};
@@ -237,16 +263,16 @@ onMounted(async () => {
           <a :href="downloadLinksData.baseLinks.crox">crox</a>,
           <a :href="downloadLinksData.baseLinks.codegen">codegen-schedule</a>
           (<a
-          href="#"
-          @click="
+            href="#"
+            @click="
               handlePerfettoClick(
                 $event,
                 downloadLinksData.baseLinks.perfetto.link,
                 downloadLinksData.baseLinks.perfetto.traceTitle
               )
             "
-        >Perfetto</a
-        >,
+            >Perfetto</a
+          >,
           <a :href="downloadLinksData.baseLinks.firefox">Firefox profiler</a>)
           results for {{ selector?.base_commit?.substring(0, 10) }} (base
           commit)
@@ -259,16 +285,16 @@ onMounted(async () => {
         <a :href="downloadLinksData.newLinks.crox">crox</a>,
         <a :href="downloadLinksData.newLinks.codegen">codegen-schedule</a>
         (<a
-        href="#"
-        @click="
+          href="#"
+          @click="
             handlePerfettoClick(
               $event,
               downloadLinksData.newLinks.perfetto.link,
               downloadLinksData.newLinks.perfetto.traceTitle
             )
           "
-      >Perfetto</a
-      >, <a :href="downloadLinksData.newLinks.firefox">Firefox profiler</a>)
+          >Perfetto</a
+        >, <a :href="downloadLinksData.newLinks.firefox">Firefox profiler</a>)
         results for {{ selector?.commit?.substring(0, 10) }} (new commit)
 
         <template v-if="downloadLinksData.diffLink">
@@ -296,18 +322,18 @@ onMounted(async () => {
       <h4>Artifact Size</h4>
       <table id="artifact-table">
         <thead>
-        <tr>
-          <th>Artifact</th>
-          <th>Size</th>
-          <th>Size delta</th>
-        </tr>
+          <tr>
+            <th>Artifact</th>
+            <th>Size</th>
+            <th>Size delta</th>
+          </tr>
         </thead>
         <tbody id="artifact-body">
-        <tr v-for="artifact in artifactData" :key="artifact.name">
-          <td style="text-align: center">{{ artifact.name }}</td>
-          <td>{{ artifact.size }}</td>
-          <td>{{ artifact.sizeDelta }}</td>
-        </tr>
+          <tr v-for="artifact in artifactData" :key="artifact.name">
+            <td style="text-align: center">{{ artifact.name }}</td>
+            <td>{{ artifact.size }}</td>
+            <td>{{ artifact.sizeDelta }}</td>
+          </tr>
         </tbody>
       </table>
 
@@ -319,91 +345,108 @@ onMounted(async () => {
 
       <table :class="{'hide-incr': !showIncr, 'hide-delta': !showDelta}">
         <thead>
-        <tr id="table-header">
-          <th
-            v-bind="getSortAttributes('label')"
-            data-sort-column="label"
-            data-default-sort-dir="1"
-          >
-            <a href="#" @click.prevent="sortTable('label', 1)">Query/Function</a>
-          </th>
-          <th
-            v-bind="getSortAttributes('timePercent')"
-            data-sort-column="timePercent"
-            data-default-sort-dir="-1"
-          >
-            <a href="#" @click.prevent="sortTable('timePercent', -1)">Time (%)</a>
-          </th>
-          <th
-            v-bind="getSortAttributes('timeSeconds')"
-            data-sort-column="timeSeconds"
-            data-default-sort-dir="-1"
-          >
-            <a href="#" @click.prevent="sortTable('timeSeconds', -1)">Time (s)</a>
-          </th>
-          <th
-            v-bind="getSortAttributes('timeDelta')"
-            class="delta"
-            data-sort-column="timeDelta"
-            data-default-sort-dir="-1"
-          >
-            <a href="#" @click.prevent="sortTable('timeDelta', -1)">Time delta</a>
-          </th>
-          <th
-            v-bind="getSortAttributes('executions')"
-            data-sort-column="executions"
-            data-default-sort-dir="-1"
-          >
-            <a href="#" @click.prevent="sortTable('executions', -1)">Executions</a>
-          </th>
-          <th
-            v-bind="getSortAttributes('executionsDelta')"
-            class="delta"
-            data-sort-column="executionsDelta"
-            data-default-sort-dir="-1"
-          >
-            <a href="#" @click.prevent="sortTable('executionsDelta', -1)"
-            >Executions delta</a
+          <tr id="table-header">
+            <th
+              v-bind="getSortAttributes('label')"
+              data-sort-column="label"
+              data-default-sort-dir="1"
             >
-          </th>
-          <th
-            v-bind="getSortAttributes('incrementalLoading')"
-            class="incr"
-            data-sort-column="incrementalLoading"
-            data-default-sort-dir="-1"
-            title="Incremental loading time"
-          >
-            <a href="#" @click.prevent="sortTable('incrementalLoading', -1)"
-            >Incremental loading (s)</a
+              <a href="#" @click.prevent="sortTable('label', 1)"
+                >Query/Function</a
+              >
+            </th>
+            <th
+              v-bind="getSortAttributes('timePercent')"
+              data-sort-column="timePercent"
+              data-default-sort-dir="-1"
             >
-          </th>
-          <th
-            v-bind="getSortAttributes('incrementalLoadingDelta')"
-            class="incr delta"
-            data-sort-column="incrementalLoadingDelta"
-            data-default-sort-dir="-1"
-          >
-            <a href="#" @click.prevent="sortTable('incrementalLoadingDelta', -1)"
-            >Incremental loading delta</a
+              <a href="#" @click.prevent="sortTable('timePercent', -1)"
+                >Time (%)</a
+              >
+            </th>
+            <th
+              v-bind="getSortAttributes('timeSeconds')"
+              data-sort-column="timeSeconds"
+              data-default-sort-dir="-1"
+            >
+              <a href="#" @click.prevent="sortTable('timeSeconds', -1)"
+                >Time (s)</a
+              >
+            </th>
+            <th
+              v-bind="getSortAttributes('timeDelta')"
+              class="delta"
+              data-sort-column="timeDelta"
+              data-default-sort-dir="-1"
+            >
+              <a href="#" @click.prevent="sortTable('timeDelta', -1)"
+                >Time delta</a
+              >
+            </th>
+            <th
+              v-bind="getSortAttributes('executions')"
+              data-sort-column="executions"
+              data-default-sort-dir="-1"
             >
-          </th>
-        </tr>
+              <a href="#" @click.prevent="sortTable('executions', -1)"
+                >Executions</a
+              >
+            </th>
+            <th
+              v-bind="getSortAttributes('executionsDelta')"
+              class="delta"
+              data-sort-column="executionsDelta"
+              data-default-sort-dir="-1"
+            >
+              <a href="#" @click.prevent="sortTable('executionsDelta', -1)"
+                >Executions delta</a
+              >
+            </th>
+            <th
+              v-bind="getSortAttributes('incrementalLoading')"
+              class="incr"
+              data-sort-column="incrementalLoading"
+              data-default-sort-dir="-1"
+              title="Incremental loading time"
+            >
+              <a href="#" @click.prevent="sortTable('incrementalLoading', -1)"
+                >Incremental loading (s)</a
+              >
+            </th>
+            <th
+              v-bind="getSortAttributes('incrementalLoadingDelta')"
+              class="incr delta"
+              data-sort-column="incrementalLoadingDelta"
+              data-default-sort-dir="-1"
+            >
+              <a
+                href="#"
+                @click.prevent="sortTable('incrementalLoadingDelta', -1)"
+                >Incremental loading delta</a
+              >
+            </th>
+          </tr>
         </thead>
         <tbody id="primary-table">
-        <tr
-          v-for="(row, index) in tableData"
-          :key="index"
-          :class="{'total-row': row.isTotal}"
-        >
-          <td>{{ row.label }}</td>
-          <td :title="row.timePercent.title">{{ row.timePercent.formatted }}</td>
-          <td>{{ row.timeSeconds.toFixed(3) }}</td>
-          <td class="delta" v-html="row.timeDelta.formatted"></td>
-          <td>{{ row.executions }}</td>
-          <td class="delta" v-html="row.executionsDelta.formatted"></td>
-          <td class="incr">{{ row.incrementalLoading.toFixed(3) }}</td>
-          <td class="incr delta" v-html="row.incrementalLoadingDelta.formatted"></td>
-        </tr>
+          <tr
+            v-for="(row, index) in tableData"
+            :key="index"
+            :class="{'total-row': row.isTotal}"
+          >
+            <td>{{ row.label }}</td>
+            <td :title="row.timePercent.title">
+              {{ row.timePercent.formatted }}
+            </td>
+            <td>{{ row.timeSeconds.toFixed(3) }}</td>
+            <td class="delta" v-html="row.timeDelta.formatted"></td>
+            <td>{{ row.executions }}</td>
+            <td class="delta" v-html="row.executionsDelta.formatted"></td>
+            <td class="incr">{{ row.incrementalLoading.toFixed(3) }}</td>
+            <td
+              class="incr delta"
+              v-html="row.incrementalLoadingDelta.formatted"
+            ></td>
+          </tr>
         </tbody>
       </table>
     </div>