@geode/opengeodeweb-front 10.34.0-rc.2 → 10.34.0-rc.21

package/app/components/Viewer/Generic/Model/CornersOptions.vue

@@ -1,22 +1,25 @@
-<script setup>
+<script setup lang="ts">
 import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
-const { modelId, cornerId, targetCornerIds } = defineProps({
-  modelId: { type: String, required: true },
-  cornerId: { type: String, default: undefined },
-  targetCornerIds: { type: Array, required: true },
-});
+interface Props {
+  modelId: string;
+  cornerId?: string;
+  targetCornerIds: string[];
+}
+
+const { modelId, cornerId = undefined, targetCornerIds } = defineProps<Props>();
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
 // Visibility
-const cornersVisibility = computed({
+const cornersVisibility = computed<boolean>({
   get: () => dataStyleStore.modelComponentTypeVisibility(modelId, "Corner"),
   set: async (newValue) => {
     await dataStyleStore.setModelCornersVisibility(modelId, targetCornerIds, newValue);
@@ -24,57 +27,73 @@ const cornersVisibility = computed({
   },
 });
 
-const cornerVisibility = computed({
-  get: () => dataStyleStore.modelCornerVisibility(modelId, cornerId),
+const cornerVisibility = computed<boolean | undefined>({
+  get: () => dataStyleStore.modelCornerVisibility(modelId, cornerId) as boolean | undefined,
   set: async (newValue) => {
+    if (cornerId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelCornersVisibility(modelId, [cornerId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
 // Color
-const cornersColor = computed({
-  get: () => dataStyleStore.modelComponentTypeColor(modelId, "Corner"),
+const cornersColor = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.modelComponentTypeColor(modelId, "Corner") as RGBAColor | undefined,
   set: async (color) => {
     await dataStyleStore.setModelCornersColor(modelId, targetCornerIds, color);
     hybridViewerStore.remoteRender();
   },
 });
 
-const cornerColor = computed({
-  get: () => dataStyleStore.modelCornerColor(modelId, cornerId),
+const cornerColor = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.modelCornerColor(modelId, cornerId) as RGBAColor | undefined,
   set: async (color) => {
+    if (cornerId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelCornersColor(modelId, [cornerId], color);
     hybridViewerStore.remoteRender();
   },
 });
 
-const cornersActiveColoring = computed({
-  get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Corner"),
+const cornersActiveColoring = computed<string | undefined>({
+  get: () =>
+    dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Corner") as string | undefined,
   set: async (coloringType) => {
+    if (typeof coloringType !== "string") {
+      return;
+    }
     await dataStyleStore.setModelCornersActiveColoring(modelId, targetCornerIds, coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
-const cornerActiveColoring = computed({
-  get: () => dataStyleStore.modelCornerActiveColoring(modelId, cornerId),
+const cornerActiveColoring = computed<string | undefined>({
+  get: () => dataStyleStore.modelCornerActiveColoring(modelId, cornerId) as string | undefined,
   set: async (coloringType) => {
+    if (cornerId === undefined || typeof coloringType !== "string") {
+      return;
+    }
     await dataStyleStore.setModelCornersActiveColoring(modelId, [cornerId], coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
 // Group Attributes
-const cornersVertexAttributeName = computed({
+const cornersVertexAttributeName = computed<string | undefined>({
   get: () => dataStyleStore.modelCornersVertexAttributeName(modelId),
   set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
     await dataStyleStore.setModelCornersVertexAttributeName(modelId, targetCornerIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const cornersVertexAttributeItem = computed({
+const cornersVertexAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelCornersVertexAttributeItem(modelId),
   set: async (newValue) => {
     await dataStyleStore.setModelCornersVertexAttributeItem(modelId, targetCornerIds, newValue);
@@ -82,20 +101,24 @@ const cornersVertexAttributeItem = computed({
   },
 });
 
-const cornersVertexAttributeRange = computed({
+const cornersVertexAttributeRange = computed<[number, number] | undefined>({
   get: () => dataStyleStore.modelCornersVertexAttributeRange(modelId),
   set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
     await dataStyleStore.setModelCornersVertexAttributeRange(
       modelId,
       targetCornerIds,
-      newValue[0],
-      newValue[1],
+      minimum,
+      maximum,
     );
     hybridViewerStore.remoteRender();
   },
 });
 
-const cornersVertexAttributeColorMap = computed({
+const cornersVertexAttributeColorMap = computed<ColorMap | undefined>({
   get: () => dataStyleStore.modelCornersVertexAttributeColorMap(modelId),
   set: async (newValue) => {
     await dataStyleStore.setModelCornersVertexAttributeColorMap(modelId, targetCornerIds, newValue);
@@ -103,8 +126,9 @@ const cornersVertexAttributeColorMap = computed({
   },
 });
 
-const cornersVertexAttributeNoDataColor = computed({
-  get: () => dataStyleStore.modelCornersVertexAttributeNoDataColor(modelId),
+const cornersVertexAttributeNoDataColor = computed<RGBAColor | undefined>({
+  get: () =>
+    dataStyleStore.modelCornersVertexAttributeNoDataColor(modelId) as RGBAColor | undefined,
   set: async (newValue) => {
     await dataStyleStore.setModelCornersVertexAttributeNoDataColor(
       modelId,
@@ -116,46 +140,60 @@ const cornersVertexAttributeNoDataColor = computed({
 });
 
 // Individual Attributes
-const vertexAttributeName = computed({
+const vertexAttributeName = computed<string | undefined>({
   get: () => dataStyleStore.modelCornersVertexAttributeName(modelId, cornerId),
   set: async (newValue) => {
+    if (cornerId === undefined || newValue === undefined) {
+      return;
+    }
     await dataStyleStore.setModelCornersVertexAttributeName(modelId, [cornerId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const vertexAttributeItem = computed({
+const vertexAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelCornersVertexAttributeItem(modelId, cornerId),
   set: async (newValue) => {
+    if (cornerId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelCornersVertexAttributeItem(modelId, [cornerId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const vertexAttributeRange = computed({
+const vertexAttributeRange = computed<[number, number] | undefined>({
   get: () => dataStyleStore.modelCornersVertexAttributeRange(modelId, cornerId),
   set: async (newValue) => {
-    await dataStyleStore.setModelCornersVertexAttributeRange(
-      modelId,
-      [cornerId],
-      newValue[0],
-      newValue[1],
-    );
+    const [minimum, maximum] = newValue;
+    if (cornerId === undefined || minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelCornersVertexAttributeRange(modelId, [cornerId], minimum, maximum);
     hybridViewerStore.remoteRender();
   },
 });
 
-const vertexAttributeColorMap = computed({
+const vertexAttributeColorMap = computed<ColorMap | undefined>({
   get: () => dataStyleStore.modelCornersVertexAttributeColorMap(modelId, cornerId),
   set: async (newValue) => {
+    if (cornerId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelCornersVertexAttributeColorMap(modelId, [cornerId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const vertexAttributeNoDataColor = computed({
-  get: () => dataStyleStore.modelCornersVertexAttributeNoDataColor(modelId, cornerId),
+const vertexAttributeNoDataColor = computed<RGBAColor | undefined>({
+  get: () =>
+    dataStyleStore.modelCornersVertexAttributeNoDataColor(modelId, cornerId) as
+      | RGBAColor
+      | undefined,
   set: async (newValue) => {
+    if (cornerId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelCornersVertexAttributeNoDataColor(modelId, [cornerId], newValue);
     hybridViewerStore.remoteRender();
   },

package/app/components/Viewer/Generic/Model/EdgesOptions.vue

@@ -1,8 +1,9 @@
-<script setup>
+<script setup lang="ts">
+import ViewerContextMenuItem, {
+  type ItemProps,
+} from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
 import SurfaceEdges from "@ogw_front/assets/viewer_svgs/surface_edges.svg";
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
-import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
-
+import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.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";
@@ -11,16 +12,18 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const { applyBatchStyle } = useBatchStyle();
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-});
+interface Props {
+  itemProps: ItemProps & { index: number };
+}
+
+const { itemProps } = defineProps<Props>();
 
-const id = computed(() => itemProps.meta_data.modelId || itemProps.id);
+const id = computed(() => (itemProps.meta_data.modelId as string | undefined) || itemProps.id);
 
 const visibility = computed({
   get: () => dataStyleStore.modelEdgesVisibility(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setModelEdgesVisibility(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
@@ -31,6 +34,7 @@ const visibility = computed({
 <template>
   <ViewerContextMenuItem
     data-testid="modelEdgesMenu"
+    :index="itemProps.index"
     :itemProps="itemProps"
     tooltip="Edges options"
     :btnImage="SurfaceEdges"

package/app/components/Viewer/Generic/Model/LinesOptions.vue

@@ -1,22 +1,25 @@
-<script setup>
+<script setup lang="ts">
 import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
+import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
-const { modelId, lineId, targetLineIds } = defineProps({
-  modelId: { type: String, required: true },
-  lineId: { type: String, default: undefined },
-  targetLineIds: { type: Array, required: true },
-});
+interface Props {
+  modelId: string;
+  lineId?: string;
+  targetLineIds: string[];
+}
+
+const { modelId, lineId = undefined, targetLineIds } = defineProps<Props>();
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
 // Visibility
-const linesVisibility = computed({
+const linesVisibility = computed<boolean>({
   get: () => dataStyleStore.modelComponentTypeVisibility(modelId, "Line"),
   set: async (newValue) => {
     await dataStyleStore.setModelLinesVisibility(modelId, targetLineIds, newValue);
@@ -24,57 +27,73 @@ const linesVisibility = computed({
   },
 });
 
-const lineVisibility = computed({
-  get: () => dataStyleStore.modelLineVisibility(modelId, lineId),
+const lineVisibility = computed<boolean | undefined>({
+  get: () => dataStyleStore.modelLineVisibility(modelId, lineId) as boolean | undefined,
   set: async (newValue) => {
+    if (lineId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelLinesVisibility(modelId, [lineId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
 // Color
-const linesColor = computed({
-  get: () => dataStyleStore.modelComponentTypeColor(modelId, "Line"),
+const linesColor = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.modelComponentTypeColor(modelId, "Line") as RGBAColor | undefined,
   set: async (color) => {
     await dataStyleStore.setModelLinesColor(modelId, targetLineIds, color);
     hybridViewerStore.remoteRender();
   },
 });
 
-const lineColor = computed({
-  get: () => dataStyleStore.modelLineColor(modelId, lineId),
+const lineColor = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.modelLineColor(modelId, lineId) as RGBAColor | undefined,
   set: async (color) => {
+    if (lineId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelLinesColor(modelId, [lineId], color);
     hybridViewerStore.remoteRender();
   },
 });
 
-const linesActiveColoring = computed({
-  get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Line"),
+const linesActiveColoring = computed<string | undefined>({
+  get: () =>
+    dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Line") as string | undefined,
   set: async (coloringType) => {
+    if (typeof coloringType !== "string") {
+      return;
+    }
     await dataStyleStore.setModelLinesActiveColoring(modelId, targetLineIds, coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
-const lineActiveColoring = computed({
-  get: () => dataStyleStore.modelLineActiveColoring(modelId, lineId),
+const lineActiveColoring = computed<string | undefined>({
+  get: () => dataStyleStore.modelLineActiveColoring(modelId, lineId) as string | undefined,
   set: async (coloringType) => {
+    if (lineId === undefined || typeof coloringType !== "string") {
+      return;
+    }
     await dataStyleStore.setModelLinesActiveColoring(modelId, [lineId], coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
 // Group Attributes
-const linesVertexAttributeName = computed({
+const linesVertexAttributeName = computed<string | undefined>({
   get: () => dataStyleStore.modelLinesVertexAttributeName(modelId),
   set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
     await dataStyleStore.setModelLinesVertexAttributeName(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const linesVertexAttributeItem = computed({
+const linesVertexAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelLinesVertexAttributeItem(modelId),
   set: async (newValue) => {
     await dataStyleStore.setModelLinesVertexAttributeItem(modelId, targetLineIds, newValue);
@@ -82,20 +101,24 @@ const linesVertexAttributeItem = computed({
   },
 });
 
-const linesVertexAttributeRange = computed({
+const linesVertexAttributeRange = computed<[number, number] | undefined>({
   get: () => dataStyleStore.modelLinesVertexAttributeRange(modelId),
   set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
     await dataStyleStore.setModelLinesVertexAttributeRange(
       modelId,
       targetLineIds,
-      newValue[0],
-      newValue[1],
+      minimum,
+      maximum,
     );
     hybridViewerStore.remoteRender();
   },
 });
 
-const linesVertexAttributeColorMap = computed({
+const linesVertexAttributeColorMap = computed<RGBAColorMap | undefined>({
   get: () => dataStyleStore.modelLinesVertexAttributeColorMap(modelId),
   set: async (newValue) => {
     await dataStyleStore.setModelLinesVertexAttributeColorMap(modelId, targetLineIds, newValue);
@@ -103,23 +126,26 @@ const linesVertexAttributeColorMap = computed({
   },
 });
 
-const linesVertexAttributeNoDataColor = computed({
-  get: () => dataStyleStore.modelLinesVertexAttributeNoDataColor(modelId),
+const linesVertexAttributeNoDataColor = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.modelLinesVertexAttributeNoDataColor(modelId) as RGBAColor | undefined,
   set: async (newValue) => {
     await dataStyleStore.setModelLinesVertexAttributeNoDataColor(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const linesEdgeAttributeName = computed({
+const linesEdgeAttributeName = computed<string | undefined>({
   get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId),
   set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
     await dataStyleStore.setModelLinesEdgeAttributeName(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const linesEdgeAttributeItem = computed({
+const linesEdgeAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelLinesEdgeAttributeItem(modelId),
   set: async (newValue) => {
     await dataStyleStore.setModelLinesEdgeAttributeItem(modelId, targetLineIds, newValue);
@@ -127,20 +153,19 @@ const linesEdgeAttributeItem = computed({
   },
 });
 
-const linesEdgeAttributeRange = computed({
+const linesEdgeAttributeRange = computed<[number, number] | undefined>({
   get: () => dataStyleStore.modelLinesEdgeAttributeRange(modelId),
   set: async (newValue) => {
-    await dataStyleStore.setModelLinesEdgeAttributeRange(
-      modelId,
-      targetLineIds,
-      newValue[0],
-      newValue[1],
-    );
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesEdgeAttributeRange(modelId, targetLineIds, minimum, maximum);
     hybridViewerStore.remoteRender();
   },
 });
 
-const linesEdgeAttributeColorMap = computed({
+const linesEdgeAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
   get: () => dataStyleStore.modelLinesEdgeAttributeColorMap(modelId),
   set: async (newValue) => {
     await dataStyleStore.setModelLinesEdgeAttributeColorMap(modelId, targetLineIds, newValue);
@@ -148,8 +173,8 @@ const linesEdgeAttributeColorMap = computed({
   },
 });
 
-const linesEdgeAttributeNoDataColor = computed({
-  get: () => dataStyleStore.modelLinesEdgeAttributeNoDataColor(modelId),
+const linesEdgeAttributeNoDataColor = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.modelLinesEdgeAttributeNoDataColor(modelId) as RGBAColor | undefined,
   set: async (newValue) => {
     await dataStyleStore.setModelLinesEdgeAttributeNoDataColor(modelId, targetLineIds, newValue);
     hybridViewerStore.remoteRender();
@@ -157,91 +182,115 @@ const linesEdgeAttributeNoDataColor = computed({
 });
 
 // Individual Attributes
-const vertexAttributeName = computed({
+const vertexAttributeName = computed<string | undefined>({
   get: () => dataStyleStore.modelLinesVertexAttributeName(modelId, lineId),
   set: async (newValue) => {
+    if (lineId === undefined || newValue === undefined) {
+      return;
+    }
     await dataStyleStore.setModelLinesVertexAttributeName(modelId, [lineId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const vertexAttributeItem = computed({
+const vertexAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelLinesVertexAttributeItem(modelId, lineId),
   set: async (newValue) => {
+    if (lineId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelLinesVertexAttributeItem(modelId, [lineId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const vertexAttributeRange = computed({
+const vertexAttributeRange = computed<[number, number] | undefined>({
   get: () => dataStyleStore.modelLinesVertexAttributeRange(modelId, lineId),
   set: async (newValue) => {
-    await dataStyleStore.setModelLinesVertexAttributeRange(
-      modelId,
-      [lineId],
-      newValue[0],
-      newValue[1],
-    );
+    const [minimum, maximum] = newValue;
+    if (lineId === undefined || minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesVertexAttributeRange(modelId, [lineId], minimum, maximum);
     hybridViewerStore.remoteRender();
   },
 });
 
-const vertexAttributeColorMap = computed({
+const vertexAttributeColorMap = computed<ColorMap | undefined>({
   get: () => dataStyleStore.modelLinesVertexAttributeColorMap(modelId, lineId),
   set: async (newValue) => {
+    if (lineId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelLinesVertexAttributeColorMap(modelId, [lineId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const vertexAttributeNoDataColor = computed({
-  get: () => dataStyleStore.modelLinesVertexAttributeNoDataColor(modelId, lineId),
+const vertexAttributeNoDataColor = computed<RGBAColor | undefined>({
+  get: () =>
+    dataStyleStore.modelLinesVertexAttributeNoDataColor(modelId, lineId) as RGBAColor | undefined,
   set: async (newValue) => {
+    if (lineId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelLinesVertexAttributeNoDataColor(modelId, [lineId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const edgeAttributeName = computed({
+const edgeAttributeName = computed<string | undefined>({
   get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId, lineId),
   set: async (newValue) => {
+    if (lineId === undefined || newValue === undefined) {
+      return;
+    }
     await dataStyleStore.setModelLinesEdgeAttributeName(modelId, [lineId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const edgeAttributeItem = computed({
+const edgeAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelLinesEdgeAttributeItem(modelId, lineId),
   set: async (newValue) => {
+    if (lineId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelLinesEdgeAttributeItem(modelId, [lineId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const edgeAttributeRange = computed({
+const edgeAttributeRange = computed<[number, number] | undefined>({
   get: () => dataStyleStore.modelLinesEdgeAttributeRange(modelId, lineId),
   set: async (newValue) => {
-    await dataStyleStore.setModelLinesEdgeAttributeRange(
-      modelId,
-      [lineId],
-      newValue[0],
-      newValue[1],
-    );
+    const [minimum, maximum] = newValue;
+    if (lineId === undefined || minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelLinesEdgeAttributeRange(modelId, [lineId], minimum, maximum);
     hybridViewerStore.remoteRender();
   },
 });
 
-const edgeAttributeColorMap = computed({
+const edgeAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
   get: () => dataStyleStore.modelLinesEdgeAttributeColorMap(modelId, lineId),
   set: async (newValue) => {
+    if (lineId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelLinesEdgeAttributeColorMap(modelId, [lineId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const edgeAttributeNoDataColor = computed({
-  get: () => dataStyleStore.modelLinesEdgeAttributeNoDataColor(modelId, lineId),
+const edgeAttributeNoDataColor = computed<RGBAColor | undefined>({
+  get: () =>
+    dataStyleStore.modelLinesEdgeAttributeNoDataColor(modelId, lineId) as RGBAColor | undefined,
   set: async (newValue) => {
+    if (lineId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelLinesEdgeAttributeNoDataColor(modelId, [lineId], newValue);
     hybridViewerStore.remoteRender();
   },