build: update to Prettier 3.0.0

2025-12-11 22:14:02 +01:00 · 2023-07-16 11:22:48 +02:00
parent c49116adae
commit 4aa03744aa
30 changed files with 889 additions and 127 deletions
--- a/console/frontend/index.html
+++ b/console/frontend/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" class="h-full">
  <head>
    <meta charset="utf-8" />
--- a/console/frontend/package-lock.json
+++ b/console/frontend/package-lock.json
--- a/console/frontend/package.json
+++ b/console/frontend/package.json
@@ -9,7 +9,7 @@
    "preview": "vite preview",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint '{src/**/,}*.{js,ts,vue}'",
-    "format": "prettier --loglevel warn --write '{src/**/,}*.{ts,js,vue,html}'",
+    "format": "prettier --log-level warn --write '{src/**/,}*.{ts,js,vue,html}'",
    "test": "vitest run",
    "postinstall": "patch-package"
  },
@@ -51,12 +51,13 @@
    "@vue/tsconfig": "^0.1.3",
    "autoprefixer": "^10.4.7",
    "eslint": "^8.19.0",
+    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-vue": "^9.2.0",
    "license-compliance": "^2.0.0",
    "npm-run-all": "^4.1.5",
    "patch-package": "^7.0.0",
    "postcss": "^8.4.14",
-    "prettier": "^2.7.0",
+    "prettier": "^3.0.0",
    "prettier-plugin-tailwindcss": "^0.3.0",
    "tailwindcss": "^3.1.2",
    "typescript": "~4.9.3",
--- a/console/frontend/src/codemirror/lang-filter/complete.test.ts
+++ b/console/frontend/src/codemirror/lang-filter/complete.test.ts
@@ -16,7 +16,7 @@ async function get(doc: string) {
    extensions: [filterLanguage(), filterCompletion(), autocompletion()],
  });
  return await state.languageDataAt<typeof complete>("autocomplete", cur)[0](
-    new CompletionContext(state, cur, true)
+    new CompletionContext(state, cur, true),
  );
 }

@@ -68,7 +68,7 @@ describe("filter completion", () => {
                        { label: "!=", detail: "operator", quoted: false },
                        { label: "IN", detail: "operator", quoted: false },
                      ].filter(({ label }) =>
-                        label.startsWith(body.prefix ?? "")
+                        label.startsWith(body.prefix ?? ""),
                      ),
                    };
                  default:
@@ -90,7 +90,7 @@ describe("filter completion", () => {
                          quoted: "true",
                        },
                      ].filter(({ label }) =>
-                        label.startsWith(body.prefix ?? "")
+                        label.startsWith(body.prefix ?? ""),
                      ),
                    };

@@ -122,7 +122,7 @@ describe("filter completion", () => {
            }
          },
        };
-      })
+      }),
    );
  });

--- a/console/frontend/src/codemirror/lang-filter/complete.ts
+++ b/console/frontend/src/codemirror/lang-filter/complete.ts
@@ -24,7 +24,7 @@ export const complete = async (ctx: CompletionContext) => {
  // Remote completion
  const remote = async (
    payload: { what: string; column?: string; prefix?: string },
-    transform = (x: { label: string; detail?: string }) => x
+    transform = (x: { label: string; detail?: string }) => x,
  ) => {
    const response = await fetch("/api/v0/console/filter/complete", {
      method: "POST",
@@ -39,7 +39,7 @@ export const complete = async (ctx: CompletionContext) => {
        transform({
          label: quoted ? `"${label}"` : label,
          detail,
-        })
+        }),
      ),
    ];
  };
@@ -107,7 +107,7 @@ export const complete = async (ctx: CompletionContext) => {
    if (c?.name === "Column") {
      let prefix: string | undefined = ctx.state.sliceDoc(
        nodeBefore.from,
-        nodeBefore.to
+        nodeBefore.to,
      );
      completion.from = nodeBefore.from;
      completion.to = nodeBefore.to;
@@ -130,7 +130,7 @@ export const complete = async (ctx: CompletionContext) => {
        (o) =>
          nodeAncestor(nodeBefore, ["ListOfValues", "ValueLParen"])
            ? { ...o, apply: `${o.label},` }
-            : o
+            : o,
      );
    }
  } else if (nodeBefore.name === "Filter" || nodeBefore.name === "⚠") {
--- a/console/frontend/src/codemirror/lang-filter/grammar.test.ts
+++ b/console/frontend/src/codemirror/lang-filter/grammar.test.ts
@@ -10,13 +10,13 @@ import * as path from "path";
 import { fileURLToPath } from "url";
 const caseFile = path.join(
  path.dirname(fileURLToPath(import.meta.url)),
-  "grammar.test.txt"
+  "grammar.test.txt",
 );

 describe("filter parsing", () => {
  for (const { name, run } of fileTests(
    fs.readFileSync(caseFile, "utf8"),
-    "grammar.test.txt"
+    "grammar.test.txt",
  ))
    it(name, () => run(parser));
 });
--- a/console/frontend/src/codemirror/lang-filter/linter.ts
+++ b/console/frontend/src/codemirror/lang-filter/linter.ts
@@ -34,7 +34,7 @@ export const linterSource = async (view: EditorView) => {
          severity: "error",
          message: message,
        };
-      }
+      },
    ) || [];
  return diagnostic;
 };
--- a/console/frontend/src/components/InfoBox.vue
+++ b/console/frontend/src/components/InfoBox.vue
@@ -18,7 +18,7 @@ const props = withDefaults(
  }>(),
  {
    kind: "error",
-  }
+  },
 );

 const classes = computed<string>(() => {
--- a/console/frontend/src/components/InputBase.vue
+++ b/console/frontend/src/components/InputBase.vue
@@ -44,7 +44,7 @@ withDefaults(
  {
    label: "",
    error: "",
-  }
+  },
 );

 const id = uuidv4();
--- a/console/frontend/src/components/InputButton.vue
+++ b/console/frontend/src/components/InputButton.vue
@@ -55,6 +55,6 @@ withDefaults(
    size: "normal",
    disabled: false,
    floading: false,
-  }
+  },
 );
 </script>
--- a/console/frontend/src/components/InputCheckbox.vue
+++ b/console/frontend/src/components/InputCheckbox.vue
@@ -12,7 +12,7 @@
        @change="
          $emit(
            'update:modelValue',
-            ($event.target as HTMLInputElement).checked
+            ($event.target as HTMLInputElement).checked,
          )
        "
      />
--- a/console/frontend/src/components/InputDimensions.vue
+++ b/console/frontend/src/components/InputDimensions.vue
@@ -88,7 +88,7 @@ const props = withDefaults(
  }>(),
  {
    minDimensions: 0,
-  }
+  },
 );
 const emit = defineEmits<{
  (e: "update:modelValue", value: typeof props.modelValue): void;
@@ -121,8 +121,8 @@ const canAggregate = computed(
  () =>
    intersection(
      selectedDimensions.value.map((dim) => dim.name),
-      serverConfiguration.value?.truncatable || []
-    ).length > 0
+      serverConfiguration.value?.truncatable || [],
+    ).length > 0,
 );
 const truncate4 = ref("32");
 const truncate4Error = computed(() => {
@@ -145,24 +145,25 @@ const hasErrors = computed(
    !!limitError.value ||
    !!dimensionsError.value ||
    !!truncate4Error.value ||
-    !!truncate6Error.value
+    !!truncate6Error.value,
 );

-const dimensions = computed(() =>
-  serverConfiguration.value?.dimensions.map((v, idx) => ({
-    id: idx + 1,
-    name: v,
-    color: dataColor(
-      ["Exporter", "Src", "Dst", "In", "Out", ""]
-        .map((p) => v.startsWith(p))
-        .indexOf(true)
-    ),
-  }))
+const dimensions = computed(
+  () =>
+    serverConfiguration.value?.dimensions.map((v, idx) => ({
+      id: idx + 1,
+      name: v,
+      color: dataColor(
+        ["Exporter", "Src", "Dst", "In", "Out", ""]
+          .map((p) => v.startsWith(p))
+          .indexOf(true),
+      ),
+    })),
 );

 const removeDimension = (dimension: (typeof dimensions.value)[0]) => {
  selectedDimensions.value = selectedDimensions.value.filter(
-    (d) => d !== dimension
+    (d) => d !== dimension,
  );
 };

@@ -179,7 +180,7 @@ watch(
        .map((name) => dimensions.find((d) => d.name === name))
        .filter((d): d is (typeof dimensions)[0] => !!d);
  },
-  { immediate: true, deep: true }
+  { immediate: true, deep: true },
 );
 watch(
  [selectedDimensions, limit, truncate4, truncate6, hasErrors] as const,
@@ -199,7 +200,7 @@ watch(
    ) {
      emit("update:modelValue", updated);
    }
-  }
+  },
 );
 </script>

--- a/console/frontend/src/components/InputFilter.vue
+++ b/console/frontend/src/components/InputFilter.vue
@@ -114,7 +114,7 @@ type SavedFilter = {

 const selectedSavedFilter = ref<SavedFilter | null>(null);
 const { data: rawSavedFilters, execute: refreshSavedFilters } = useFetch(
-  `/api/v0/console/filter/saved`
+  `/api/v0/console/filter/saved`,
 ).json<{
  filters: Array<SavedFilter>;
 }>();
@@ -161,7 +161,7 @@ watch(
  (model) => {
    if (model) expression.value = model.expression;
  },
-  { immediate: true }
+  { immediate: true },
 );
 watch(
  () => ({ expression: expression.value, errors: !!error.value }),
@@ -170,7 +170,7 @@ watch(
      emit("update:modelValue", value);
    }
  },
-  { immediate: true }
+  { immediate: true },
 );

 // https://github.com/surmon-china/vue-codemirror/blob/59598ff72327ab6c5ee70a640edc9e2eb2518775/src/codemirror.ts#L52
@@ -198,7 +198,7 @@ const filterTheme = computed(() => [
      { tag: t.string, color: isDark.value ? "#ff0086" : "#880000" },
      { tag: t.comment, color: isDark.value ? "#7d8799" : "#4f4f4f" },
      { tag: t.operator, color: isDark.value ? "#00a3ff" : "#333399" },
-    ])
+    ]),
  ),
  /* Theme is in tailwind.css */
  EditorView.theme({}, { dark: isDark.value }),
@@ -274,7 +274,7 @@ onMounted(() => {
        });
      }
    },
-    { immediate: true }
+    { immediate: true },
  );

  // Dynamic extensions
@@ -286,7 +286,7 @@ onMounted(() => {
      const exts = extensions.filter((e) => !!e);
      if (component.view !== null) dynamicExtensions(component.view, exts);
    },
-    { immediate: true }
+    { immediate: true },
  );
 });
 onBeforeUnmount(() => component.view?.destroy());
--- a/console/frontend/src/components/InputListBox.vue
+++ b/console/frontend/src/components/InputListBox.vue
@@ -7,7 +7,9 @@
    :class="$attrs['class']"
    :multiple="multiple"
    :model-value="modelValue"
-    @update:model-value="(selected: any) => $emit('update:modelValue', selected)"
+    @update:model-value="
+      (selected: any) => $emit('update:modelValue', selected)
+    "
  >
    <div class="relative">
      <InputBase v-slot="{ id, childClass }" v-bind="otherAttrs" :error="error">
@@ -118,7 +120,7 @@ const props = withDefaults(
    filter: null,
    error: "",
    multiple: false,
-  }
+  },
 );
 defineEmits<{
  (e: "update:modelValue", value: typeof props.modelValue): void;
@@ -142,7 +144,7 @@ const component = computed(() =>
        Options: ComboboxOptions,
        Option: ComboboxOption,
        Input: ComboboxInput,
-      }
+      },
 );
 const filteredItems = computed(() => {
  if (props.filter === null) return props.items;
@@ -150,7 +152,7 @@ const filteredItems = computed(() => {
    query.value
      .toLowerCase()
      .split(/\W+/)
-      .every((w) => `${it[props.filter!]}`.toLowerCase().includes(w))
+      .every((w) => `${it[props.filter!]}`.toLowerCase().includes(w)),
  );
 });
 const otherAttrs = computed(() => {
--- a/console/frontend/src/components/InputTimeRange.vue
+++ b/console/frontend/src/components/InputTimeRange.vue
@@ -39,7 +39,7 @@ const parsedTimes = computed(() => ({
  end: SugarDate.create(endTime.value),
 }));
 const startTimeError = computed(() =>
-  isNaN(parsedTimes.value.start.valueOf()) ? "Invalid date" : ""
+  isNaN(parsedTimes.value.start.valueOf()) ? "Invalid date" : "",
 );
 const endTimeError = computed(
  () =>
@@ -47,10 +47,10 @@ const endTimeError = computed(
    (!isNaN(parsedTimes.value.start.valueOf()) &&
      parsedTimes.value.start > parsedTimes.value.end &&
      "End date should be before start date") ||
-    ""
+    "",
 );
 const hasErrors = computed(
-  () => !!(startTimeError.value || endTimeError.value)
+  () => !!(startTimeError.value || endTimeError.value),
 );

 const presets = [
@@ -127,7 +127,7 @@ watch(
      endTime.value = m.end;
    }
  },
-  { immediate: true, deep: true }
+  { immediate: true, deep: true },
 );
 watch(
  [startTime, endTime, hasErrors] as const,
@@ -149,7 +149,7 @@ watch(
      emit("update:modelValue", newModel);
    }
  },
-  { immediate: true }
+  { immediate: true },
 );
 </script>

--- a/console/frontend/src/components/TitleProvider.vue
+++ b/console/frontend/src/components/TitleProvider.vue
@@ -21,7 +21,7 @@ const documentTitle = ref<string | null>(null);
 const title = computed(() =>
  [applicationName, viewName.value, documentTitle.value]
    .filter((k) => !!k)
-    .join(" | ")
+    .join(" | "),
 );
 useTitle(title);
 useRouter().beforeEach((to, from) => {
--- a/console/frontend/src/components/UserProvider.vue
+++ b/console/frontend/src/components/UserProvider.vue
@@ -33,7 +33,7 @@ watch(
      execute(false);
    }
  },
-  { immediate: true }
+  { immediate: true },
 );

 provide(UserKey, {
--- a/console/frontend/src/utils/palette.ts
+++ b/console/frontend/src/utils/palette.ts
@@ -75,8 +75,8 @@ const orderedColors = ["blue", "orange", "aqua", "green", "magenta"] as const;
 const darkPalette = [5, 6, 7, 8, 9, 10]
  .map((idx) =>
    orderedColors.map(
-      (colorName: keyof typeof colors) => colors[colorName][idx]
-    )
+      (colorName: keyof typeof colors) => colors[colorName][idx],
+    ),
  )
  .flat();
 const lightPalette = [5, 4, 3, 2, 1, 0]
@@ -90,13 +90,13 @@ const lightenColor = (color: string, amount: number) =>
      (
        "0" +
        Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)
-      ).slice(-2)
+      ).slice(-2),
    );

 export function dataColor(
  index: number,
  alternate = false,
-  theme: "light" | "dark" = "light"
+  theme: "light" | "dark" = "light",
 ) {
  const palette = theme === "light" ? lightPalette : darkPalette;
  const correctedIndex = index % 2 === 0 ? index : index + orderedColors.length;
@@ -110,7 +110,7 @@ export function dataColor(
 export function dataColorGrey(
  index: number,
  alternate = false,
-  theme: "light" | "dark" = "light"
+  theme: "light" | "dark" = "light",
 ) {
  const palette =
    theme === "light"
--- a/console/frontend/src/views/DocumentationPage.vue
+++ b/console/frontend/src/views/DocumentationPage.vue
@@ -100,7 +100,7 @@ const errorMessage = computed(
      data.value &&
      "message" in data.value &&
      (data.value.message || `Server returned an error: ${error.value}`)) ||
-    ""
+    "",
 );
 const markdown = computed(
  () =>
@@ -108,11 +108,11 @@ const markdown = computed(
      data.value &&
      "markdown" in data.value &&
      data.value.markdown) ||
-    ""
+    "",
 );
 const toc = computed(
  () =>
-    (!error.value && data.value && "toc" in data.value && data.value.toc) || []
+    (!error.value && data.value && "toc" in data.value && data.value.toc) || [],
 );
 const activeDocument = computed(() => props.id || null);
 const activeSlug = useRouteHash();
@@ -133,7 +133,7 @@ watch([markdown, activeSlug] as const, async () => {
    (activeSlug.value &&
      (
        document.querySelector(
-          `#${CSS.escape(activeSlug.value.slice(1))}`
+          `#${CSS.escape(activeSlug.value.slice(1))}`,
        ) as HTMLElement | null
      )?.offsetTop) ||
    0;
--- a/console/frontend/src/views/HomePage.vue
+++ b/console/frontend/src/views/HomePage.vue
@@ -58,7 +58,7 @@ import { ServerConfigKey } from "@/components/ServerConfigProvider.vue";

 const serverConfiguration = inject(ServerConfigKey)!;
 const topWidgets = computed(
-  () => serverConfiguration.value?.homepageTopWidgets ?? []
+  () => serverConfiguration.value?.homepageTopWidgets ?? [],
 );
 const widgetTitle = (name: string) =>
  ({
@@ -71,7 +71,7 @@ const widgetTitle = (name: string) =>
    etype: "IPv4/IPv6",
    "src-port": "Top source ports",
    "dst-port": "Top destination ports",
-  }[name] ?? "???");
+  })[name] ?? "???";

 const refreshOften = useInterval(10_000);
 const refreshOccasionally = useInterval(60_000);
--- a/console/frontend/src/views/HomePage/WidgetFlowRate.vue
+++ b/console/frontend/src/views/HomePage/WidgetFlowRate.vue
@@ -22,7 +22,7 @@ const props = withDefaults(
  }>(),
  {
    refresh: 0,
-  }
+  },
 );

 const url = computed(() => `/api/v0/console/widget/flow-rate?${props.refresh}`);
--- a/console/frontend/src/views/HomePage/WidgetGraph.vue
+++ b/console/frontend/src/views/HomePage/WidgetGraph.vue
@@ -36,7 +36,7 @@ const props = withDefaults(
  }>(),
  {
    refresh: 0,
-  }
+  },
 );

 type ECOption = ComposeOption<
@@ -95,6 +95,6 @@ const option = computed(
            : data.value.data.map(({ t, gbps }) => [t, gbps]).slice(0, -1),
      },
    ],
-  })
+  }),
 );
 </script>
--- a/console/frontend/src/views/HomePage/WidgetLastFlow.vue
+++ b/console/frontend/src/views/HomePage/WidgetLastFlow.vue
@@ -28,7 +28,7 @@ const props = withDefaults(
  defineProps<{
    refresh?: number;
  }>(),
-  { refresh: 0 }
+  { refresh: 0 },
 );

 const url = computed(() => `/api/v0/console/widget/flow-last?${props.refresh}`);
@@ -37,7 +37,7 @@ const { data } = useFetch(url, { refetch: true })
  .json<Record<string, string | number>>();
 const lastFlow = computed((): [string, string | number][] => ({
  ...Object.entries(data.value || {}).sort(([f1], [f2]) =>
-    compareFields(f1, f2)
+    compareFields(f1, f2),
  ),
 }));
 </script>
--- a/console/frontend/src/views/HomePage/WidgetTop.vue
+++ b/console/frontend/src/views/HomePage/WidgetTop.vue
@@ -44,7 +44,7 @@ type ECOption = ComposeOption<
 >;

 const url = computed(
-  () => `/api/v0/console/widget/top/${props.what}?${props.refresh}`
+  () => `/api/v0/console/widget/top/${props.what}?${props.refresh}`,
 );
 const { data } = useFetch(url, { refetch: true })
  .get()
@@ -98,9 +98,9 @@ const options = computed(
                    100 -
                      (data.value?.top || []).reduce(
                        (c, n) => c + n.percent,
-                        0
+                        0,
                      ),
-                    0
+                    0,
                  ),
                },
              ].filter(({ value }) => value > 0.05),
@@ -115,6 +115,6 @@ const options = computed(
        },
      },
    ],
-  })
+  }),
 );
 </script>
--- a/console/frontend/src/views/VisualizePage.vue
+++ b/console/frontend/src/views/VisualizePage.vue
@@ -109,7 +109,7 @@ const decodeState = (serialized: string | undefined): ModelType => {
 const encodeState = (state: ModelType) => {
  if (state === null) return "";
  return LZString.compressToBase64(
-    JSON.stringify(state, Object.keys(state).sort())
+    JSON.stringify(state, Object.keys(state).sort()),
  );
 };
 watch(
@@ -120,7 +120,7 @@ watch(
      state.value = newState;
    }
  },
-  { immediate: true }
+  { immediate: true },
 );
 const encodedState = computed(() => encodeState(state.value));

@@ -133,7 +133,7 @@ const orderedJSONPayload = <T extends Record<string, any>>(input: T): T => {
    .sort()
    .reduce(
      (o, k) => ((o[k] = input[k]), o),
-      {} as { [key: string]: any }
+      {} as { [key: string]: any },
    ) as T;
 };
 const jsonPayload = computed(
@@ -163,7 +163,7 @@ const jsonPayload = computed(
      };
      return orderedJSONPayload(input);
    }
-  }
+  },
 );
 const request = ref<ModelType>(null); // Same as state, but once request is successful
 const { data, execute, isFetching, aborted, abort, canAbort, error } = useFetch(
@@ -191,7 +191,7 @@ const { data, execute, isFetching, aborted, abort, canAbort, error } = useFetch(
      };
    },
    async afterFetch(
-      ctx: AfterFetchContext<GraphLineHandlerOutput | GraphSankeyHandlerOutput>
+      ctx: AfterFetchContext<GraphLineHandlerOutput | GraphSankeyHandlerOutput>,
    ) {
      // Update data. Not done in a computed value as we want to keep the
      // previous data in case of errors.
@@ -199,7 +199,7 @@ const { data, execute, isFetching, aborted, abort, canAbort, error } = useFetch(
      if (data === null || !state.value) return ctx;
      console.groupCollapsed("SQL query");
      console.info(
-        response.headers.get("x-sql-query")?.replace(/ {2}( )*/g, "\n$1")
+        response.headers.get("x-sql-query")?.replace(/ {2}( )*/g, "\n$1"),
      );
      console.groupEnd();
      if (state.value.graphType === "sankey") {
@@ -239,7 +239,7 @@ const { data, execute, isFetching, aborted, abort, canAbort, error } = useFetch(
      return ctx;
    },
    immediate: false,
-  }
+  },
 )
  .post(jsonPayload, "json")
  .json<
--- a/console/frontend/src/views/VisualizePage/DataGraphLine.vue
+++ b/console/frontend/src/views/VisualizePage/DataGraphLine.vue
@@ -93,7 +93,7 @@ const graph = computed((): ECOption => {
            // Unfortunately, eCharts does not seem to make it easy
            // to inverse an axis and put the result below. Therefore,
            // we use negative values for the second axis.
-            (row, rowIdx) => row[timeIdx] * (data.axis[rowIdx] % 2 ? 1 : -1)
+            (row, rowIdx) => row[timeIdx] * (data.axis[rowIdx] % 2 ? 1 : -1),
          ),
        ];
        if (data.graphType === "stacked100") {
@@ -101,11 +101,11 @@ const graph = computed((): ECOption => {
          const [, ...values] = result;
          const positiveSum = values.reduce(
            (prev, cur) => (cur > 0 ? prev + cur : prev),
-            0
+            0,
          );
          const negativeSum = values.reduce(
            (prev, cur) => (cur < 0 ? prev + cur : prev),
-            0
+            0,
          );
          result = [
            t,
@@ -114,7 +114,7 @@ const graph = computed((): ECOption => {
                ? v / positiveSum
                : v < 0 && negativeSum < 0
                ? -v / negativeSum
-                : v
+                : v,
            ),
          ];
        }
@@ -210,13 +210,13 @@ const graph = computed((): ECOption => {
              `<tr>`,
              `<td>${row.marker} ${row.seriesName}</td>`,
              `<td class="pl-2">${data.bidirectional ? "↑" : ""}<b>${formatXps(
-                row.up
+                row.up,
              )}</b></td>`,
              data.bidirectional
                ? `<td class="pl-2">↓<b>${formatXps(row.down)}</b></td>`
                : "",
              `</tr>`,
-            ].join("")
+            ].join(""),
          )
          .join("");
        return `${
@@ -324,7 +324,7 @@ const graph = computed((): ECOption => {
  }
  if (data.graphType === "grid") {
    const uniqRows = uniqWith(data.rows, isEqual).filter((row) =>
-        row.some((name) => name !== "Other")
+        row.some((name) => name !== "Other"),
      ),
      uniqRowIndex = (row: string[]) =>
        findIndex(uniqRows, (orow) => isEqual(row, orow)),
@@ -338,9 +338,9 @@ const graph = computed((): ECOption => {
            const [, ...cdr] = row;
            return fn.apply(
              null,
-              cdr.filter((_, idx) => !otherIndexes.includes(idx + 1))
+              cdr.filter((_, idx) => !otherIndexes.includes(idx + 1)),
            );
-          })
+          }),
        ),
      maxY = somethingY(Math.max),
      minY = somethingY(Math.min);
@@ -454,7 +454,7 @@ const updateTimeRange = (evt: BrushModel) => {
    return;
  }
  const [start, end] = evt.areas[0].coordRange.map(
-    (t) => new Date(t as number)
+    (t) => new Date(t as number),
  );
  chartComponent.value.dispatchAction({
    type: "brush",
@@ -472,6 +472,6 @@ watch(
      type: "highlight",
      seriesIndex: index,
    });
-  }
+  },
 );
 </script>
--- a/console/frontend/src/views/VisualizePage/DataGraphSankey.vue
+++ b/console/frontend/src/views/VisualizePage/DataGraphSankey.vue
@@ -54,7 +54,7 @@ const option = computed((): ECOption => {
            marker,
            `<span style="display:inline-block;margin-left:1em;">${nodeData.name}</span>`,
            `<span style="display:inline-block;margin-left:2em;font-weight:bold;">${formatXps(
-              value.valueOf() as number
+              value.valueOf() as number,
            )}`,
          ].join("");
        } else if (dataType === "edge") {
@@ -69,7 +69,7 @@ const option = computed((): ECOption => {
            ? [
                `${source} → ${target}`,
                `<span style="display:inline-block;margin-left:2em;font-weight:bold;">${formatXps(
-                  value.valueOf() as number
+                  value.valueOf() as number,
                )}`,
              ].join("")
            : "";
--- a/console/frontend/src/views/VisualizePage/DataTable.vue
+++ b/console/frontend/src/views/VisualizePage/DataTable.vue
@@ -116,7 +116,7 @@ const highlight = (index: number | null) => {
    (() => {
      let count = 0;
      return (_, idx) => axis[idx] != displayedAxis.value || count++ < index;
-    })()
+    })(),
  ).length;
  emit("highlighted", originalIndex);
 };
@@ -221,6 +221,6 @@ const table = computed(
      };
    }
    return null;
-  }
+  },
 );
 </script>
--- a/console/frontend/src/views/VisualizePage/OptionsPanel.vue
+++ b/console/frontend/src/views/VisualizePage/OptionsPanel.vue
@@ -146,7 +146,7 @@ const props = withDefaults(
  }>(),
  {
    loading: false,
-  }
+  },
 );
 const emit = defineEmits<{
  (e: "update:modelValue", value: typeof props.modelValue): void;
@@ -217,7 +217,7 @@ const options = computed((): InternalModelType => {
 const applyLabel = computed(() =>
  isEqual(options.value, omit(props.modelValue, ["start", "end"]))
    ? "Refresh"
-    : "Apply"
+    : "Apply",
 );
 const hasErrors = computed(
  () =>
@@ -225,7 +225,7 @@ const hasErrors = computed(
      timeRange.value?.errors ||
      dimensions.value?.errors ||
      filter.value?.errors
-    )
+    ),
 );

 const serverConfiguration = inject(ServerConfigKey)!;
@@ -281,7 +281,7 @@ watch(
      submitOptions(true);
    }
  },
-  { immediate: true, deep: true }
+  { immediate: true, deep: true },
 );
 </script>

--- a/console/frontend/src/views/VisualizePage/RequestSummary.vue
+++ b/console/frontend/src/views/VisualizePage/RequestSummary.vue
@@ -67,7 +67,7 @@ import { TitleKey } from "@/components/TitleProvider.vue";
 const props = defineProps<{ request: ModelType }>();

 const start = computed(() =>
-  props.request ? SugarDate(props.request.start).long() : null
+  props.request ? SugarDate(props.request.start).long() : null,
 );
 const end = computed(() => {
  if (props.request === null) return null;
@@ -75,7 +75,7 @@ const end = computed(() => {
    SugarDate(props.request.start).toDateString().raw ===
      SugarDate(props.request.end).toDateString().raw
      ? "%X"
-      : "{long}"
+      : "{long}",
  );
 });

@@ -90,7 +90,7 @@ const computedTitle = computed(() =>
    end.value,
  ]
    .filter((e) => !!e)
-    .join(" · ")
+    .join(" · "),
 );
 watch(computedTitle, (t) => title.set(t));
 </script>