@geode/opengeodeweb-front 10.7.0 → 10.8.0-rc.2

package/app/components/ObjectSelector.vue

@@ -7,7 +7,6 @@ import { useGeodeStore } from "@ogw_front/stores/geode";
 const schema = schemas.opengeodeweb_back.allowed_objects;
 
 const emit = defineEmits(["update_values", "increment_step"]);
-console.log("ObjectSelector");
 
 const { filenames } = defineProps({
   filenames: { type: Array, required: true },
@@ -78,7 +77,6 @@ async function get_allowed_objects() {
 }
 
 function set_geode_object(geode_object_type) {
-  console.log("set_geode_object", { geode_object_type });
   if (geode_object_type) {
     emit("update_values", { geode_object_type });
     emit("increment_step");

package/app/components/Viewer/BreadCrumb.vue

@@ -13,7 +13,12 @@ function goBackToFileTree() {
 
 const model_id = computed(() => treeviewStore.model_id);
 
-const metaDatas = dataStore.refItem(model_id.value);
+const metaDatas = computed(() => {
+  if (!model_id.value) {
+    return {};
+  }
+  return dataStore.refItem(model_id.value).value || {};
+});
 </script>
 
 <template>

package/app/components/Viewer/TreeComponent.vue

@@ -1,24 +1,18 @@
 <script setup>
+import { compareSelections } from "@ogw_front/utils/treeview";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
-import { compareSelections } from "@ogw_front/utils/treeview";
-
 const dataStyleStore = useDataStyleStore();
 const dataStore = useDataStore();
 const hybridViewerStore = useHybridViewerStore();
 
 const { id } = defineProps({ id: { type: String, required: true } });
-
 const emit = defineEmits(["show-menu"]);
 
-const items = ref([]);
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(id);
-
-watchEffect(async () => {
-  items.value = await dataStore.formatedMeshComponents(id);
-});
+const items = dataStore.refFormatedMeshComponents(id);
+const mesh_components_selection = computed(() => dataStyleStore.visibleMeshComponents(id));
 
 watch(
   mesh_components_selection,
@@ -28,6 +22,11 @@ watch(
     }
 
     const { added, removed } = compareSelections(current, previous);
+    console.log("TreeComponent selection change:", {
+      id: props.id,
+      added,
+      removed,
+    });
 
     if (added.length > 0) {
       await dataStyleStore.setModelMeshComponentsVisibility(id, added, true);

package/app/stores/app.js

@@ -1,3 +1,4 @@
+// Local imports
 import { api_fetch } from "@ogw_internal/utils/api_fetch.js";
 import { upload_file } from "@ogw_internal/utils/upload_file.js";
 

package/app/stores/data.js

@@ -12,8 +12,12 @@ const viewer_generic_schemas = viewer_schemas.opengeodeweb_viewer.generic;
 export const useDataStore = defineStore("data", () => {
   const viewerStore = useViewerStore();
 
-  function item(id) {
-    return database.data.get(id);
+  async function item(id) {
+    const data_item = await database.data.get(id);
+    if (!data_item) {
+      throw new Error(`Item not found: ${id}`);
+    }
+    return data_item;
   }
 
   function refItem(id) {
@@ -62,6 +66,13 @@ export const useDataStore = defineStore("data", () => {
       }));
   }
 
+  function refFormatedMeshComponents(id) {
+    return useObservable(
+      liveQuery(() => formatedMeshComponents(id)),
+      { initialValue: [] },
+    );
+  }
+
   async function meshComponentType(modelId, geode_id) {
     const component = await database.model_components.where({ id: modelId, geode_id }).first();
     return component?.type;
@@ -176,7 +187,7 @@ export const useDataStore = defineStore("data", () => {
       .where("[id+geode_id]")
       .anyOf(meshComponentGeodeIds.map((geode_id) => [modelId, geode_id]))
       .toArray();
-    return components.map((component) => component.viewer_id);
+    return components.map((component) => Number.parseInt(component.viewer_id, 10));
   }
 
   async function exportStores() {
@@ -198,6 +209,7 @@ export const useDataStore = defineStore("data", () => {
     refItem,
     meshComponentType,
     formatedMeshComponents,
+    refFormatedMeshComponents,
     registerObject,
     deregisterObject,
     addItem,
@@ -210,6 +222,7 @@ export const useDataStore = defineStore("data", () => {
     getSurfacesGeodeIds,
     getBlocksGeodeIds,
     getMeshComponentsViewerIds,
+
     exportStores,
     importStores,
     clear,

package/app/stores/data_style.js

@@ -1,3 +1,4 @@
+import { database } from "@ogw_internal/database/database.js";
 import { getDefaultStyle } from "@ogw_front/utils/default_styles";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
@@ -10,16 +11,13 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
   const modelStyleStore = useModelStyle();
   const dataStore = useDataStore();
 
-  function addDataStyle(id, geode_object) {
-    dataStyleState.styles[id] = getDefaultStyle(geode_object);
+  async function addDataStyle(id, geode_object) {
+    await database.data_style.put(structuredClone({ id, ...getDefaultStyle(geode_object) }));
   }
 
   async function setVisibility(id, visibility) {
     const item = await dataStore.item(id);
-    const viewer_type = item?.viewer_type;
-    if (!viewer_type) {
-      throw new Error(`Item not found or not loaded: ${id}`);
-    }
+    const { viewer_type } = item;
 
     if (viewer_type === "mesh") {
       return meshStyleStore.setMeshVisibility(id, visibility);
@@ -32,10 +30,8 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
 
   async function applyDefaultStyle(id) {
     const item = await dataStore.item(id);
-    const viewer_type = item?.viewer_type;
-    if (!viewer_type) {
-      throw new Error(`Item not found or not loaded: ${id}`);
-    }
+    const { viewer_type } = item;
+
     if (viewer_type === "mesh") {
       return meshStyleStore.applyMeshStyle(id);
     }
@@ -46,29 +42,36 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
   }
 
   function exportStores() {
-    return { styles: dataStyleState.styles };
+    return {
+      styles: dataStyleState.styles,
+      componentStyles: dataStyleState.componentStyles,
+    };
   }
 
-  function importStores(snapshot) {
-    const stylesSnapshot = snapshot.styles || {};
-    for (const id of Object.keys(dataStyleState.styles)) {
-      delete dataStyleState.styles[id];
-    }
-    for (const [id, style] of Object.entries(stylesSnapshot)) {
-      dataStyleState.styles[id] = style;
-    }
+  async function importStores(snapshot) {
+    const stylesSnapshot = snapshot.styles;
+    const componentStylesSnapshot = snapshot.componentStyles;
+
+    await dataStyleState.clear();
+
+    const style_promises = Object.entries(stylesSnapshot).map(([id, style]) =>
+      database.data_style.put(structuredClone({ id, ...style })),
+    );
+    const component_style_promises = Object.values(componentStylesSnapshot).map((style) =>
+      database.model_component_datastyle.put(structuredClone(style)),
+    );
+
+    await Promise.all([...style_promises, ...component_style_promises]);
   }
 
   function applyAllStylesFromState() {
-    const ids = Object.keys(dataStyleState.styles || {});
+    const ids = Object.keys(dataStyleState.styles);
     const promises = ids.map(async (id) => {
       const meta = await dataStore.item(id);
-      const viewerType = meta?.viewer_type;
-      const style = dataStyleState.styles[id];
-      if (style && viewerType === "mesh") {
+      const viewerType = meta.viewer_type;
+      if (viewerType === "mesh") {
         return meshStyleStore.applyMeshStyle(id);
-      }
-      if (style && viewerType === "model") {
+      } else if (viewerType === "model") {
         return modelStyleStore.applyModelStyle(id);
       }
     });

package/app/stores/hybrid_viewer.js

@@ -70,7 +70,6 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       return;
     }
     const value = await dataStore.item(id);
-    console.log("hybridViewerStore.addItem", { value });
     const reader = vtkXMLPolyDataReader();
     const textEncoder = new TextEncoder();
     await reader.parseAsArrayBuffer(textEncoder.encode(value.binary_light_viewable));

package/app/utils/extension.js

@@ -19,7 +19,7 @@ async function registerRunningExtensions() {
 
   return Promise.all(
     extensionsArray.map(async (extension) => {
-      const { name, version, frontendContent, port } = extension;
+      const { id, name, version, frontendContent, port } = extension;
       const blob = new Blob([frontendContent], {
         type: "application/javascript",
       });

package/app/utils/file_import_workflow.js

@@ -30,6 +30,7 @@ async function importWorkflow(files) {
 function buildImportItemFromPayloadApi(value, geode_object_type) {
   console.log("buildImportItemFromPayloadApi", { value, geode_object_type });
   return {
+    geode_object_type,
     ...value,
   };
 }

package/app/utils/local/cleanup.js

@@ -133,6 +133,10 @@ function projectMicroservices(projectFolderPath) {
 }
 
 async function cleanupBackend(projectFolderPath) {
+  if (!fs.existsSync(projectFolderPath)) {
+    console.log(`Folder ${projectFolderPath} does not exist. Skipping cleanup.`);
+    return;
+  }
   const microservices = projectMicroservices(projectFolderPath);
   await killMicroservices(microservices);
   await deleteFolderRecursive(projectFolderPath);
@@ -142,4 +146,4 @@ function microservicesMetadatasPath(projectFolderPath) {
   return path.join(projectFolderPath, "microservices.json");
 }
 
-export { cleanupBackend, microservicesMetadatasPath };
+export { cleanupBackend, microservicesMetadatasPath, projectMicroservices };

package/app/utils/local/microservices.js

@@ -11,7 +11,7 @@ import pTimeout from "p-timeout";
 // Local imports
 import { commandExistsSync, waitForReady } from "./scripts.js";
 import { executableName, executablePath } from "./path.js";
-import { microservicesMetadatasPath } from "./cleanup.js";
+import { microservicesMetadatasPath, projectMicroservices } from "./cleanup.js";
 
 const DEFAULT_TIMEOUT_SECONDS = 30;
 const MILLISECONDS_PER_SECOND = 1000;
@@ -112,18 +112,6 @@ async function runViewer(execName, execPath, args = {}) {
   return port;
 }
 
-function projectMicroservices(projectFolderPath) {
-  console.log("projectMicroservices", { projectFolderPath });
-  const filePath = microservicesMetadatasPath(projectFolderPath);
-
-  if (!fs.existsSync(filePath)) {
-    const microservicesMetadatas = { microservices: [] };
-    fs.writeFileSync(filePath, JSON.stringify(microservicesMetadatas, undefined, 2), "utf8");
-  }
-  const content = JSON.parse(fs.readFileSync(filePath, "utf8"));
-  return content.microservices;
-}
-
 function addMicroserviceMetadatas(projectFolderPath, serviceObj) {
   const microservices = projectMicroservices(projectFolderPath);
   if (serviceObj.type === "back") {

package/app/utils/local/path.js

@@ -36,4 +36,23 @@ function generateProjectFolderPath(projectName) {
   return path.join(os.tmpdir(), projectName.replaceAll("/", "_"), uuidv4());
 }
 
-export { createPath, executablePath, executableName, generateProjectFolderPath };
+function extensionFrontendPath(unzippedExtensionPath, frontendFile, rootPath, extensionId) {
+  if (process.env.NODE_ENV === "production") {
+    return path.join(unzippedExtensionPath, frontendFile);
+  }
+  const extentionRepoName = extensionId
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join("-");
+  const localExtensionPath = path.join(rootPath, "..", extentionRepoName, "dist", frontendFile);
+  console.log("runExtensions", { localExtensionPath });
+  return localExtensionPath;
+}
+
+export {
+  createPath,
+  extensionFrontendPath,
+  executablePath,
+  executableName,
+  generateProjectFolderPath,
+};

package/internal/database/base_database.js

@@ -0,0 +1,22 @@
+import { Dexie } from "dexie";
+import { dataStyleTable } from "./tables/data_style";
+import { dataTable } from "./tables/data";
+import { modelComponentDataStyleTable } from "./tables/model_component_datastyle";
+import { modelComponentsRelationTable } from "./tables/model_components_relation";
+import { modelComponentsTable } from "./tables/model_components";
+
+export class BaseDatabase extends Dexie {
+  static get initialStores() {
+    return {
+      [dataTable.name]: dataTable.schema,
+      [modelComponentsTable.name]: modelComponentsTable.schema,
+      [dataStyleTable.name]: dataStyleTable.schema,
+      [modelComponentDataStyleTable.name]: modelComponentDataStyleTable.schema,
+      [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
+    };
+  }
+
+  clear() {
+    return Promise.all(this.tables.map((table) => table.clear()));
+  }
+}

package/internal/database/database.js

@@ -1,18 +1,11 @@
-import { Dexie } from "dexie";
+import { BaseDatabase } from "./base_database";
 import { ExtendedDatabase } from "./extended_database";
-import { dataTable } from "./tables/data";
-import { modelComponentsRelationTable } from "./tables/model_components_relation";
-import { modelComponentsTable } from "./tables/model_components";
 
-class Database extends Dexie {
+class Database extends BaseDatabase {
   constructor() {
     super("Database");
 
-    this.version(1).stores({
-      [dataTable.name]: dataTable.schema,
-      [modelComponentsTable.name]: modelComponentsTable.schema,
-      [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
-    });
+    this.version(1).stores(BaseDatabase.initialStores);
   }
 
   static async addTable(tableName, schemaDefinition) {
@@ -24,11 +17,7 @@ class Database extends Dexie {
     await tempDb.open();
 
     const currentVersion = tempDb.verno;
-    const currentStores = {
-      [dataTable.name]: dataTable.schema,
-      [modelComponentsTable.name]: modelComponentsTable.schema,
-      [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
-    };
+    const currentStores = { ...BaseDatabase.initialStores };
 
     for (const table of tempDb.tables) {
       const keyPath = table.schema.primKey.src;
@@ -47,11 +36,7 @@ class Database extends Dexie {
       const existingDb = new Dexie("Database");
       for (let version = 1; version <= currentVersion; version += 1) {
         if (version === 1) {
-          existingDb.version(1).stores({
-            [dataTable.name]: dataTable.schema,
-            [modelComponentsTable.name]: modelComponentsTable.schema,
-            [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
-          });
+          existingDb.version(1).stores(BaseDatabase.initialStores);
         } else {
           existingDb.version(version).stores(currentStores);
         }

package/internal/database/extended_database.js

@@ -1,19 +1,12 @@
-import { Dexie } from "dexie";
-import { dataTable } from "./tables/data";
-import { modelComponentsRelationTable } from "./tables/model_components_relation";
-import { modelComponentsTable } from "./tables/model_components";
+import { BaseDatabase } from "./base_database";
 
-export class ExtendedDatabase extends Dexie {
+export class ExtendedDatabase extends BaseDatabase {
   constructor(currentVersion, currentStores, newTables) {
     super("Database");
 
     for (let version = 1; version <= currentVersion; version += 1) {
       if (version === 1) {
-        this.version(1).stores({
-          [dataTable.name]: dataTable.schema,
-          [modelComponentsTable.name]: modelComponentsTable.schema,
-          [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
-        });
+        this.version(1).stores(BaseDatabase.initialStores);
       } else {
         this.version(version).stores(currentStores);
       }

package/internal/database/tables/data_style.js

@@ -0,0 +1,4 @@
+export const dataStyleTable = {
+  name: "data_style",
+  schema: "id",
+};

package/internal/database/tables/model_component_datastyle.js

@@ -0,0 +1,4 @@
+export const modelComponentDataStyleTable = {
+  name: "model_component_datastyle",
+  schema: "[id_model+id_component], id_model",
+};

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

@@ -29,28 +29,24 @@ export function useMeshCellsCellAttributeStyle() {
     });
   }
 
-  function setMeshCellsCellAttributeStoredConfig(id, name, { minimum, maximum, colorMap }) {
-    const { storedConfigs } = meshCellsCellAttribute(id);
-    storedConfigs[name] = { minimum, maximum, colorMap };
-    return storedConfigs[name];
+  function setMeshCellsCellAttributeStoredConfig(id, name, config) {
+    return meshCellsCommonStyle.mutateMeshCellsCellStyle(id, {
+      storedConfigs: {
+        [name]: config,
+      },
+    });
   }
 
   function meshCellsCellAttributeName(id) {
-    console.log(meshCellsCellAttributeName.name, { id }, meshCellsCellAttribute(id));
     return meshCellsCellAttribute(id).name;
   }
+
   function setMeshCellsCellAttributeName(id, name) {
-    console.log(setMeshCellsCellAttributeName.name, { id, name });
     return viewerStore.request(
       meshCellsCellAttributeSchemas.name,
       { id, name },
       {
-        response_function: async () => {
-          meshCellsCellAttribute(id).name = name;
-          const { minimum, maximum } = meshCellsCellAttributeStoredConfig(id, name);
-          await setMeshCellsCellAttributeRange(id, minimum, maximum);
-          console.log(setMeshCellsCellAttributeName.name, { id }, meshCellsCellAttributeName(id));
-        },
+        response_function: () => meshCellsCommonStyle.mutateMeshCellsCellStyle(id, { name }),
       },
     );
   }
@@ -61,12 +57,10 @@ export function useMeshCellsCellAttributeStyle() {
     const { minimum, maximum } = storedConfig;
     return [minimum, maximum];
   }
+
   function setMeshCellsCellAttributeRange(id, minimum, maximum) {
     const name = meshCellsCellAttributeName(id);
-    const storedConfig = meshCellsCellAttributeStoredConfig(id, name);
-    storedConfig.minimum = minimum;
-    storedConfig.maximum = maximum;
-    return setMeshCellsCellAttributeColorMap(id, storedConfig.colorMap);
+    return setMeshCellsCellAttributeStoredConfig(id, name, { minimum, maximum });
   }
 
   function meshCellsCellAttributeColorMap(id) {
@@ -75,38 +69,17 @@ export function useMeshCellsCellAttributeStyle() {
     const { colorMap } = storedConfig;
     return colorMap;
   }
+
   function setMeshCellsCellAttributeColorMap(id, colorMap) {
     const name = meshCellsCellAttributeName(id);
     const storedConfig = meshCellsCellAttributeStoredConfig(id, name);
-    if (
-      storedConfig.minimum === undefined ||
-      storedConfig.maximum === undefined ||
-      colorMap === undefined
-    ) {
-      storedConfig.colorMap = colorMap;
-      return;
-    }
     const points = getRGBPointsFromPreset(colorMap);
     const { minimum, maximum } = storedConfig;
-
-    console.log(setMeshCellsCellAttributeColorMap.name, {
-      id,
-      minimum,
-      maximum,
-      colorMap,
-    });
     return viewerStore.request(
       meshCellsCellAttributeSchemas.color_map,
       { id, points, minimum, maximum },
       {
-        response_function: () => {
-          storedConfig.colorMap = colorMap;
-          console.log(
-            setMeshCellsCellAttributeColorMap.name,
-            { id },
-            meshCellsCellAttributeColorMap(id),
-          );
-        },
+        response_function: () => setMeshCellsCellAttributeStoredConfig(id, name, { colorMap }),
       },
     );
   }

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

@@ -20,10 +20,10 @@ export function useMeshCellsColorStyle() {
       meshCellsColorSchemas,
       { id, color },
       {
-        response_function: () => {
-          meshCellsCommonStyle.meshCellsColoring(id).color = color;
-          console.log(setMeshCellsColor.name, { id }, JSON.stringify(meshCellsColor(id)));
-        },
+        response_function: () =>
+          meshCellsCommonStyle.mutateMeshCellsColoring(id, {
+            color,
+          }),
       },
     );
   }

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

@@ -3,6 +3,12 @@ import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
 export function useMeshCellsCommonStyle() {
   const dataStyleStateStore = useDataStyleStateStore();
 
+  function mutateMeshCellsStyle(id, values) {
+    return dataStyleStateStore.mutateStyle(id, {
+      cells: values,
+    });
+  }
+
   function meshCellsStyle(id) {
     return dataStyleStateStore.getStyle(id).cells;
   }
@@ -11,13 +17,23 @@ export function useMeshCellsCommonStyle() {
     return meshCellsStyle(id).coloring;
   }
 
-  function meshCellsActiveColoring(id) {
-    return meshCellsColoring(id).active;
+  function mutateMeshCellsColoring(id, values) {
+    return mutateMeshCellsStyle(id, {
+      coloring: values,
+    });
+  }
+
+  function mutateMeshCellsCellStyle(id, values) {
+    return mutateMeshCellsColoring(id, {
+      cell: values,
+    });
   }
 
   return {
     meshCellsStyle,
     meshCellsColoring,
-    meshCellsActiveColoring,
+    mutateMeshCellsStyle,
+    mutateMeshCellsColoring,
+    mutateMeshCellsCellStyle,
   };
 }

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

@@ -15,17 +15,22 @@ export function useMeshCellsStyle() {
   const meshCellsVisibility = useMeshCellsVisibilityStyle();
   const meshCellsColorStyle = useMeshCellsColorStyle();
   const meshCellsTexturesStore = useMeshCellsTexturesStyle();
+
+  function meshCellsColoring(id) {
+    return meshCellsCommonStyle.meshCellsColoring(id);
+  }
   const meshCellsVertexAttributeStyle = useMeshCellsVertexAttributeStyle();
   const meshCellsCellAttributeStyle = useMeshCellsCellAttributeStyle();
 
+  function meshCellsActiveColoring(id) {
+    return meshCellsColoring(id).active;
+  }
+
   async function setMeshCellsActiveColoring(id, type) {
-    const coloring = meshCellsCommonStyle.meshCellsColoring(id);
-    coloring.active = type;
-    console.log(
-      setMeshCellsActiveColoring.name,
-      { id },
-      meshCellsCommonStyle.meshCellsActiveColoring(id),
-    );
+    await meshCellsCommonStyle.mutateMeshCellsStyle(id, {
+      coloring: { active: type },
+    });
+    console.log(setMeshCellsActiveColoring.name, { id }, type);
     if (type === "color") {
       return meshCellsColorStyle.setMeshCellsColor(id, meshCellsColorStyle.meshCellsColor(id));
     }
@@ -48,8 +53,7 @@ export function useMeshCellsStyle() {
       if (name === undefined) {
         return;
       }
-      await meshCellsCellAttributeStyle.setMeshCellsCellAttributeName(id, name);
-      return;
+      return meshCellsCellAttributeStyle.setMeshCellsCellAttributeName(id, name);
     }
     throw new Error(`Unknown mesh cells coloring type: ${type}`);
   }
@@ -57,12 +61,14 @@ export function useMeshCellsStyle() {
   function applyMeshCellsStyle(id) {
     return Promise.all([
       meshCellsVisibility.setMeshCellsVisibility(id, meshCellsVisibility.meshCellsVisibility(id)),
-      setMeshCellsActiveColoring(id, meshCellsCommonStyle.meshCellsActiveColoring(id)),
+      setMeshCellsActiveColoring(id, meshCellsActiveColoring(id)),
     ]);
   }
 
   return {
     ...meshCellsCommonStyle,
+    meshCellsColoring,
+    meshCellsActiveColoring,
     setMeshCellsActiveColoring,
     applyMeshCellsStyle,
     ...meshCellsVisibility,

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

@@ -20,10 +20,10 @@ export function useMeshCellsTexturesStyle() {
       meshCellsTexturesSchemas,
       { id, textures },
       {
-        response_function: () => {
-          meshCellsCommonStyle.meshCellsColoring(id).textures = textures;
-          console.log(setMeshCellsTextures.name, { id }, meshCellsTextures(id));
-        },
+        response_function: () =>
+          meshCellsCommonStyle.mutateMeshCellsStyle(id, {
+            coloring: { textures },
+          }),
       },
     );
   }