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

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/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/Options/AttributeSelector.vue

@@ -1,5 +1,7 @@
 <script setup>
+import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants";
 import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar.vue";
+import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
 import { getAttributeRange } from "@ogw_front/utils/attributes";
 import { useBackStore } from "@ogw_front/stores/back";
 
@@ -9,6 +11,7 @@ const attributeName = defineModel("attributeName", { type: String });
 const attributeItem = defineModel("attributeItem", { type: Number });
 const attributeRange = defineModel("attributeRange", { type: Array });
 const attributeColorMap = defineModel("attributeColorMap", { type: String });
+const attributeNoDataColor = defineModel("attributeNoDataColor", { type: Object });
 
 const { id, componentIds, schema } = defineProps({
   id: { type: String, required: true },
@@ -21,6 +24,10 @@ const attributes = ref([]);
 const currentAttribute = computed(() =>
   attributes.value.find((attr) => attr.attribute_name === attributeName.value),
 );
+const cssNoDataColor = computed(() => {
+  const { red, green, blue, alpha } = attributeNoDataColor.value ?? DEFAULT_NO_DATA_COLOR;
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+});
 const rangeMin = computed({
   get: () => (attributeRange.value ? attributeRange.value[0] : undefined),
   set: (val) => {
@@ -102,6 +109,9 @@ watch([attributeName, attributeItem, currentAttribute], () => {
   if (attributeColorMap.value === undefined) {
     attributeColorMap.value = "batlow";
   }
+  if (attributeNoDataColor.value === undefined) {
+    attributeNoDataColor.value = DEFAULT_NO_DATA_COLOR;
+  }
   if (!attributeRange.value || attributeRange.value[0] === undefined) {
     resetRange();
   }
@@ -131,6 +141,29 @@ watch([attributeName, attributeItem, currentAttribute], () => {
     class="mt-3"
     hide-details
   />
+  <div
+    v-if="currentAttribute && currentAttribute.no_data"
+    class="text-caption text-high-emphasis mt-1 d-flex align-center ga-1"
+    data-testid="noDataInfo"
+  >
+    <v-icon icon="mdi-information-outline" size="14" color="info" />
+    <span>Contains unmapped elements</span>
+    <v-menu :close-on-content-click="false">
+      <template #activator="{ props }">
+        <button
+          v-bind="props"
+          type="button"
+          class="color-picker-rect-btn ml-1"
+          :style="{ backgroundColor: cssNoDataColor }"
+          v-tooltip="'Change unmapped elements color'"
+          data-testid="noDataColorBtn"
+        />
+      </template>
+      <v-card class="pa-2">
+        <ViewerOptionsColorPicker v-model="attributeNoDataColor" disabled-alpha />
+      </v-card>
+    </v-menu>
+  </div>
   <ViewerOptionsAttributeColorBar
     v-if="attributeName"
     v-model:minimum="rangeMin"
@@ -139,3 +172,23 @@ watch([attributeName, attributeItem, currentAttribute], () => {
     @reset="resetRange"
   />
 </template>
+
+<style scoped>
+.color-picker-rect-btn {
+  width: 26px;
+  height: 15px;
+  border-radius: 3px;
+  border: 2px solid rgba(255, 255, 255, 0.912);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  outline: none;
+  transition:
+    border-color 0.15s ease,
+    transform 0.15s ease;
+}
+
+.color-picker-rect-btn:hover {
+  border-color: rgba(255, 255, 255, 0.9);
+  transform: scale(1.1);
+}
+</style>