@geode/opengeodeweb-front 10.25.0-rc.7 → 10.25.0

package/app/utils/default_styles/models.js

@@ -1,86 +1,100 @@
 import {
+  BLOCKS_DEFAULT_ACTIVE_COLORING,
   BLOCKS_DEFAULT_COLOR,
   BLOCKS_DEFAULT_VISIBILITY,
+  CORNERS_DEFAULT_ACTIVE_COLORING,
   CORNERS_DEFAULT_COLOR,
   CORNERS_DEFAULT_VISIBILITY,
   EDGES_DEFAULT_VISIBILITY,
   EDGES_DEFAULT_WIDTH,
+  LINES_DEFAULT_ACTIVE_COLORING,
   LINES_DEFAULT_COLOR,
   LINES_DEFAULT_VISIBILITY,
+  MODEL_DEFAULT_ACTIVE_COLORING,
+  MODEL_DEFAULT_COLOR,
   POINTS_DEFAULT_SIZE,
   POINTS_DEFAULT_VISIBILITY,
+  SURFACES_DEFAULT_ACTIVE_COLORING,
   SURFACES_DEFAULT_COLOR,
   SURFACES_DEFAULT_VISIBILITY,
 } from "./constants";
 
 function modelCornersDefaultStyle(
   visibility = CORNERS_DEFAULT_VISIBILITY,
-  color = CORNERS_DEFAULT_COLOR,
+  constant = CORNERS_DEFAULT_COLOR,
 ) {
   return {
     visibility,
-    color,
-    color_mode: "constant",
-    vertex_attribute: {
-      name: undefined,
-      storedConfigs: {},
+    coloring: {
+      active: CORNERS_DEFAULT_ACTIVE_COLORING,
+      constant,
+      vertex: {
+        name: undefined,
+        storedConfigs: {},
+      },
     },
   };
 }
 
 function modelLinesDefaultStyle(
   visibility = LINES_DEFAULT_VISIBILITY,
-  color = LINES_DEFAULT_COLOR,
+  constant = LINES_DEFAULT_COLOR,
 ) {
   return {
     visibility,
-    color,
-    color_mode: "constant",
-    vertex_attribute: {
-      name: undefined,
-      storedConfigs: {},
-    },
-    edge_attribute: {
-      name: undefined,
-      storedConfigs: {},
+    coloring: {
+      active: LINES_DEFAULT_ACTIVE_COLORING,
+      constant,
+      vertex: {
+        name: undefined,
+        storedConfigs: {},
+      },
+      edge: {
+        name: undefined,
+        storedConfigs: {},
+      },
     },
   };
 }
 
 function modelSurfacesDefaultStyle(
   visibility = SURFACES_DEFAULT_VISIBILITY,
-  color = SURFACES_DEFAULT_COLOR,
+  constant = SURFACES_DEFAULT_COLOR,
 ) {
   return {
     visibility,
-    color,
-    color_mode: "constant",
-    vertex_attribute: {
-      name: undefined,
-      storedConfigs: {},
-    },
-    polygon_attribute: {
-      name: undefined,
-      storedConfigs: {},
+    coloring: {
+      active: SURFACES_DEFAULT_ACTIVE_COLORING,
+      constant,
+      vertex: {
+        name: undefined,
+        storedConfigs: {},
+      },
+      polygon: {
+        name: undefined,
+        storedConfigs: {},
+      },
     },
   };
 }
 
 function modelBlocksDefaultStyle(
   visibility = BLOCKS_DEFAULT_VISIBILITY,
-  color = BLOCKS_DEFAULT_COLOR,
+  constant = BLOCKS_DEFAULT_COLOR,
 ) {
   return {
     visibility,
-    color,
-    color_mode: "constant",
-    vertex_attribute: {
-      name: undefined,
-      storedConfigs: {},
-    },
-    polyhedron_attribute: {
-      name: undefined,
-      storedConfigs: {},
+    coloring: {
+      active: BLOCKS_DEFAULT_ACTIVE_COLORING,
+      constant,
+      vertex: {
+        name: undefined,
+        storedConfigs: {},
+      },
+      polyhedron: {
+        name: undefined,
+        storedConfigs: {},
+      },
     },
   };
 }
@@ -109,6 +123,10 @@ const DEFAULT_MODEL_COMPONENT_TYPE_STYLES = {
 function brepDefaultStyle() {
   return {
     visibility: true,
+    coloring: {
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
+      constant: MODEL_DEFAULT_COLOR,
+    },
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -121,6 +139,10 @@ function brepDefaultStyle() {
 function crossSectionDefaultStyle() {
   return {
     visibility: true,
+    coloring: {
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
+      constant: MODEL_DEFAULT_COLOR,
+    },
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -132,6 +154,10 @@ function crossSectionDefaultStyle() {
 function structuralModelDefaultStyle() {
   return {
     visibility: true,
+    coloring: {
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
+      constant: MODEL_DEFAULT_COLOR,
+    },
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -144,6 +170,10 @@ function structuralModelDefaultStyle() {
 function sectionDefaultStyle() {
   return {
     visibility: true,
+    coloring: {
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
+      constant: MODEL_DEFAULT_COLOR,
+    },
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -155,6 +185,10 @@ function sectionDefaultStyle() {
 function implicitCrossSectionDefaultStyle() {
   return {
     visibility: true,
+    coloring: {
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
+      constant: MODEL_DEFAULT_COLOR,
+    },
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -166,6 +200,10 @@ function implicitCrossSectionDefaultStyle() {
 function implicitStructuralModelDefaultStyle() {
   return {
     visibility: true,
+    coloring: {
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
+      constant: MODEL_DEFAULT_COLOR,
+    },
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),

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

@@ -13,7 +13,7 @@ export function useMeshCellsColorStyle() {
   const meshCellsCommonStyle = useMeshCellsCommonStyle();
 
   function meshCellsColor(id) {
-    return meshCellsCommonStyle.meshCellsColoring(id).color;
+    return meshCellsCommonStyle.meshCellsColoring(id).constant;
   }
   function setMeshCellsColor(id, color) {
     const params = { id, color };
@@ -25,7 +25,7 @@ export function useMeshCellsColorStyle() {
       {
         response_function: () =>
           meshCellsCommonStyle.mutateMeshCellsColoring(id, {
-            color,
+            constant: color,
           }),
       },
     );

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

@@ -31,28 +31,19 @@ export function useMeshCellsStyle() {
       coloring: { active: type },
     });
     console.log(setMeshCellsActiveColoring.name, { id }, type);
-    if (type === "color") {
+    if (type === "constant") {
       return meshCellsColorStyle.setMeshCellsColor(id, meshCellsColorStyle.meshCellsColor(id));
     }
     if (type === "textures") {
       const textures = meshCellsTexturesStore.meshCellsTextures(id);
-      if (textures === undefined) {
-        return;
-      }
       return meshCellsTexturesStore.setMeshCellsTextures(id, textures);
     }
     if (type === "vertex") {
       const name = meshCellsVertexAttributeStyle.meshCellsVertexAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshCellsVertexAttributeStyle.setMeshCellsVertexAttributeName(id, name);
     }
     if (type === "cell") {
       const name = meshCellsCellAttributeStyle.meshCellsCellAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshCellsCellAttributeStyle.setMeshCellsCellAttributeName(id, name);
     }
     throw new Error(`Unknown mesh cells coloring type: ${type}`);

package/internal/stores/data_style/mesh/edges/color.js

@@ -13,7 +13,7 @@ export function useMeshEdgesColorStyle() {
   const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
 
   function meshEdgesColor(id) {
-    return meshEdgesCommonStyle.meshEdgesColoring(id).color;
+    return meshEdgesCommonStyle.meshEdgesColoring(id).constant;
   }
   function setMeshEdgesColor(id, color) {
     const params = { id, color };
@@ -25,7 +25,7 @@ export function useMeshEdgesColorStyle() {
       {
         response_function: () =>
           meshEdgesCommonStyle.mutateMeshEdgesColoring(id, {
-            color,
+            constant: color,
           }),
       },
     );

package/internal/stores/data_style/mesh/edges/index.js

@@ -30,21 +30,15 @@ export function useMeshEdgesStyle() {
     await meshEdgesCommonStyle.mutateMeshEdgesStyle(id, {
       coloring: { active: type },
     });
-    if (type === "color") {
+    if (type === "constant") {
       return meshEdgesColorStyle.setMeshEdgesColor(id, meshEdgesColorStyle.meshEdgesColor(id));
     }
     if (type === "vertex") {
       const name = meshEdgesVertexAttributeStyle.meshEdgesVertexAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshEdgesVertexAttributeStyle.setMeshEdgesVertexAttributeName(id, name);
     }
     if (type === "edge") {
       const name = meshEdgesEdgeAttributeStyle.meshEdgesEdgeAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshEdgesEdgeAttributeStyle.setMeshEdgesEdgeAttributeName(id, name);
     }
     throw new Error(`Unknown mesh edges coloring type: ${type}`);

package/internal/stores/data_style/mesh/points/color.js

@@ -13,7 +13,7 @@ export function useMeshPointsColorStyle() {
   const meshPointsCommonStyle = useMeshPointsCommonStyle();
 
   function meshPointsColor(id) {
-    return meshPointsCommonStyle.meshPointsColoring(id).color;
+    return meshPointsCommonStyle.meshPointsColoring(id).constant;
   }
   function setMeshPointsColor(id, color) {
     const params = { id, color };
@@ -25,7 +25,7 @@ export function useMeshPointsColorStyle() {
       {
         response_function: () =>
           meshPointsCommonStyle.mutateMeshPointsColoring(id, {
-            color,
+            constant: color,
           }),
       },
     );

package/internal/stores/data_style/mesh/points/index.js

@@ -26,13 +26,10 @@ function useMeshPointsColoringStyle() {
     await meshPointsCommonStyle.mutateMeshPointsStyle(id, {
       coloring: { active: type },
     });
-    if (type === "color") {
+    if (type === "constant") {
       return meshPointsColorStyle.setMeshPointsColor(id, meshPointsColorStyle.meshPointsColor(id));
     } else if (type === "vertex") {
       const name = meshPointsVertexAttributeStyle.meshPointsVertexAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshPointsVertexAttributeStyle.setMeshPointsVertexAttributeName(id, name);
     }
     throw new Error(`Unknown mesh points coloring type: ${type}`);

package/internal/stores/data_style/mesh/polygons/color.js

@@ -13,7 +13,7 @@ export function useMeshPolygonsColorStyle() {
   const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle();
 
   function meshPolygonsColor(id) {
-    return meshPolygonsCommonStyle.meshPolygonsColoring(id).color;
+    return meshPolygonsCommonStyle.meshPolygonsColoring(id).constant;
   }
   function setMeshPolygonsColor(id, color) {
     const params = { id, color };
@@ -25,7 +25,7 @@ export function useMeshPolygonsColorStyle() {
       {
         response_function: () =>
           meshPolygonsCommonStyle.mutateMeshPolygonsColoring(id, {
-            color,
+            constant: color,
           }),
       },
     );

package/internal/stores/data_style/mesh/polygons/index.js

@@ -29,28 +29,19 @@ function useMeshPolygonsColoringStyle() {
     await meshPolygonsCommonStyle.mutateMeshPolygonsStyle(id, {
       coloring: { active: type },
     });
-    if (type === "color") {
+    if (type === "constant") {
       return meshPolygonsColorStyle.setMeshPolygonsColor(
         id,
         meshPolygonsColorStyle.meshPolygonsColor(id),
       );
     } else if (type === "textures") {
       const textures = meshPolygonsTexturesStyle.meshPolygonsTextures(id);
-      if (textures === undefined) {
-        return;
-      }
       return meshPolygonsTexturesStyle.setMeshPolygonsTextures(id, textures);
     } else if (type === "vertex") {
       const name = meshPolygonsVertexAttributeStyle.meshPolygonsVertexAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshPolygonsVertexAttributeStyle.setMeshPolygonsVertexAttributeName(id, name);
     } else if (type === "polygon") {
       const name = meshPolygonsPolygonAttributeStyle.meshPolygonsPolygonAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshPolygonsPolygonAttributeStyle.setMeshPolygonsPolygonAttributeName(id, name);
     }
     throw new Error(`Unknown mesh polygons coloring type: ${type}`);

package/internal/stores/data_style/mesh/polyhedra/color.js

@@ -13,7 +13,7 @@ export function useMeshPolyhedraColorStyle() {
   const meshPolyhedraCommonStyle = useMeshPolyhedraCommonStyle();
 
   function meshPolyhedraColor(id) {
-    return meshPolyhedraCommonStyle.meshPolyhedraColoring(id).color;
+    return meshPolyhedraCommonStyle.meshPolyhedraColoring(id).constant;
   }
   function setMeshPolyhedraColor(id, color) {
     const params = { id, color };
@@ -25,7 +25,7 @@ export function useMeshPolyhedraColorStyle() {
       {
         response_function: () =>
           meshPolyhedraCommonStyle.mutateMeshPolyhedraColoring(id, {
-            color,
+            constant: color,
           }),
       },
     );

package/internal/stores/data_style/mesh/polyhedra/index.js

@@ -30,7 +30,7 @@ export function useMeshPolyhedraStyle() {
       coloring: { active: type },
     });
     console.log(setMeshPolyhedraActiveColoring.name, { id }, type);
-    if (type === "color") {
+    if (type === "constant") {
       return meshPolyhedraColorStyle.setMeshPolyhedraColor(
         id,
         meshPolyhedraColorStyle.meshPolyhedraColor(id),
@@ -38,16 +38,10 @@ export function useMeshPolyhedraStyle() {
     }
     if (type === "vertex") {
       const name = meshPolyhedraVertexAttributeStyle.meshPolyhedraVertexAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshPolyhedraVertexAttributeStyle.setMeshPolyhedraVertexAttributeName(id, name);
     }
     if (type === "polyhedron") {
       const name = meshPolyhedraPolyhedronAttributeStyle.meshPolyhedraPolyhedronAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshPolyhedraPolyhedronAttributeStyle.setMeshPolyhedraPolyhedronAttributeName(
         id,
         name,

package/internal/stores/data_style/model/blocks/color.js

@@ -1,4 +1,6 @@
 import { useModelBlocksCommonStyle } from "./common";
+import { useModelBlocksPolyhedronAttribute } from "./polyhedron";
+import { useModelBlocksVertexAttribute } from "./vertex";
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
@@ -7,19 +9,96 @@ const schema = viewer_schemas.opengeodeweb_viewer.model.blocks.color;
 export function useModelBlocksColor() {
   const modelCommonStyle = useModelCommonStyle();
   const modelBlocksCommonStyle = useModelBlocksCommonStyle();
+  const modelBlocksVertexAttribute = useModelBlocksVertexAttribute();
+  const modelBlocksPolyhedronAttribute = useModelBlocksPolyhedronAttribute();
+
+  function modelBlockColoring(id, block_id) {
+    return modelBlocksCommonStyle.modelBlockStyle(id, block_id).coloring;
+  }
 
   function modelBlockColor(id, block_id) {
-    return modelBlocksCommonStyle.modelBlockStyle(id, block_id).color;
+    return modelBlockColoring(id, block_id).constant;
   }
 
-  function setModelBlocksColor(modelId, blocks_ids, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(modelId, blocks_ids, color, schema, color_mode);
+  function setModelBlocksColor(modelId, blocks_ids, color, activeColoring = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, blocks_ids, color, schema, activeColoring);
   }
 
-  function modelBlockColorMode(id, block_id) {
-    const mode = modelBlocksCommonStyle.modelBlockStyle(id, block_id).color_mode || "constant";
-    return mode === "constant" ? "color" : mode;
+  function modelBlockActiveColoring(id, block_id) {
+    return modelBlockColoring(id, block_id).active;
+  }
+
+  async function setModelBlocksActiveColoring(modelId, blocks_ids, activeColoring) {
+    await modelCommonStyle.mutateComponentStyles(modelId, blocks_ids, {
+      coloring: { active: activeColoring },
+    });
+    if (activeColoring === "constant" || activeColoring === "random") {
+      const color = modelBlockColor(modelId, blocks_ids[0]);
+      return setModelBlocksColor(modelId, blocks_ids, color, activeColoring);
+    }
+
+    if (activeColoring === "vertex") {
+      const name = modelBlocksVertexAttribute.modelBlocksVertexAttributeName(
+        modelId,
+        blocks_ids[0],
+      );
+      await modelBlocksVertexAttribute.setModelBlocksVertexAttributeName(modelId, blocks_ids, name);
+      const [min, max] = modelBlocksVertexAttribute.modelBlocksVertexAttributeRange(
+        modelId,
+        blocks_ids[0],
+      );
+      await modelBlocksVertexAttribute.setModelBlocksVertexAttributeRange(
+        modelId,
+        blocks_ids,
+        min,
+        max,
+      );
+      const colorMap = modelBlocksVertexAttribute.modelBlocksVertexAttributeColorMap(
+        modelId,
+        blocks_ids[0],
+      );
+      await modelBlocksVertexAttribute.setModelBlocksVertexAttributeColorMap(
+        modelId,
+        blocks_ids,
+        colorMap,
+      );
+    } else if (activeColoring === "polyhedron") {
+      const name = modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeName(
+        modelId,
+        blocks_ids[0],
+      );
+      await modelBlocksPolyhedronAttribute.setModelBlocksPolyhedronAttributeName(
+        modelId,
+        blocks_ids,
+        name,
+      );
+      const [min, max] = modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeRange(
+        modelId,
+        blocks_ids[0],
+      );
+      await modelBlocksPolyhedronAttribute.setModelBlocksPolyhedronAttributeRange(
+        modelId,
+        blocks_ids,
+        min,
+        max,
+      );
+      const colorMap = modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeColorMap(
+        modelId,
+        blocks_ids[0],
+      );
+      await modelBlocksPolyhedronAttribute.setModelBlocksPolyhedronAttributeColorMap(
+        modelId,
+        blocks_ids,
+        colorMap,
+      );
+    }
   }
 
-  return { setModelBlocksColor, modelBlockColor, modelBlockColorMode };
+  return {
+    setModelBlocksColor,
+    modelBlockColoring,
+    modelBlockColor,
+    modelBlockActiveColoring,
+    setModelBlocksActiveColoring,
+  };
 }

package/internal/stores/data_style/model/blocks/common.js

@@ -16,18 +16,27 @@ export function useModelBlocksCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelBlocksStyle(id, blocks_ids, values) {
-    return modelCommonStyle.mutateComponentStyles(id, blocks_ids, values);
+  function modelBlockColoring(id, block_id) {
+    return modelBlockStyle(id, block_id).coloring;
   }
 
-  function mutateModelBlockStyle(id, block_id, values) {
-    return modelCommonStyle.mutateComponentStyle(id, block_id, values);
+  function mutateModelBlocksColoring(id, blocks_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, blocks_ids, {
+      coloring: values,
+    });
+  }
+
+  function mutateModelBlockColoring(id, block_id, values) {
+    return modelCommonStyle.mutateComponentStyle(id, block_id, {
+      coloring: values,
+    });
   }
 
   return {
     modelBlocksStyle,
     modelBlockStyle,
-    mutateModelBlocksStyle,
-    mutateModelBlockStyle,
+    modelBlockColoring,
+    mutateModelBlocksColoring,
+    mutateModelBlockColoring,
   };
 }

package/internal/stores/data_style/model/blocks/index.js

@@ -36,34 +36,36 @@ export function useModelBlocksStyle() {
       }
       visibilityGroups[visibility].push(block_id);
 
-      const color_mode = style.color_mode || "constant";
-      if (color_mode === "constant" || color_mode === "random") {
-        const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+      const coloring = modelColorStyle.modelBlockColoring(modelId, block_id);
+      const activeColoring = modelColorStyle.modelBlockActiveColoring(modelId, block_id);
+      if (activeColoring === "constant") {
+        const color = modelColorStyle.modelBlockColor(modelId, block_id);
+        const color_key = JSON.stringify(color);
         if (!colorGroups[color_key]) {
-          colorGroups[color_key] = { color_mode, color: style.color, blocks_ids: [] };
+          colorGroups[color_key] = { activeColoring, color, blocks_ids: [] };
         }
         colorGroups[color_key].blocks_ids.push(block_id);
+      } else if (activeColoring === "random") {
+        if (!colorGroups["random"]) {
+          colorGroups["random"] = { activeColoring, color: undefined, blocks_ids: [] };
+        }
+        colorGroups["random"].blocks_ids.push(block_id);
       } else {
-        const attributeTypeKey = `${color_mode}_attribute`;
-        const attributeStyle = style[attributeTypeKey] || {};
+        const attributeStyle = coloring[activeColoring];
         const { name } = attributeStyle;
-        if (name) {
-          const storedConfig =
-            (attributeStyle.storedConfigs && attributeStyle.storedConfigs[name]) || {};
-          const { minimum, maximum, colorMap } = storedConfig;
-          const attributeGroupKey = `${color_mode}_${name}_${colorMap}_${minimum}_${maximum}`;
-          if (!attributeGroups[attributeGroupKey]) {
-            attributeGroups[attributeGroupKey] = {
-              color_mode,
-              name,
-              minimum,
-              maximum,
-              colorMap,
-              blocks_ids: [],
-            };
-          }
-          attributeGroups[attributeGroupKey].blocks_ids.push(block_id);
+        const { minimum, maximum, colorMap } = attributeStyle.storedConfigs[name];
+        const attributeGroupKey = `${activeColoring}_${name}_${colorMap}_${minimum}_${maximum}`;
+        if (!attributeGroups[attributeGroupKey]) {
+          attributeGroups[attributeGroupKey] = {
+            activeColoring,
+            name,
+            minimum,
+            maximum,
+            colorMap,
+            blocks_ids: [],
+          };
         }
+        attributeGroups[attributeGroupKey].blocks_ids.push(block_id);
       }
     }
 
@@ -71,12 +73,12 @@ export function useModelBlocksStyle() {
       ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
         modelVisibilityStyle.setModelBlocksVisibility(modelId, ids, visibility === "true"),
       ),
-      ...Object.values(colorGroups).map(({ color_mode, color, blocks_ids: ids }) =>
-        modelColorStyle.setModelBlocksColor(modelId, ids, color, color_mode),
+      ...Object.values(colorGroups).map(({ activeColoring, color, blocks_ids: ids }) =>
+        modelColorStyle.setModelBlocksColor(modelId, ids, color, activeColoring),
       ),
       ...Object.values(attributeGroups).flatMap(
-        ({ color_mode, name, minimum, maximum, colorMap, blocks_ids: ids }) => {
-          const isVertex = color_mode === "vertex";
+        ({ activeColoring, name, minimum, maximum, colorMap, blocks_ids: ids }) => {
+          const isVertex = activeColoring === "vertex";
           const attributeStyle = isVertex
             ? modelBlocksVertexAttribute
             : modelBlocksPolyhedronAttribute;