@geode/opengeodeweb-front 10.14.2-rc.1 → 10.14.2-rc.3

package/app/components/Basic/Slider.vue

@@ -0,0 +1,7 @@
+<script setup>
+const model = defineModel();
+</script>
+
+<template>
+  <v-slider v-model="model" hide-details min="0" max="20" step="2" />
+</template>

package/app/components/Basic/Switch.vue

@@ -0,0 +1,7 @@
+<script setup>
+const model = defineModel();
+</script>
+
+<template>
+  <v-switch v-model="model" inset hide-details />
+</template>

package/app/components/HybridRenderingView.vue

@@ -46,7 +46,7 @@ function debounce(func, wait) {
 
 <template>
   <ClientOnly>
-    <div class="fill-height" style="position: relative; height: 100%">
+    <div data-testid="hybridViewer" class="fill-height" style="position: relative; height: 100%">
       <VeaseViewToolbar />
       <slot name="ui"></slot>
       <v-col

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

@@ -3,6 +3,7 @@ import EdgedCurveEdges from "@ogw_front/assets/viewer_svgs/edged_curve_edges.svg
 import ViewerContextMenuItem from "@ogw_front/components/Viewer/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";
 
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -23,7 +24,7 @@ const visibility = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const size = computed({
+const width = computed({
   get: () => dataStyleStore.meshEdgesWidth(id.value),
   set: async (newValue) => {
     await dataStyleStore.setMeshEdgesWidth(id.value, newValue);
@@ -90,20 +91,15 @@ const edge_attribute_color_map = computed({
 <template>
   <ViewerContextMenuItem
     :itemProps="itemProps"
-    tooltip="Edges options"
     :btn_image="EdgedCurveEdges"
+    tooltip="Edges options"
   >
     <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <ViewerOptionsVisibilitySwitch data-testid="meshEdgesVisibilitySwitch" v-model="visibility" />
       <template v-if="visibility">
         <v-row class="pa-0" align="center">
           <v-divider />
-          <v-col cols="auto" justify="center">
-            <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Width'" />
-          </v-col>
-          <v-col justify="center">
-            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
-          </v-col>
+          <ViewerOptionsWidthSlider v-model="width" />
         </v-row>
         <v-row>
           <v-col>

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

@@ -90,9 +90,14 @@ const cell_attribute_color_map = computed({
 </script>
 
 <template>
-  <ViewerContextMenuItem :itemProps="itemProps" :tooltip="tooltip" :btn_image="btn_image">
+  <ViewerContextMenuItem
+    data-testid="meshCellsMenu"
+    :itemProps="itemProps"
+    :tooltip="tooltip"
+    :btn_image="btn_image"
+  >
     <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <ViewerOptionsVisibilitySwitch data-testid="meshCellsVisibilitySwitch" v-model="visibility" />
       <template v-if="visibility">
         <ViewerOptionsColoringTypeSelector
           :id="id"

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

@@ -2,6 +2,7 @@
 import ViewerContextMenuItem from "@ogw_front/components/Viewer/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";
 
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -9,9 +10,10 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
-const { itemProps, btn_image } = defineProps({
+const { itemProps, btn_image, tooltip } = defineProps({
   itemProps: { type: Object, required: true },
   btn_image: { type: String, required: true },
+  tooltip: { type: String, required: false, default: "Edges options" },
 });
 
 const id = toRef(() => itemProps.id);
@@ -44,63 +46,21 @@ const color = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_name = computed({
-  get: () => dataStyleStore.meshEdgesVertexAttributeName(id.value),
-  set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesVertexAttributeName(id.value, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_range = computed({
-  get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
-  set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesVertexAttributeRange(id.value, newValue[0], newValue[1]);
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_color_map = computed({
-  get: () => dataStyleStore.meshEdgesVertexAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesVertexAttributeColorMap(id.value, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-const edge_attribute_name = computed({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
-  set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesEdgeAttributeName(id.value, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-const edge_attribute_range = computed({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
-  set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesEdgeAttributeRange(id.value, newValue[0], newValue[1]);
-    hybridViewerStore.remoteRender();
-  },
-});
-const edge_attribute_color_map = computed({
-  get: () => dataStyleStore.meshEdgesEdgeAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await dataStyleStore.setMeshEdgesEdgeAttributeColorMap(id.value, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
 </script>
 
 <template>
-  <ViewerContextMenuItem :itemProps="itemProps" tooltip="Edges options" :btn_image="btn_image">
+  <ViewerContextMenuItem
+    data-testid="meshEdgesMenu"
+    :itemProps="itemProps"
+    :tooltip="tooltip"
+    :btn_image="btn_image"
+  >
     <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <ViewerOptionsVisibilitySwitch data-testid="meshEdgesVisibilitySwitch" v-model="visibility" />
       <template v-if="visibility">
         <v-row class="pa-0" align="center">
           <v-divider />
-          <v-col cols="auto" justify="center">
-            <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Width'" />
-          </v-col>
-          <v-col justify="center">
-            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
-          </v-col>
+          <ViewerOptionsWidthSlider data-testid="meshEdgesWidthSlider" v-model="size" />
         </v-row>
         <v-row>
           <v-col>
@@ -108,12 +68,6 @@ const edge_attribute_color_map = computed({
               :id="id"
               v-model:coloring_style_key="coloring_style_key"
               v-model:color="color"
-              v-model:vertex_attribute_name="vertex_attribute_name"
-              v-model:vertex_attribute_range="vertex_attribute_range"
-              v-model:vertex_attribute_color_map="vertex_attribute_color_map"
-              v-model:edge_attribute_name="edge_attribute_name"
-              v-model:edge_attribute_range="edge_attribute_range"
-              v-model:edge_attribute_color_map="edge_attribute_color_map"
             />
           </v-col>
         </v-row>

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

@@ -1,6 +1,7 @@
 <script setup>
 import ViewerContextMenuItem from "@ogw_front/components/Viewer/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 { useDataStyleStore } from "@ogw_front/stores/data_style";
@@ -9,9 +10,10 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
-const { itemProps, btn_image } = defineProps({
+const { itemProps, btn_image, tooltip } = defineProps({
   itemProps: { type: Object, required: true },
   btn_image: { type: String, required: true },
+  tooltip: { type: String, required: false, default: "Points options" },
 });
 
 const id = toRef(() => itemProps.id);
@@ -68,18 +70,21 @@ const vertex_attribute_color_map = computed({
 </script>
 
 <template>
-  <ViewerContextMenuItem :itemProps="itemProps" tooltip="Points options" :btn_image="btn_image">
+  <ViewerContextMenuItem
+    data-testid="meshPointsMenu"
+    :itemProps="itemProps"
+    :tooltip="tooltip"
+    :btn_image="btn_image"
+  >
     <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <ViewerOptionsVisibilitySwitch
+        data-testid="meshPointsVisibilitySwitch"
+        v-model="visibility"
+      />
       <template v-if="visibility">
         <v-row class="pa-0" align="center">
           <v-divider />
-          <v-col cols="auto" justify="center">
-            <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Size'" />
-          </v-col>
-          <v-col justify="center">
-            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
-          </v-col>
+          <ViewerOptionsSizeSlider data-testid="meshPointsSizeSlider" v-model="size" />
         </v-row>
         <v-row>
           <v-col>
@@ -90,6 +95,7 @@ const vertex_attribute_color_map = computed({
               v-model:vertex_attribute_name="vertex_attribute_name"
               v-model:vertex_attribute_range="vertex_attribute_range"
               v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+              :capabilities="{ vertex: { available: false } }"
             />
           </v-col>
         </v-row>

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

@@ -45,66 +45,26 @@ const textures = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const vertex_attribute_name = computed({
-  get: () => dataStyleStore.meshPolygonsVertexAttributeName(id.value),
-  set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsVertexAttributeName(id.value, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_range = computed({
-  get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
-  set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsVertexAttributeRange(id.value, newValue[0], newValue[1]);
-    hybridViewerStore.remoteRender();
-  },
-});
-const vertex_attribute_color_map = computed({
-  get: () => dataStyleStore.meshPolygonsVertexAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsVertexAttributeColorMap(id.value, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-const polygon_attribute_name = computed({
-  get: () => dataStyleStore.meshPolygonsPolygonAttributeName(id.value),
-  set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsPolygonAttributeName(id.value, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
-const polygon_attribute_range = computed({
-  get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
-  set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsPolygonAttributeRange(id.value, newValue[0], newValue[1]);
-    hybridViewerStore.remoteRender();
-  },
-});
-const polygon_attribute_color_map = computed({
-  get: () => dataStyleStore.meshPolygonsPolygonAttributeColorMap(id.value),
-  set: async (newValue) => {
-    await dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(id.value, newValue);
-    hybridViewerStore.remoteRender();
-  },
-});
 </script>
 
 <template>
-  <ViewerContextMenuItem :itemProps="itemProps" :tooltip="tooltip" :btn_image="btn_image">
+  <ViewerContextMenuItem
+    data-testid="meshPolygonsMenu"
+    :itemProps="itemProps"
+    :tooltip="tooltip"
+    :btn_image="btn_image"
+  >
     <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <ViewerOptionsVisibilitySwitch
+        data-testid="meshPolygonsVisibilitySwitch"
+        v-model="visibility"
+      />
       <template v-if="visibility">
         <ViewerOptionsColoringTypeSelector
           :id="id"
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
           v-model:textures="textures"
-          v-model:vertex_attribute_name="vertex_attribute_name"
-          v-model:vertex_attribute_range="vertex_attribute_range"
-          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
-          v-model:polygon_attribute_name="polygon_attribute_name"
-          v-model:polygon_attribute_range="polygon_attribute_range"
-          v-model:polygon_attribute_color_map="polygon_attribute_color_map"
         />
       </template>
     </template>

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

@@ -87,9 +87,17 @@ const polyhedron_attribute_color_map = computed({
 </script>
 
 <template>
-  <ViewerContextMenuItem :itemProps="itemProps" :tooltip="tooltip" :btn_image="btn_image">
+  <ViewerContextMenuItem
+    data-testid="meshPolyhedraMenu"
+    :itemProps="itemProps"
+    :tooltip="tooltip"
+    :btn_image="btn_image"
+  >
     <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <ViewerOptionsVisibilitySwitch
+        data-testid="meshPolyhedraVisibilitySwitch"
+        v-model="visibility"
+      />
       <template v-if="visibility">
         <ViewerOptionsColoringTypeSelector
           :id="id"
@@ -101,6 +109,10 @@ const polyhedron_attribute_color_map = computed({
           v-model:polyhedron_attribute_name="polyhedron_attribute_name"
           v-model:polyhedron_attribute_range="polyhedron_attribute_range"
           v-model:polyhedron_attribute_color_map="polyhedron_attribute_color_map"
+          :capabilities="{
+            vertex: { available: true, hasColorMap: false },
+            polyhedron: { available: true, hasColorMap: true },
+          }"
         />
       </template>
     </template>

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

@@ -1,6 +1,7 @@
 <script setup>
 import SurfacePoints from "@ogw_front/assets/viewer_svgs/surface_points.svg";
 import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
@@ -46,20 +47,7 @@ const size = computed({
       <template v-if="visibility">
         <v-row class="pa-0" align="center">
           <v-divider />
-          <v-col cols="auto" justify="center">
-            <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Size'" />
-          </v-col>
-          <v-col justify="center">
-            <v-slider
-              v-model="size"
-              hide-details
-              min="0"
-              max="20"
-              step="2"
-              thumb-color="black"
-              ticks
-            />
-          </v-col>
+          <ViewerOptionsSizeSlider data-testid="modelPointsSizeSlider" v-model="size" />
         </v-row>
       </template>
     </template>

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

@@ -29,17 +29,50 @@ const polyhedron_attribute_name = defineModel("polyhedron_attribute_name");
 const polyhedron_attribute_range = defineModel("polyhedron_attribute_range");
 const polyhedron_attribute_color_map = defineModel("polyhedron_attribute_color_map");
 
-const { id } = defineProps({
+const { id, capabilities } = defineProps({
   id: { type: String, required: true },
+  capabilities: {
+    type: Object,
+    default: () => ({}),
+  },
 });
 
-const has_color = computed(() => color.value !== undefined);
-const has_textures = computed(() => textures.value !== undefined);
-const has_vertex = computed(() => vertex_attribute_range.value !== undefined);
-const has_edge = computed(() => edge_attribute_range.value !== undefined);
-const has_cells = computed(() => cell_attribute_range.value !== undefined);
-const has_polygons = computed(() => polygon_attribute_range.value !== undefined);
-const has_polyhedra = computed(() => polyhedron_attribute_range.value !== undefined);
+function isAvailable(key) {
+  if (capabilities[key] && capabilities[key].available === false) {
+    return false;
+  }
+  return true;
+}
+
+function hasColorMap(key) {
+  if (capabilities[key] && capabilities[key].hasColorMap === false) {
+    return false;
+  }
+  return true;
+}
+
+const has_color = computed(() => color.value !== undefined && isAvailable("color"));
+const has_textures = computed(() => textures.value !== undefined && isAvailable("textures"));
+const has_vertex = computed(
+  () =>
+    vertex_attribute_range.value !== undefined && isAvailable("vertex") && hasColorMap("vertex"),
+);
+const has_edge = computed(
+  () => edge_attribute_range.value !== undefined && isAvailable("edge") && hasColorMap("edge"),
+);
+const has_cells = computed(
+  () => cell_attribute_range.value !== undefined && isAvailable("cell") && hasColorMap("cell"),
+);
+const has_polygons = computed(
+  () =>
+    polygon_attribute_range.value !== undefined && isAvailable("polygon") && hasColorMap("polygon"),
+);
+const has_polyhedra = computed(
+  () =>
+    polyhedron_attribute_range.value !== undefined &&
+    isAvailable("polyhedron") &&
+    hasColorMap("polyhedron"),
+);
 
 const color_dict = { name: "Color", value: "color" };
 const textures_dict = { name: "Textures", value: "textures" };
@@ -116,7 +149,7 @@ watch(coloring_style_label, (value) => {
           <template v-if="coloring_style_key === textures_dict['value']">
             <ViewerOptionsTexturesSelector v-model="textures" :id="id" />
           </template>
-          <template v-if="coloring_style_key === vertex_dict['value']">
+          <template v-if="coloring_style_key === vertex_dict['value'] && hasColorMap('vertex')">
             <ViewerOptionsAttributeSelector
               v-model:name="vertex_attribute_name"
               v-model:range="vertex_attribute_range"
@@ -125,7 +158,7 @@ watch(coloring_style_label, (value) => {
               :schema="back_schemas.opengeodeweb_back.vertex_attribute_names"
             />
           </template>
-          <template v-if="coloring_style_key === edge_dict['value']">
+          <template v-if="coloring_style_key === edge_dict['value'] && hasColorMap('edge')">
             <ViewerOptionsAttributeSelector
               v-model:name="edge_attribute_name"
               v-model:range="edge_attribute_range"
@@ -134,7 +167,7 @@ watch(coloring_style_label, (value) => {
               :schema="back_schemas.opengeodeweb_back.edge_attribute_names"
             />
           </template>
-          <template v-if="coloring_style_key === cell_dict['value']">
+          <template v-if="coloring_style_key === cell_dict['value'] && hasColorMap('cell')">
             <ViewerOptionsAttributeSelector
               v-model:name="cell_attribute_name"
               v-model:range="cell_attribute_range"
@@ -143,7 +176,7 @@ watch(coloring_style_label, (value) => {
               :schema="back_schemas.opengeodeweb_back.cell_attribute_names"
             />
           </template>
-          <template v-if="coloring_style_key === polygon_dict['value']">
+          <template v-if="coloring_style_key === polygon_dict['value'] && hasColorMap('polygon')">
             <ViewerOptionsAttributeSelector
               v-model:name="polygon_attribute_name"
               v-model:range="polygon_attribute_range"
@@ -152,7 +185,9 @@ watch(coloring_style_label, (value) => {
               :schema="back_schemas.opengeodeweb_back.polygon_attribute_names"
             />
           </template>
-          <template v-if="coloring_style_key === polyhedron_dict['value']">
+          <template
+            v-if="coloring_style_key === polyhedron_dict['value'] && hasColorMap('polyhedron')"
+          >
             <ViewerOptionsAttributeSelector
               v-model:name="polyhedron_attribute_name"
               v-model:range="polyhedron_attribute_range"

package/app/components/Viewer/Options/Sliders/Size.vue

@@ -0,0 +1,8 @@
+<script setup>
+import Slider from "./Slider";
+const size = defineModel();
+</script>
+
+<template>
+  <Slider v-model="size" :tooltip="'Size'" />
+</template>

package/app/components/Viewer/Options/Sliders/Slider.vue

@@ -0,0 +1,17 @@
+<script setup>
+import BasicSlider from "@ogw_front/components/Basic/Slider";
+
+const model = defineModel();
+const { tooltip } = defineProps({
+  tooltip: { type: String, required: true },
+});
+</script>
+
+<template>
+  <v-col cols="auto" justify="center">
+    <v-icon size="30" icon="mdi-ruler" v-tooltip:left="tooltip" />
+  </v-col>
+  <v-col justify="center">
+    <BasicSlider v-model="model" />
+  </v-col>
+</template>

package/app/components/Viewer/Options/Sliders/Width.vue

@@ -0,0 +1,8 @@
+<script setup>
+import Slider from "./Slider";
+const width = defineModel();
+</script>
+
+<template>
+  <Slider v-model="width" :tooltip="'Width'" />
+</template>

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

@@ -1,4 +1,6 @@
 <script setup>
+import BasicSwitch from "@ogw_front/components/Basic/Switch";
+
 const visibility = defineModel();
 </script>
 
@@ -8,7 +10,7 @@ const visibility = defineModel();
       <v-icon size="30" icon="mdi-eye" v-tooltip:left="'Visibility'" />
     </v-col>
     <v-col cols="auto" justify="center">
-      <v-switch v-model="visibility" inset hide-details />
+      <BasicSwitch v-model="visibility" />
     </v-col>
   </v-row>
 </template>

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

@@ -67,11 +67,7 @@ const vertex_attribute_color_map = computed({
 });
 </script>
 <template>
-  <ViewerContextMenuItem
-    :itemProps="itemProps"
-    tooltip="Points options"
-    :btn_image="PointSetPoints"
-  >
+  <ViewerContextMenuItem :itemProps="itemProps" :btn_image="PointSetPoints">
     <template #options>
       <ViewerOptionsVisibilitySwitch v-model="visibility" />
       <template v-if="visibility">
@@ -93,6 +89,7 @@ const vertex_attribute_color_map = computed({
               v-model:vertex_attribute_name="vertex_attribute_name"
               v-model:vertex_attribute_range="vertex_attribute_range"
               v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+              :vertex_has_colormap="true"
             />
           </v-col>
         </v-row>

package/app/components/Viewer/Surface/Triangulated/TrianglesOptions.vue

@@ -0,0 +1,11 @@
+<script setup>
+import ViewerSpecificPolygonsOptions from "@ogw_front/components/Viewer/Surface/PolygonsOptions";
+
+const { itemProps } = defineProps({
+  itemProps: { type: Object, required: true },
+});
+</script>
+
+<template>
+  <ViewerSpecificPolygonsOptions :itemProps="itemProps" tooltip="Triangles options" />
+</template>

package/app/stores/hybrid_viewer.js

@@ -170,6 +170,9 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   function setContainer(container) {
+    if (!container.value) {
+      return;
+    }
     genericRenderWindow.value.setContainer(container.value.$el);
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
     webGLRenderWindow.setUseBackgroundImage(true);

package/app/stores/menu.js

@@ -5,15 +5,13 @@ import PointSetPointsOptions from "@ogw_front/components/Viewer/PointSet/Specifi
 import EdgedCurveEdgesOptions from "@ogw_front/components/Viewer/EdgedCurve/SpecificEdgesOptions";
 import EdgedCurvePointsOptions from "@ogw_front/components/Viewer/EdgedCurve/PointsOptions";
 
-// PolygonalSurface components
-import PolygonalSurfaceEdgesOptions from "@ogw_front/components/Viewer/PolygonalSurface/EdgesOptions";
-import PolygonalSurfacePointsOptions from "@ogw_front/components/Viewer/PolygonalSurface/PointsOptions";
-import PolygonalSurfacePolygonsOptions from "@ogw_front/components/Viewer/PolygonalSurface/SpecificPolygonsOptions";
+// Surface components
+import SurfaceEdgesOptions from "@ogw_front/components/Viewer/Surface/EdgesOptions";
+import SurfacePointsOptions from "@ogw_front/components/Viewer/Surface/PointsOptions";
+import SurfacePolygonsOptions from "@ogw_front/components/Viewer/Surface/PolygonsOptions";
 
 // TriangulatedSurface components
-import TriangulatedSurfaceEdgesOptions from "@ogw_front/components/Viewer/TriangulatedSurface/EdgesOptions";
-import TriangulatedSurfacePointsOptions from "@ogw_front/components/Viewer/TriangulatedSurface/PointsOptions";
-import TriangulatedSurfaceTrianglesOptions from "@ogw_front/components/Viewer/TriangulatedSurface/TrianglesOptions";
+import TriangulatedSurfaceTrianglesOptions from "@ogw_front/components/Viewer/Surface/Triangulated/TrianglesOptions";
 
 // Grid 2D components
 import Grid2DCellsOptions from "@ogw_front/components/Viewer/Grid/2D/CellsOptions";
@@ -44,15 +42,11 @@ const PointSet_menu = [PointSetPointsOptions];
 
 const EdgedCurve_menu = [EdgedCurvePointsOptions, EdgedCurveEdgesOptions];
 
-const PolygonalSurface_menu = [
-  PolygonalSurfacePointsOptions,
-  PolygonalSurfaceEdgesOptions,
-  PolygonalSurfacePolygonsOptions,
-];
+const PolygonalSurface_menu = [SurfacePointsOptions, SurfaceEdgesOptions, SurfacePolygonsOptions];
 
 const TriangulatedSurface_menu = [
-  TriangulatedSurfacePointsOptions,
-  TriangulatedSurfaceEdgesOptions,
+  SurfacePointsOptions,
+  SurfaceEdgesOptions,
   TriangulatedSurfaceTrianglesOptions,
 ];