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

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

@@ -1,9 +1,11 @@
-<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";
-import ViewerOptionsWidthSlider from "@ogw_front/components/Viewer/Options/Sliders/Width";
-
+<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 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";
@@ -12,135 +14,151 @@ 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: "Edges options" },
-});
+interface Props {
+  itemProps: ItemProps & { index?: number };
+  btnImage: string;
+  tooltip?: string;
+}
+
+const { itemProps, btnImage, tooltip = "Edges options" } = 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) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshEdgesVisibility(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const size = computed({
+const size = computed<number>({
   get: () => dataStyleStore.meshEdgesWidth(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshEdgesWidth(targetId, newValue),
     );
     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) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshEdgesActiveColoring(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const color = computed({
-  get: () => dataStyleStore.meshEdgesColor(id.value),
+const color = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.meshEdgesColor(id.value) as RGBAColor | undefined,
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshEdgesColor(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_name = computed({
+const vertex_attribute_name = computed<string | undefined>({
   get: () => dataStyleStore.meshEdgesVertexAttributeName(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshEdgesVertexAttributeName(targetId, newValue),
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeName(targetId, newValue)),
     );
     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) =>
-      dataStyleStore.setMeshEdgesVertexAttributeItem(targetId, newValue),
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeItem(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed({
+const vertex_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, newValue[0], newValue[1]),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, minimum, maximum)),
     );
     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) =>
-      dataStyleStore.setMeshEdgesVertexAttributeColorMap(targetId, newValue),
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesVertexAttributeColorMap(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_no_data_color = computed({
-  get: () => dataStyleStore.meshEdgesVertexAttributeNoDataColor(id.value),
+const vertex_attribute_no_data_color = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.meshEdgesVertexAttributeNoDataColor(id.value) as RGBAColor | undefined,
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshEdgesVertexAttributeNoDataColor(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const edge_attribute_name = computed({
+const edge_attribute_name = computed<string | undefined>({
   get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshEdgesEdgeAttributeName(targetId, newValue),
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeName(targetId, newValue)),
     );
     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) =>
-      dataStyleStore.setMeshEdgesEdgeAttributeItem(targetId, newValue),
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeItem(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const edge_attribute_range = computed({
+const edge_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, newValue[0], newValue[1]),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, minimum, maximum)),
     );
     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) =>
-      dataStyleStore.setMeshEdgesEdgeAttributeColorMap(targetId, newValue),
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshEdgesEdgeAttributeColorMap(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const edge_attribute_no_data_color = computed({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeNoDataColor(id.value),
+const edge_attribute_no_data_color = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeNoDataColor(id.value) as RGBAColor | undefined,
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshEdgesEdgeAttributeNoDataColor(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
@@ -151,6 +169,7 @@ const edge_attribute_no_data_color = computed({
 <template>
   <ViewerContextMenuItem
     data-testid="meshEdgesMenu"
+    :index="itemProps.index!"
     :itemProps="itemProps"
     :tooltip="tooltip"
     :btnImage="btnImage"

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

@@ -1,9 +1,11 @@
-<script setup>
-import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
-import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
-import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size";
-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 ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size.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";
@@ -12,90 +14,99 @@ 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: "Points options" },
-});
+interface Props {
+  itemProps: ItemProps & { index?: number };
+  btnImage: string;
+  tooltip?: string;
+}
+
+const { itemProps, btnImage, tooltip = "Points options" } = defineProps<Props>();
 
 const id = toRef(() => itemProps.id);
 
-const visibility = computed({
+const visibility = computed<boolean>({
   get: () => dataStyleStore.meshPointsVisibility(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPointsVisibility(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const size = computed({
+const size = computed<number>({
   get: () => dataStyleStore.meshPointsSize(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPointsSize(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const coloring_style_key = computed({
+const coloring_style_key = computed<string>({
   get: () => dataStyleStore.meshPointsActiveColoring(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPointsActiveColoring(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const color = computed({
-  get: () => dataStyleStore.meshPointsColor(id.value),
+const color = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.meshPointsColor(id.value) as RGBAColor | undefined,
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPointsColor(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_name = computed({
+const vertex_attribute_name = computed<string | undefined>({
   get: () => dataStyleStore.meshPointsVertexAttributeName(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPointsVertexAttributeName(targetId, newValue),
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPointsVertexAttributeName(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_item = computed({
+const vertex_attribute_item = computed<string | undefined>({
   get: () => dataStyleStore.meshPointsVertexAttributeItem(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPointsVertexAttributeItem(targetId, newValue),
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPointsVertexAttributeItem(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed({
+const vertex_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshPointsVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPointsVertexAttributeRange(targetId, newValue[0], newValue[1]),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPointsVertexAttributeRange(targetId, minimum, maximum)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_color_map = computed({
+const vertex_attribute_color_map = computed<Map<string, RGBAColor>>({
   get: () => dataStyleStore.meshPointsVertexAttributeColorMap(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPointsVertexAttributeColorMap(targetId, newValue),
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPointsVertexAttributeColorMap(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_no_data_color = computed({
-  get: () => dataStyleStore.meshPointsVertexAttributeNoDataColor(id.value),
+const vertex_attribute_no_data_color = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.meshPointsVertexAttributeNoDataColor(id.value) as RGBAColor | undefined,
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPointsVertexAttributeNoDataColor(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
@@ -106,6 +117,7 @@ const vertex_attribute_no_data_color = computed({
 <template>
   <ViewerContextMenuItem
     data-testid="meshPointsMenu"
+    :index="itemProps.index!"
     :itemProps="itemProps"
     :tooltip="tooltip"
     :btnImage="btnImage"

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

@@ -1,147 +1,186 @@
-<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";
 
+interface Texture {
+  id: string;
+  texture_name: string;
+}
+
+interface CapabilityConfig {
+  available?: boolean;
+  hasColorMap?: boolean;
+}
+
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const { applyBatchStyle } = useBatchStyle();
 
-const { itemProps, btnImage, tooltip, capabilities } = defineProps({
-  itemProps: { type: Object, required: true },
-  btnImage: { type: String, required: true },
-  tooltip: { type: String, required: false, default: "Polygons options" },
-  capabilities: { type: Object, default: () => ({}) },
-});
+interface Props {
+  itemProps: ItemProps & { index?: number };
+  btnImage: string;
+  tooltip?: string;
+  capabilities?: Record<string, CapabilityConfig>;
+}
+
+const {
+  itemProps,
+  btnImage,
+  tooltip = "Polygons options",
+  capabilities = {},
+} = defineProps<Props>();
 
 const id = toRef(() => itemProps.id);
 
-const visibility = computed({
+const visibility = computed<boolean>({
   get: () => dataStyleStore.meshPolygonsVisibility(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPolygonsVisibility(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const coloring_style_key = computed({
+const coloring_style_key = computed<string>({
   get: () => dataStyleStore.meshPolygonsActiveColoring(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPolygonsActiveColoring(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const color = computed({
-  get: () => dataStyleStore.meshPolygonsColor(id.value),
+const color = computed<RGBAColor | undefined>({
+  get: () => dataStyleStore.meshPolygonsColor(id.value) as RGBAColor | undefined,
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPolygonsColor(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const textures = computed({
-  get: () => dataStyleStore.meshPolygonsTextures(id.value),
+const textures = computed<Texture[] | undefined>({
+  get: () => dataStyleStore.meshPolygonsTextures(id.value) as Texture[] | undefined,
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPolygonsTextures(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
 
-const vertex_attribute_name = computed({
+const vertex_attribute_name = computed<string | undefined>({
   get: () => dataStyleStore.meshPolygonsVertexAttributeName(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolygonsVertexAttributeName(targetId, newValue),
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeName(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_item = computed({
+const vertex_attribute_item = computed<string | undefined>({
   get: () => dataStyleStore.meshPolygonsVertexAttributeItem(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolygonsVertexAttributeItem(targetId, newValue),
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeItem(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_range = computed({
+const vertex_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, newValue[0], newValue[1]),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, minimum, maximum),
+      ),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_color_map = computed({
+const vertex_attribute_color_map = computed<Map<string, RGBAColor>>({
   get: () => dataStyleStore.meshPolygonsVertexAttributeColorMap(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolygonsVertexAttributeColorMap(targetId, newValue),
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsVertexAttributeColorMap(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_no_data_color = computed({
-  get: () => dataStyleStore.meshPolygonsVertexAttributeNoDataColor(id.value),
+const vertex_attribute_no_data_color = computed<RGBAColor | undefined>({
+  get: () =>
+    dataStyleStore.meshPolygonsVertexAttributeNoDataColor(id.value) as RGBAColor | undefined,
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPolygonsVertexAttributeNoDataColor(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const polygon_attribute_name = computed({
+const polygon_attribute_name = computed<string | undefined>({
   get: () => dataStyleStore.meshPolygonsPolygonAttributeName(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolygonsPolygonAttributeName(targetId, newValue),
+    if (newValue === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeName(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const polygon_attribute_item = computed({
+const polygon_attribute_item = computed<string | undefined>({
   get: () => dataStyleStore.meshPolygonsPolygonAttributeItem(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolygonsPolygonAttributeItem(targetId, newValue),
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeItem(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const polygon_attribute_range = computed({
+const polygon_attribute_range = computed<[number, number] | undefined>({
   get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, newValue[0], newValue[1]),
+    const [minimum, maximum] = newValue;
+    if (minimum === undefined || maximum === undefined) {
+      return;
+    }
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(
+        dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, minimum, maximum),
+      ),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const polygon_attribute_color_map = computed({
+const polygon_attribute_color_map = computed<Map<string, RGBAColor>>({
   get: () => dataStyleStore.meshPolygonsPolygonAttributeColorMap(id.value),
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
-      dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(targetId, newValue),
+    await applyBatchStyle(id.value, (targetId: string) =>
+      Promise.resolve(dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(targetId, newValue)),
     );
     hybridViewerStore.remoteRender();
   },
 });
-const polygon_attribute_no_data_color = computed({
-  get: () => dataStyleStore.meshPolygonsPolygonAttributeNoDataColor(id.value),
+const polygon_attribute_no_data_color = computed<RGBAColor | undefined>({
+  get: () =>
+    dataStyleStore.meshPolygonsPolygonAttributeNoDataColor(id.value) as RGBAColor | undefined,
   set: async (newValue) => {
-    await applyBatchStyle(id.value, (targetId) =>
+    await applyBatchStyle(id.value, (targetId: string) =>
       dataStyleStore.setMeshPolygonsPolygonAttributeNoDataColor(targetId, newValue),
     );
     hybridViewerStore.remoteRender();
@@ -152,6 +191,7 @@ const polygon_attribute_no_data_color = computed({
 <template>
   <ViewerContextMenuItem
     data-testid="meshPolygonsMenu"
+    :index="itemProps.index!"
     :itemProps="itemProps"
     :tooltip="tooltip"
     :btnImage="btnImage"