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

package/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue

@@ -1,8 +1,10 @@
-<script setup>
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
-import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
-import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
-
+<script setup lang="ts">
+import ViewerContextMenuItem, {
+  type ItemProps,
+} from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
+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 { useBatchStyle } from "@ogw_front/composables/batch_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -11,128 +13,150 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const { applyBatchStyle } = useBatchStyle();
 
-const { itemProps, btnImage, tooltip } = defineProps({
-  itemProps: { type: Object, required: true },
-  btnImage: { type: String, required: true },
-  tooltip: { type: String, required: false, default: "Polyhedra options" },
-});
+interface Props {
+  itemProps: ItemProps & { index?: number };
+  btnImage: string;
+  tooltip?: string;
+}
+
+const { itemProps, btnImage, tooltip = "Polyhedra options" } = defineProps<Props>();
 
 const id = toRef(() => itemProps.id);
 
-const visibility = computed({
+const visibility = computed<boolean>({
   get: () => dataStyleStore.meshPolyhedraVisibility(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPolyhedraVisibility(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const coloring_style_key = computed({
+const coloring_style_key = computed<string>({
   get: () => dataStyleStore.meshPolyhedraActiveColoring(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPolyhedraActiveColoring(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const color = computed({
-  get: () => dataStyleStore.meshPolyhedraColor(id.value),
+const color = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.meshPolyhedraColor(id.value) as RGBAColor | undefined,
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPolyhedraColor(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_name = computed({
+const vertex_attribute_name = computed<string | undefined>({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeName(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolyhedraVertexAttributeName(targetId, newValue),
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeName(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_item = computed({
+const vertex_attribute_item = computed<string | undefined>({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeItem(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolyhedraVertexAttributeItem(targetId, newValue),
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeItem(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed({
+const vertex_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, newValue[0], newValue[1]),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolyhedraVertexAttributeRange(targetId, minimum, maximum),
+      ),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_color_map = computed({
+const vertex_attribute_color_map = computed<Map<string, RGBAColor>>({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeColorMap(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolyhedraVertexAttributeColorMap(targetId, newValue),
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolyhedraVertexAttributeColorMap(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_no_data_color = computed({
-  get: () => dataStyleStore.meshPolyhedraVertexAttributeNoDataColor(id.value),
+const vertex_attribute_no_data_color = computed<RGBAColor | undefined>({
+  get: () =>
+    dataStyleStore.meshPolyhedraVertexAttributeNoDataColor(id.value) as RGBAColor | undefined,
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPolyhedraVertexAttributeNoDataColor(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const polyhedron_attribute_name = computed({
+const polyhedron_attribute_name = computed<string | undefined>({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeName(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(targetId, newValue),
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolyhedraPolyhedronAttributeName(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const polyhedron_attribute_item = computed({
+const polyhedron_attribute_item = computed<string | undefined>({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeItem(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolyhedraPolyhedronAttributeItem(targetId, newValue),
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolyhedraPolyhedronAttributeItem(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const polyhedron_attribute_range = computed({
+const polyhedron_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id.value),
   set: async (newValue) => {
-    await dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(
-      id.value,
-      newValue[0],
-      newValue[1],
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolyhedraPolyhedronAttributeRange(targetId, minimum, maximum),
+      ),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const polyhedron_attribute_color_map = computed({
+const polyhedron_attribute_color_map = computed<Map<string, RGBAColor>>({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeColorMap(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolyhedraPolyhedronAttributeColorMap(targetId, newValue),
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolyhedraPolyhedronAttributeColorMap(targetId, newValue),
+      ),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const polyhedron_attribute_no_data_color = computed({
-  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeNoDataColor(id.value),
+const polyhedron_attribute_no_data_color = computed<RGBAColor | undefined>({
+  get: () =>
+    dataStyleStore.meshPolyhedraPolyhedronAttributeNoDataColor(id.value) as RGBAColor | undefined,
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPolyhedraPolyhedronAttributeNoDataColor(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
@@ -143,6 +167,7 @@ const polyhedron_attribute_no_data_color = computed({
 <template>
   <ViewerContextMenuItem
     data-testid="meshPolyhedraMenu"
+    :index="itemProps.index!"
     :itemProps="itemProps"
     :tooltip="tooltip"
     :btnImage="btnImage"

package/app/components/Viewer/Generic/Model/BlocksOptions.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, blockId, targetBlockIds } = defineProps({
-  modelId: { type: String, required: true },
-  blockId: { type: String, default: undefined },
-  targetBlockIds: { type: Array, required: true },
-});
+interface Props {
+  modelId: string;
+  blockId?: string;
+  targetBlockIds: string[];
+}
+
+const { modelId, blockId = undefined, targetBlockIds } = defineProps<Props>();
 
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
 // Visibility
-const blocksVisibility = computed({
+const blocksVisibility = computed<boolean>({
   get: () => dataStyleStore.modelComponentTypeVisibility(modelId, "Block"),
   set: async (newValue) => {
     await dataStyleStore.setModelBlocksVisibility(modelId, targetBlockIds, newValue);
@@ -24,57 +27,73 @@ const blocksVisibility = computed({
   },
 });
 
-const blockVisibility = computed({
-  get: () => dataStyleStore.modelBlockVisibility(modelId, blockId),
+const blockVisibility = computed<boolean | undefined>({
+  get: () => dataStyleStore.modelBlockVisibility(modelId, blockId) as boolean | undefined,
   set: async (newValue) => {
+    if (blockId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelBlocksVisibility(modelId, [blockId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
 // Color
-const blocksColor = computed({
-  get: () => dataStyleStore.modelComponentTypeColor(modelId, "Block"),
+const blocksColor = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.modelComponentTypeColor(modelId, "Block") as RGBAColor | undefined,
   set: async (color) => {
     await dataStyleStore.setModelBlocksColor(modelId, targetBlockIds, color);
     hybridViewerStore.remoteRender();
   },
 });
 
-const blockColor = computed({
-  get: () => dataStyleStore.modelBlockColor(modelId, blockId),
+const blockColor = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.modelBlockColor(modelId, blockId) as RGBAColor | undefined,
   set: async (color) => {
+    if (blockId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelBlocksColor(modelId, [blockId], color);
     hybridViewerStore.remoteRender();
   },
 });
 
-const blocksActiveColoring = computed({
-  get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Block"),
+const blocksActiveColoring = computed<string | undefined>({
+  get: () =>
+    dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Block") as string | undefined,
   set: async (coloringType) => {
+    if (typeof coloringType !== "string") {
+      return;
+    }
     await dataStyleStore.setModelBlocksActiveColoring(modelId, targetBlockIds, coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
-const blockActiveColoring = computed({
-  get: () => dataStyleStore.modelBlockActiveColoring(modelId, blockId),
+const blockActiveColoring = computed<string | undefined>({
+  get: () => dataStyleStore.modelBlockActiveColoring(modelId, blockId) as string | undefined,
   set: async (coloringType) => {
+    if (blockId === undefined || typeof coloringType !== "string") {
+      return;
+    }
     await dataStyleStore.setModelBlocksActiveColoring(modelId, [blockId], coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
 // Group Attributes
-const blocksVertexAttributeName = computed({
+const blocksVertexAttributeName = computed<string | undefined>({
   get: () => dataStyleStore.modelBlocksVertexAttributeName(modelId),
   set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
     await dataStyleStore.setModelBlocksVertexAttributeName(modelId, targetBlockIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const blocksVertexAttributeItem = computed({
+const blocksVertexAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelBlocksVertexAttributeItem(modelId),
   set: async (newValue) => {
     await dataStyleStore.setModelBlocksVertexAttributeItem(modelId, targetBlockIds, newValue);
@@ -82,20 +101,24 @@ const blocksVertexAttributeItem = computed({
   },
 });
 
-const blocksVertexAttributeRange = computed({
+const blocksVertexAttributeRange = computed<[number, number] | undefined>({
   get: () => dataStyleStore.modelBlocksVertexAttributeRange(modelId),
   set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
     await dataStyleStore.setModelBlocksVertexAttributeRange(
       modelId,
       targetBlockIds,
-      newValue[0],
-      newValue[1],
+      minimum,
+      maximum,
     );
     hybridViewerStore.remoteRender();
   },
 });
 
-const blocksVertexAttributeColorMap = computed({
+const blocksVertexAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
   get: () => dataStyleStore.modelBlocksVertexAttributeColorMap(modelId),
   set: async (newValue) => {
     await dataStyleStore.setModelBlocksVertexAttributeColorMap(modelId, targetBlockIds, newValue);
@@ -103,8 +126,8 @@ const blocksVertexAttributeColorMap = computed({
   },
 });
 
-const blocksVertexAttributeNoDataColor = computed({
-  get: () => dataStyleStore.modelBlocksVertexAttributeNoDataColor(modelId),
+const blocksVertexAttributeNoDataColor = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.modelBlocksVertexAttributeNoDataColor(modelId) as RGBAColor | undefined,
   set: async (newValue) => {
     await dataStyleStore.setModelBlocksVertexAttributeNoDataColor(
       modelId,
@@ -115,15 +138,18 @@ const blocksVertexAttributeNoDataColor = computed({
   },
 });
 
-const blocksPolyhedronAttributeName = computed({
+const blocksPolyhedronAttributeName = computed<string | undefined>({
   get: () => dataStyleStore.modelBlocksPolyhedronAttributeName(modelId),
   set: async (newValue) => {
+    if (newValue === undefined) {
+      return;
+    }
     await dataStyleStore.setModelBlocksPolyhedronAttributeName(modelId, targetBlockIds, newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const blocksPolyhedronAttributeItem = computed({
+const blocksPolyhedronAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelBlocksPolyhedronAttributeItem(modelId),
   set: async (newValue) => {
     await dataStyleStore.setModelBlocksPolyhedronAttributeItem(modelId, targetBlockIds, newValue);
@@ -131,20 +157,24 @@ const blocksPolyhedronAttributeItem = computed({
   },
 });
 
-const blocksPolyhedronAttributeRange = computed({
+const blocksPolyhedronAttributeRange = computed<[number, number] | undefined>({
   get: () => dataStyleStore.modelBlocksPolyhedronAttributeRange(modelId),
   set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
     await dataStyleStore.setModelBlocksPolyhedronAttributeRange(
       modelId,
       targetBlockIds,
-      newValue[0],
-      newValue[1],
+      minimum,
+      maximum,
     );
     hybridViewerStore.remoteRender();
   },
 });
 
-const blocksPolyhedronAttributeColorMap = computed({
+const blocksPolyhedronAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
   get: () => dataStyleStore.modelBlocksPolyhedronAttributeColorMap(modelId),
   set: async (newValue) => {
     await dataStyleStore.setModelBlocksPolyhedronAttributeColorMap(
@@ -156,8 +186,9 @@ const blocksPolyhedronAttributeColorMap = computed({
   },
 });
 
-const blocksPolyhedronAttributeNoDataColor = computed({
-  get: () => dataStyleStore.modelBlocksPolyhedronAttributeNoDataColor(modelId),
+const blocksPolyhedronAttributeNoDataColor = computed<RGBAColor | undefined>({
+  get: () =>
+    dataStyleStore.modelBlocksPolyhedronAttributeNoDataColor(modelId) as RGBAColor | undefined,
   set: async (newValue) => {
     await dataStyleStore.setModelBlocksPolyhedronAttributeNoDataColor(
       modelId,
@@ -169,91 +200,122 @@ const blocksPolyhedronAttributeNoDataColor = computed({
 });
 
 // Individual Attributes
-const vertexAttributeName = computed({
+const vertexAttributeName = computed<string | undefined>({
   get: () => dataStyleStore.modelBlocksVertexAttributeName(modelId, blockId),
   set: async (newValue) => {
+    if (blockId === undefined || newValue === undefined) {
+      return;
+    }
     await dataStyleStore.setModelBlocksVertexAttributeName(modelId, [blockId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const vertexAttributeItem = computed({
+const vertexAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelBlocksVertexAttributeItem(modelId, blockId),
   set: async (newValue) => {
+    if (blockId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelBlocksVertexAttributeItem(modelId, [blockId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const vertexAttributeRange = computed({
+const vertexAttributeRange = computed<[number, number] | undefined>({
   get: () => dataStyleStore.modelBlocksVertexAttributeRange(modelId, blockId),
   set: async (newValue) => {
-    await dataStyleStore.setModelBlocksVertexAttributeRange(
-      modelId,
-      [blockId],
-      newValue[0],
-      newValue[1],
-    );
+    const [minimum, maximum] = newValue;
+    if (blockId === undefined || minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await dataStyleStore.setModelBlocksVertexAttributeRange(modelId, [blockId], minimum, maximum);
     hybridViewerStore.remoteRender();
   },
 });
 
-const vertexAttributeColorMap = computed({
+const vertexAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
   get: () => dataStyleStore.modelBlocksVertexAttributeColorMap(modelId, blockId),
   set: async (newValue) => {
+    if (blockId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelBlocksVertexAttributeColorMap(modelId, [blockId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const vertexAttributeNoDataColor = computed({
-  get: () => dataStyleStore.modelBlocksVertexAttributeNoDataColor(modelId, blockId),
+const vertexAttributeNoDataColor = computed<RGBAColor | undefined>({
+  get: () =>
+    dataStyleStore.modelBlocksVertexAttributeNoDataColor(modelId, blockId) as RGBAColor | undefined,
   set: async (newValue) => {
+    if (blockId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelBlocksVertexAttributeNoDataColor(modelId, [blockId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const polyhedronAttributeName = computed({
+const polyhedronAttributeName = computed<string | undefined>({
   get: () => dataStyleStore.modelBlocksPolyhedronAttributeName(modelId, blockId),
   set: async (newValue) => {
+    if (blockId === undefined || newValue === undefined) {
+      return;
+    }
     await dataStyleStore.setModelBlocksPolyhedronAttributeName(modelId, [blockId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const polyhedronAttributeItem = computed({
+const polyhedronAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelBlocksPolyhedronAttributeItem(modelId, blockId),
   set: async (newValue) => {
+    if (blockId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelBlocksPolyhedronAttributeItem(modelId, [blockId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const polyhedronAttributeRange = computed({
+const polyhedronAttributeRange = computed<[number, number] | undefined>({
   get: () => dataStyleStore.modelBlocksPolyhedronAttributeRange(modelId, blockId),
   set: async (newValue) => {
+    const [minimum, maximum] = newValue;
+    if (blockId === undefined || minimum === undefined || maximum === undefined) {
+      return;
+    }
     await dataStyleStore.setModelBlocksPolyhedronAttributeRange(
       modelId,
       [blockId],
-      newValue[0],
-      newValue[1],
+      minimum,
+      maximum,
     );
     hybridViewerStore.remoteRender();
   },
 });
 
-const polyhedronAttributeColorMap = computed({
+const polyhedronAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
   get: () => dataStyleStore.modelBlocksPolyhedronAttributeColorMap(modelId, blockId),
   set: async (newValue) => {
+    if (blockId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelBlocksPolyhedronAttributeColorMap(modelId, [blockId], newValue);
     hybridViewerStore.remoteRender();
   },
 });
 
-const polyhedronAttributeNoDataColor = computed({
-  get: () => dataStyleStore.modelBlocksPolyhedronAttributeNoDataColor(modelId, blockId),
+const polyhedronAttributeNoDataColor = computed<RGBAColor | undefined>({
+  get: () =>
+    dataStyleStore.modelBlocksPolyhedronAttributeNoDataColor(modelId, blockId) as
+      | RGBAColor
+      | undefined,
   set: async (newValue) => {
+    if (blockId === undefined) {
+      return;
+    }
     await dataStyleStore.setModelBlocksPolyhedronAttributeNoDataColor(modelId, [blockId], newValue);
     hybridViewerStore.remoteRender();
   },