@geode/opengeodeweb-front 10.41.0-rc.2 → 10.41.0-rc.3

package/app/components/HybridRenderingView.vue

@@ -98,10 +98,12 @@ async function handleClick(event: PointerEvent): Promise<void> {
   <ClientOnly>
     <div data-testid="hybridViewer" class="fill-height" style="position: relative; height: 100%">
       <ColormapQuickPicker
+        :key="quickColormap.data_id"
         v-model:show="quickColormap.show"
         :x="quickColormap.x"
         :y="quickColormap.y"
         :data-id="quickColormap.data_id"
+        :block-ids="quickColormap.block_ids"
       />
       <ZoomBoxOverlay v-if="hybridViewerStore.is_zoom_box_active" />
       <ViewToolbar />

package/app/components/RemoteRenderingView.vue

@@ -116,10 +116,12 @@ onMounted(async () => {
   <ClientOnly>
     <div style="position: relative; width: 100%; height: 100%">
       <ColormapQuickPicker
+        :key="quickColormap.data_id"
         v-model:show="quickColormap.show"
         :x="quickColormap.x"
         :y="quickColormap.y"
         :data-id="quickColormap.data_id"
+        :block-ids="quickColormap.block_ids"
       />
       <ViewToolbar />
       <slot name="ui"></slot>

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

@@ -5,18 +5,21 @@ import TimeStepSlider from "@ogw_front/components/Viewer/Options/TimeStepSlider.
 
 import { getPresetsWithCurrentAtTop } from "@ogw_front/utils/colormap";
 import { useGlobalAttributeStyle } from "@ogw_front/composables/global_attribute_style";
+import { useModelAttributeStyle } from "@ogw_front/composables/model_attribute_style";
 
 interface Props {
   dataId?: string;
+  blockIds?: number[];
   x: number;
   y: number;
 }
 
-const { dataId = undefined, x, y } = defineProps<Props>();
+const { dataId = undefined, blockIds = undefined, x, y } = defineProps<Props>();
 
 const show = defineModel<boolean>("show", { default: false });
 
 const dataIdRef = computed<string>(() => dataId);
+// The parent keys this picker on the picked data: a mesh or a model, so the style is chosen once here
 const {
   currentColormap,
   currentRange,
@@ -25,7 +28,13 @@ const {
   currentTimeSteps,
   currentTimeStep,
   loadTimeSteps,
-} = useGlobalAttributeStyle(dataIdRef);
+} =
+  blockIds === undefined
+    ? useGlobalAttributeStyle(dataIdRef)
+    : useModelAttributeStyle(
+        dataIdRef,
+        computed<number[]>(() => blockIds),
+      );
 
 watch(show, async (isShown) => {
   if (isShown) {

package/app/composables/attribute_coloring_style.ts

@@ -0,0 +1,182 @@
+import { type AttributeSchemas, fetchAttributeRange } from "@ogw_front/utils/attribute_range";
+import type { JsonRpcSchema } from "@ogw_shared/utils/types";
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
+import { getAttributeRange } from "@ogw_front/utils/attributes";
+import { useBackStore } from "@ogw_front/stores/back";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+// Elements colored by the same attribute, with the store and back accesses of their data
+interface AttributeColoring {
+  // Reads a style property ("Name", "Range", ...) of the attribute coloring
+  read: (property: string) => unknown;
+  write: (property: string, ...values: unknown[]) => Promise<void>;
+  schemas: AttributeSchemas;
+  params: { id: string; component_ids?: string[] };
+}
+
+interface AttributeNamesResponse {
+  attributes: { attribute_name: string; time_steps?: number[] }[];
+}
+
+interface AttributeColoringStyle {
+  currentColormap: ComputedRef<string>;
+  currentRange: WritableComputedRef<readonly [number, number]>;
+  applyGlobalColormap: (colorMap: string) => Promise<void>;
+  resetGlobalRange: () => Promise<void>;
+  currentTimeSteps: Ref<number[]>;
+  currentTimeStep: WritableComputedRef<number>;
+  loadTimeSteps: () => Promise<void>;
+}
+
+type StoreMethod = (...args: readonly unknown[]) => unknown;
+
+// The data style store methods are named after the element and attribute types, e.g. "meshPointsVertexAttributeRange"
+function storeMethod(store: object, name: string): StoreMethod {
+  const method: unknown = Reflect.get(store, name);
+  // oxlint-disable-next-line no-unsafe-type-assertion -- the style methods exist for every element type and attribute coloring
+  return method as StoreMethod;
+}
+
+// "Polyhedron" in the store method names of the "polyhedron" coloring
+function attributeType(activeColoring: string): string {
+  return `${activeColoring.charAt(0).toUpperCase()}${activeColoring.slice(1)}Attribute`;
+}
+
+function attributeSchema(prefix: string, activeColoring: string, route: string): JsonRpcSchema {
+  const schema: unknown = Reflect.get(
+    back_schemas.opengeodeweb_back,
+    `${prefix}${activeColoring}_attribute_${route}`,
+  );
+  // oxlint-disable-next-line no-unsafe-type-assertion -- these schemas exist for every attribute coloring
+  return schema as JsonRpcSchema;
+}
+
+// The `${prefix}${activeColoring}_attribute_names` and `_attribute_range` schemas
+function attributeSchemas(prefix: string, activeColoring: string): AttributeSchemas {
+  return {
+    names: attributeSchema(prefix, activeColoring, "names"),
+    range: attributeSchema(prefix, activeColoring, "range"),
+  };
+}
+
+// Colormap, range and time step of the attributes colored by a scalar bar
+function useAttributeColoringStyle(colorings: Ref<AttributeColoring[]>): AttributeColoringStyle {
+  const backStore = useBackStore();
+  const hybridViewerStore = useHybridViewerStore();
+
+  const currentTimeSteps = ref<number[]>([]);
+  const temporalColoring = shallowRef<AttributeColoring | undefined>(undefined);
+
+  async function writeAll(property: string, ...values: unknown[]): Promise<void> {
+    await Promise.all(
+      colorings.value.map(async (coloring) => {
+        await coloring.write(property, ...values);
+      }),
+    );
+    await hybridViewerStore.remoteRender();
+  }
+
+  const currentColormap = computed((): string => {
+    const [coloring] = colorings.value;
+    return coloring ? String(coloring.read("ColorMap")) : "batlow";
+  });
+
+  async function applyGlobalColormap(colorMap: string): Promise<void> {
+    await writeAll("ColorMap", colorMap);
+  }
+
+  const currentRange = computed<readonly [number, number]>({
+    get(): readonly [number, number] {
+      const [coloring] = colorings.value;
+      if (!coloring) {
+        return [0, 1];
+      }
+      // oxlint-disable-next-line no-unsafe-type-assertion -- the range getters return [minimum, maximum].
+      const [minimum = 0, maximum = 1] = coloring.read("Range") as (number | undefined)[];
+      return [minimum, maximum];
+    },
+    // Vue's WritableComputedOptions setter is strictly `(v: T) => void`: the async write is delegated.
+    set: (range: readonly [number, number]): void => {
+      /* oxlint-disable-next-line promise/prefer-await-to-then -- setter cannot be async; see comment above. */
+      writeAll("Range", range[0], range[1]).catch(() => undefined);
+    },
+  });
+
+  async function resetGlobalRange(): Promise<void> {
+    await Promise.all(
+      colorings.value.map(async (coloring) => {
+        const range = await fetchAttributeRange(
+          coloring.schemas.range,
+          coloring.params,
+          String(coloring.read("Name")),
+        );
+        const { min, max } = getAttributeRange(range, Number(coloring.read("Item") ?? 0));
+        await coloring.write("Range", min, max);
+      }),
+    );
+    await hybridViewerStore.remoteRender();
+  }
+
+  async function requestTimeSteps(coloring: AttributeColoring): Promise<number[]> {
+    const name = coloring.read("Name");
+    const response = await backStore.request({
+      schema: coloring.schemas.names,
+      params: coloring.params,
+    });
+    // oxlint-disable-next-line no-unsafe-type-assertion -- every *_attribute_names schema shares this response.
+    const { attributes } = response as AttributeNamesResponse;
+    return attributes.find((attribute) => attribute.attribute_name === name)?.time_steps ?? [];
+  }
+
+  async function loadTimeSteps(): Promise<void> {
+    temporalColoring.value = undefined;
+    currentTimeSteps.value = [];
+    for (const coloring of colorings.value) {
+      // oxlint-disable-next-line no-await-in-loop -- first temporal coloring wins, in order.
+      const timeSteps = await requestTimeSteps(coloring);
+      if (timeSteps.length > 0) {
+        temporalColoring.value = coloring;
+        currentTimeSteps.value = timeSteps;
+        return;
+      }
+    }
+  }
+
+  async function applyTimeStep(step: number): Promise<void> {
+    if (temporalColoring.value) {
+      await temporalColoring.value.write("TimeStep", step);
+      await hybridViewerStore.remoteRender();
+    }
+  }
+
+  const currentTimeStep = computed<number>({
+    get(): number {
+      const coloring = temporalColoring.value;
+      return coloring ? Number(coloring.read("TimeStep") ?? 0) : 0;
+    },
+    // Setter cannot be async (see `currentRange`), so the write is delegated.
+    set: (step: number): void => {
+      /* oxlint-disable-next-line promise/prefer-await-to-then -- setter cannot be async; see comment above. */
+      applyTimeStep(step).catch(() => undefined);
+    },
+  });
+
+  return {
+    currentColormap,
+    currentRange,
+    applyGlobalColormap,
+    resetGlobalRange,
+    currentTimeSteps,
+    currentTimeStep,
+    loadTimeSteps,
+  };
+}
+
+export {
+  type AttributeColoring,
+  type AttributeColoringStyle,
+  attributeSchemas,
+  attributeType,
+  storeMethod,
+  useAttributeColoringStyle,
+};

package/app/composables/global_attribute_style.ts

@@ -1,384 +1,73 @@
-import type { JsonRpcSchema } from "@ogw_shared/utils/types";
-import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
-import { fetchAttributeRange } from "@ogw_front/utils/attribute_range";
-import { getAttributeRange } from "@ogw_front/utils/attributes";
-import { useBackStore } from "@ogw_front/stores/back";
+import {
+  type AttributeColoring,
+  type AttributeColoringStyle,
+  attributeSchemas,
+  attributeType,
+  storeMethod,
+  useAttributeColoringStyle,
+} from "@ogw_front/composables/attribute_coloring_style";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
-interface ComponentNameEntry {
-  getterKey: string;
-  setterKey: string;
-  key: string;
+interface MeshElement {
+  // Element type of the store methods, e.g. "MeshPoints" for "setMeshPointsVertexAttributeRange"
+  storeName: string;
+  styleKey: "points" | "edges" | "polygons" | "cells" | "polyhedra";
 }
 
-interface ActiveComponent extends ComponentNameEntry {
-  activeColoring: string;
-  attributeType: string;
-}
-
-// This composable resolves a batch of dynamically-named getter/setter methods on the data style store (e.g. "meshPointsVertexAttributeRange", "setMeshPointsVertexAttributeRange", ...) - the store's real, fully-typed surface has no index signature for this, so dynamic lookups go through this type guard instead of an unsafe cast of the whole store (which mixes these methods with state refs and other members), matching how these methods are actually shaped (getters take an id and return a value, setters take an id plus arbitrary arguments).
-type DynamicStoreMethod = (...args: readonly unknown[]) => unknown;
-
-function isDynamicStoreMethod(value: unknown): value is DynamicStoreMethod {
-  return typeof value === "function";
-}
-
-function getDynamicStoreMethod(store: object, key: string): DynamicStoreMethod | undefined {
-  const value: unknown = Reflect.get(store, key);
-  return isDynamicStoreMethod(value) ? value : undefined;
-}
+const MESH_ELEMENTS: MeshElement[] = [
+  { storeName: "MeshPoints", styleKey: "points" },
+  { storeName: "MeshEdges", styleKey: "edges" },
+  { storeName: "MeshPolygons", styleKey: "polygons" },
+  { storeName: "MeshCells", styleKey: "cells" },
+  { storeName: "MeshPolyhedra", styleKey: "polyhedra" },
+];
 
-interface AttributeStyleComponent {
-  coloring?: { active?: string };
-}
+const ATTRIBUTE_COLORINGS = new Set(["vertex", "edge", "polygon", "cell", "polyhedron"]);
 
-interface AttributeResponse {
-  readonly attributes?: readonly {
-    readonly attribute_name?: string;
-    readonly time_steps?: readonly number[];
-  }[];
-}
-
-function isColoringValue(
-  value: unknown,
-): value is NonNullable<AttributeStyleComponent["coloring"]> {
+function isColoring(value: unknown): value is { active?: string } {
   return typeof value === "object" && value !== null;
 }
 
-function isJsonRpcSchema(value: unknown): value is JsonRpcSchema {
-  return (
-    typeof value === "object" && value !== null && "$id" in value && typeof value.$id === "string"
-  );
-}
-
-function isAttributeResponse(value: unknown): value is AttributeResponse {
-  return typeof value === "object" && value !== null;
-}
-
-function isNumberArray(value: unknown): value is number[] {
-  return Array.isArray(value) && value.every((item) => typeof item === "number");
-}
-
-function isStringOrUndefined(value: unknown): value is string | undefined {
-  return value === undefined || typeof value === "string";
-}
-
-function isNumberOrUndefined(value: unknown): value is number | undefined {
-  return value === undefined || typeof value === "number";
-}
-
-export function useGlobalAttributeStyle(dataIdRef: Ref<string | undefined>): {
-  currentColormap: typeof currentColormap;
-  currentRange: typeof currentRange;
-  applyGlobalColormap: typeof applyGlobalColormap;
-  resetGlobalRange: typeof resetGlobalRange;
-  currentTimeSteps: typeof currentTimeSteps;
-  currentTimeStep: typeof currentTimeStep;
-  loadTimeSteps: typeof loadTimeSteps;
-} {
+// Styles the mesh elements colored by an attribute
+export function useGlobalAttributeStyle(
+  dataIdRef: Ref<string | undefined>,
+): AttributeColoringStyle {
   const dataStyleStore = useDataStyleStore();
-  const hybridViewerStore = useHybridViewerStore();
-  const backStore = useBackStore();
-
-  const componentNames: ComponentNameEntry[] = [
-    { getterKey: "meshPoints", setterKey: "MeshPoints", key: "points" },
-    { getterKey: "meshEdges", setterKey: "MeshEdges", key: "edges" },
-    { getterKey: "meshPolygons", setterKey: "MeshPolygons", key: "polygons" },
-    { getterKey: "meshCells", setterKey: "MeshCells", key: "cells" },
-    { getterKey: "meshPolyhedra", setterKey: "MeshPolyhedra", key: "polyhedra" },
-  ];
-
-  function getActiveComponents(targetId: string): ActiveComponent[] {
-    const style = dataStyleStore.getStyle(targetId);
-    const activeComponents: ActiveComponent[] = [];
-    for (const { key, getterKey, setterKey } of componentNames) {
-      let componentStyle: Record<string, unknown> | undefined = undefined;
-      switch (key) {
-        case "points": {
-          componentStyle = style.points;
-          break;
-        }
-        case "edges": {
-          componentStyle = style.edges;
-          break;
-        }
-        case "polygons": {
-          componentStyle = style.polygons;
-          break;
-        }
-        case "cells": {
-          componentStyle = style.cells;
-          break;
-        }
-        case "polyhedra": {
-          componentStyle = style.polyhedra;
-          break;
-        }
-        default: {
-          componentStyle = undefined;
-        }
-      }
-      if (componentStyle === undefined) {
-        continue;
-      }
-
-      const { coloring } = componentStyle;
-      if (!isColoringValue(coloring)) {
-        continue;
-      }
-
-      const { active: activeColoring } = coloring;
-      if (
-        activeColoring === undefined ||
-        !["vertex", "edge", "polygon", "cell", "polyhedron"].includes(activeColoring)
-      ) {
-        continue;
-      }
-
-      const attributeType = `${activeColoring.charAt(0).toUpperCase()}${activeColoring.slice(1)}Attribute`;
-      activeComponents.push({ activeColoring, attributeType, getterKey, setterKey, key });
-    }
-    return activeComponents;
-  }
-
-  const currentColormap = computed((): string => {
-    const targetId = dataIdRef.value;
-    if (targetId === undefined || targetId === "") {
-      return "batlow";
-    }
-
-    for (const comp of getActiveComponents(targetId)) {
-      const getterName = `${comp.getterKey}${comp.attributeType}ColorMap`;
-      const getter = getDynamicStoreMethod(dataStyleStore, getterName);
-      if (getter) {
-        const colorMap = getter(targetId);
-        if (typeof colorMap === "string" && colorMap.length > 0) {
-          return colorMap;
-        }
-      }
-    }
-
-    return "batlow";
-  });
-
-  async function applyCurrentRange(newValue: readonly [number, number]): Promise<void> {
-    const targetId = dataIdRef.value;
-    if (targetId === undefined || targetId === "") {
-      return;
-    }
-
-    let updated = false;
-    for (const comp of getActiveComponents(targetId)) {
-      const setterName = `set${comp.setterKey}${comp.attributeType}Range`;
-      const setter = getDynamicStoreMethod(dataStyleStore, setterName);
-      if (setter) {
-        setter(targetId, newValue[0], newValue[1]);
-        updated = true;
-      }
-    }
-    if (updated) {
-      await hybridViewerStore.remoteRender();
-    }
-  }
-
-  const currentRange = computed<readonly [number, number]>({
-    get(): readonly [number, number] {
-      const targetId = dataIdRef.value;
-      if (targetId === undefined || targetId === "") {
-        return [0, 1];
-      }
-
-      for (const comp of getActiveComponents(targetId)) {
-        const getterName = `${comp.getterKey}${comp.attributeType}Range`;
-        const getter = getDynamicStoreMethod(dataStyleStore, getterName);
-        if (getter) {
-          const rawRange = getter(targetId);
-          const range = isNumberArray(rawRange) ? rawRange : undefined;
-          if (range && range.length === 2) {
-            return [range[0] ?? 0, range[1] ?? 1];
-          }
-        }
-      }
-      return [0, 1];
-    },
-    // Vue's WritableComputedOptions setter is strictly `(v: T) => void`, so the async render call is delegated to a helper (see the same trade-off in `app/composables/hover_highlight.ts`'s `onHoverEnter`).
-    set: (newValue: readonly [number, number]): void => {
-      /* oxlint-disable-next-line promise/prefer-await-to-then -- setter cannot be async; see comment above. */
-      applyCurrentRange(newValue).catch(() => undefined);
-    },
-  });
-
-  async function applyGlobalColormap(newMap: string): Promise<void> {
-    const targetId = dataIdRef.value;
-    if (targetId === undefined || targetId === "") {
-      return;
-    }
-
-    const promises: Promise<unknown>[] = [];
-
-    for (const comp of getActiveComponents(targetId)) {
-      const setterName = `set${comp.setterKey}${comp.attributeType}ColorMap`;
-      const setter = getDynamicStoreMethod(dataStyleStore, setterName);
-
-      if (setter) {
-        promises.push(Promise.resolve(setter(targetId, newMap)));
-      }
-    }
-
-    await Promise.all(promises);
-    await hybridViewerStore.remoteRender();
-  }
-
-  async function resetGlobalRange(): Promise<void> {
-    const targetId = dataIdRef.value;
-    if (targetId === undefined || targetId === "") {
-      return;
-    }
-
-    const requestPromises: Promise<unknown>[] = [];
-
-    for (const comp of getActiveComponents(targetId)) {
-      const { activeColoring, attributeType, getterKey, setterKey } = comp;
-
-      const nameGetter = getDynamicStoreMethod(dataStyleStore, `${getterKey}${attributeType}Name`);
-      const itemGetter = getDynamicStoreMethod(dataStyleStore, `${getterKey}${attributeType}Item`);
-      if (!nameGetter || !itemGetter) {
-        continue;
-      }
-
-      const rawAttrName = nameGetter(targetId);
-      const attrName = isStringOrUndefined(rawAttrName) ? rawAttrName : undefined;
-      const rawAttrItem = itemGetter(targetId);
-      const attrItem = (isNumberOrUndefined(rawAttrItem) ? rawAttrItem : undefined) ?? 0;
 
-      if (attrName === undefined || attrName === "") {
-        continue;
-      }
-
-      const rangeSchema = (back_schemas.opengeodeweb_back as Record<string, unknown>)[
-        `${activeColoring}_attribute_range`
-      ];
-      if (!isJsonRpcSchema(rangeSchema)) {
-        continue;
-      }
-
-      requestPromises.push(
-        (async (): Promise<void> => {
-          const range = await fetchAttributeRange(rangeSchema, { id: targetId }, attrName);
-          if (!range) {
-            return;
-          }
-          const { min, max } = getAttributeRange(range, attrItem);
-          const setter = getDynamicStoreMethod(
-            dataStyleStore,
-            `set${setterKey}${attributeType}Range`,
-          );
-          if (setter) {
-            setter(targetId, min, max);
-            await hybridViewerStore.remoteRender();
-          }
-        })(),
-      );
-    }
-
-    await Promise.all(requestPromises);
-  }
-
-  const currentTimeSteps = ref<number[]>([]);
-  const temporalComponent = shallowRef<ActiveComponent | undefined>(undefined);
-
-  async function requestTimeSteps(targetId: string, comp: ActiveComponent): Promise<number[]> {
-    const { activeColoring, attributeType, getterKey } = comp;
-    const nameGetter = getDynamicStoreMethod(dataStyleStore, `${getterKey}${attributeType}Name`);
-    const rawAttrName = nameGetter?.(targetId);
-    const schema = (back_schemas.opengeodeweb_back as Record<string, unknown>)[
-      `${activeColoring}_attribute_names`
-    ];
-    if (
-      !isStringOrUndefined(rawAttrName) ||
-      rawAttrName === undefined ||
-      rawAttrName === "" ||
-      !isJsonRpcSchema(schema)
-    ) {
-      return [];
-    }
-    let timeSteps: number[] = [];
-    await backStore.request(
-      { schema, params: { id: targetId } },
-      {
-        response_function: (response: unknown): void => {
-          if (!isAttributeResponse(response)) {
-            return;
-          }
-          const found = response.attributes?.find((attr) => attr.attribute_name === rawAttrName);
-          timeSteps = [...(found?.time_steps ?? [])];
-        },
+  function meshColoring(
+    dataId: string,
+    { storeName }: MeshElement,
+    activeColoring: string,
+  ): AttributeColoring {
+    const methodName = `${storeName}${attributeType(activeColoring)}`;
+    const getterName = `${methodName.charAt(0).toLowerCase()}${methodName.slice(1)}`;
+    return {
+      read: (property): unknown => storeMethod(dataStyleStore, `${getterName}${property}`)(dataId),
+      write: async (property, ...values): Promise<void> => {
+        await storeMethod(dataStyleStore, `set${methodName}${property}`)(dataId, ...values);
       },
-    );
-    return timeSteps;
+      schemas: attributeSchemas("", activeColoring),
+      params: { id: dataId },
+    };
   }
 
-  async function loadTimeSteps(): Promise<void> {
-    const targetId = dataIdRef.value;
-    temporalComponent.value = undefined;
-    currentTimeSteps.value = [];
-    if (targetId === undefined || targetId === "") {
-      return;
-    }
-    for (const comp of getActiveComponents(targetId)) {
-      // oxlint-disable-next-line no-await-in-loop -- first temporal component wins, in order.
-      const timeSteps = await requestTimeSteps(targetId, comp);
-      if (timeSteps.length > 0) {
-        temporalComponent.value = comp;
-        currentTimeSteps.value = timeSteps;
-        return;
-      }
-    }
-  }
-
-  watch(dataIdRef, loadTimeSteps, { immediate: true });
-
-  async function applyCurrentTimeStep(step: number): Promise<void> {
-    const targetId = dataIdRef.value;
-    const comp = temporalComponent.value;
-    if (targetId === undefined || targetId === "" || !comp) {
-      return;
-    }
-    const { attributeType, setterKey } = comp;
-    const setter = getDynamicStoreMethod(dataStyleStore, `set${setterKey}${attributeType}TimeStep`);
-    if (setter) {
-      await setter(targetId, step);
-      await hybridViewerStore.remoteRender();
+  const colorings = computed<AttributeColoring[]>(() => {
+    const dataId = dataIdRef.value;
+    // The picker exists before any scalar bar is picked
+    if (dataId === undefined) {
+      return [];
     }
-  }
-
-  const currentTimeStep = computed<number>({
-    get(): number {
-      const targetId = dataIdRef.value;
-      const comp = temporalComponent.value;
-      if (targetId === undefined || targetId === "" || !comp) {
-        return 0;
-      }
-      const { attributeType, getterKey } = comp;
-      const getter = getDynamicStoreMethod(dataStyleStore, `${getterKey}${attributeType}TimeStep`);
-      const rawStep = getter?.(targetId);
-      return typeof rawStep === "number" ? rawStep : 0;
-    },
-    // Setter cannot be async (see `currentRange`), so the work is delegated to a helper.
-    set: (step: number): void => {
-      /* oxlint-disable-next-line promise/prefer-await-to-then -- setter cannot be async; see comment above. */
-      applyCurrentTimeStep(step).catch(() => undefined);
-    },
+    const style = dataStyleStore.getStyle(dataId);
+    return MESH_ELEMENTS.flatMap((element) => {
+      const coloring: unknown = style[element.styleKey]?.coloring;
+      const activeColoring = isColoring(coloring) ? coloring.active : undefined;
+      return activeColoring !== undefined && ATTRIBUTE_COLORINGS.has(activeColoring)
+        ? [meshColoring(dataId, element, activeColoring)]
+        : [];
+    });
   });
 
-  return {
-    currentColormap,
-    currentRange,
-    applyGlobalColormap,
-    resetGlobalRange,
-    currentTimeSteps,
-    currentTimeStep,
-    loadTimeSteps,
-  };
+  const style = useAttributeColoringStyle(colorings);
+  watch(dataIdRef, style.loadTimeSteps, { immediate: true });
+  return style;
 }

package/app/composables/model_attribute_style.ts

@@ -0,0 +1,79 @@
+import {
+  type AttributeColoring,
+  type AttributeColoringStyle,
+  attributeSchemas,
+  attributeType,
+  storeMethod,
+  useAttributeColoringStyle,
+} from "@ogw_front/composables/attribute_coloring_style";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+
+// Components of the same type colored by the same attribute share the store methods, e.g. "modelBlocksPolyhedronAttributeName"
+interface ComponentGroup {
+  // Component type of the store methods, e.g. "Block"
+  type: string;
+  activeColoring: string;
+  componentIds: string[];
+}
+
+function modelColoring(
+  dataStyleStore: object,
+  modelId: string,
+  { type, activeColoring, componentIds }: ComponentGroup,
+): AttributeColoring {
+  const methodName = `${type}s${attributeType(activeColoring)}`;
+  return {
+    // Every component of the coloring shares its style: reading the first one is enough
+    read: (property): unknown =>
+      storeMethod(dataStyleStore, `model${methodName}${property}`)(modelId, componentIds[0]),
+    write: async (property, ...values): Promise<void> => {
+      await storeMethod(dataStyleStore, `setModel${methodName}${property}`)(
+        modelId,
+        componentIds,
+        ...values,
+      );
+    },
+    schemas: attributeSchemas("model_component_", activeColoring),
+    params: { id: modelId, component_ids: componentIds },
+  };
+}
+
+// Styles the model components colored by the picked scalar bar
+export function useModelAttributeStyle(
+  modelIdRef: Ref<string>,
+  blockViewerIdsRef: Ref<number[]>,
+): AttributeColoringStyle {
+  const dataStyleStore = useDataStyleStore();
+  const dataStore = useDataStore();
+
+  const colorings = shallowRef<AttributeColoring[]>([]);
+  const style = useAttributeColoringStyle(colorings);
+
+  async function loadColorings(): Promise<void> {
+    const modelId = modelIdRef.value;
+    const blockViewerIds = blockViewerIdsRef.value;
+    const components = await dataStore.getComponentsByViewerIds(modelId, blockViewerIds);
+    // A newer pick replaced this one while the components were read
+    if (modelId !== modelIdRef.value || blockViewerIds !== blockViewerIdsRef.value) {
+      return;
+    }
+    const groups = new Map<string, ComponentGroup>();
+    for (const { type, geode_id } of components) {
+      const activeColoring = String(
+        storeMethod(dataStyleStore, `model${type}ActiveColoring`)(modelId, geode_id),
+      );
+      const key = `${type}_${activeColoring}`;
+      const group = groups.get(key) ?? { type, activeColoring, componentIds: [] };
+      group.componentIds.push(geode_id);
+      groups.set(key, group);
+    }
+    colorings.value = [...groups.values()].map((group) =>
+      modelColoring(dataStyleStore, modelId, group),
+    );
+    await style.loadTimeSteps();
+  }
+
+  watch([modelIdRef, blockViewerIdsRef], loadColorings, { immediate: true });
+  return style;
+}

package/app/composables/use_quick_colormap.ts

@@ -9,11 +9,13 @@ export function useQuickColormap(): {
   const viewerStore = useViewerStore();
   const quickColormap = reactive<{
     data_id: string | undefined;
+    block_ids: number[] | undefined;
     show: boolean;
     x: number;
     y: number;
   }>({
     data_id: undefined,
+    block_ids: undefined,
     show: false,
     x: 0,
     y: 0,
@@ -28,9 +30,10 @@ export function useQuickColormap(): {
     try {
       const schema = viewer_schemas.opengeodeweb_viewer.viewer.pick_colormap;
       const params = { x: offsetX, y: offsetY };
-      const { data_id } = await viewerStore.request({ schema, params });
+      const { data_id, block_ids } = await viewerStore.request({ schema, params });
       if (data_id !== undefined && data_id !== "") {
         quickColormap.data_id = data_id;
+        quickColormap.block_ids = block_ids;
         quickColormap.x = clientX;
         quickColormap.y = clientY;
         quickColormap.show = true;

package/app/stores/data.ts

@@ -285,6 +285,17 @@ export const useDataStore = defineStore("data", () => {
       .first();
     return component;
   }
+  async function getComponentsByViewerIds(
+    modelId: string,
+    viewer_ids: number[],
+  ): Promise<ModelComponentRecord[]> {
+    const components = await model_components_db
+      .where("viewer_id")
+      .anyOf(viewer_ids)
+      .and((model_component: ModelComponentRecord) => model_component.id === modelId)
+      .toArray();
+    return components;
+  }
   async function deleteModelComponents(modelId: string): Promise<void> {
     await model_components_db.where("id").equals(modelId).delete();
     await model_components_relation_db.where("id").equals(modelId).delete();
@@ -365,6 +376,7 @@ export const useDataStore = defineStore("data", () => {
     getAllModelComponentsViewerIds,
     getMeshComponentsViewerIds,
     getComponentByViewerId,
+    getComponentsByViewerIds,
     exportStores,
     importStores,
     clear,

package/app/utils/attribute_range.ts

@@ -19,38 +19,38 @@ interface AttributeRangeTarget {
 }
 
 // A data never changes once imported: selectors showing the same attribute share one request
-const rangeRequests = new Map<string, Promise<AttributeRangeInfo | undefined>>();
+const rangeRequests = new Map<string, Promise<AttributeRangeInfo>>();
 
 async function requestAttributeRange(
   rangeSchema: JsonRpcSchema,
   params: Record<string, unknown>,
-  key: string,
-): Promise<AttributeRangeInfo | undefined> {
+): Promise<AttributeRangeInfo> {
   const backStore = useBackStore();
-  try {
-    const range = await backStore.request({ schema: rangeSchema, params });
-    // oxlint-disable-next-line no-unsafe-type-assertion -- every *_attribute_range schema shares this response.
-    return range as AttributeRangeInfo;
-  } catch {
-    rangeRequests.delete(key);
-    return undefined;
-  }
+  const range = await backStore.request({ schema: rangeSchema, params });
+  // oxlint-disable-next-line no-unsafe-type-assertion -- every *_attribute_range schema shares this response.
+  return range as AttributeRangeInfo;
 }
 
 async function fetchAttributeRange(
   rangeSchema: JsonRpcSchema,
   target: AttributeRangeTarget,
   attributeName: string,
-): Promise<AttributeRangeInfo | undefined> {
+): Promise<AttributeRangeInfo> {
   const params = { ...target, attribute_name: attributeName };
   const key = JSON.stringify([rangeSchema.$id, params]);
   let request = rangeRequests.get(key);
   if (request === undefined) {
-    request = requestAttributeRange(rangeSchema, params, key);
+    request = requestAttributeRange(rangeSchema, params);
     rangeRequests.set(key, request);
   }
-  const range = await request;
-  return range;
+  try {
+    const range = await request;
+    return range;
+  } catch (error) {
+    // A failed request is not kept: the next call retries it
+    rangeRequests.delete(key);
+    throw error;
+  }
 }
 
 export { type AttributeRangeInfo, type AttributeSchemas, fetchAttributeRange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.41.0-rc.2",
+  "version": "10.41.0-rc.3",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {