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

package/app/assets/css/main.css

@@ -0,0 +1,24 @@
+.v-card-title.text-caption {
+  font-size: 0.75rem !important;
+  line-height: 1.25rem !important;
+}
+
+.v-card-title.text-subtitle-2 {
+  font-size: 0.875rem !important;
+  line-height: 1.375rem !important;
+}
+
+.v-card-title.text-subtitle-1 {
+  font-size: 1rem !important;
+  line-height: 1.5rem !important;
+}
+
+.v-card-title.text-body-2 {
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
+}
+
+.v-card-title.text-body-1 {
+  font-size: 1rem !important;
+  line-height: 1.5rem !important;
+}

package/app/components/ClippingPlanes.vue

@@ -39,7 +39,7 @@ const {
   selectedDatasetIds,
   allItems,
   hybridViewerStore,
-  debouncedApply: () => debouncedApply(),
+  debouncedApply: (...args) => debouncedApply?.(...args),
 });
 
 async function applyClippingPlanes() {

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

@@ -91,6 +91,15 @@ const vertex_attribute_color_map = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const vertex_attribute_no_data_color = computed({
+  get: () => dataStyleStore.meshEdgesVertexAttributeNoDataColor(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesVertexAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const edge_attribute_name = computed({
   get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
   set: async (newValue) => {
@@ -127,6 +136,15 @@ const edge_attribute_color_map = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const edge_attribute_no_data_color = computed({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeNoDataColor(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 </script>
 
 <template>
@@ -149,10 +167,12 @@ const edge_attribute_color_map = computed({
           v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
           v-model:edge_attribute_name="edge_attribute_name"
           v-model:edge_attribute_item="edge_attribute_item"
           v-model:edge_attribute_range="edge_attribute_range"
           v-model:edge_attribute_color_map="edge_attribute_color_map"
+          v-model:edge_attribute_no_data_color="edge_attribute_no_data_color"
         />
       </template>
     </template>

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

@@ -92,6 +92,15 @@ const vertex_attribute_color_map = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const vertex_attribute_no_data_color = computed({
+  get: () => dataStyleStore.meshCellsVertexAttributeNoDataColor(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshCellsVertexAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const cell_attribute_name = computed({
   get: () => dataStyleStore.meshCellsCellAttributeName(id.value),
   set: async (newValue) => {
@@ -128,6 +137,15 @@ const cell_attribute_color_map = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const cell_attribute_no_data_color = computed({
+  get: () => dataStyleStore.meshCellsCellAttributeNoDataColor(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshCellsCellAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 </script>
 
 <template>
@@ -150,10 +168,12 @@ const cell_attribute_color_map = computed({
           v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
           v-model:cell_attribute_name="cell_attribute_name"
           v-model:cell_attribute_item="cell_attribute_item"
           v-model:cell_attribute_range="cell_attribute_range"
           v-model:cell_attribute_color_map="cell_attribute_color_map"
+          v-model:cell_attribute_no_data_color="cell_attribute_no_data_color"
         />
       </template>
     </template>

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

@@ -92,6 +92,15 @@ const vertex_attribute_color_map = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const vertex_attribute_no_data_color = computed({
+  get: () => dataStyleStore.meshEdgesVertexAttributeNoDataColor(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesVertexAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const edge_attribute_name = computed({
   get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
   set: async (newValue) => {
@@ -128,6 +137,15 @@ const edge_attribute_color_map = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const edge_attribute_no_data_color = computed({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeNoDataColor(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 </script>
 
 <template>
@@ -157,10 +175,12 @@ const edge_attribute_color_map = computed({
           v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
           v-model:edge_attribute_name="edge_attribute_name"
           v-model:edge_attribute_item="edge_attribute_item"
           v-model:edge_attribute_range="edge_attribute_range"
           v-model:edge_attribute_color_map="edge_attribute_color_map"
+          v-model:edge_attribute_no_data_color="edge_attribute_no_data_color"
         />
       </template>
     </template>

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

@@ -92,6 +92,15 @@ const vertex_attribute_color_map = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const vertex_attribute_no_data_color = computed({
+  get: () => dataStyleStore.meshPointsVertexAttributeNoDataColor(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPointsVertexAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 </script>
 
 <template>
@@ -121,6 +130,7 @@ const vertex_attribute_color_map = computed({
           v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
           :capabilities="{ vertex: { available: false } }"
         />
       </template>

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

@@ -93,6 +93,15 @@ const vertex_attribute_color_map = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const vertex_attribute_no_data_color = computed({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeNoDataColor(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsVertexAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const polygon_attribute_name = computed({
   get: () => dataStyleStore.meshPolygonsPolygonAttributeName(id.value),
   set: async (newValue) => {
@@ -129,6 +138,15 @@ const polygon_attribute_color_map = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const polygon_attribute_no_data_color = computed({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeNoDataColor(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsPolygonAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 </script>
 
 <template>
@@ -154,10 +172,12 @@ const polygon_attribute_color_map = computed({
           v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
           v-model:polygon_attribute_name="polygon_attribute_name"
           v-model:polygon_attribute_item="polygon_attribute_item"
           v-model:polygon_attribute_range="polygon_attribute_range"
           v-model:polygon_attribute_color_map="polygon_attribute_color_map"
+          v-model:polygon_attribute_no_data_color="polygon_attribute_no_data_color"
           :capabilities="capabilities"
         />
       </template>

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

@@ -82,6 +82,15 @@ const vertex_attribute_color_map = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const vertex_attribute_no_data_color = computed({
+  get: () => dataStyleStore.meshPolyhedraVertexAttributeNoDataColor(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraVertexAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const polyhedron_attribute_name = computed({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeName(id.value),
   set: async (newValue) => {
@@ -120,6 +129,15 @@ const polyhedron_attribute_color_map = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const polyhedron_attribute_no_data_color = computed({
+  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeNoDataColor(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeNoDataColor(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 </script>
 
 <template>
@@ -144,10 +162,12 @@ const polyhedron_attribute_color_map = computed({
           v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          v-model:vertex_attribute_no_data_color="vertex_attribute_no_data_color"
           v-model:polyhedron_attribute_name="polyhedron_attribute_name"
           v-model:polyhedron_attribute_item="polyhedron_attribute_item"
           v-model:polyhedron_attribute_range="polyhedron_attribute_range"
           v-model:polyhedron_attribute_color_map="polyhedron_attribute_color_map"
+          v-model:polyhedron_attribute_no_data_color="polyhedron_attribute_no_data_color"
           :capabilities="{
             vertex: { available: true, hasColorMap: true },
             polyhedron: { available: true, hasColorMap: true },

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

@@ -103,6 +103,18 @@ const blocksVertexAttributeColorMap = computed({
   },
 });
 
+const blocksVertexAttributeNoDataColor = computed({
+  get: () => dataStyleStore.modelBlocksVertexAttributeNoDataColor(modelId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksVertexAttributeNoDataColor(
+      modelId,
+      targetBlockIds,
+      newValue,
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const blocksPolyhedronAttributeName = computed({
   get: () => dataStyleStore.modelBlocksPolyhedronAttributeName(modelId),
   set: async (newValue) => {
@@ -144,6 +156,18 @@ const blocksPolyhedronAttributeColorMap = computed({
   },
 });
 
+const blocksPolyhedronAttributeNoDataColor = computed({
+  get: () => dataStyleStore.modelBlocksPolyhedronAttributeNoDataColor(modelId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksPolyhedronAttributeNoDataColor(
+      modelId,
+      targetBlockIds,
+      newValue,
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
 // Individual Attributes
 const vertexAttributeName = computed({
   get: () => dataStyleStore.modelBlocksVertexAttributeName(modelId, blockId),
@@ -182,6 +206,14 @@ const vertexAttributeColorMap = computed({
   },
 });
 
+const vertexAttributeNoDataColor = computed({
+  get: () => dataStyleStore.modelBlocksVertexAttributeNoDataColor(modelId, blockId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksVertexAttributeNoDataColor(modelId, [blockId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const polyhedronAttributeName = computed({
   get: () => dataStyleStore.modelBlocksPolyhedronAttributeName(modelId, blockId),
   set: async (newValue) => {
@@ -219,6 +251,14 @@ const polyhedronAttributeColorMap = computed({
   },
 });
 
+const polyhedronAttributeNoDataColor = computed({
+  get: () => dataStyleStore.modelBlocksPolyhedronAttributeNoDataColor(modelId, blockId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksPolyhedronAttributeNoDataColor(modelId, [blockId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const capabilities = {
   color: { available: true },
   textures: { available: false },
@@ -245,10 +285,12 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
       v-model:vertex_attribute_item="blocksVertexAttributeItem"
       v-model:vertex_attribute_range="blocksVertexAttributeRange"
       v-model:vertex_attribute_color_map="blocksVertexAttributeColorMap"
+      v-model:vertex_attribute_no_data_color="blocksVertexAttributeNoDataColor"
       v-model:polyhedron_attribute_name="blocksPolyhedronAttributeName"
       v-model:polyhedron_attribute_item="blocksPolyhedronAttributeItem"
       v-model:polyhedron_attribute_range="blocksPolyhedronAttributeRange"
       v-model:polyhedron_attribute_color_map="blocksPolyhedronAttributeColorMap"
+      v-model:polyhedron_attribute_no_data_color="blocksPolyhedronAttributeNoDataColor"
       :capabilities="capabilities"
       :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
       :allowRandom="true"
@@ -271,10 +313,12 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
       v-model:vertex_attribute_item="vertexAttributeItem"
       v-model:vertex_attribute_range="vertexAttributeRange"
       v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+      v-model:vertex_attribute_no_data_color="vertexAttributeNoDataColor"
       v-model:polyhedron_attribute_name="polyhedronAttributeName"
       v-model:polyhedron_attribute_item="polyhedronAttributeItem"
       v-model:polyhedron_attribute_range="polyhedronAttributeRange"
       v-model:polyhedron_attribute_color_map="polyhedronAttributeColorMap"
+      v-model:polyhedron_attribute_no_data_color="polyhedronAttributeNoDataColor"
       :capabilities="capabilities"
       :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
       :allowRandom="true"

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

@@ -103,6 +103,18 @@ const cornersVertexAttributeColorMap = computed({
   },
 });
 
+const cornersVertexAttributeNoDataColor = computed({
+  get: () => dataStyleStore.modelCornersVertexAttributeNoDataColor(modelId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelCornersVertexAttributeNoDataColor(
+      modelId,
+      targetCornerIds,
+      newValue,
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
 // Individual Attributes
 const vertexAttributeName = computed({
   get: () => dataStyleStore.modelCornersVertexAttributeName(modelId, cornerId),
@@ -141,6 +153,14 @@ const vertexAttributeColorMap = computed({
   },
 });
 
+const vertexAttributeNoDataColor = computed({
+  get: () => dataStyleStore.modelCornersVertexAttributeNoDataColor(modelId, cornerId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelCornersVertexAttributeNoDataColor(modelId, [cornerId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const capabilities = {
   color: { available: true },
   textures: { available: false },
@@ -166,6 +186,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
       v-model:vertex_attribute_item="cornersVertexAttributeItem"
       v-model:vertex_attribute_range="cornersVertexAttributeRange"
       v-model:vertex_attribute_color_map="cornersVertexAttributeColorMap"
+      v-model:vertex_attribute_no_data_color="cornersVertexAttributeNoDataColor"
       :capabilities="capabilities"
       :schemas="{ vertex: vertexSchema }"
       :allowRandom="true"
@@ -188,6 +209,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
       v-model:vertex_attribute_item="vertexAttributeItem"
       v-model:vertex_attribute_range="vertexAttributeRange"
       v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+      v-model:vertex_attribute_no_data_color="vertexAttributeNoDataColor"
       :capabilities="capabilities"
       :schemas="{ vertex: vertexSchema }"
       :allowRandom="true"

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

@@ -103,6 +103,14 @@ const linesVertexAttributeColorMap = computed({
   },
 });
 
+const linesVertexAttributeNoDataColor = computed({
+  get: () => dataStyleStore.modelLinesVertexAttributeNoDataColor(modelId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesVertexAttributeNoDataColor(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const linesEdgeAttributeName = computed({
   get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId),
   set: async (newValue) => {
@@ -140,6 +148,14 @@ const linesEdgeAttributeColorMap = computed({
   },
 });
 
+const linesEdgeAttributeNoDataColor = computed({
+  get: () => dataStyleStore.modelLinesEdgeAttributeNoDataColor(modelId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesEdgeAttributeNoDataColor(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 // Individual Attributes
 const vertexAttributeName = computed({
   get: () => dataStyleStore.modelLinesVertexAttributeName(modelId, lineId),
@@ -178,6 +194,14 @@ const vertexAttributeColorMap = computed({
   },
 });
 
+const vertexAttributeNoDataColor = computed({
+  get: () => dataStyleStore.modelLinesVertexAttributeNoDataColor(modelId, lineId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesVertexAttributeNoDataColor(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const edgeAttributeName = computed({
   get: () => dataStyleStore.modelLinesEdgeAttributeName(modelId, lineId),
   set: async (newValue) => {
@@ -215,6 +239,14 @@ const edgeAttributeColorMap = computed({
   },
 });
 
+const edgeAttributeNoDataColor = computed({
+  get: () => dataStyleStore.modelLinesEdgeAttributeNoDataColor(modelId, lineId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesEdgeAttributeNoDataColor(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const capabilities = {
   color: { available: true },
   textures: { available: false },
@@ -241,10 +273,12 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
       v-model:vertex_attribute_item="linesVertexAttributeItem"
       v-model:vertex_attribute_range="linesVertexAttributeRange"
       v-model:vertex_attribute_color_map="linesVertexAttributeColorMap"
+      v-model:vertex_attribute_no_data_color="linesVertexAttributeNoDataColor"
       v-model:edge_attribute_name="linesEdgeAttributeName"
       v-model:edge_attribute_item="linesEdgeAttributeItem"
       v-model:edge_attribute_range="linesEdgeAttributeRange"
       v-model:edge_attribute_color_map="linesEdgeAttributeColorMap"
+      v-model:edge_attribute_no_data_color="linesEdgeAttributeNoDataColor"
       :capabilities="capabilities"
       :schemas="{ vertex: vertexSchema, edge: edgeSchema }"
       :allowRandom="true"
@@ -267,10 +301,12 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
       v-model:vertex_attribute_item="vertexAttributeItem"
       v-model:vertex_attribute_range="vertexAttributeRange"
       v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+      v-model:vertex_attribute_no_data_color="vertexAttributeNoDataColor"
       v-model:edge_attribute_name="edgeAttributeName"
       v-model:edge_attribute_item="edgeAttributeItem"
       v-model:edge_attribute_range="edgeAttributeRange"
       v-model:edge_attribute_color_map="edgeAttributeColorMap"
+      v-model:edge_attribute_no_data_color="edgeAttributeNoDataColor"
       :capabilities="capabilities"
       :schemas="{ vertex: vertexSchema, edge: edgeSchema }"
       :allowRandom="true"

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

@@ -90,33 +90,33 @@ const modelVisibility = computed({
   },
 });
 
-const modelComponentsActiveColoring = computed({
-  get: () => dataStyleStore.getModelActiveColoring(modelId.value),
-  set: async (coloringType) => {
+const modelComponentsColor = computed({
+  get: () => dataStyleStore.getModelColor(modelId.value),
+  set: async (color) => {
     await dataStyleStore.mutateStyle(modelId.value, {
-      coloring: { active: coloringType },
+      coloring: { constant: color },
     });
     await dataStyleStore.setModelComponentsColor(
       modelId.value,
       selection.value,
-      dataStyleStore.getModelColor(modelId.value),
-      coloringType,
+      color,
+      dataStyleStore.getModelActiveColoring(modelId.value),
     );
     hybridViewerStore.remoteRender();
   },
 });
 
-const modelComponentsColor = computed({
-  get: () => dataStyleStore.getModelColor(modelId.value),
-  set: async (color) => {
+const modelComponentsActiveColoring = computed({
+  get: () => dataStyleStore.getModelActiveColoring(modelId.value),
+  set: async (coloringType) => {
     await dataStyleStore.mutateStyle(modelId.value, {
-      coloring: { constant: color },
+      coloring: { active: coloringType },
     });
     await dataStyleStore.setModelComponentsColor(
       modelId.value,
       selection.value,
-      color,
-      dataStyleStore.getModelActiveColoring(modelId.value),
+      dataStyleStore.getModelColor(modelId.value),
+      coloringType,
     );
     hybridViewerStore.remoteRender();
   },

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

@@ -107,6 +107,18 @@ const surfacesVertexAttributeColorMap = computed({
   },
 });
 
+const surfacesVertexAttributeNoDataColor = computed({
+  get: () => dataStyleStore.modelSurfacesVertexAttributeNoDataColor(modelId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesVertexAttributeNoDataColor(
+      modelId,
+      targetSurfaceIds,
+      newValue,
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const surfacesPolygonAttributeName = computed({
   get: () => dataStyleStore.modelSurfacesPolygonAttributeName(modelId),
   set: async (newValue) => {
@@ -148,6 +160,18 @@ const surfacesPolygonAttributeColorMap = computed({
   },
 });
 
+const surfacesPolygonAttributeNoDataColor = computed({
+  get: () => dataStyleStore.modelSurfacesPolygonAttributeNoDataColor(modelId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesPolygonAttributeNoDataColor(
+      modelId,
+      targetSurfaceIds,
+      newValue,
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
 // Individual Attributes
 const vertexAttributeName = computed({
   get: () => dataStyleStore.modelSurfacesVertexAttributeName(modelId, surfaceId),
@@ -186,6 +210,14 @@ const vertexAttributeColorMap = computed({
   },
 });
 
+const vertexAttributeNoDataColor = computed({
+  get: () => dataStyleStore.modelSurfacesVertexAttributeNoDataColor(modelId, surfaceId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesVertexAttributeNoDataColor(modelId, [surfaceId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const polygonAttributeName = computed({
   get: () => dataStyleStore.modelSurfacesPolygonAttributeName(modelId, surfaceId),
   set: async (newValue) => {
@@ -223,6 +255,18 @@ const polygonAttributeColorMap = computed({
   },
 });
 
+const polygonAttributeNoDataColor = computed({
+  get: () => dataStyleStore.modelSurfacesPolygonAttributeNoDataColor(modelId, surfaceId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesPolygonAttributeNoDataColor(
+      modelId,
+      [surfaceId],
+      newValue,
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const capabilities = {
   color: { available: true },
   textures: { available: false },
@@ -249,10 +293,12 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
       v-model:vertex_attribute_item="surfacesVertexAttributeItem"
       v-model:vertex_attribute_range="surfacesVertexAttributeRange"
       v-model:vertex_attribute_color_map="surfacesVertexAttributeColorMap"
+      v-model:vertex_attribute_no_data_color="surfacesVertexAttributeNoDataColor"
       v-model:polygon_attribute_name="surfacesPolygonAttributeName"
       v-model:polygon_attribute_item="surfacesPolygonAttributeItem"
       v-model:polygon_attribute_range="surfacesPolygonAttributeRange"
       v-model:polygon_attribute_color_map="surfacesPolygonAttributeColorMap"
+      v-model:polygon_attribute_no_data_color="surfacesPolygonAttributeNoDataColor"
       :capabilities="capabilities"
       :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
       :allowRandom="true"
@@ -275,10 +321,12 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
       v-model:vertex_attribute_item="vertexAttributeItem"
       v-model:vertex_attribute_range="vertexAttributeRange"
       v-model:vertex_attribute_color_map="vertexAttributeColorMap"
+      v-model:vertex_attribute_no_data_color="vertexAttributeNoDataColor"
       v-model:polygon_attribute_name="polygonAttributeName"
       v-model:polygon_attribute_item="polygonAttributeItem"
       v-model:polygon_attribute_range="polygonAttributeRange"
       v-model:polygon_attribute_color_map="polygonAttributeColorMap"
+      v-model:polygon_attribute_no_data_color="polygonAttributeNoDataColor"
       :capabilities="capabilities"
       :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
       :allowRandom="true"

package/app/components/Viewer/ObjectTree/Base/CommonTreeView.vue

@@ -54,8 +54,8 @@ const { virtualScrollRef, stickyHeader, handleScroll, scrollToIndex, getScrollIn
     actualItemProps,
   );
 
-const lastActiveIndex = ref(-1);
 const focusedIndex = ref(-1);
+const lastActiveIndex = ref(-1);
 
 function handleItemClick(item, index, event) {
   if (index !== undefined) {
@@ -110,6 +110,8 @@ const { handleKeyDown } = useTreeKeyboardNav(
   scrollToIndex,
   toggleOpen,
   handleItemClick,
+  getScrollInfo,
+  focusedIndex,
 );
 </script>