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

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

@@ -1,22 +1,27 @@
-<script setup>
-import FileUploader from "@ogw_front/components/FileUploader";
+<script setup lang="ts">
+import FileUploader from "@ogw_front/components/FileUploader.vue";
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 import { useBackStore } from "@ogw_front/stores/back";
 
-const emit = defineEmits(["update_value"]);
+// Mirrors FileUploader's own (unexported) UploadFile type.
+type UploadFile = File & { isConfigured?: boolean; displayName?: string };
 
-const {
-  id,
-  textureId: propTextureId,
-  textureName: propTextureName,
-} = defineProps({
-  id: { type: String, required: true },
-  textureId: { type: String, required: true },
-  textureName: { type: String, required: true },
-});
+interface Emits {
+  update_value: [payload: { key: "texture_name" | "id"; value: string }];
+}
+
+const emit = defineEmits<Emits>();
+
+interface Props {
+  id: string;
+  textureId: string;
+  textureName: string;
+}
+
+const { id, textureId: propTextureId, textureName: propTextureName } = defineProps<Props>();
 
-const textureName = ref(propTextureName);
-const textureId = ref(propTextureId);
+const textureName = ref<string>(propTextureName);
+const textureId = ref<string>(propTextureId);
 
 watch(
   () => propTextureName,
@@ -32,17 +37,19 @@ watch(
   },
 );
 
-const textureCoordinates = ref([]);
+const textureCoordinates = ref<string[]>([]);
 const backStore = useBackStore();
 
-function getTextureCoordinates() {
+function getTextureCoordinates(): void {
   const schema = back_schemas.opengeodeweb_back.texture_coordinates;
   const params = { id };
   backStore.request(
     { schema, params },
     {
-      response_function: (response) => {
-        textureCoordinates.value = response.texture_coordinates;
+      response_function: (response: unknown) => {
+        textureCoordinates.value = (
+          response as { texture_coordinates: string[] }
+        ).texture_coordinates;
       },
     },
   );
@@ -52,8 +59,8 @@ onMounted(() => {
   getTextureCoordinates();
 });
 
-async function files_uploaded_event(value) {
-  if (value.length > 0) {
+async function files_uploaded_event(value: UploadFile[]): Promise<void> {
+  if (value.length > 0 && value[0]) {
     const schema = back_schemas.opengeodeweb_back.save_viewable_file;
     const params = {
       geode_object_type: "RasterImage2D",
@@ -62,8 +69,8 @@ async function files_uploaded_event(value) {
     await backStore.request(
       { schema, params },
       {
-        response_function: (response) => {
-          textureId.value = response.id;
+        response_function: (response: unknown) => {
+          textureId.value = (response as { id: string }).id;
         },
       },
     );

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

@@ -1,13 +1,20 @@
-<script setup>
-import ViewerOptionsTextureItem from "@ogw_front/components/Viewer/Options/TextureItem";
+<script setup lang="ts">
+import ViewerOptionsTextureItem from "@ogw_front/components/Viewer/Options/TextureItem.vue";
 
-const textures = defineModel({ type: Array });
+interface Texture {
+  id: string;
+  texture_name: string;
+}
 
-const { id } = defineProps({
-  id: { type: String, required: true },
-});
+const textures = defineModel<Texture[]>();
+
+interface Props {
+  id: string;
+}
+
+const { id } = defineProps<Props>();
 
-const internal_textures = ref([]);
+const internal_textures = ref<Texture[]>([]);
 
 onMounted(() => {
   if (textures.value === null || textures.value === undefined || textures.value.length === 0) {
@@ -17,10 +24,14 @@ onMounted(() => {
   }
 });
 
-function update_value_event($event, index) {
-  internal_textures.value[index][$event.key] = $event.value;
+function update_value_event($event: { key: keyof Texture; value: string }, index: number): void {
+  const texture = internal_textures.value[index];
+  if (!texture) {
+    return;
+  }
+  texture[$event.key] = $event.value;
   const filtered = internal_textures.value.filter(
-    (texture) => texture.texture_name !== "" && texture.id !== "",
+    (item) => item.texture_name !== "" && item.id !== "",
   );
   if (filtered.length > 0) {
     textures.value = filtered;
@@ -41,8 +52,8 @@ function update_value_event($event, index) {
     </v-col>
     <ViewerOptionsTextureItem
       :id="id"
-      :texture_name="internal_textures[index].texture_name"
-      :texture_id="internal_textures[index].id"
+      :texture-name="texture.texture_name"
+      :texture-id="texture.id"
       @update_value="update_value_event($event, index)"
     />
   </v-row>

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

@@ -1,7 +1,7 @@
-<script setup>
-import BasicSwitch from "@ogw_front/components/Basic/Switch";
+<script setup lang="ts">
+import BasicSwitch from "@ogw_front/components/Basic/Switch.vue";
 
-const visibility = defineModel({ type: Boolean });
+const visibility = defineModel<boolean>();
 </script>
 
 <template>

package/app/components/Viewer/OverlappingObjectsPicker.vue

@@ -1,21 +1,36 @@
-<script setup>
-import GlassCard from "@ogw_front/components/GlassCard";
+<script setup lang="ts">
+import GlassCard from "@ogw_front/components/GlassCard.vue";
 import { formatListId } from "@ogw_front/utils/name_cleaner";
 import { geode_objects } from "@ogw_front/assets/geode_objects";
 
-const { displayIntermediate, intermediateItems, menuStyle } = defineProps({
-  displayIntermediate: { type: Boolean, required: true },
-  intermediateItems: { type: Array, required: true },
-  menuStyle: { type: Object, required: true },
-});
+interface IntermediateItem {
+  id: string;
+  viewer_id: number | undefined;
+  name: string;
+  viewer_type: string | undefined;
+  geode_object_type: string | undefined;
+}
+
+interface Props {
+  displayIntermediate: boolean;
+  intermediateItems: IntermediateItem[];
+  menuStyle: Record<string, unknown>;
+}
+
+const { displayIntermediate, intermediateItems, menuStyle } = defineProps<Props>();
+
+interface Emits {
+  select: [item: IntermediateItem];
+  "update:displayIntermediate": [val: boolean];
+}
 
-const emit = defineEmits(["select", "update:displayIntermediate"]);
+const emit = defineEmits<Emits>();
 
-function selectItem(item) {
+function selectItem(item: IntermediateItem): void {
   emit("select", item);
 }
 
-function handleUpdate(val) {
+function handleUpdate(val: boolean): void {
   emit("update:displayIntermediate", val);
 }
 </script>
@@ -55,8 +70,8 @@ function handleUpdate(val) {
         >
           <template #prepend>
             <v-img
-              v-if="geode_objects[item.geode_object_type]?.image"
-              :src="geode_objects[item.geode_object_type].image"
+              v-if="geode_objects[item.geode_object_type ?? '']?.image"
+              :src="geode_objects[item.geode_object_type ?? '']?.image"
               height="24"
               width="24"
               max-width="24"

package/app/components/Viewer/PointSet/SpecificPointsOptions.vue

@@ -1,10 +1,12 @@
-<script setup>
+<script setup lang="ts">
+import ViewerContextMenuItem, {
+  type ItemProps,
+} from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
 import PointSetPoints from "@ogw_front/assets/viewer_svgs/point_set_points.svg";
-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";
-
+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";
@@ -13,16 +15,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 = toRef(() => itemProps.id);
 
 const visibility = computed({
   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();
@@ -31,7 +35,7 @@ const visibility = computed({
 const size = computed({
   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();
@@ -40,16 +44,16 @@ const size = computed({
 const coloring_style_key = computed({
   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();
@@ -58,8 +62,11 @@ const color = computed({
 const vertex_attribute_name = computed({
   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();
   },
@@ -67,8 +74,8 @@ const vertex_attribute_name = computed({
 const vertex_attribute_item = computed({
   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();
   },
@@ -76,8 +83,12 @@ const vertex_attribute_item = computed({
 const vertex_attribute_range = computed({
   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();
   },
@@ -85,16 +96,16 @@ const vertex_attribute_range = computed({
 const vertex_attribute_color_map = computed({
   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();
@@ -104,6 +115,7 @@ const vertex_attribute_no_data_color = computed({
 <template>
   <ViewerContextMenuItem
     data-testid="meshPointsMenu"
+    :index="itemProps.index"
     :itemProps="itemProps"
     :btnImage="PointSetPoints"
     tooltip="Points options"

package/app/components/Viewer/Solid/EdgesOptions.vue

@@ -1,10 +1,13 @@
-<script setup>
+<script setup lang="ts">
+import type { ItemProps } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
 import SolidEdges from "@ogw_front/assets/viewer_svgs/solid_edges.svg";
-import ViewerGenericMeshEdgesOptions from "@ogw_front/components/Viewer/Generic/Mesh/EdgesOptions";
+import ViewerGenericMeshEdgesOptions from "@ogw_front/components/Viewer/Generic/Mesh/EdgesOptions.vue";
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-});
+interface Props {
+  itemProps: ItemProps & { index?: number };
+}
+
+const { itemProps } = defineProps<Props>();
 </script>
 
 <template>

package/app/components/Viewer/Solid/PointsOptions.vue

@@ -1,10 +1,13 @@
-<script setup>
+<script setup lang="ts">
+import type { ItemProps } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
 import SolidPoints from "@ogw_front/assets/viewer_svgs/solid_points.svg";
-import ViewerGenericMeshPointsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PointsOptions";
+import ViewerGenericMeshPointsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PointsOptions.vue";
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-});
+interface Props {
+  itemProps: ItemProps & { index?: number };
+}
+
+const { itemProps } = defineProps<Props>();
 </script>
 
 <template>

package/app/components/Viewer/Solid/PolygonsOptions.vue

@@ -1,10 +1,13 @@
-<script setup>
+<script setup lang="ts">
+import type { ItemProps } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
 import SolidFacets from "@ogw_front/assets/viewer_svgs/solid_facets.svg";
-import ViewerGenericMeshPolygonsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PolygonsOptions";
+import ViewerGenericMeshPolygonsOptions from "@ogw_front/components/Viewer/Generic/Mesh/PolygonsOptions.vue";
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-});
+interface Props {
+  itemProps: ItemProps & { index?: number };
+}
+
+const { itemProps } = defineProps<Props>();
 </script>
 
 <template>

package/app/components/Viewer/Solid/SpecificPolyhedraOptions.vue

@@ -1,9 +1,11 @@
-<script setup>
+<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 SolidPolyhedra from "@ogw_front/assets/viewer_svgs/solid_polyhedra.svg";
-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 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";
@@ -12,127 +14,149 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const { applyBatchStyle } = useBatchStyle();
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-  tooltip: { type: String, required: false, default: "Polyhedra options" },
-});
+interface Props {
+  itemProps: ItemProps & { index: number };
+  tooltip?: string;
+}
+
+const { itemProps, 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> | undefined>({
   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> | undefined>({
   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();
@@ -142,6 +166,7 @@ const polyhedron_attribute_no_data_color = computed({
 <template>
   <ViewerContextMenuItem
     data-testid="meshPolyhedraMenu"
+    :index="itemProps.index"
     :itemProps="itemProps"
     :tooltip="tooltip"
     :btnImage="SolidPolyhedra"

package/app/components/Viewer/Surface/EdgesOptions.vue

@@ -1,10 +1,13 @@
-<script setup>
+<script setup lang="ts">
+import type { ItemProps } from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem.vue";
 import SurfaceEdges from "@ogw_front/assets/viewer_svgs/surface_edges.svg";
-import ViewerGenericMeshEdgesOptions from "@ogw_front/components/Viewer/Generic/Mesh/EdgesOptions";
+import ViewerGenericMeshEdgesOptions from "@ogw_front/components/Viewer/Generic/Mesh/EdgesOptions.vue";
 
-const { itemProps } = defineProps({
-  itemProps: { type: Object, required: true },
-});
+interface Props {
+  itemProps: ItemProps & { index?: number };
+}
+
+const { itemProps } = defineProps<Props>();
 </script>
 
 <template>