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

package/app/components/Viewer/ObjectTree/Box.vue

@@ -177,5 +177,7 @@ watch(
   background-color: rgba(255, 255, 255, 0.05);
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   flex-shrink: 0;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
 }
 </style>

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>

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

@@ -1,5 +1,12 @@
 <script setup>
 // oxlint-disable id-length
+defineProps({
+  disabledAlpha: {
+    type: Boolean,
+    default: false,
+  },
+});
+
 const colorPickerRef = useTemplateRef("colorPickerRef");
 const model = defineModel({ type: Object });
 const { pressed } = useMousePressed({ target: colorPickerRef });
@@ -53,8 +60,9 @@ watch(pressed, (value) => {
     canvas-height="75"
     hide-inputs
     hide-eye-dropper
+    :disabled-alpha="disabledAlpha"
     width="220"
-    mode="rgba"
+    :mode="disabledAlpha ? 'rgb' : 'rgba'"
     class="mx-auto"
   />
 </template>

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

@@ -13,21 +13,29 @@ const vertex_attribute_name = defineModel("vertex_attribute_name", { type: Strin
 const vertex_attribute_item = defineModel("vertex_attribute_item", { type: Number });
 const vertex_attribute_range = defineModel("vertex_attribute_range", { type: Array });
 const vertex_attribute_color_map = defineModel("vertex_attribute_color_map", { type: String });
+const vertex_attribute_no_data_color = defineModel("vertex_attribute_no_data_color", {
+  type: Object,
+});
 
 const edge_attribute_name = defineModel("edge_attribute_name", { type: String });
 const edge_attribute_item = defineModel("edge_attribute_item", { type: Number });
 const edge_attribute_range = defineModel("edge_attribute_range", { type: Array });
 const edge_attribute_color_map = defineModel("edge_attribute_color_map", { type: String });
+const edge_attribute_no_data_color = defineModel("edge_attribute_no_data_color", { type: Object });
 
 const cell_attribute_name = defineModel("cell_attribute_name", { type: String });
 const cell_attribute_item = defineModel("cell_attribute_item", { type: Number });
 const cell_attribute_range = defineModel("cell_attribute_range", { type: Array });
 const cell_attribute_color_map = defineModel("cell_attribute_color_map", { type: String });
+const cell_attribute_no_data_color = defineModel("cell_attribute_no_data_color", { type: Object });
 
 const polygon_attribute_name = defineModel("polygon_attribute_name", { type: String });
 const polygon_attribute_item = defineModel("polygon_attribute_item", { type: Number });
 const polygon_attribute_range = defineModel("polygon_attribute_range", { type: Array });
 const polygon_attribute_color_map = defineModel("polygon_attribute_color_map", { type: String });
+const polygon_attribute_no_data_color = defineModel("polygon_attribute_no_data_color", {
+  type: Object,
+});
 
 const polyhedron_attribute_name = defineModel("polyhedron_attribute_name", { type: String });
 const polyhedron_attribute_item = defineModel("polyhedron_attribute_item", { type: Number });
@@ -35,6 +43,9 @@ const polyhedron_attribute_range = defineModel("polyhedron_attribute_range", { t
 const polyhedron_attribute_color_map = defineModel("polyhedron_attribute_color_map", {
   type: String,
 });
+const polyhedron_attribute_no_data_color = defineModel("polyhedron_attribute_no_data_color", {
+  type: Object,
+});
 
 const { id, componentIds, capabilities, schemas, allowRandom } = defineProps({
   id: { type: String, required: true },
@@ -214,6 +225,7 @@ watch(
           v-model:attributeItem="vertex_attribute_item"
           v-model:attributeRange="vertex_attribute_range"
           v-model:attributeColorMap="vertex_attribute_color_map"
+          v-model:attributeNoDataColor="vertex_attribute_no_data_color"
           :id="id"
           :componentIds="componentIds"
           :schema="vertexSchema"
@@ -225,6 +237,7 @@ watch(
           v-model:attributeItem="edge_attribute_item"
           v-model:attributeRange="edge_attribute_range"
           v-model:attributeColorMap="edge_attribute_color_map"
+          v-model:attributeNoDataColor="edge_attribute_no_data_color"
           :id="id"
           :componentIds="componentIds"
           :schema="edgeSchema"
@@ -236,6 +249,7 @@ watch(
           v-model:attributeItem="cell_attribute_item"
           v-model:attributeRange="cell_attribute_range"
           v-model:attributeColorMap="cell_attribute_color_map"
+          v-model:attributeNoDataColor="cell_attribute_no_data_color"
           :id="id"
           :componentIds="componentIds"
           :schema="cellSchema"
@@ -247,6 +261,7 @@ watch(
           v-model:attributeItem="polygon_attribute_item"
           v-model:attributeRange="polygon_attribute_range"
           v-model:attributeColorMap="polygon_attribute_color_map"
+          v-model:attributeNoDataColor="polygon_attribute_no_data_color"
           :id="id"
           :componentIds="componentIds"
           :schema="polygonSchema"
@@ -258,6 +273,7 @@ watch(
           v-model:attributeItem="polyhedron_attribute_item"
           v-model:attributeRange="polyhedron_attribute_range"
           v-model:attributeColorMap="polyhedron_attribute_color_map"
+          v-model:attributeNoDataColor="polyhedron_attribute_no_data_color"
           :id="id"
           :componentIds="componentIds"
           :schema="polyhedronSchema"

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

@@ -91,6 +91,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>
   <ViewerContextMenuItem
@@ -115,6 +124,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"
           :vertex_has_colormap="true"
         />
       </template>

package/app/components/Viewer/Solid/SpecificPolyhedraOptions.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>
   <ViewerContextMenuItem
@@ -142,10 +160,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"
         />
       </template>
     </template>

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

@@ -91,6 +91,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) => {
@@ -127,6 +136,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>
@@ -151,10 +169,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"
         />
       </template>
     </template>

package/app/composables/clipping_planes_widget.js

@@ -210,11 +210,10 @@ function useClippingPlanesWidget({
       maxDistance = localRenderWindow.getRenderer().getActiveCamera().getDistance();
     }
   }
+
   function initLocalWidget(container) {
     cleanupLocalWidget();
-    container.addEventListener("wheel", (event) => event.stopPropagation(), {
-      passive: true,
-    });
+    container.addEventListener("wheel", (event) => event.stopPropagation(), { passive: true });
     localRenderWindow = vtkGenericRenderWindow({
       background: [0, 0, 0, 0],
       listenWindowResize: false,
@@ -223,16 +222,13 @@ function useClippingPlanesWidget({
     const camera = localRenderWindow.getRenderer().getActiveCamera();
     camera.onModified(() => limitCameraZoomOut(camera));
     const canvas = localRenderWindow.getApiSpecificRenderWindow().getCanvas();
-    Object.assign(canvas.style, {
-      width: "100%",
-      height: "100%",
-      background: "transparent",
-    });
+    Object.assign(canvas.style, { width: "100%", height: "100%", background: "transparent" });
     localRenderWindow.resize();
     widgetManager = vtkWidgetManager();
     widgetManager.setRenderer(localRenderWindow.getRenderer());
     updateWidgetPlacement();
   }
+
   function isFromWidget() {
     return fromWidget;
   }

package/app/composables/tree_keyboard_nav.js

@@ -23,8 +23,9 @@ export function useTreeKeyboardNav(
   toggleOpen,
   handleItemClick,
   getScrollInfo,
+  externalFocusedIndex,
 ) {
-  const focusedIndex = ref(-1);
+  const focusedIndex = externalFocusedIndex || ref(-1);
 
   function findParentIndex(item, currentIndex) {
     for (let index = currentIndex - 1; index >= 0; index -= 1) {

package/app/stores/data.js

@@ -196,13 +196,16 @@ export const useDataStore = defineStore("data", () => {
     await model_components_db.where("id").equals(modelId).delete();
     await database.model_components_relation.where("id").equals(modelId).delete();
   }
+
   async function deleteItem(id) {
     await data_db.delete(id);
     await deleteModelComponents(id);
   }
+
   async function updateItem(id, changes) {
     await data_db.update(id, changes);
   }
+
   async function getAllModelComponentsViewerIds(modelId) {
     const components = await model_components_db.where("id").equals(modelId).toArray();
     return components.map((component) => Math.trunc(Number(component.viewer_id)));
@@ -224,11 +227,13 @@ export const useDataStore = defineStore("data", () => {
       modelComponentsRelations,
     };
   }
+
   async function clear() {
     await data_db.clear();
     await model_components_db.clear();
     await model_components_relation_db.clear();
   }
+
   async function importStores(snapshot) {
     await clear();
     await model_components_db.bulkPut(snapshot.modelComponents);

package/app/utils/default_styles/constants.js

@@ -39,6 +39,8 @@ const DEFAULT_MODEL_COMPONENT_TYPE_COLORS = {
   Block: BLOCKS_DEFAULT_COLOR,
 };
 
+const DEFAULT_NO_DATA_COLOR = { red: 128, green: 128, blue: 128, alpha: 1 };
+
 export {
   POINTS_DEFAULT_VISIBILITY,
   POINTS_DEFAULT_SIZE,
@@ -69,4 +71,5 @@ export {
   MODEL_DEFAULT_COLOR,
   MESH_DEFAULT_ACTIVE_COLORING,
   MODEL_DEFAULT_ACTIVE_COLORING,
+  DEFAULT_NO_DATA_COLOR,
 };

package/app/utils/default_styles/index.js

@@ -55,5 +55,6 @@ export {
   DEFAULT_MODEL_COMPONENT_TYPE_COLORS,
   MODEL_DEFAULT_COLOR,
   MODEL_DEFAULT_ACTIVE_COLORING,
+  DEFAULT_NO_DATA_COLOR,
 } from "./constants";
 export { getDefaultStyle };

package/app/utils/extension.js

@@ -13,6 +13,7 @@ async function uploadExtension(file) {
   const appStore = useAppStore();
   await appStore.upload(file);
 }
+
 function runExtensions() {
   const appStore = useAppStore();
   const { projectFolderPath } = appStore;
@@ -29,6 +30,22 @@ function runExtensions() {
     params,
   });
 }
+
+function downloadExtension({ url, extensionFileName }) {
+  const appStore = useAppStore();
+  const { PROJECT: projectName } = useRuntimeConfig().public;
+  const schema = opengeodeweb_front_schemas.api.microservice.extensions.download;
+  const params = {
+    projectName,
+    url,
+    extensionFileName,
+  };
+  return appStore.request({
+    schema,
+    params,
+  });
+}
+
 async function registerRunningExtensions() {
   const appStore = useAppStore();
   const infraStore = useInfraStore();
@@ -55,28 +72,17 @@ async function registerRunningExtensions() {
     }),
   );
 }
+
 async function importExtensionFile(file) {
   await uploadExtension(file);
   return registerRunningExtensions();
 }
-function downloadExtension({ url, extensionFileName }) {
-  const appStore = useAppStore();
-  const { PROJECT: projectName } = useRuntimeConfig().public;
-  const schema = opengeodeweb_front_schemas.api.microservice.extensions.download;
-  const params = {
-    projectName,
-    url,
-    extensionFileName,
-  };
-  return appStore.request({
-    schema,
-    params,
-  });
-}
+
 async function importExtensionURL(url) {
   await downloadExtension(url);
   return registerRunningExtensions();
 }
+
 async function unloadExtension(extensionId) {
   const appStore = useAppStore();
   console.log("[ExtensionManager] Unloading extension:", extensionId);
@@ -101,6 +107,7 @@ async function unloadExtension(extensionId) {
   console.log("[ExtensionManager] Extension unloaded:", extensionId);
   return true;
 }
+
 function killExtension(extensionId) {
   const appStore = useAppStore();
   const { projectFolderPath } = appStore;

package/app/utils/import_workflow.js

@@ -69,12 +69,14 @@ async function importFile(filename, geode_object_type) {
   });
   return importItem(response);
 }
+
 async function importWorkflow(files) {
   const chunk_size = 5;
   const chunks = [];
   for (let i = 0; i < files.length; i += chunk_size) {
     chunks.push(files.slice(i, i + chunk_size));
   }
+
   const results = [];
   async function processChunk(chunkIndex) {
     if (chunkIndex >= chunks.length) {
@@ -92,10 +94,9 @@ async function importWorkflow(files) {
   hybridViewerStore.remoteRender();
   return results;
 }
+
 async function importWorkflowFromSnapshot(items) {
-  console.log("[importWorkflowFromSnapshot] start", {
-    count: items?.length,
-  });
+  console.log("[importWorkflowFromSnapshot] start", { count: items?.length });
   const hybridViewerStore = useHybridViewerStore();
   const chunk_size = 5;
   const chunks = [];

package/internal/database/database.js

@@ -58,6 +58,7 @@ class Database extends BaseDatabase {
     }
   }
 }
+
 // oxlint-disable-next-line no-top-level-await
 await Dexie.delete("Database");
 databaseContainer.instance = new Database();

package/internal/stores/data_style/mesh/cells/cell.js

@@ -1,3 +1,4 @@
+import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants";
 // Third party imports
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
@@ -34,6 +35,7 @@ function useMeshCellsCellAttributeStyle() {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
+      no_data_color: DEFAULT_NO_DATA_COLOR,
     };
   }
   function mutateMeshCellsCellStyle(id, values) {
@@ -67,7 +69,10 @@ function useMeshCellsCellAttributeStyle() {
     const { item, name } = meshCellsCellAttribute(id);
     return item ?? meshCellsCellAttributeLastItem(id, name);
   }
-  function setMeshCellsCellAttribute(id, { name, item, minimum, maximum, colorMap }) {
+  function setMeshCellsCellAttribute(
+    id,
+    { name, item, minimum, maximum, colorMap, no_data_color = DEFAULT_NO_DATA_COLOR },
+  ) {
     mutateMeshCellsCellStyle(id, {
       name,
       item,
@@ -76,6 +81,7 @@ function useMeshCellsCellAttributeStyle() {
       minimum,
       maximum,
       colorMap,
+      no_data_color,
     });
     const points = getRGBPointsFromPreset(colorMap);
     const schema = meshCellsCellAttributeSchemas.attribute;
@@ -86,6 +92,7 @@ function useMeshCellsCellAttributeStyle() {
       points,
       minimum,
       maximum,
+      no_data_color,
     };
     return viewerStore.request({
       schema,
@@ -102,6 +109,7 @@ function useMeshCellsCellAttributeStyle() {
       minimum: storedConfig.minimum,
       maximum: storedConfig.maximum,
       colorMap: storedConfig.colorMap,
+      no_data_color: storedConfig.no_data_color,
     };
     if (isMeshCellsCellAttributeValid(attribute)) {
       return setMeshCellsCellAttribute(id, attribute);
@@ -130,7 +138,9 @@ function useMeshCellsCellAttributeStyle() {
   async function setMeshCellsCellAttributeRange(id, minimum, maximum) {
     const name = meshCellsCellAttributeName(id);
     const item = meshCellsCellAttributeItem(id);
+    const storedConfig = meshCellsCellAttributeStoredConfig(id, name, item);
     await setMeshCellsCellAttributeStoredConfig(id, name, item, {
+      ...storedConfig,
       minimum,
       maximum,
     });
@@ -145,11 +155,29 @@ function useMeshCellsCellAttributeStyle() {
   async function setMeshCellsCellAttributeColorMap(id, colorMap) {
     const name = meshCellsCellAttributeName(id);
     const item = meshCellsCellAttributeItem(id);
+    const storedConfig = meshCellsCellAttributeStoredConfig(id, name, item);
     await setMeshCellsCellAttributeStoredConfig(id, name, item, {
+      ...storedConfig,
       colorMap,
     });
     return applyCellAttribute(id);
   }
+  function meshCellsCellAttributeNoDataColor(id) {
+    const name = meshCellsCellAttributeName(id);
+    const item = meshCellsCellAttributeItem(id);
+    const storedConfig = meshCellsCellAttributeStoredConfig(id, name, item);
+    return storedConfig.no_data_color;
+  }
+  async function setMeshCellsCellAttributeNoDataColor(id, no_data_color) {
+    const name = meshCellsCellAttributeName(id);
+    const item = meshCellsCellAttributeItem(id);
+    const storedConfig = meshCellsCellAttributeStoredConfig(id, name, item);
+    await setMeshCellsCellAttributeStoredConfig(id, name, item, {
+      ...storedConfig,
+      no_data_color,
+    });
+    return applyCellAttribute(id);
+  }
   return {
     meshCellsCellAttributeName,
     meshCellsCellAttributeItem,
@@ -161,6 +189,8 @@ function useMeshCellsCellAttributeStyle() {
     setMeshCellsCellAttributeItem,
     setMeshCellsCellAttributeRange,
     setMeshCellsCellAttributeColorMap,
+    meshCellsCellAttributeNoDataColor,
+    setMeshCellsCellAttributeNoDataColor,
   };
 }
 export { isMeshCellsCellAttributeValid, useMeshCellsCellAttributeStyle };