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

package/app/components/ViewToolbar.vue

@@ -1,7 +1,4 @@
 <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 type { Ref } from "vue";
 import ActionButton from "@ogw_front/components/ActionButton.vue";
 import CameraBookmarkIcon from "@ogw_front/assets/viewer_svgs/camera-bookmark.svg";
 import CameraManager from "@ogw_front/components/CameraManager.vue";
@@ -18,15 +15,15 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 
 const hybridViewerStore = useHybridViewerStore();
 const viewerStore = useViewerStore();
-const showScreenshot = ref(false);
-const showCameraManager = ref(false);
-const showCameraOrientation = ref(false);
-const showZScaling = ref(false);
-const showClippingPlanes = ref(false);
-const showShrinkFilter = ref(false);
-const showRuler = ref(false);
-const gridScale = ref(false);
-const zScale = ref(hybridViewerStore.zScale);
+const showScreenshot = ref<boolean>(false);
+const showCameraManager = ref<boolean>(false);
+const showCameraOrientation = ref<boolean>(false);
+const showZScaling = ref<boolean>(false);
+const showClippingPlanes = ref<boolean>(false);
+const showShrinkFilter = ref<boolean>(false);
+const showRuler = ref<boolean>(false);
+const gridScale = ref<boolean>(false);
+const zScale = ref<number>(hybridViewerStore.zScale);
 const openSubMenus = ref<Record<string, boolean>>({});
 
 interface CameraOptionAction {
@@ -47,7 +44,7 @@ watch(
   },
 );
 
-async function handleZScalingClose() {
+async function handleZScalingClose(): Promise<void> {
   await hybridViewerStore.setZScaling(zScale.value);
   showZScaling.value = false;
 }
@@ -61,7 +58,7 @@ onKeyStroke("Escape", () => {
   }
 });
 
-function closeAllToolsExcept(toolRef: Ref<boolean>) {
+function closeAllToolsExcept(toolRef: Ref<boolean>): void {
   const tools = [
     showCameraOrientation,
     showCameraManager,
@@ -78,7 +75,7 @@ function closeAllToolsExcept(toolRef: Ref<boolean>) {
   }
 }
 
-function toggleTool(toolRef: Ref<boolean>) {
+function toggleTool(toolRef: Ref<boolean>): void {
   closeAllToolsExcept(toolRef);
   toolRef.value = !toolRef.value;
 }
@@ -88,7 +85,7 @@ const camera_options = computed<CameraOptionAction[]>(() => [
     testId: "resetCameraButton",
     tooltip: "Reset camera",
     icon: "mdi-cube-scan",
-    action: () => {
+    action: (): void => {
       hybridViewerStore.resetCamera();
     },
   },
@@ -97,7 +94,7 @@ const camera_options = computed<CameraOptionAction[]>(() => [
     tooltip: "Center on click",
     icon: "mdi-crosshairs-question",
     color: hybridViewerStore.is_picking ? "primary" : undefined,
-    action: () => {
+    action: (): void => {
       hybridViewerStore.is_picking = !hybridViewerStore.is_picking;
     },
   },
@@ -107,7 +104,7 @@ const camera_options = computed<CameraOptionAction[]>(() => [
     icon: "mdi-cursor-default-click",
     color: hybridViewerStore.is_hover_highlight ? "primary" : undefined,
     action: hybridViewerStore.is_hover_highlight
-      ? () => {
+      ? (): void => {
           hybridViewerStore.is_hover_highlight = false;
           hybridViewerStore.clearHoverHighlight();
         }
@@ -117,7 +114,7 @@ const camera_options = computed<CameraOptionAction[]>(() => [
         title: "Cells",
         testId: "highlightOnHoverCellsButton",
         icon: "mdi-select-all",
-        action: () => {
+        action: (): void => {
           if (
             hybridViewerStore.is_hover_highlight &&
             hybridViewerStore.hover_highlight_field_type === "CELL"
@@ -134,7 +131,7 @@ const camera_options = computed<CameraOptionAction[]>(() => [
         title: "Points",
         testId: "highlightOnHoverPointsButton",
         icon: "mdi-select-drag",
-        action: () => {
+        action: (): void => {
           if (
             hybridViewerStore.is_hover_highlight &&
             hybridViewerStore.hover_highlight_field_type === "POINT"
@@ -153,7 +150,7 @@ const camera_options = computed<CameraOptionAction[]>(() => [
     testId: "cameraOrientationButton",
     tooltip: "Camera orientation",
     icon: "mdi-rotate-3d",
-    action: () => {
+    action: (): void => {
       toggleTool(showCameraOrientation);
     },
   },
@@ -162,7 +159,7 @@ const camera_options = computed<CameraOptionAction[]>(() => [
     tooltip: "Manage camera positions",
     icon: CameraBookmarkIcon,
     iconSize: 34,
-    action: () => {
+    action: (): void => {
       toggleTool(showCameraManager);
     },
   },
@@ -170,7 +167,7 @@ const camera_options = computed<CameraOptionAction[]>(() => [
     testId: "screenshotButton",
     tooltip: "Take a screenshot",
     icon: "mdi-camera",
-    action: () => {
+    action: (): void => {
       toggleTool(showScreenshot);
     },
   },
@@ -179,7 +176,7 @@ const camera_options = computed<CameraOptionAction[]>(() => [
     tooltip: "Toggle grid scale",
     icon: "mdi-ruler-square",
     color: gridScale.value ? "primary" : undefined,
-    action: () => {
+    action: (): void => {
       const schema = schemas.opengeodeweb_viewer.viewer.grid_scale;
       const params = { visibility: !gridScale.value };
       viewerStore.request(
@@ -200,7 +197,7 @@ const camera_options = computed<CameraOptionAction[]>(() => [
     testId: "zScalingButton",
     tooltip: "Z Scaling Control",
     icon: "mdi-sort",
-    action: () => {
+    action: (): void => {
       toggleTool(showZScaling);
     },
   },
@@ -209,7 +206,7 @@ const camera_options = computed<CameraOptionAction[]>(() => [
     tooltip: "Clipping Planes",
     icon: "mdi-content-cut",
     color: showClippingPlanes.value ? "primary" : undefined,
-    action: () => {
+    action: (): void => {
       toggleTool(showClippingPlanes);
     },
   },
@@ -218,7 +215,7 @@ const camera_options = computed<CameraOptionAction[]>(() => [
     tooltip: "Shrink Filter",
     icon: "mdi-arrow-collapse-all",
     color: showShrinkFilter.value ? "primary" : undefined,
-    action: () => {
+    action: (): void => {
       toggleTool(showShrinkFilter);
     },
   },
@@ -227,7 +224,7 @@ const camera_options = computed<CameraOptionAction[]>(() => [
     tooltip: "Ruler",
     icon: "mdi-ruler",
     color: showRuler.value ? "primary" : undefined,
-    action: () => {
+    action: (): void => {
       toggleTool(showRuler);
     },
   },

package/app/components/Viewer/ContextMenu/CenterButton.vue

@@ -9,10 +9,12 @@ interface Props {
 
 const { isOverTreeview, isOverToolbar = false } = defineProps<Props>();
 
-const emit = defineEmits<{
+interface Emits {
   drag: [event: MouseEvent];
   click: [event: MouseEvent];
-}>();
+}
+
+const emit = defineEmits<Emits>();
 
 const ADAPTIVE_BLUR_VAL = "15px";
 const ADAPTIVE_OPACITY_VAL = 0.85;
@@ -51,14 +53,14 @@ let dragMoved = false;
 let dragStartClientX = 0;
 let dragStartClientY = 0;
 
-function onMouseDown(event: MouseEvent) {
+function onMouseDown(event: MouseEvent): void {
   dragMoved = false;
   dragStartClientX = event.clientX;
   dragStartClientY = event.clientY;
   emit("drag", event);
 }
 
-function onMouseUp(event: MouseEvent) {
+function onMouseUp(event: MouseEvent): void {
   const deltaX = event.clientX - dragStartClientX;
   const deltaY = event.clientY - dragStartClientY;
   if (Math.hypot(deltaX, deltaY) > dragThreshold) {
@@ -66,7 +68,7 @@ function onMouseUp(event: MouseEvent) {
   }
 }
 
-function onCenterClick(event: MouseEvent) {
+function onCenterClick(event: MouseEvent): void {
   event.stopPropagation();
   if (!dragMoved) {
     emit("click", event);

package/app/components/Viewer/ContextMenu/CircularItems.vue

@@ -22,7 +22,7 @@ const ANGLE_315 = 315;
 
 const menuStore = useMenuStore();
 
-function getItemStyle(index: number) {
+function getItemStyle(index: number): Record<string, string> {
   const angle = (index / menuItemCount) * 2 * Math.PI;
   return {
     transform: `translate(${Math.cos(angle) * RADIUS}px, ${Math.sin(angle) * RADIUS}px)`,
@@ -32,7 +32,7 @@ function getItemStyle(index: number) {
   };
 }
 
-function getTooltipLocation(index: number) {
+function getTooltipLocation(index: number): string {
   const angle = (index / menuItemCount) * FULL_ANGLE;
   if (angle < ANGLE_45 || angle >= ANGLE_315) {
     return "right";
@@ -46,7 +46,7 @@ function getTooltipLocation(index: number) {
   return "bottom";
 }
 
-function getTooltipOrigin(index: number) {
+function getTooltipOrigin(index: number): string {
   const angle = (index / menuItemCount) * FULL_ANGLE;
   if (angle < ANGLE_45 || angle >= ANGLE_315) {
     return "left";

package/app/components/Viewer/ContextMenu/ContextMenu.vue

@@ -1,13 +1,11 @@
 <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 CenterButton from "@ogw_front/components/Viewer/ContextMenu/CenterButton.vue";
 import CircularItems from "@ogw_front/components/Viewer/ContextMenu/CircularItems.vue";
+import type { Component } from "vue";
 import InfoCard from "@ogw_front/components/Viewer/ContextMenu/InfoCard.vue";
 import { useEventListener } from "@vueuse/core";
 import { useMenuStore } from "@ogw_front/stores/menu";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
-import type { Component } from "vue";
 
 interface Props {
   id: string;
@@ -33,15 +31,20 @@ const treeviewStore = useTreeviewStore();
 
 const meta_data = computed(() => menuStore.current_meta_data || {});
 
-const show_menu = ref(true);
-const showName = ref(false);
-const isDragging = ref(false);
-const dragStartX = ref(0);
-const dragStartY = ref(0);
-const menuX = ref(x);
-const menuY = ref(y);
+const show_menu = ref<boolean>(true);
+const showName = ref<boolean>(false);
+const isDragging = ref<boolean>(false);
+const dragStartX = ref<number>(0);
+const dragStartY = ref<number>(0);
+const menuX = ref<number>(x);
+const menuY = ref<number>(y);
+
+interface Position {
+  x: number;
+  y: number;
+}
 
-function clampPosition(posX: number, posY: number) {
+function clampPosition(posX: number, posY: number): Position {
   const margin = RADIUS + MARGIN_OFFSET;
   return {
     x: Math.min(Math.max(posX, margin), containerWidth - margin),
@@ -49,13 +52,13 @@ function clampPosition(posX: number, posY: number) {
   };
 }
 
-function startDrag(event: MouseEvent) {
+function startDrag(event: MouseEvent): void {
   isDragging.value = true;
   dragStartX.value = event.clientX - menuX.value;
   dragStartY.value = event.clientY - menuY.value;
 }
 
-function handleDrag(event: MouseEvent) {
+function handleDrag(event: MouseEvent): void {
   const { x: clampedX, y: clampedY } = clampPosition(
     event.clientX - dragStartX.value,
     event.clientY - dragStartY.value,
@@ -65,7 +68,7 @@ function handleDrag(event: MouseEvent) {
   menuStore.setMenuPosition(clampedX, clampedY);
 }
 
-function stopDrag(event: MouseEvent) {
+function stopDrag(event: MouseEvent): void {
   isDragging.value = false;
   event.stopPropagation();
   menuStore.setMenuPosition(menuX.value, menuY.value);
@@ -116,9 +119,9 @@ watch(
   { immediate: true },
 );
 
-const menuItemCount = computed(() => menu_items.value.length);
+const menuItemCount = computed<number>(() => menu_items.value.length);
 
-const isOverTreeview = computed(() => {
+const isOverTreeview = computed<boolean>(() => {
   const hasAdditional = treeviewStore.opened_views.some((view) => view.id !== "main");
   const hasMain = treeviewStore.opened_views.some((view) => view.id === "main");
   const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
@@ -132,7 +135,7 @@ const isOverTreeview = computed(() => {
   return menuX.value < treeviewWidth;
 });
 
-const isOverToolbar = computed(() => {
+const isOverToolbar = computed<boolean>(() => {
   const toolbarEl = document.querySelector(".view-toolbar");
   if (!toolbarEl) {
     return false;
@@ -150,7 +153,7 @@ const isOverToolbar = computed(() => {
   );
 });
 
-function getMenuStyle() {
+function getMenuStyle(): Record<string, string> {
   return {
     position: "fixed" as const,
     left: `${menuStore.containerLeft + menuX.value - RADIUS}px`,
@@ -158,7 +161,7 @@ function getMenuStyle() {
   };
 }
 
-function toggleShowName() {
+function toggleShowName(): void {
   showName.value = !showName.value;
 }
 </script>

package/app/components/Viewer/ContextMenu/ContextMenuItem.vue

@@ -55,7 +55,7 @@ const TREEVIEW_MARGIN_RIGHT = 20;
 const TREEVIEW_ICON_WIDTH = 48;
 
 const treeviewStore = useTreeviewStore();
-const isOverTreeview = computed(() => {
+const isOverTreeview = computed<boolean>(() => {
   const hasAdditional = treeviewStore.opened_views.some((view) => view.id !== "main");
   const hasMain = treeviewStore.opened_views.some((view) => view.id === "main");
   const firstColWidth = hasMain ? treeviewStore.panelWidth : 0;
@@ -69,7 +69,7 @@ const isOverTreeview = computed(() => {
   return buttonCoords.value.x < treeviewWidth;
 });
 
-const isOverToolbar = computed(() => {
+const isOverToolbar = computed<boolean>(() => {
   const toolbarEl = document.querySelector(".view-toolbar");
   if (!toolbarEl) {
     return false;
@@ -84,7 +84,7 @@ const isOverToolbar = computed(() => {
   );
 });
 
-const computedItemStyles = computed(() => {
+const computedItemStyles = computed<Record<string, string>>(() => {
   if (isOverTreeview.value || isOverToolbar.value) {
     return {
       "--adaptive-blur": "15px",
@@ -95,13 +95,15 @@ const computedItemStyles = computed(() => {
   return adaptiveStyles.value;
 });
 
-const is_active = computed(() => menuStore.active_item_index === index);
+const is_active = computed<boolean>(() => menuStore.active_item_index === index);
 const optionsRef = ref<HTMLElement | undefined>(undefined);
 const { height: optionsHeight } = useElementSize(optionsRef);
 
-const maxCardHeight = computed(() => Math.min(CARD_HEIGHT, menuStore.containerHeight - OFFSET));
+const maxCardHeight = computed<number>(() =>
+  Math.min(CARD_HEIGHT, menuStore.containerHeight - OFFSET),
+);
 
-const optionsStyle = computed(() => {
+const optionsStyle = computed<Record<string, string>>(() => {
   if (!is_active.value || !optionsHeight.value) {
     return {};
   }
@@ -120,7 +122,7 @@ const optionsStyle = computed(() => {
   return { top: `calc(50% + ${offsetY}px)` };
 });
 
-const optionsClass = computed(() => {
+const optionsClass = computed<string>(() => {
   const loc = itemProps.tooltip_location;
   const margin = MARGIN;
   const radius = RADIUS;
@@ -132,7 +134,7 @@ const optionsClass = computed(() => {
   return menuStore.menuX - radius - margin - CARD_WIDTH < 0 ? "options-right" : "options-left";
 });
 
-function toggleOptions() {
+function toggleOptions(): void {
   menuStore.toggleItemOptions(index);
 }
 

package/app/components/Viewer/ContextMenu/InfoCard.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import GlassCard from "@ogw_front/components/GlassCard.vue";
 import { middleTruncate } from "@ogw_front/utils/string";
-import { useClipboard } from "@vueuse/core";
+import { useCopyToClipboard } from "@ogw_front/composables/copy_to_clipboard";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useMenuStore } from "@ogw_front/stores/menu";
 
 interface Props {
   show: boolean;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line @typescript-eslint/no-explicit-any
   metaData: Record<string, any>;
 }
 
@@ -17,7 +17,6 @@ const emit = defineEmits<{
   "update:show": [value: boolean];
 }>();
 
-const COPIED_TIMEOUT = 1500;
 const MAX_SHORT_ID_LENGTH = 15;
 const ID_SLICE_START = 8;
 const ID_SLICE_END_OFFSET = 7;
@@ -25,10 +24,10 @@ const TRUNCATE_MAX_LENGTH = 22;
 const TRUNCATE_START_CHARS = 12;
 const TRUNCATE_END_CHARS = 7;
 
-const { copy, copied } = useClipboard({ copiedDuring: COPIED_TIMEOUT });
+const { copy, copied } = useCopyToClipboard();
 const copiedId = ref("");
 
-function isCopied(id: string | undefined) {
+function isCopied(id: string | undefined): boolean {
   return copied.value && copiedId.value === id;
 }
 
@@ -41,7 +40,7 @@ interface MeshComponentInfo {
   category?: string;
 }
 
-const componentName = ref("");
+const componentName = ref<string>("");
 const componentItem = ref<MeshComponentInfo | undefined>(undefined);
 
 function asString(value: unknown): string | undefined {
@@ -72,7 +71,7 @@ watch(
   { immediate: true },
 );
 
-const cleanName = computed(() => {
+const cleanName = computed<string>(() => {
   const meta = menuStore.current_meta_data;
   if (!meta) {
     return "Unnamed Object";
@@ -83,7 +82,7 @@ const cleanName = computed(() => {
   return asString(meta.name) ?? "Unnamed Object";
 });
 
-const displayTitle = computed(() => {
+const displayTitle = computed<string>(() => {
   const name = cleanName.value;
   if (!name) {
     return "";
@@ -91,7 +90,7 @@ const displayTitle = computed(() => {
   return middleTruncate(name, TRUNCATE_MAX_LENGTH, TRUNCATE_START_CHARS, TRUNCATE_END_CHARS);
 });
 
-const displayComponentTitle = computed(() => {
+const displayComponentTitle = computed<string>(() => {
   if (!componentItem.value) {
     return "";
   }
@@ -103,7 +102,7 @@ const displayComponentTitle = computed(() => {
   );
 });
 
-async function copyId(targetId: string | undefined) {
+async function copyId(targetId: string | undefined): Promise<void> {
   if (!targetId) {
     return;
   }
@@ -115,7 +114,7 @@ async function copyId(targetId: string | undefined) {
   }
 }
 
-function formatId(id: string | undefined) {
+function formatId(id: string | undefined): string {
   if (!id) {
     return "";
   }
@@ -125,7 +124,7 @@ function formatId(id: string | undefined) {
   return `${id.slice(0, ID_SLICE_START)}...${id.slice(id.length - ID_SLICE_END_OFFSET)}`;
 }
 
-const formattedId = computed(() => formatId(metaData.id));
+const formattedId = computed<string>(() => formatId(metaData.id));
 </script>
 
 <template>

package/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -1,19 +1,15 @@
 <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 EdgedCurveEdges from "@ogw_front/assets/viewer_svgs/edged_curve_edges.svg";
-// oxlint-disable import/consistent-type-specifier-style -- combining the default import with the type import avoids a duplicate-imports violation on this same module; using disable-next-line here is fragile because a formatter can re-wrap the import onto multiple lines and shift the flagged line
 import ViewerContextMenuItem, {
   type ItemProps,
 } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
+import EdgedCurveEdges from "@ogw_front/assets/viewer_svgs/edged_curve_edges.svg";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
 import ViewerOptionsWidthSlider from "@ogw_front/components/Viewer/Options/Sliders/Width.vue";
-
 import { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
@@ -27,7 +23,7 @@ const { itemProps } = defineProps<Props>();
 
 const id = toRef(() => itemProps.id);
 
-const visibility = computed({
+const visibility = computed<boolean>({
   get: () => dataStyleStore.meshEdgesVisibility(id.value),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId: string) =>
@@ -36,7 +32,7 @@ const visibility = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const width = computed({
+const width = computed<number>({
   get: () => dataStyleStore.meshEdgesWidth(id.value),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId: string) =>
@@ -45,7 +41,7 @@ const width = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const coloring_style_key = computed({
+const coloring_style_key = computed<string>({
   get: () => dataStyleStore.meshEdgesActiveColoring(id.value),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId: string) =>
@@ -63,7 +59,7 @@ const color = computed<RGBAColor | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_name = computed({
+const vertex_attribute_name = computed<string | undefined>({
   get: () => dataStyleStore.meshEdgesVertexAttributeName(id.value),
   set: async (newValue) => {
     if (newValue === undefined) {
@@ -75,7 +71,7 @@ const vertex_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_item = computed({
+const vertex_attribute_item = computed<string | undefined>({
   get: () => dataStyleStore.meshEdgesVertexAttributeItem(id.value),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId: string) =>
@@ -84,7 +80,7 @@ const vertex_attribute_item = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed({
+const vertex_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
@@ -97,7 +93,7 @@ const vertex_attribute_range = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_color_map = computed({
+const vertex_attribute_color_map = computed<Map<string, RGBAColor>>({
   get: () => dataStyleStore.meshEdgesVertexAttributeColorMap(id.value),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId: string) =>
@@ -115,7 +111,7 @@ const vertex_attribute_no_data_color = computed<RGBAColor | undefined>({
     hybridViewerStore.remoteRender();
   },
 });
-const edge_attribute_name = computed({
+const edge_attribute_name = computed<string | undefined>({
   get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
   set: async (newValue) => {
     if (newValue === undefined) {
@@ -127,7 +123,7 @@ const edge_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const edge_attribute_item = computed({
+const edge_attribute_item = computed<string | undefined>({
   get: () => dataStyleStore.meshEdgesEdgeAttributeItem(id.value),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId: string) =>
@@ -136,7 +132,7 @@ const edge_attribute_item = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const edge_attribute_range = computed({
+const edge_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
   set: async (newValue) => {
     const [minimum, maximum] = newValue;
@@ -149,7 +145,7 @@ const edge_attribute_range = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const edge_attribute_color_map = computed({
+const edge_attribute_color_map = computed<Map<string, RGBAColor>>({
   get: () => dataStyleStore.meshEdgesEdgeAttributeColorMap(id.value),
   set: async (newValue) => {
     await applyBatchStyle(id.value, (targetId: string) =>