@geode/opengeodeweb-front 10.22.1 → 10.23.0-rc.2

package/internal/stores/data_style/model/corners/vertex.js

@@ -0,0 +1,144 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+// Local imports
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useModelCornersCommonStyle } from "./common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+// Local constants
+const schema = viewer_schemas.opengeodeweb_viewer.model.corners.attribute.vertex;
+
+export function useModelCornersVertexAttribute() {
+  const dataStore = useDataStore();
+  const modelCornersCommonStyle = useModelCornersCommonStyle();
+  const viewerStore = useViewerStore();
+
+  function modelCornersVertexAttribute(modelId, cornerId) {
+    return modelCornersCommonStyle.modelCornerStyle(modelId, cornerId).vertex_attribute;
+  }
+
+  function modelCornersVertexAttributeStoredConfig(modelId, cornerId, name) {
+    const { storedConfigs } = modelCornersVertexAttribute(modelId, cornerId);
+    if (name && storedConfigs && name in storedConfigs) {
+      return storedConfigs[name];
+    }
+    return {
+      minimum: undefined,
+      maximum: undefined,
+      colorMap: undefined,
+    };
+  }
+
+  function mutateModelCornersVertexStyle(modelId, cornerIds, values) {
+    return modelCornersCommonStyle.mutateModelCornersStyle(modelId, cornerIds, {
+      vertex_attribute: values,
+    });
+  }
+
+  function setModelCornersVertexAttributeStoredConfig(modelId, cornerIds, name, config) {
+    return mutateModelCornersVertexStyle(modelId, cornerIds, {
+      storedConfigs: {
+        [name]: config,
+      },
+    });
+  }
+
+  function modelCornersVertexAttributeName(modelId, cornerId) {
+    return modelCornersVertexAttribute(modelId, cornerId).name;
+  }
+
+  async function setModelCornersVertexAttributeName(modelId, cornerIds, name) {
+    const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, cornerIds);
+
+    const updates = { name };
+    const vertex = modelCornersVertexAttribute(modelId, cornerIds[0]);
+    if (!(name in vertex.storedConfigs)) {
+      updates.storedConfigs = {
+        [name]: {
+          minimum: undefined,
+          maximum: undefined,
+          colorMap: undefined,
+        },
+      };
+    }
+
+    const params = { id: modelId, block_ids: viewer_ids, name };
+    return viewerStore.request(
+      { schema: schema.name, params },
+      {
+        response_function: () => mutateModelCornersVertexStyle(modelId, cornerIds, updates),
+      },
+    );
+  }
+
+  function modelCornersVertexAttributeRange(modelId, cornerId) {
+    const name = modelCornersVertexAttributeName(modelId, cornerId);
+    const storedConfig = modelCornersVertexAttributeStoredConfig(modelId, cornerId, name);
+    const { minimum, maximum } = storedConfig;
+    return [minimum, maximum];
+  }
+
+  async function setModelCornersVertexAttributeRange(modelId, cornerIds, minimum, maximum) {
+    const name = modelCornersVertexAttributeName(modelId, cornerIds[0]);
+    const colorMap = modelCornersVertexAttributeColorMap(modelId, cornerIds[0]);
+    const points = getRGBPointsFromPreset(colorMap);
+
+    if (points.length > 0 && minimum !== undefined && maximum !== undefined) {
+      const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, cornerIds);
+      const params = { id: modelId, block_ids: viewer_ids, points, minimum, maximum };
+      return viewerStore.request(
+        { schema: schema.color_map, params },
+        {
+          response_function: () =>
+            setModelCornersVertexAttributeStoredConfig(modelId, cornerIds, name, {
+              minimum,
+              maximum,
+            }),
+        },
+      );
+    }
+    return setModelCornersVertexAttributeStoredConfig(modelId, cornerIds, name, {
+      minimum,
+      maximum,
+    });
+  }
+
+  function modelCornersVertexAttributeColorMap(modelId, cornerId) {
+    const name = modelCornersVertexAttributeName(modelId, cornerId);
+    const storedConfig = modelCornersVertexAttributeStoredConfig(modelId, cornerId, name);
+    const { colorMap } = storedConfig;
+    return colorMap;
+  }
+
+  async function setModelCornersVertexAttributeColorMap(modelId, cornerIds, colorMap) {
+    const name = modelCornersVertexAttributeName(modelId, cornerIds[0]);
+    const storedConfig = modelCornersVertexAttributeStoredConfig(modelId, cornerIds[0], name);
+    const points = getRGBPointsFromPreset(colorMap);
+    const { minimum, maximum } = storedConfig;
+
+    if (points.length > 0 && minimum !== undefined && maximum !== undefined) {
+      const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, cornerIds);
+      const params = { id: modelId, block_ids: viewer_ids, points, minimum, maximum };
+      return viewerStore.request(
+        { schema: schema.color_map, params },
+        {
+          response_function: () =>
+            setModelCornersVertexAttributeStoredConfig(modelId, cornerIds, name, { colorMap }),
+        },
+      );
+    }
+    return setModelCornersVertexAttributeStoredConfig(modelId, cornerIds, name, { colorMap });
+  }
+
+  return {
+    modelCornersVertexAttributeName,
+    modelCornersVertexAttributeRange,
+    modelCornersVertexAttributeColorMap,
+    modelCornersVertexAttributeStoredConfig,
+    setModelCornersVertexAttributeName,
+    setModelCornersVertexAttributeRange,
+    setModelCornersVertexAttributeColorMap,
+  };
+}

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

@@ -16,5 +16,10 @@ export function useModelLinesColor() {
     return modelCommonStyle.setModelTypeColor(modelId, lines_ids, color, schema, color_mode);
   }
 
-  return { setModelLinesColor, modelLineColor };
+  function modelLineColorMode(id, line_id) {
+    const mode = modelLinesCommonStyle.modelLineStyle(id, line_id).color_mode || "constant";
+    return mode === "constant" ? "color" : mode;
+  }
+
+  return { setModelLinesColor, modelLineColor, modelLineColorMode };
 }

package/internal/stores/data_style/model/lines/edge.js

@@ -0,0 +1,138 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+// Local imports
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useModelLinesCommonStyle } from "./common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+// Local constants
+const schema = viewer_schemas.opengeodeweb_viewer.model.lines.attribute.edge;
+
+export function useModelLinesEdgeAttribute() {
+  const dataStore = useDataStore();
+  const modelLinesCommonStyle = useModelLinesCommonStyle();
+  const viewerStore = useViewerStore();
+
+  function modelLinesEdgeAttribute(modelId, lineId) {
+    return modelLinesCommonStyle.modelLineStyle(modelId, lineId).edge_attribute;
+  }
+
+  function modelLinesEdgeAttributeStoredConfig(modelId, lineId, name) {
+    const { storedConfigs } = modelLinesEdgeAttribute(modelId, lineId);
+    if (name && storedConfigs && name in storedConfigs) {
+      return storedConfigs[name];
+    }
+    return {
+      minimum: undefined,
+      maximum: undefined,
+      colorMap: undefined,
+    };
+  }
+
+  function mutateModelLinesEdgeStyle(modelId, lineIds, values) {
+    return modelLinesCommonStyle.mutateModelLinesStyle(modelId, lineIds, {
+      edge_attribute: values,
+    });
+  }
+
+  function setModelLinesEdgeAttributeStoredConfig(modelId, lineIds, name, config) {
+    return mutateModelLinesEdgeStyle(modelId, lineIds, {
+      storedConfigs: {
+        [name]: config,
+      },
+    });
+  }
+
+  function modelLinesEdgeAttributeName(modelId, lineId) {
+    return modelLinesEdgeAttribute(modelId, lineId).name;
+  }
+
+  async function setModelLinesEdgeAttributeName(modelId, lineIds, name) {
+    const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, lineIds);
+
+    const updates = { name };
+    const edge = modelLinesEdgeAttribute(modelId, lineIds[0]);
+    if (!(name in edge.storedConfigs)) {
+      updates.storedConfigs = {
+        [name]: {
+          minimum: undefined,
+          maximum: undefined,
+          colorMap: undefined,
+        },
+      };
+    }
+
+    const params = { id: modelId, block_ids: viewer_ids, name };
+    return viewerStore.request(
+      { schema: schema.name, params },
+      {
+        response_function: () => mutateModelLinesEdgeStyle(modelId, lineIds, updates),
+      },
+    );
+  }
+
+  function modelLinesEdgeAttributeRange(modelId, lineId) {
+    const name = modelLinesEdgeAttributeName(modelId, lineId);
+    const storedConfig = modelLinesEdgeAttributeStoredConfig(modelId, lineId, name);
+    const { minimum, maximum } = storedConfig;
+    return [minimum, maximum];
+  }
+
+  async function setModelLinesEdgeAttributeRange(modelId, lineIds, minimum, maximum) {
+    const name = modelLinesEdgeAttributeName(modelId, lineIds[0]);
+    const colorMap = modelLinesEdgeAttributeColorMap(modelId, lineIds[0]);
+    const points = getRGBPointsFromPreset(colorMap);
+
+    if (points.length > 0 && minimum !== undefined && maximum !== undefined) {
+      const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, lineIds);
+      const params = { id: modelId, block_ids: viewer_ids, points, minimum, maximum };
+      return viewerStore.request(
+        { schema: schema.color_map, params },
+        {
+          response_function: () =>
+            setModelLinesEdgeAttributeStoredConfig(modelId, lineIds, name, { minimum, maximum }),
+        },
+      );
+    }
+    return setModelLinesEdgeAttributeStoredConfig(modelId, lineIds, name, { minimum, maximum });
+  }
+
+  function modelLinesEdgeAttributeColorMap(modelId, lineId) {
+    const name = modelLinesEdgeAttributeName(modelId, lineId);
+    const storedConfig = modelLinesEdgeAttributeStoredConfig(modelId, lineId, name);
+    const { colorMap } = storedConfig;
+    return colorMap;
+  }
+
+  async function setModelLinesEdgeAttributeColorMap(modelId, lineIds, colorMap) {
+    const name = modelLinesEdgeAttributeName(modelId, lineIds[0]);
+    const storedConfig = modelLinesEdgeAttributeStoredConfig(modelId, lineIds[0], name);
+    const points = getRGBPointsFromPreset(colorMap);
+    const { minimum, maximum } = storedConfig;
+
+    if (points.length > 0 && minimum !== undefined && maximum !== undefined) {
+      const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, lineIds);
+      const params = { id: modelId, block_ids: viewer_ids, points, minimum, maximum };
+      return viewerStore.request(
+        { schema: schema.color_map, params },
+        {
+          response_function: () =>
+            setModelLinesEdgeAttributeStoredConfig(modelId, lineIds, name, { colorMap }),
+        },
+      );
+    }
+    return setModelLinesEdgeAttributeStoredConfig(modelId, lineIds, name, { colorMap });
+  }
+
+  return {
+    modelLinesEdgeAttributeName,
+    modelLinesEdgeAttributeRange,
+    modelLinesEdgeAttributeColorMap,
+    modelLinesEdgeAttributeStoredConfig,
+    setModelLinesEdgeAttributeName,
+    setModelLinesEdgeAttributeRange,
+    setModelLinesEdgeAttributeColorMap,
+  };
+}

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

@@ -1,6 +1,8 @@
 import { useDataStore } from "@ogw_front/stores/data";
 import { useModelLinesColor } from "./color";
 import { useModelLinesCommonStyle } from "./common";
+import { useModelLinesEdgeAttribute } from "./edge";
+import { useModelLinesVertexAttribute } from "./vertex";
 import { useModelLinesVisibility } from "./visibility";
 
 async function setModelLinesDefaultStyle(_id) {
@@ -12,6 +14,8 @@ export function useModelLinesStyle() {
   const modelCommonStyle = useModelLinesCommonStyle();
   const modelVisibilityStyle = useModelLinesVisibility();
   const modelColorStyle = useModelLinesColor();
+  const modelLinesVertexAttribute = useModelLinesVertexAttribute();
+  const modelLinesEdgeAttribute = useModelLinesEdgeAttribute();
 
   async function applyModelLinesStyle(modelId) {
     const lines_ids = await dataStore.getLinesGeodeIds(modelId);
@@ -21,6 +25,7 @@ export function useModelLinesStyle() {
 
     const visibilityGroups = {};
     const colorGroups = {};
+    const attributeGroups = {};
 
     for (const line_id of lines_ids) {
       const style = modelCommonStyle.modelLineStyle(modelId, line_id);
@@ -32,11 +37,34 @@ export function useModelLinesStyle() {
       visibilityGroups[visibility].push(line_id);
 
       const color_mode = style.color_mode || "constant";
-      const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
-      if (!colorGroups[color_key]) {
-        colorGroups[color_key] = { color_mode, color: style.color, lines_ids: [] };
+      if (color_mode === "constant" || color_mode === "random") {
+        const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+        if (!colorGroups[color_key]) {
+          colorGroups[color_key] = { color_mode, color: style.color, lines_ids: [] };
+        }
+        colorGroups[color_key].lines_ids.push(line_id);
+      } else {
+        const attributeTypeKey = `${color_mode}_attribute`;
+        const attributeStyle = style[attributeTypeKey] || {};
+        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,
+              lines_ids: [],
+            };
+          }
+          attributeGroups[attributeGroupKey].lines_ids.push(line_id);
+        }
       }
-      colorGroups[color_key].lines_ids.push(line_id);
     }
 
     const promises = [
@@ -46,6 +74,30 @@ export function useModelLinesStyle() {
       ...Object.values(colorGroups).map(({ color_mode, color, lines_ids: ids }) =>
         modelColorStyle.setModelLinesColor(modelId, ids, color, color_mode),
       ),
+      ...Object.values(attributeGroups).flatMap(
+        ({ color_mode, name, minimum, maximum, colorMap, lines_ids: ids }) => {
+          const isVertex = color_mode === "vertex";
+          const attributeStyle = isVertex ? modelLinesVertexAttribute : modelLinesEdgeAttribute;
+          const setAttributeName = isVertex
+            ? attributeStyle.setModelLinesVertexAttributeName
+            : attributeStyle.setModelLinesEdgeAttributeName;
+          const setAttributeRange = isVertex
+            ? attributeStyle.setModelLinesVertexAttributeRange
+            : attributeStyle.setModelLinesEdgeAttributeRange;
+          const setAttributeColorMap = isVertex
+            ? attributeStyle.setModelLinesVertexAttributeColorMap
+            : attributeStyle.setModelLinesEdgeAttributeColorMap;
+
+          const list = [setAttributeName(modelId, ids, name)];
+          if (minimum !== undefined && maximum !== undefined) {
+            list.push(setAttributeRange(modelId, ids, minimum, maximum));
+          }
+          if (colorMap) {
+            list.push(setAttributeColorMap(modelId, ids, colorMap));
+          }
+          return list;
+        },
+      ),
     ];
 
     return Promise.all(promises);
@@ -57,5 +109,7 @@ export function useModelLinesStyle() {
     ...modelCommonStyle,
     ...modelVisibilityStyle,
     ...modelColorStyle,
+    ...modelLinesVertexAttribute,
+    ...modelLinesEdgeAttribute,
   };
 }

package/internal/stores/data_style/model/lines/vertex.js

@@ -0,0 +1,138 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+// Local imports
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useModelLinesCommonStyle } from "./common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+// Local constants
+const schema = viewer_schemas.opengeodeweb_viewer.model.lines.attribute.vertex;
+
+export function useModelLinesVertexAttribute() {
+  const dataStore = useDataStore();
+  const modelLinesCommonStyle = useModelLinesCommonStyle();
+  const viewerStore = useViewerStore();
+
+  function modelLinesVertexAttribute(modelId, lineId) {
+    return modelLinesCommonStyle.modelLineStyle(modelId, lineId).vertex_attribute;
+  }
+
+  function modelLinesVertexAttributeStoredConfig(modelId, lineId, name) {
+    const { storedConfigs } = modelLinesVertexAttribute(modelId, lineId);
+    if (name && storedConfigs && name in storedConfigs) {
+      return storedConfigs[name];
+    }
+    return {
+      minimum: undefined,
+      maximum: undefined,
+      colorMap: undefined,
+    };
+  }
+
+  function mutateModelLinesVertexStyle(modelId, lineIds, values) {
+    return modelLinesCommonStyle.mutateModelLinesStyle(modelId, lineIds, {
+      vertex_attribute: values,
+    });
+  }
+
+  function setModelLinesVertexAttributeStoredConfig(modelId, lineIds, name, config) {
+    return mutateModelLinesVertexStyle(modelId, lineIds, {
+      storedConfigs: {
+        [name]: config,
+      },
+    });
+  }
+
+  function modelLinesVertexAttributeName(modelId, lineId) {
+    return modelLinesVertexAttribute(modelId, lineId).name;
+  }
+
+  async function setModelLinesVertexAttributeName(modelId, lineIds, name) {
+    const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, lineIds);
+
+    const updates = { name };
+    const vertex = modelLinesVertexAttribute(modelId, lineIds[0]);
+    if (!(name in vertex.storedConfigs)) {
+      updates.storedConfigs = {
+        [name]: {
+          minimum: undefined,
+          maximum: undefined,
+          colorMap: undefined,
+        },
+      };
+    }
+
+    const params = { id: modelId, block_ids: viewer_ids, name };
+    return viewerStore.request(
+      { schema: schema.name, params },
+      {
+        response_function: () => mutateModelLinesVertexStyle(modelId, lineIds, updates),
+      },
+    );
+  }
+
+  function modelLinesVertexAttributeRange(modelId, lineId) {
+    const name = modelLinesVertexAttributeName(modelId, lineId);
+    const storedConfig = modelLinesVertexAttributeStoredConfig(modelId, lineId, name);
+    const { minimum, maximum } = storedConfig;
+    return [minimum, maximum];
+  }
+
+  async function setModelLinesVertexAttributeRange(modelId, lineIds, minimum, maximum) {
+    const name = modelLinesVertexAttributeName(modelId, lineIds[0]);
+    const colorMap = modelLinesVertexAttributeColorMap(modelId, lineIds[0]);
+    const points = getRGBPointsFromPreset(colorMap);
+
+    if (points.length > 0 && minimum !== undefined && maximum !== undefined) {
+      const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, lineIds);
+      const params = { id: modelId, block_ids: viewer_ids, points, minimum, maximum };
+      return viewerStore.request(
+        { schema: schema.color_map, params },
+        {
+          response_function: () =>
+            setModelLinesVertexAttributeStoredConfig(modelId, lineIds, name, { minimum, maximum }),
+        },
+      );
+    }
+    return setModelLinesVertexAttributeStoredConfig(modelId, lineIds, name, { minimum, maximum });
+  }
+
+  function modelLinesVertexAttributeColorMap(modelId, lineId) {
+    const name = modelLinesVertexAttributeName(modelId, lineId);
+    const storedConfig = modelLinesVertexAttributeStoredConfig(modelId, lineId, name);
+    const { colorMap } = storedConfig;
+    return colorMap;
+  }
+
+  async function setModelLinesVertexAttributeColorMap(modelId, lineIds, colorMap) {
+    const name = modelLinesVertexAttributeName(modelId, lineIds[0]);
+    const storedConfig = modelLinesVertexAttributeStoredConfig(modelId, lineIds[0], name);
+    const points = getRGBPointsFromPreset(colorMap);
+    const { minimum, maximum } = storedConfig;
+
+    if (points.length > 0 && minimum !== undefined && maximum !== undefined) {
+      const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, lineIds);
+      const params = { id: modelId, block_ids: viewer_ids, points, minimum, maximum };
+      return viewerStore.request(
+        { schema: schema.color_map, params },
+        {
+          response_function: () =>
+            setModelLinesVertexAttributeStoredConfig(modelId, lineIds, name, { colorMap }),
+        },
+      );
+    }
+    return setModelLinesVertexAttributeStoredConfig(modelId, lineIds, name, { colorMap });
+  }
+
+  return {
+    modelLinesVertexAttributeName,
+    modelLinesVertexAttributeRange,
+    modelLinesVertexAttributeColorMap,
+    modelLinesVertexAttributeStoredConfig,
+    setModelLinesVertexAttributeName,
+    setModelLinesVertexAttributeRange,
+    setModelLinesVertexAttributeColorMap,
+  };
+}

package/internal/stores/data_style/model/selection.js

@@ -1,11 +1,15 @@
-import { MESH_TYPES } from "@ogw_front/utils/default_styles";
+import { MESH_COMPONENT_TYPES } from "@ogw_front/utils/default_styles";
 import { database } from "@ogw_internal/database/database";
-import { liveQuery } from "dexie";
-import { useObservable } from "@vueuse/rxjs";
 
-function buildSelection(modelId, components, stylesMap, typeStylesMap, dataStyleState) {
+function buildSelection(
+  modelId,
+  components,
+  componentStyles,
+  modelComponentTypeStyles,
+  dataStyleState,
+) {
   const componentsByType = Object.fromEntries(
-    MESH_TYPES.map((componentType) => [componentType, []]),
+    MESH_COMPONENT_TYPES.map((componentType) => [componentType, []]),
   );
   for (const component of components) {
     if (componentsByType[component.type]) {
@@ -15,19 +19,21 @@ function buildSelection(modelId, components, stylesMap, typeStylesMap, dataStyle
 
   const groupStyles = dataStyleState.getStyle(modelId);
   const selection = [];
-  for (const componentType of MESH_TYPES) {
+  for (const componentType of MESH_COMPONENT_TYPES) {
     const typeComponents = componentsByType[componentType];
     if (typeComponents.length === 0) {
       continue;
     }
 
     const typeKey = `${componentType.toLowerCase()}s`;
-    const typeStyle = typeStylesMap[componentType];
+    const typeStyleKey = `${modelId}_${componentType}`;
+    const typeStyle = modelComponentTypeStyles.value[typeStyleKey];
     const defaultVisibility = typeStyle?.visibility ?? groupStyles[typeKey]?.visibility ?? true;
 
     let allVisible = true;
     for (const component of typeComponents) {
-      const isVisible = stylesMap[component.geode_id]?.visibility ?? defaultVisibility;
+      const styleKey = `${modelId}_${component.geode_id}`;
+      const isVisible = componentStyles.value[styleKey]?.visibility ?? defaultVisibility;
       if (isVisible) {
         selection.push(component.geode_id);
       } else {
@@ -41,28 +47,43 @@ function buildSelection(modelId, components, stylesMap, typeStylesMap, dataStyle
   return selection;
 }
 
+const selectionCache = new Map();
+
 function useModelSelection(modelId, dataStyleState) {
-  return useObservable(
-    liveQuery(async () => {
-      if (!modelId) {
-        return [];
-      }
-      const [allComponents, componentStyles, typeStyles] = await Promise.all([
-        database.model_components.where("id").equals(modelId).toArray(),
-        database.model_component_datastyle.where("id_model").equals(modelId).toArray(),
-        database.model_component_type_datastyle.where("id_model").equals(modelId).toArray(),
-      ]);
-      if (allComponents.length === 0) {
-        return [];
-      }
-      const stylesMap = Object.fromEntries(
-        componentStyles.map((style) => [style.id_component, style]),
-      );
-      const stylesByTypeMap = Object.fromEntries(typeStyles.map((style) => [style.type, style]));
-      return buildSelection(modelId, allComponents, stylesMap, stylesByTypeMap, dataStyleState);
-    }),
-    { initialValue: [] },
-  );
+  if (!modelId) {
+    return computed(() => []);
+  }
+
+  const cacheKey = `${modelId}`;
+  if (selectionCache.has(cacheKey)) {
+    return selectionCache.get(cacheKey);
+  }
+
+  const allComponents = ref([]);
+
+  (async () => {
+    try {
+      allComponents.value = await database.model_components.where("id").equals(modelId).toArray();
+    } catch (error) {
+      console.error("Error fetching model components:", error);
+    }
+  })();
+
+  const computedSelection = computed(() => {
+    if (allComponents.value.length === 0) {
+      return [];
+    }
+    return buildSelection(
+      modelId,
+      allComponents.value,
+      dataStyleState.componentStyles,
+      dataStyleState.modelComponentTypeStyles,
+      dataStyleState,
+    );
+  });
+
+  selectionCache.set(cacheKey, computedSelection);
+  return computedSelection;
 }
 
 export { buildSelection, useModelSelection };

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

@@ -16,5 +16,15 @@ export function useModelSurfacesColor() {
     return modelCommonStyle.setModelTypeColor(modelId, surfaces_ids, color, schema, color_mode);
   }
 
-  return { setModelSurfacesColor, modelSurfaceColor };
+  function modelSurfaceColorMode(id, surface_id) {
+    const mode =
+      modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color_mode || "constant";
+    return mode === "constant" ? "color" : mode;
+  }
+
+  return {
+    setModelSurfacesColor,
+    modelSurfaceColor,
+    modelSurfaceColorMode,
+  };
 }