@geode/opengeodeweb-front 10.34.0-rc.9 → 10.34.0

package/app/components/Viewer/ObjectTree/Layout.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import GlobalObjects from "@ogw_front/components/Viewer/ObjectTree/Views/GlobalObjects.vue";
-import ModelCollections from "@ogw_front/components/Viewer/ObjectTree/Views/ModelCollections.vue";
-import ModelComponents from "@ogw_front/components/Viewer/ObjectTree/Views/ModelComponents.vue";
+import ModelTree from "@ogw_front/components/Viewer/ObjectTree/Views/ModelTree.vue";
 import ViewerObjectTreeBox from "@ogw_front/components/Viewer/ObjectTree/Box.vue";
 import { geode_objects } from "@ogw_front/assets/geode_objects";
 import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
@@ -23,21 +22,24 @@ interface Props {
 const { containerWidth } = defineProps<Props>();
 
 const treeviewStore = useTreeviewStore();
-const emit = defineEmits<{
+
+interface Emits {
   "show-menu": [payload: Record<string, unknown>];
-}>();
+}
+
+const emit = defineEmits<Emits>();
 
 const activityBar = useTemplateRef("activity-bar");
 const { adaptiveStyles: activityBarAdaptiveStyles } = useAdaptiveStyles(activityBar);
 
-const maxWidth = computed(() => containerWidth * MAX_PANEL_WIDTH_RATIO);
+const maxWidth = computed<number>(() => containerWidth * MAX_PANEL_WIDTH_RATIO);
 
 const mainView = computed(() => treeviewStore.opened_views.find((view) => view.id === "main"));
 const additionalViews = computed(() =>
   treeviewStore.opened_views.filter((view) => view.id !== "main"),
 );
 
-const totalWidth = computed(() => {
+const totalWidth = computed<string>(() => {
   const hasAdditional = additionalViews.value.length > 0;
   const hasMain = Boolean(mainView.value);
   const gap = hasAdditional && hasMain ? GAP_WIDTH : 0;
@@ -62,7 +64,7 @@ watch(
   { immediate: true },
 );
 
-watch([maxWidth, () => additionalViews.value.length], ([newMax]) => {
+watch([maxWidth, (): number => additionalViews.value.length], ([newMax]): void => {
   const hasAdditional = additionalViews.value.length > 0;
   const gap = hasAdditional ? GAP_WIDTH : 0;
   const total =
@@ -84,25 +86,25 @@ watch([maxWidth, () => additionalViews.value.length], ([newMax]) => {
   }
 });
 
-function onDragStart(index: number) {
+function onDragStart(index: number): void {
   draggedIndex.value = index;
 }
 
-function onDragOver(event: DragEvent) {
+function onDragOver(event: DragEvent): void {
   event.preventDefault();
 }
 
-function onDrop(targetIndex: number) {
+function onDrop(targetIndex: number): void {
   if (draggedIndex.value !== undefined && draggedIndex.value !== targetIndex) {
     treeviewStore.moveView(draggedIndex.value, targetIndex);
   }
   draggedIndex.value = undefined;
 }
 
-function onResizeStart(event: MouseEvent) {
+function onResizeStart(event: MouseEvent): void {
   const startWidth = treeviewStore.panelWidth;
   const startX = event.clientX;
-  function resize(move_event: MouseEvent) {
+  function resize(move_event: MouseEvent): void {
     const deltaX = move_event.clientX - startX;
     let newWidth = startWidth + deltaX;
     const hasAdditional = additionalViews.value.length > 0;
@@ -121,7 +123,7 @@ function onResizeStart(event: MouseEvent) {
     treeviewStore.setPanelWidth(Math.max(WIDTH_MIN, newWidth));
     document.body.style.userSelect = "none";
   }
-  function stopResize() {
+  function stopResize(): void {
     document.removeEventListener("mousemove", resize);
     document.removeEventListener("mouseup", stopResize);
     document.body.style.userSelect = "";
@@ -130,10 +132,10 @@ function onResizeStart(event: MouseEvent) {
   document.addEventListener("mouseup", stopResize);
 }
 
-function onAdditionalResizeStart(event: MouseEvent) {
+function onAdditionalResizeStart(event: MouseEvent): void {
   const startWidth = treeviewStore.additionalPanelWidth;
   const startX = event.clientX;
-  function resize(move_event: MouseEvent) {
+  function resize(move_event: MouseEvent): void {
     const deltaX = move_event.clientX - startX;
     const newWidth = startWidth + deltaX;
     const currentTotalWidth = treeviewStore.panelWidth + newWidth + GAP_WIDTH;
@@ -148,7 +150,7 @@ function onAdditionalResizeStart(event: MouseEvent) {
     treeviewStore.setAdditionalPanelWidth(Math.max(WIDTH_MIN, newWidth));
     document.body.style.userSelect = "none";
   }
-  function stopResize() {
+  function stopResize(): void {
     document.removeEventListener("mousemove", resize);
     document.removeEventListener("mouseup", stopResize);
     document.body.style.userSelect = "";
@@ -157,13 +159,13 @@ function onAdditionalResizeStart(event: MouseEvent) {
   document.addEventListener("mouseup", stopResize);
 }
 
-function onVerticalResizeStart(event: MouseEvent, index: number) {
+function onVerticalResizeStart(event: MouseEvent, index: number): void {
   const startY = event.clientY;
   const startHeight1 = rowHeights.value[index] ?? 0;
   const startHeight2 = rowHeights.value[index + 1] ?? 0;
   const containerHeight = (event.currentTarget as HTMLElement).parentElement?.offsetHeight ?? 0;
 
-  function resize(move_event: MouseEvent) {
+  function resize(move_event: MouseEvent): void {
     const deltaY = move_event.clientY - startY;
     const deltaPercent = (deltaY / containerHeight) * PERCENT_100;
     const minHeightPercent = (HEIGHT_MIN / containerHeight) * PERCENT_100;
@@ -188,7 +190,7 @@ function onVerticalResizeStart(event: MouseEvent, index: number) {
     document.body.style.cursor = "ns-resize";
   }
 
-  function stopResize() {
+  function stopResize(): void {
     document.removeEventListener("mousemove", resize);
     document.removeEventListener("mouseup", stopResize);
     document.body.style.userSelect = "";
@@ -279,11 +281,11 @@ function onVerticalResizeStart(event: MouseEvent, index: number) {
               @dragstart="onDragStart(index + 1)"
               @update:scroll-top="treeviewStore.setScrollTop(view.id, $event)"
             >
-              <component
-                :is="view.viewType === 'model_collections' ? ModelCollections : ModelComponents"
+              <ModelTree
                 data-testid="modelComponentsObjectTree"
                 :id="view.modelId || view.id"
                 :view-id="view.id"
+                :view-type="view.viewType"
                 @show-menu="emit('show-menu', $event)"
               />
             </ViewerObjectTreeBox>

package/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
 import CommonTreeView from "@ogw_front/components/Viewer/ObjectTree/Base/CommonTreeView.vue";
+import type { DisplayItem } from "@ogw_front/composables/virtual_tree";
 import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
-import type { DisplayItem } from "@ogw_front/composables/virtual_tree";
 import { compareSelections } from "@ogw_front/utils/treeview";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
@@ -19,9 +17,11 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const { onHoverEnter, onHoverLeave } = useHoverhighlight();
 
-const emit = defineEmits<{
+interface Emits {
   "show-menu": [payload: { event: MouseEvent; itemId: string }];
-}>();
+}
+
+const emit = defineEmits<Emits>();
 
 interface TreeGroupItem {
   raw?: TreeGroupItem;
@@ -32,8 +32,8 @@ interface TreeGroupItem {
   children?: TreeGroupItem[];
 }
 
-const mainView = computed(() => treeviewStore.opened_views[0]);
-const opened = computed({
+const mainView = computed<TreeGroupItem>(() => treeviewStore.opened_views[0]);
+const opened = computed<string[]>({
   get: () => mainView.value?.opened || [],
   set: (val) => treeviewStore.setOpened(mainView.value?.id ?? "", val),
 });
@@ -49,11 +49,11 @@ const {
   applySearchFilter,
 } = useTreeFilter(() => treeviewStore.items, { recursiveSort: true });
 
-function onUpdateSelection(val: string[]) {
+function onUpdateSelection(val: string[]): void {
   treeviewStore.selection = applySearchFilter(val, treeviewStore.selection) as string[];
 }
 
-const visibleSelection = computed(() => applySearchFilter(treeviewStore.selection, []));
+const visibleSelection = computed<string[]>(() => applySearchFilter(treeviewStore.selection, []));
 
 watch(
   () => treeviewStore.selection,
@@ -82,7 +82,7 @@ watch(
   },
 );
 
-function isModel(item: TreeGroupItem) {
+function isModel(item: TreeGroupItem): boolean {
   const actualItem = item.raw || item;
   return (
     actualItem.viewer_type === "model" ||
@@ -121,7 +121,7 @@ function handleHoverEnter({
 }: {
   item: TreeGroupItem;
   immediate?: boolean;
-}) {
+}): void {
   const actualItem = item.raw || item;
 
   if (!actualItem.viewer_type) {
@@ -138,7 +138,7 @@ function handleHoverEnter({
   );
 }
 
-function handleHoverLeave({ item }: { item: TreeGroupItem }) {
+function handleHoverLeave({ item }: { item: TreeGroupItem }): void {
   const actualItem = item.raw || item;
   if (!actualItem.viewer_type) {
     return;
@@ -146,9 +146,9 @@ function handleHoverLeave({ item }: { item: TreeGroupItem }) {
   onHoverLeave(actualItem.id);
 }
 
-function expandAll() {
+function expandAll(): void {
   const allIds: string[] = [];
-  function traverse(itemsList: TreeGroupItem[]) {
+  function traverse(itemsList: TreeGroupItem[]): void {
     for (const item of itemsList) {
       if (item.children && item.children.length > 0) {
         allIds.push(item.id);

package/app/components/Viewer/ObjectTree/Views/{ModelCollections.vue → ModelTree.vue}

@@ -1,23 +1,24 @@
 <script setup lang="ts">
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
 import { sortAndFormatItems, useTreeFilter } from "@ogw_front/composables/tree_filter";
 import CommonTreeView from "@ogw_front/components/Viewer/ObjectTree/Base/CommonTreeView.vue";
+import type { DisplayItem } from "@ogw_front/composables/virtual_tree";
 import FetchingData from "@ogw_front/components/FetchingData.vue";
+import { MESH_COMPONENT_TYPES } from "@ogw_front/utils/default_styles";
 import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
-import type { DisplayItem } from "@ogw_front/composables/virtual_tree";
 import { useHoverhighlight } from "@ogw_front/composables/hover_highlight";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useModelCollections } from "@ogw_front/composables/model_collections";
+import { useModelComponents } from "@ogw_front/composables/model_components";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 interface Props {
   id: string;
   viewId?: string;
+  viewType?: string;
 }
 
-const { id, viewId = undefined } = defineProps<Props>();
+const { id, viewId = undefined, viewType = "model_components" } = defineProps<Props>();
 const actualViewId = viewId || id;
 
 interface CollectionTreeItem {
@@ -31,32 +32,44 @@ interface CollectionTreeItem {
 
 const { onHoverEnter, onHoverLeave } = useHoverhighlight();
 const hybridViewerStore = useHybridViewerStore();
-const emit = defineEmits<{
+interface Emits {
   "show-menu": [
     payload: {
       event: unknown;
       itemId: string;
       context_type: "model_component" | "model_component_type";
       modelId: string;
-      modelComponentType: string | undefined;
+      modelComponentType?: string;
+      targetComponentIds?: string[];
     },
   ];
-}>();
+}
+
+const emit = defineEmits<Emits>();
 
 const treeviewStore = useTreeviewStore();
+
+const isCollections = computed(() => viewType === "model_collections");
+
+const composable = isCollections.value ? useModelCollections(id) : useModelComponents(id);
 const {
   items: rawItems,
-  collectionsCache: componentsCache,
   localCategories,
   selection: visibleComponents,
   updateVisibility,
-} = useModelCollections(id);
+} = composable;
+
+const cache = computed(
+  () =>
+    ("componentsCache" in composable ? composable.componentsCache.value : undefined) ??
+    ("collectionsCache" in composable ? composable.collectionsCache.value : undefined),
+);
 
 const currentView = computed(() =>
   treeviewStore.opened_views.find((view) => view.id === actualViewId),
 );
 
-const opened = computed({
+const opened = computed<string[]>({
   get: () => currentView.value?.opened || [],
   set: (val) => treeviewStore.setOpened(actualViewId, val),
 });
@@ -72,19 +85,21 @@ const {
   applySearchFilter,
 } = useTreeFilter(localCategories);
 
-function onUpdateSelection(newSelection: string[]) {
+function onUpdateSelection(newSelection: string[]): void {
   const finalSelection = applySearchFilter(newSelection, visibleComponents.value);
   updateVisibility(finalSelection as string[]);
 }
 
-const visibleSelection = computed(() => applySearchFilter(visibleComponents.value, []));
+const visibleSelection = computed<string[]>(
+  () => applySearchFilter(visibleComponents.value, []) as string[],
+);
 
 const itemsForTreeView = computed<CollectionTreeItem[]>(() => {
-  if (search.value && componentsCache.value) {
+  if (search.value && cache.value) {
     const query = search.value.toLowerCase();
     const result: CollectionTreeItem[] = [];
-    for (const type of Object.keys(componentsCache.value)) {
-      const matches = (componentsCache.value[type] ?? []).filter(
+    for (const type of Object.keys(cache.value)) {
+      const matches = (cache.value[type] ?? []).filter(
         (component: { title: string; id: string }) =>
           component.title.toLowerCase().includes(query) ||
           component.id.toLowerCase().includes(query),
@@ -107,7 +122,7 @@ const itemsForTreeView = computed<CollectionTreeItem[]>(() => {
       ...category,
       id: categoryId,
       children: sortAndFormatItems(
-        componentsCache.value?.[categoryId],
+        cache.value?.[categoryId],
         sortType.value,
       ) as unknown as CollectionTreeItem[],
     });
@@ -115,14 +130,36 @@ const itemsForTreeView = computed<CollectionTreeItem[]>(() => {
   return result;
 });
 
-function showContextMenu(event: unknown, item: CollectionTreeItem) {
+function extractComponentIds(node: CollectionTreeItem): string[] {
+  if (node.children) {
+    return node.children.flatMap((child) => extractComponentIds(child));
+  }
+  return [node.id];
+}
+
+function showContextMenu(event: unknown, item: CollectionTreeItem): void {
   const actualItem = item.raw || item;
+  if (isCollections.value && !MESH_COMPONENT_TYPES.includes(actualItem.category ?? "")) {
+    emit("show-menu", {
+      event,
+      itemId: id,
+      context_type: "model_component_type",
+      modelId: id,
+      modelComponentType: actualItem.category ?? actualItem.id,
+      targetComponentIds: extractComponentIds(actualItem),
+    });
+    return;
+  }
+  const typeId = actualItem.category || actualItem.id;
+  const typeItem = itemsForTreeView.value.find((type) => type.id === typeId);
+  const targetComponentIds = typeItem?.children?.map((child) => child.id);
   emit("show-menu", {
     event,
     itemId: actualItem.category ? actualItem.id : id,
     context_type: actualItem.category ? "model_component" : "model_component_type",
     modelId: id,
     modelComponentType: actualItem.category ? undefined : actualItem.id,
+    targetComponentIds,
   });
 }
 
@@ -142,7 +179,7 @@ function handleHoverEnter({
 }: {
   item: CollectionTreeItem;
   immediate?: boolean;
-}) {
+}): void {
   const actualItem = item.raw || item;
 
   if (!actualItem.category && (!actualItem.children || actualItem.children.length === 0)) {
@@ -150,17 +187,16 @@ function handleHoverEnter({
   }
 
   const viewerIdsToHover = extractIds(actualItem);
-
   onHoverEnter(id, () => viewerIdsToHover, "model", immediate);
 }
 
-function handleHoverLeave() {
+function handleHoverLeave(): void {
   onHoverLeave(id);
 }
 
-function expandAll() {
+function expandAll(): void {
   const allIds: string[] = [];
-  function traverse(itemsList: CollectionTreeItem[]) {
+  function traverse(itemsList: CollectionTreeItem[]): void {
     for (const item of itemsList) {
       if (item.children && item.children.length > 0) {
         allIds.push(item.id);
@@ -172,12 +208,11 @@ function expandAll() {
   opened.value = allIds;
 }
 
-function getLeafViewerIds(item: CollectionTreeItem) {
+function getLeafViewerIds(item: CollectionTreeItem): number[] {
   const actualItem = item.raw || item;
   return extractIds(actualItem);
 }
 
-// The focusCameraOnObject composable's block_ids parameter is declared as string[], but this view (like the sibling ModelComponents view) has always focused the camera using the numeric viewer/actor ids collected by extractIds; that pre-dates this typing pass, so the ids are passed through as-is (no Number/String conversion) rather than changed here.
 function getLeafViewerIdsForFocus(item: CollectionTreeItem): string[] {
   return getLeafViewerIds(item) as unknown as string[];
 }

package/app/components/Viewer/Options/AttributeColorBar.vue

@@ -2,9 +2,11 @@
 import AttributeRangeSelector from "./AttributeRangeSelector.vue";
 import ColorMapPicker from "./ColorMapPicker.vue";
 
-const emit = defineEmits<{
+interface Emits {
   reset: [];
-}>();
+}
+
+const emit = defineEmits<Emits>();
 
 const minimum = defineModel<number>("minimum");
 const maximum = defineModel<number>("maximum");

package/app/components/Viewer/Options/AttributeRangeSelector.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-const emit = defineEmits<{
+interface Emits {
   reset: [];
-}>();
+}
+
+const emit = defineEmits<Emits>();
 
 const minimum = defineModel<number>("minimum");
 const maximum = defineModel<number>("maximum");

package/app/components/Viewer/Options/AttributeSelector.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
 import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants";
+import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
 import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar.vue";
 import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
 import { getAttributeRange } from "@ogw_front/utils/attributes";
 import { useBackStore } from "@ogw_front/stores/back";
-import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
 
 const backStore = useBackStore();
 
@@ -33,10 +31,10 @@ interface AttributeInfo {
 
 const attributes = ref<AttributeInfo[]>([]);
 
-const currentAttribute = computed(() =>
+const currentAttribute = computed<AttributeInfo | undefined>(() =>
   attributes.value.find((attr) => attr.attribute_name === attributeName.value),
 );
-const cssNoDataColor = computed(() => {
+const cssNoDataColor = computed<string>(() => {
   const { red, green, blue, alpha } = attributeNoDataColor.value ?? DEFAULT_NO_DATA_COLOR;
   return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
 });
@@ -77,7 +75,7 @@ const rangeMax = computed<number | undefined>({
   },
 });
 
-const componentItems = computed(() => {
+const componentItems = computed<{ title: string; value: number }[]>(() => {
   if (!currentAttribute.value) {
     return [];
   }
@@ -87,7 +85,7 @@ const componentItems = computed(() => {
   }));
 });
 
-function resetRange() {
+function resetRange(): void {
   if (currentAttribute.value) {
     const comp = attributeItem.value ?? 0;
     // GetAttributeRange's parameter type (AttributeRangeSource) isn't exported;
@@ -101,11 +99,11 @@ function resetRange() {
   }
 }
 
-function hasSelectedComponent(components: unknown) {
+function hasSelectedComponent(components: unknown): boolean {
   return Array.isArray(components) && components.length > 0;
 }
 
-function getAttributes() {
+function getAttributes(): void {
   const schemaProperties = schema.properties as Record<string, unknown> | undefined;
   const requiresComponent = schemaProperties?.component_ids !== undefined;
   if (requiresComponent && !hasSelectedComponent(componentIds)) {

package/app/components/Viewer/Options/ColorMapList.vue

@@ -17,29 +17,31 @@ interface Props {
 
 const { presets, selectedPresetName = "" } = defineProps<Props>();
 
-const emit = defineEmits<{
+interface Emits {
   select: [preset: ColorMapPreset];
-}>();
+}
+
+const emit = defineEmits<Emits>();
 
 interface CanvasRefEntry {
   element: HTMLCanvasElement;
   presetName: string;
 }
 
-const filterText = ref("");
-const canvasRefs = ref<Record<string, CanvasRefEntry>>({});
-const loading = ref(true);
-const renderJobId = ref(0);
+const filterText = ref<string>("");
+const canvasRefs = ref<Map<string, CanvasRefEntry>>(new Map());
+const loading = ref<boolean>(true);
+const renderJobId = ref<number>(0);
 const openedGroups = ref<string[]>([]);
 
-function setCanvasRef(presetName: string, element: Element | null, id: string) {
+function setCanvasRef(presetName: string, element: Element | null, id: string): void {
   if (element) {
-    canvasRefs.value[id] = {
+    canvasRefs.value.set(id, {
       element: element as HTMLCanvasElement,
       presetName,
-    };
+    });
   } else {
-    delete canvasRefs.value[id];
+    canvasRefs.value.delete(id);
   }
 }
 
@@ -74,7 +76,7 @@ watch(filterText, (newFilterText) => {
   }
 });
 
-function processChunk(entries: [string, CanvasRefEntry][], index: number, jobId: number) {
+function processChunk(entries: [string, CanvasRefEntry][], index: number, jobId: number): void {
   if (jobId !== renderJobId.value || index >= entries.length) {
     if (jobId === renderJobId.value) {
       loading.value = false;
@@ -95,13 +97,13 @@ function processChunk(entries: [string, CanvasRefEntry][], index: number, jobId:
   setTimeout(() => processChunk(entries, end, jobId), ZERO);
 }
 
-function drawAllCanvases() {
+function drawAllCanvases(): void {
   renderJobId.value += 1;
   const jobId = renderJobId.value;
   loading.value = true;
   nextTick(() => {
     const WAIT_MS = 50;
-    setTimeout(() => processChunk(Object.entries(canvasRefs.value), 0, jobId), WAIT_MS);
+    setTimeout(() => processChunk([...canvasRefs.value.entries()], 0, jobId), WAIT_MS);
   });
 }
 

package/app/components/Viewer/Options/ColorMapPicker.vue

@@ -14,22 +14,22 @@ const selectedPresetName = defineModel<string>("selectedPresetName", {
   default: "batlow",
 });
 
-const menuOpen = ref(false);
+const menuOpen = ref<boolean>(false);
 const lutCanvas = ref<HTMLCanvasElement | undefined>(undefined);
 
 const presets = computed(() => getPresetsWithCurrentAtTop(selectedPresetName.value));
 
-function drawLutCanvas() {
+function drawLutCanvas(): void {
   drawCanvasForPreset(selectedPresetName.value, lutCanvas.value);
 }
 
-function onSelectPreset(preset: { Name: string }) {
+function onSelectPreset(preset: { Name: string }): void {
   selectedPresetName.value = preset.Name;
   menuOpen.value = false;
 }
 
 onMounted(() => nextTick(drawLutCanvas));
-watch([lutCanvas, selectedPresetName, () => min, () => max], drawLutCanvas);
+watch([lutCanvas, selectedPresetName, (): number => min, (): number => max], drawLutCanvas);
 </script>
 
 <template>