@geode/opengeodeweb-front 10.40.0-rc.2 → 10.40.1-rc.1

package/app/components/ThresholdFilter.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { type AttributeSchemas, fetchAttributeRange } from "@ogw_front/utils/attribute_range";
 import {
   MESH_ELEMENT_KINDS,
   MODEL_COMPONENT_ATTRIBUTE_SCHEMAS,
@@ -26,9 +27,9 @@ const { escapeFunction = undefined } = defineProps<Props>();
 
 interface AttributeSource {
   title: string;
-  schema: JsonRpcSchema;
+  schemas: AttributeSchemas;
   timeStepKey: string;
-  params: Record<string, unknown>;
+  params: { id: string; component_ids?: string[] };
   location: "point" | "cell";
 }
 
@@ -86,23 +87,24 @@ const itemOptions = computed<{ title: string; value: number }[]>(() =>
   })),
 );
 
-function attributeSchema(kind: string, isModel: boolean): JsonRpcSchema {
+function attributeSchema(kind: string, isModel: boolean, route: "names" | "range"): JsonRpcSchema {
   const prefix = isModel ? "model_component_" : "";
   return back_schemas.opengeodeweb_back[
-    `${prefix}${kind}_attribute_names` as keyof typeof back_schemas.opengeodeweb_back
+    `${prefix}${kind}_attribute_${route}` as keyof typeof back_schemas.opengeodeweb_back
   ] as JsonRpcSchema;
 }
 
 function attributeSource(
   kind: string,
   title: string,
-  params: Record<string, unknown>,
+  params: { id: string; component_ids?: string[] },
   modelType?: string,
 ): AttributeSource {
-  const schema = attributeSchema(kind, modelType !== undefined);
+  const isModel = modelType !== undefined;
+  const schema = attributeSchema(kind, isModel, "names");
   return {
     title: `${title}${kind} attribute`,
-    schema,
+    schemas: { names: schema, range: attributeSchema(kind, isModel, "range") },
     timeStepKey:
       modelType === undefined
         ? schema.$id
@@ -154,11 +156,17 @@ async function applyThreshold(): Promise<void> {
 
 const debouncedApply = useDebounceFn(() => applyThreshold(), DEBOUNCE_DELAY);
 
-function resetRange(): void {
-  const { min, max } = getAttributeRange(
-    currentAttribute.value as Parameters<typeof getAttributeRange>[0],
-    attributeItem.value,
-  );
+async function resetRange(): Promise<void> {
+  const source = sources.value[selectedSourceIndex.value ?? -1];
+  const name = attributeName.value;
+  if (!source || name === undefined) {
+    return;
+  }
+  const range = await fetchAttributeRange(source.schemas.range, source.params, name);
+  if (name !== attributeName.value) {
+    return;
+  }
+  const { min, max } = getAttributeRange(range, attributeItem.value);
   minimum.value = min;
   maximum.value = max;
 }
@@ -186,19 +194,19 @@ watch(selectedSourceIndex, async (index) => {
     return;
   }
   const response = (await backStore.request({
-    schema: source.schema,
+    schema: source.schemas.names,
     params: source.params,
   })) as { attributes: AttributeInfo[] };
   attributes.value = response.attributes;
 });
 
-watch(attributeName, () => {
+watch(attributeName, async () => {
   attributeItem.value = 0;
-  resetRange();
+  await resetRange();
 });
 
-watch(attributeItem, () => {
-  resetRange();
+watch(attributeItem, async () => {
+  await resetRange();
 });
 
 watch(currentTimeStep, () => {

package/app/components/Viewer/Generic/Model/BlocksOptions.vue

@@ -30,6 +30,8 @@ const referenceBlockId = computed<string | undefined>(() =>
   collections ? targetBlockIds[0] : undefined,
 );
 
+const blockComponentIds = computed<string[]>(() => (blockId === undefined ? [] : [blockId]));
+
 // Visibility
 const blocksVisibility = computed<boolean>({
   get: () =>
@@ -184,8 +186,14 @@ const blocksPolyhedronAttributeName = computed<string | undefined>({
     if (newValue === undefined) {
       return;
     }
-    await dataStyleStore.setModelBlocksPolyhedronAttributeName(modelId, targetBlockIds, newValue);
-    hybridViewerStore.remoteRender();
+    const applied = await dataStyleStore.setModelBlocksPolyhedronAttributeName(
+      modelId,
+      targetBlockIds,
+      newValue,
+    );
+    if (applied) {
+      hybridViewerStore.remoteRender();
+    }
   },
 });
 
@@ -195,20 +203,28 @@ const blocksPolyhedronAttributeTimeStep = computed<number | undefined>({
     if (newValue === undefined) {
       return;
     }
-    await dataStyleStore.setModelBlocksPolyhedronAttributeTimeStep(
+    const applied = await dataStyleStore.setModelBlocksPolyhedronAttributeTimeStep(
       modelId,
       targetBlockIds,
       newValue,
     );
-    hybridViewerStore.remoteRender();
+    if (applied) {
+      hybridViewerStore.remoteRender();
+    }
   },
 });
 
 const blocksPolyhedronAttributeItem = computed<string | undefined>({
   get: () => dataStyleStore.modelBlocksPolyhedronAttributeItem(modelId, referenceBlockId.value),
   set: async (newValue) => {
-    await dataStyleStore.setModelBlocksPolyhedronAttributeItem(modelId, targetBlockIds, newValue);
-    hybridViewerStore.remoteRender();
+    const applied = await dataStyleStore.setModelBlocksPolyhedronAttributeItem(
+      modelId,
+      targetBlockIds,
+      newValue,
+    );
+    if (applied) {
+      hybridViewerStore.remoteRender();
+    }
   },
 });
 
@@ -219,25 +235,29 @@ const blocksPolyhedronAttributeRange = computed<[number, number] | undefined>({
     if (minimum === undefined || maximum === undefined) {
       return;
     }
-    await dataStyleStore.setModelBlocksPolyhedronAttributeRange(
+    const applied = await dataStyleStore.setModelBlocksPolyhedronAttributeRange(
       modelId,
       targetBlockIds,
       minimum,
       maximum,
     );
-    hybridViewerStore.remoteRender();
+    if (applied) {
+      hybridViewerStore.remoteRender();
+    }
   },
 });
 
 const blocksPolyhedronAttributeColorMap = computed<Map<string, RGBAColor> | undefined>({
   get: () => dataStyleStore.modelBlocksPolyhedronAttributeColorMap(modelId, referenceBlockId.value),
   set: async (newValue) => {
-    await dataStyleStore.setModelBlocksPolyhedronAttributeColorMap(
+    const applied = await dataStyleStore.setModelBlocksPolyhedronAttributeColorMap(
       modelId,
       targetBlockIds,
       newValue,
     );
-    hybridViewerStore.remoteRender();
+    if (applied) {
+      hybridViewerStore.remoteRender();
+    }
   },
 });
 
@@ -245,12 +265,14 @@ const blocksPolyhedronAttributeNoDataColor = computed<RGBAColor>({
   get: () =>
     dataStyleStore.modelBlocksPolyhedronAttributeNoDataColor(modelId, referenceBlockId.value),
   set: async (newValue) => {
-    await dataStyleStore.setModelBlocksPolyhedronAttributeNoDataColor(
+    const applied = await dataStyleStore.setModelBlocksPolyhedronAttributeNoDataColor(
       modelId,
       targetBlockIds,
       newValue,
     );
-    hybridViewerStore.remoteRender();
+    if (applied) {
+      hybridViewerStore.remoteRender();
+    }
   },
 });
 
@@ -328,8 +350,14 @@ const polyhedronAttributeName = computed<string | undefined>({
     if (blockId === undefined || newValue === undefined) {
       return;
     }
-    await dataStyleStore.setModelBlocksPolyhedronAttributeName(modelId, [blockId], newValue);
-    hybridViewerStore.remoteRender();
+    const applied = await dataStyleStore.setModelBlocksPolyhedronAttributeName(
+      modelId,
+      [blockId],
+      newValue,
+    );
+    if (applied) {
+      hybridViewerStore.remoteRender();
+    }
   },
 });
 
@@ -339,8 +367,14 @@ const polyhedronAttributeTimeStep = computed<number | undefined>({
     if (blockId === undefined || newValue === undefined) {
       return;
     }
-    await dataStyleStore.setModelBlocksPolyhedronAttributeTimeStep(modelId, [blockId], newValue);
-    hybridViewerStore.remoteRender();
+    const applied = await dataStyleStore.setModelBlocksPolyhedronAttributeTimeStep(
+      modelId,
+      [blockId],
+      newValue,
+    );
+    if (applied) {
+      hybridViewerStore.remoteRender();
+    }
   },
 });
 
@@ -350,8 +384,14 @@ const polyhedronAttributeItem = computed<string | undefined>({
     if (blockId === undefined) {
       return;
     }
-    await dataStyleStore.setModelBlocksPolyhedronAttributeItem(modelId, [blockId], newValue);
-    hybridViewerStore.remoteRender();
+    const applied = await dataStyleStore.setModelBlocksPolyhedronAttributeItem(
+      modelId,
+      [blockId],
+      newValue,
+    );
+    if (applied) {
+      hybridViewerStore.remoteRender();
+    }
   },
 });
 
@@ -362,13 +402,15 @@ const polyhedronAttributeRange = computed<[number, number] | undefined>({
     if (blockId === undefined || minimum === undefined || maximum === undefined) {
       return;
     }
-    await dataStyleStore.setModelBlocksPolyhedronAttributeRange(
+    const applied = await dataStyleStore.setModelBlocksPolyhedronAttributeRange(
       modelId,
       [blockId],
       minimum,
       maximum,
     );
-    hybridViewerStore.remoteRender();
+    if (applied) {
+      hybridViewerStore.remoteRender();
+    }
   },
 });
 
@@ -378,8 +420,14 @@ const polyhedronAttributeColorMap = computed<Map<string, RGBAColor> | undefined>
     if (blockId === undefined) {
       return;
     }
-    await dataStyleStore.setModelBlocksPolyhedronAttributeColorMap(modelId, [blockId], newValue);
-    hybridViewerStore.remoteRender();
+    const applied = await dataStyleStore.setModelBlocksPolyhedronAttributeColorMap(
+      modelId,
+      [blockId],
+      newValue,
+    );
+    if (applied) {
+      hybridViewerStore.remoteRender();
+    }
   },
 });
 
@@ -389,8 +437,14 @@ const polyhedronAttributeNoDataColor = computed<RGBAColor>({
     if (blockId === undefined) {
       return;
     }
-    await dataStyleStore.setModelBlocksPolyhedronAttributeNoDataColor(modelId, [blockId], newValue);
-    hybridViewerStore.remoteRender();
+    const applied = await dataStyleStore.setModelBlocksPolyhedronAttributeNoDataColor(
+      modelId,
+      [blockId],
+      newValue,
+    );
+    if (applied) {
+      hybridViewerStore.remoteRender();
+    }
   },
 });
 
@@ -404,8 +458,17 @@ const capabilities = {
   polyhedron: { available: true },
 };
 
-const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attribute_names;
-const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedron_attribute_names;
+const backSchemas = back_schemas.opengeodeweb_back;
+const attributeSchemas = {
+  vertex: {
+    names: backSchemas.model_component_vertex_attribute_names,
+    range: backSchemas.model_component_vertex_attribute_range,
+  },
+  polyhedron: {
+    names: backSchemas.model_component_polyhedron_attribute_names,
+    range: backSchemas.model_component_polyhedron_attribute_range,
+  },
+};
 </script>
 
 <template>
@@ -429,7 +492,7 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
       v-model:polyhedron_attribute_no_data_color="blocksPolyhedronAttributeNoDataColor"
       v-model:polyhedron_attribute_time_step="blocksPolyhedronAttributeTimeStep"
       :capabilities="capabilities"
-      :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
+      :schemas="attributeSchemas"
       :allowRandom="true"
     />
   </OptionsSection>
@@ -443,7 +506,7 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
     <VisibilitySwitch v-model="blockVisibility" />
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
-      :componentIds="[blockId]"
+      :componentIds="blockComponentIds"
       v-model:coloring_style_key="blockActiveColoring"
       v-model:color="blockColor"
       v-model:vertex_attribute_name="vertexAttributeName"
@@ -459,7 +522,7 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
       v-model:polyhedron_attribute_no_data_color="polyhedronAttributeNoDataColor"
       v-model:polyhedron_attribute_time_step="polyhedronAttributeTimeStep"
       :capabilities="capabilities"
-      :schemas="{ vertex: vertexSchema, polyhedron: polyhedronSchema }"
+      :schemas="attributeSchemas"
       :allowRandom="true"
     />
   </OptionsSection>

package/app/components/Viewer/Generic/Model/CornersOptions.vue

@@ -29,6 +29,8 @@ const referenceCornerId = computed<string | undefined>(() =>
   collections ? targetCornerIds[0] : undefined,
 );
 
+const cornerComponentIds = computed<string[]>(() => (cornerId === undefined ? [] : [cornerId]));
+
 // Visibility
 const cornersVisibility = computed<boolean>({
   get: () =>
@@ -258,7 +260,13 @@ const capabilities = {
   polyhedron: { available: false },
 };
 
-const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attribute_names;
+const backSchemas = back_schemas.opengeodeweb_back;
+const attributeSchemas = {
+  vertex: {
+    names: backSchemas.model_component_vertex_attribute_names,
+    range: backSchemas.model_component_vertex_attribute_range,
+  },
+};
 </script>
 
 <template>
@@ -276,7 +284,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
       v-model:vertex_attribute_no_data_color="cornersVertexAttributeNoDataColor"
       v-model:vertex_attribute_time_step="cornersVertexAttributeTimeStep"
       :capabilities="capabilities"
-      :schemas="{ vertex: vertexSchema }"
+      :schemas="attributeSchemas"
       :allowRandom="true"
     />
   </OptionsSection>
@@ -290,7 +298,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
     <VisibilitySwitch v-model="cornerVisibility" />
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
-      :componentIds="[cornerId]"
+      :componentIds="cornerComponentIds"
       v-model:coloring_style_key="cornerActiveColoring"
       v-model:color="cornerColor"
       v-model:vertex_attribute_name="vertexAttributeName"
@@ -300,7 +308,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
       v-model:vertex_attribute_no_data_color="vertexAttributeNoDataColor"
       v-model:vertex_attribute_time_step="vertexAttributeTimeStep"
       :capabilities="capabilities"
-      :schemas="{ vertex: vertexSchema }"
+      :schemas="attributeSchemas"
       :allowRandom="true"
     />
   </OptionsSection>

package/app/components/Viewer/Generic/Model/LinesOptions.vue

@@ -29,6 +29,8 @@ const referenceLineId = computed<string | undefined>(() =>
   collections ? targetLineIds[0] : undefined,
 );
 
+const lineComponentIds = computed<string[]>(() => (lineId === undefined ? [] : [lineId]));
+
 // Visibility
 const linesVisibility = computed<boolean>({
   get: () =>
@@ -375,8 +377,17 @@ const capabilities = {
   polyhedron: { available: false },
 };
 
-const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attribute_names;
-const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute_names;
+const backSchemas = back_schemas.opengeodeweb_back;
+const attributeSchemas = {
+  vertex: {
+    names: backSchemas.model_component_vertex_attribute_names,
+    range: backSchemas.model_component_vertex_attribute_range,
+  },
+  edge: {
+    names: backSchemas.model_component_edge_attribute_names,
+    range: backSchemas.model_component_edge_attribute_range,
+  },
+};
 </script>
 
 <template>
@@ -400,7 +411,7 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
       v-model:edge_attribute_no_data_color="linesEdgeAttributeNoDataColor"
       v-model:edge_attribute_time_step="linesEdgeAttributeTimeStep"
       :capabilities="capabilities"
-      :schemas="{ vertex: vertexSchema, edge: edgeSchema }"
+      :schemas="attributeSchemas"
       :allowRandom="true"
     />
   </OptionsSection>
@@ -414,7 +425,7 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
     <VisibilitySwitch v-model="lineVisibility" />
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
-      :componentIds="[lineId]"
+      :componentIds="lineComponentIds"
       v-model:coloring_style_key="lineActiveColoring"
       v-model:color="lineColor"
       v-model:vertex_attribute_name="vertexAttributeName"
@@ -430,7 +441,7 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
       v-model:edge_attribute_no_data_color="edgeAttributeNoDataColor"
       v-model:edge_attribute_time_step="edgeAttributeTimeStep"
       :capabilities="capabilities"
-      :schemas="{ vertex: vertexSchema, edge: edgeSchema }"
+      :schemas="attributeSchemas"
       :allowRandom="true"
     />
   </OptionsSection>

package/app/components/Viewer/Generic/Model/SurfacesOptions.vue

@@ -30,6 +30,8 @@ const referenceSurfaceId = computed<string | undefined>(() =>
   collections ? targetSurfaceIds[0] : undefined,
 );
 
+const surfaceComponentIds = computed<string[]>(() => (surfaceId === undefined ? [] : [surfaceId]));
+
 // Visibility
 const surfacesVisibility = computed<boolean>({
   get: () =>
@@ -426,8 +428,17 @@ const capabilities = {
   polyhedron: { available: false },
 };
 
-const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attribute_names;
-const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_attribute_names;
+const backSchemas = back_schemas.opengeodeweb_back;
+const attributeSchemas = {
+  vertex: {
+    names: backSchemas.model_component_vertex_attribute_names,
+    range: backSchemas.model_component_vertex_attribute_range,
+  },
+  polygon: {
+    names: backSchemas.model_component_polygon_attribute_names,
+    range: backSchemas.model_component_polygon_attribute_range,
+  },
+};
 </script>
 
 <template>
@@ -451,7 +462,7 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
       v-model:polygon_attribute_no_data_color="surfacesPolygonAttributeNoDataColor"
       v-model:polygon_attribute_time_step="surfacesPolygonAttributeTimeStep"
       :capabilities="capabilities"
-      :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
+      :schemas="attributeSchemas"
       :allowRandom="true"
     />
   </OptionsSection>
@@ -465,7 +476,7 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
     <VisibilitySwitch v-model="surfaceVisibility" />
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
-      :componentIds="[surfaceId]"
+      :componentIds="surfaceComponentIds"
       v-model:coloring_style_key="surfaceActiveColoring"
       v-model:color="surfaceColor"
       v-model:vertex_attribute_name="vertexAttributeName"
@@ -481,7 +492,7 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
       v-model:polygon_attribute_no_data_color="polygonAttributeNoDataColor"
       v-model:polygon_attribute_time_step="polygonAttributeTimeStep"
       :capabilities="capabilities"
-      :schemas="{ vertex: vertexSchema, polygon: polygonSchema }"
+      :schemas="attributeSchemas"
       :allowRandom="true"
     />
   </OptionsSection>

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

@@ -7,6 +7,40 @@ const emit = defineEmits<Emits>();
 
 const minimum = defineModel<number>("minimum");
 const maximum = defineModel<number>("maximum");
+
+const minimumText = ref<string>("");
+const maximumText = ref<string>("");
+
+watch(minimum, (value) => (minimumText.value = value === undefined ? "" : String(value)), {
+  immediate: true,
+});
+watch(maximum, (value) => (maximumText.value = value === undefined ? "" : String(value)), {
+  immediate: true,
+});
+
+// Text inputs (not type="number") so scientific notation like 1.5e7 can be typed, committed on enter or blur.
+function parseValue(text: string): number | undefined {
+  const value = Number(text.trim());
+  return text.trim() === "" || !Number.isFinite(value) ? undefined : value;
+}
+
+function commitMinimum(): void {
+  const value = parseValue(minimumText.value);
+  if (value === undefined) {
+    minimumText.value = minimum.value === undefined ? "" : String(minimum.value);
+    return;
+  }
+  minimum.value = value;
+}
+
+function commitMaximum(): void {
+  const value = parseValue(maximumText.value);
+  if (value === undefined) {
+    maximumText.value = maximum.value === undefined ? "" : String(maximum.value);
+    return;
+  }
+  maximum.value = value;
+}
 </script>
 
 <template>
@@ -14,11 +48,11 @@ const maximum = defineModel<number>("maximum");
     <v-col cols="5" class="pe-1">
       <v-text-field
         data-testid="attributeMinInput"
-        :model-value="minimum"
-        @update:model-value="(value) => (minimum = Number(value))"
+        v-model="minimumText"
+        @keydown.enter="commitMinimum"
+        @blur="commitMinimum"
         label="Min"
-        type="number"
-        :max="maximum"
+        inputmode="decimal"
         density="compact"
         hide-details
         variant="outlined"
@@ -38,11 +72,11 @@ const maximum = defineModel<number>("maximum");
     <v-col cols="5" class="ps-1">
       <v-text-field
         data-testid="attributeMaxInput"
-        :model-value="maximum"
-        @update:model-value="(value) => (maximum = Number(value))"
+        v-model="maximumText"
+        @keydown.enter="commitMaximum"
+        @blur="commitMaximum"
         label="Max"
-        type="number"
-        :min="minimum"
+        inputmode="decimal"
         density="compact"
         hide-details
         variant="outlined"

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

@@ -4,9 +4,13 @@ import {
   type RangesPerData,
   useBatchGroup,
 } from "@ogw_front/composables/batch_style";
+import {
+  type AttributeRangeInfo,
+  type AttributeSchemas,
+  fetchAttributeRange,
+} from "@ogw_front/utils/attribute_range";
 import { getAttributeRange, intersectAttributes } from "@ogw_front/utils/attributes";
 import { DEFAULT_NO_DATA_COLOR } from "@ogw_front/utils/default_styles/constants";
-import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
 import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar.vue";
 import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
 import ViewerOptionsTimeStepSlider from "@ogw_front/components/Viewer/Options/TimeStepSlider.vue";
@@ -27,10 +31,10 @@ const attributeTimeStep = defineModel<number>("attributeTimeStep");
 interface Props {
   id: string;
   componentIds?: string[];
-  schema: JsonRpcSchema;
+  schemas: AttributeSchemas;
 }
 
-const { id, componentIds = undefined, schema } = defineProps<Props>();
+const { id, componentIds = undefined, schemas } = defineProps<Props>();
 
 interface Emits {
   "update:attributeColorMap": [colorMap: string];
@@ -43,13 +47,15 @@ const emit = defineEmits<Emits>();
 interface AttributeInfo {
   attribute_name: string;
   nb_items: number;
-  no_data?: boolean;
   time_steps?: number[];
   [key: string]: unknown;
 }
 
 const attributes = ref<AttributeInfo[]>([]);
 let attributesPerTarget = new Map<string, AttributeInfo[]>();
+const rangesPerTarget = ref(new Map<string, AttributeRangeInfo>());
+let rangesName: string | undefined = undefined;
+let rangesLoading: Promise<void> = Promise.resolve();
 
 const groupTargetIds = useBatchGroup(() => id);
 
@@ -57,6 +63,9 @@ const currentAttribute = computed<AttributeInfo | undefined>(() =>
   attributes.value.find((attr) => attr.attribute_name === attributeName.value),
 );
 const timeSteps = computed<number[]>(() => currentAttribute.value?.time_steps ?? []);
+const noData = computed<boolean>(() =>
+  [...rangesPerTarget.value.values()].some((range) => range.no_data),
+);
 
 let committedSeries: string | undefined = undefined;
 
@@ -72,7 +81,10 @@ function commitSeriesTimeStep(): void {
   committedSeries = name;
   const current = attributeTimeStep.value;
   const valid = current !== undefined && current >= 0 && current < timeSteps.value.length;
-  emit("update:attributeTimeStep", valid ? current : 0);
+  // A valid step is already stored and applied with the series: emitting it again re-applies the attribute
+  if (!valid) {
+    emit("update:attributeTimeStep", 0);
+  }
 }
 
 const cssNoDataColor = computed<string>(() => {
@@ -118,68 +130,105 @@ const componentItems = computed<{ title: string; value: number }[]>(() => {
   }));
 });
 
-function resetRange(): void {
-  if (currentAttribute.value) {
-    const comp = attributeItem.value ?? 0;
-    // GetAttributeRange's parameter type (AttributeRangeSource) isn't exported;
-    // AttributeInfo's index signature covers its optional min/max fields at
-    // Runtime (they come from the same backend attribute response shape).
-    const { min, max } = getAttributeRange(
-      currentAttribute.value as unknown as Parameters<typeof getAttributeRange>[0],
-      comp,
-    );
-    attributeRange.value = [min, max];
+function hasSelectedComponent(components: unknown): boolean {
+  return Array.isArray(components) && components.length > 0;
+}
+
+function requestParams(): { id: string; component_ids?: string[] } | undefined {
+  const schemaProperties = schemas.names.properties as Record<string, unknown> | undefined;
+  if (schemaProperties?.component_ids === undefined) {
+    return { id };
   }
+  return hasSelectedComponent(componentIds) ? { id, component_ids: componentIds } : undefined;
 }
 
-function hasSelectedComponent(components: unknown): boolean {
-  return Array.isArray(components) && components.length > 0;
+// Ranges are computed by the back for the selected attribute only, as scanning every step of every series is slow
+async function requestRanges(name: string): Promise<void> {
+  const targets: [string, { id: string; component_ids?: string[] } | undefined][] =
+    groupTargetIds.value
+      ? [...attributesPerTarget]
+          .filter(([, targetAttributes]) =>
+            targetAttributes.some((attribute) => attribute.attribute_name === name),
+          )
+          .map(([targetId]) => [targetId, { id: targetId }])
+      : [[id, requestParams()]];
+  const entries = await Promise.all(
+    targets.map(async ([targetId, params]): Promise<[string, AttributeRangeInfo | undefined]> => [
+      targetId,
+      params ? await fetchAttributeRange(schemas.range, params, name) : undefined,
+    ]),
+  );
+  if (rangesName !== name) {
+    return;
+  }
+  rangesPerTarget.value = new Map(
+    entries.filter((entry): entry is [string, AttributeRangeInfo] => entry[1] !== undefined),
+  );
+}
+
+async function loadRanges(name: string): Promise<void> {
+  if (name !== rangesName) {
+    rangesName = name;
+    rangesPerTarget.value = new Map();
+    rangesLoading = requestRanges(name);
+  }
+  await rangesLoading;
+}
+
+function applyRange(): void {
+  const { min, max } = getAttributeRange(rangesPerTarget.value.get(id), attributeItem.value ?? 0);
+  attributeRange.value = [min, max];
+}
+
+async function resetRange(): Promise<void> {
+  if (currentAttribute.value) {
+    await loadRanges(currentAttribute.value.attribute_name);
+    applyRange();
+  }
 }
 
 async function getGroupAttributes(targetIds: string[]): Promise<void> {
-  const responses = await requestForTargets<{ attributes: AttributeInfo[] }>(schema, targetIds, {
-    attributes: [],
-  });
+  const responses = await requestForTargets<{ attributes: AttributeInfo[] }>(
+    schemas.names,
+    targetIds,
+    {
+      attributes: [],
+    },
+  );
   attributesPerTarget = new Map(
     responses.map(([targetId, response]) => [targetId, response.attributes]),
   );
   attributes.value = intersectAttributes([...attributesPerTarget.values()]);
 }
 
-function initGroupAttribute(name: string, item: number): void {
+async function initGroupAttribute(name: string, item: number): Promise<void> {
+  await loadRanges(name);
+  if (attributeName.value !== name) {
+    return;
+  }
   const ranges = new Map<string, AttributeRange>();
-  for (const [targetId, targetAttributes] of attributesPerTarget) {
-    const attribute = targetAttributes.find((candidate) => candidate.attribute_name === name);
-    if (attribute) {
-      const { min, max } = getAttributeRange(
-        attribute as unknown as Parameters<typeof getAttributeRange>[0],
-        item,
-      );
-      ranges.set(targetId, [min, max]);
-    }
+  for (const [targetId, range] of rangesPerTarget.value) {
+    const { min, max } = getAttributeRange(range, item);
+    ranges.set(targetId, [min, max]);
   }
   emit("update:attributeColorMap", attributeColorMap.value ?? "batlow");
   emit("ranges_per_data", ranges);
 }
 
 async function getAttributes(): Promise<void> {
+  rangesName = undefined;
+  rangesPerTarget.value = new Map();
   if (groupTargetIds.value) {
     await getGroupAttributes(groupTargetIds.value);
     return;
   }
-  const schemaProperties = schema.properties as Record<string, unknown> | undefined;
-  const requiresComponent = schemaProperties?.component_ids !== undefined;
-  if (requiresComponent && !hasSelectedComponent(componentIds)) {
+  const params = requestParams();
+  if (!params) {
     return;
   }
 
-  const params: { id: string; component_ids?: unknown } = { id };
-  if (requiresComponent) {
-    params.component_ids = componentIds;
-  }
-
   await backStore.request(
-    { schema, params },
+    { schema: schemas.names, params },
     {
       response_function: (response: unknown) => {
         attributes.value = (response as { attributes: AttributeInfo[] }).attributes;
@@ -193,19 +242,19 @@ onMounted(async () => {
 });
 
 watch(
-  () => [id, componentIds, schema],
+  [(): string => id, (): string[] | undefined => componentIds, (): AttributeSchemas => schemas],
   async () => {
     await getAttributes();
   },
 );
 
-watch([attributeName, attributeItem], ([name, item]) => {
+watch([attributeName, attributeItem], async ([name, item]) => {
   if (groupTargetIds.value && name !== undefined) {
-    initGroupAttribute(name, item ?? 0);
+    await initGroupAttribute(name, item ?? 0);
   }
 });
 
-watch([attributeName, attributeItem, currentAttribute], () => {
+watch([attributeName, attributeItem, currentAttribute], async () => {
   commitSeriesTimeStep();
   if (groupTargetIds.value) {
     return;
@@ -216,8 +265,13 @@ watch([attributeName, attributeItem, currentAttribute], () => {
   if (attributeNoDataColor.value === undefined) {
     attributeNoDataColor.value = DEFAULT_NO_DATA_COLOR;
   }
-  if (attributeRange.value[0] === undefined) {
-    resetRange();
+  const name = currentAttribute.value?.attribute_name;
+  if (name === undefined) {
+    return;
+  }
+  await loadRanges(name);
+  if (name === currentAttribute.value?.attribute_name && attributeRange.value[0] === undefined) {
+    applyRange();
   }
 });
 </script>
@@ -247,7 +301,7 @@ watch([attributeName, attributeItem, currentAttribute], () => {
   />
   <ViewerOptionsTimeStepSlider v-model="attributeTimeStep" :time-steps="timeSteps" />
   <div
-    v-if="currentAttribute && currentAttribute.no_data"
+    v-if="currentAttribute && noData"
     class="text-caption text-high-emphasis mt-1 d-flex align-center ga-1"
     data-testid="noDataInfo"
   >

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
+import type { AttributeSchemas } from "@ogw_front/utils/attribute_range";
 import type { RGBAColor } from "@ogw_front/utils/default_styles/constants";
 import type { RangesPerData } from "@ogw_front/composables/batch_style";
 import ViewerOptionsAttributeSelector from "@ogw_front/components/Viewer/Options/AttributeSelector.vue";
@@ -18,11 +18,11 @@ interface CapabilityConfig {
 }
 
 interface Schemas {
-  vertex?: JsonRpcSchema;
-  edge?: JsonRpcSchema;
-  cell?: JsonRpcSchema;
-  polygon?: JsonRpcSchema;
-  polyhedron?: JsonRpcSchema;
+  vertex?: AttributeSchemas;
+  edge?: AttributeSchemas;
+  cell?: AttributeSchemas;
+  polygon?: AttributeSchemas;
+  polyhedron?: AttributeSchemas;
 }
 
 const coloring_style_key = defineModel<string>("coloring_style_key");
@@ -95,12 +95,27 @@ const {
   allowRandom = false,
 } = defineProps<Props>();
 
-const vertexSchema = schemas.vertex || back_schemas.opengeodeweb_back.vertex_attribute_names;
-const edgeSchema = schemas.edge || back_schemas.opengeodeweb_back.edge_attribute_names;
-const cellSchema = schemas.cell || back_schemas.opengeodeweb_back.cell_attribute_names;
-const polygonSchema = schemas.polygon || back_schemas.opengeodeweb_back.polygon_attribute_names;
-const polyhedronSchema =
-  schemas.polyhedron || back_schemas.opengeodeweb_back.polyhedron_attribute_names;
+const backSchemas = back_schemas.opengeodeweb_back;
+const vertexSchemas = schemas.vertex ?? {
+  names: backSchemas.vertex_attribute_names,
+  range: backSchemas.vertex_attribute_range,
+};
+const edgeSchemas = schemas.edge ?? {
+  names: backSchemas.edge_attribute_names,
+  range: backSchemas.edge_attribute_range,
+};
+const cellSchemas = schemas.cell ?? {
+  names: backSchemas.cell_attribute_names,
+  range: backSchemas.cell_attribute_range,
+};
+const polygonSchemas = schemas.polygon ?? {
+  names: backSchemas.polygon_attribute_names,
+  range: backSchemas.polygon_attribute_range,
+};
+const polyhedronSchemas = schemas.polyhedron ?? {
+  names: backSchemas.polyhedron_attribute_names,
+  range: backSchemas.polyhedron_attribute_range,
+};
 
 function isAvailable(key: string): boolean {
   if (capabilities[key] && capabilities[key].available === false) {
@@ -266,7 +281,7 @@ watch(
           @ranges_per_data="emit('vertex_attribute_ranges_per_data', $event)"
           :id="id"
           :componentIds="componentIds"
-          :schema="vertexSchema"
+          :schemas="vertexSchemas"
         />
       </template>
       <template v-if="active_key === edge_dict['value'] && hasColorMap('edge')">
@@ -280,7 +295,7 @@ watch(
           @ranges_per_data="emit('edge_attribute_ranges_per_data', $event)"
           :id="id"
           :componentIds="componentIds"
-          :schema="edgeSchema"
+          :schemas="edgeSchemas"
         />
       </template>
       <template v-if="active_key === cell_dict['value'] && hasColorMap('cell')">
@@ -294,7 +309,7 @@ watch(
           @ranges_per_data="emit('cell_attribute_ranges_per_data', $event)"
           :id="id"
           :componentIds="componentIds"
-          :schema="cellSchema"
+          :schemas="cellSchemas"
         />
       </template>
       <template v-if="active_key === polygon_dict['value'] && hasColorMap('polygon')">
@@ -308,7 +323,7 @@ watch(
           @ranges_per_data="emit('polygon_attribute_ranges_per_data', $event)"
           :id="id"
           :componentIds="componentIds"
-          :schema="polygonSchema"
+          :schemas="polygonSchemas"
         />
       </template>
       <template v-if="active_key === polyhedron_dict['value'] && hasColorMap('polyhedron')">
@@ -322,7 +337,7 @@ watch(
           @ranges_per_data="emit('polyhedron_attribute_ranges_per_data', $event)"
           :id="id"
           :componentIds="componentIds"
-          :schema="polyhedronSchema"
+          :schemas="polyhedronSchemas"
         />
       </template>
     </v-col>

package/app/composables/global_attribute_style.ts

@@ -1,5 +1,6 @@
 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 { useDataStyleStore } from "@ogw_front/stores/data_style";
@@ -35,10 +36,6 @@ interface AttributeStyleComponent {
 interface AttributeResponse {
   readonly attributes?: readonly {
     readonly attribute_name?: string;
-    readonly min_values?: readonly number[];
-    readonly max_values?: readonly number[];
-    readonly min_value?: number;
-    readonly max_value?: number;
     readonly time_steps?: readonly number[];
   }[];
 }
@@ -259,39 +256,29 @@ export function useGlobalAttributeStyle(dataIdRef: Ref<string | undefined>): {
         continue;
       }
 
-      const schemaName = `${activeColoring}_attribute_names`;
-      const backSchemas = back_schemas.opengeodeweb_back as Record<string, unknown>;
-      const schema = backSchemas[schemaName];
-      if (schema === undefined || !isJsonRpcSchema(schema)) {
+      const rangeSchema = (back_schemas.opengeodeweb_back as Record<string, unknown>)[
+        `${activeColoring}_attribute_range`
+      ];
+      if (!isJsonRpcSchema(rangeSchema)) {
         continue;
       }
 
       requestPromises.push(
-        backStore.request(
-          {
-            schema,
-            params: { id: targetId },
-          },
-          {
-            response_function: async (response: unknown): Promise<void> => {
-              if (!isAttributeResponse(response)) {
-                return;
-              }
-              const attributes = response.attributes ?? [];
-              const currentAttribute = attributes.find((attr) => attr.attribute_name === attrName);
-              if (currentAttribute) {
-                const { min, max } = getAttributeRange(currentAttribute, attrItem);
-
-                const setterName = `set${setterKey}${attributeType}Range`;
-                const setter = getDynamicStoreMethod(dataStyleStore, setterName);
-                if (setter) {
-                  setter(targetId, min, max);
-                  await hybridViewerStore.remoteRender();
-                }
-              }
-            },
-          },
-        ),
+        (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();
+          }
+        })(),
       );
     }
 

package/app/utils/attribute_range.ts

@@ -0,0 +1,56 @@
+import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
+import { useBackStore } from "@ogw_front/stores/back";
+
+interface AttributeRangeInfo {
+  min_values: number[];
+  max_values: number[];
+  no_data: boolean;
+}
+
+// The *_attribute_names route listing the attributes, and its *_attribute_range route
+interface AttributeSchemas {
+  names: JsonRpcSchema;
+  range: JsonRpcSchema;
+}
+
+interface AttributeRangeTarget {
+  id: string;
+  component_ids?: string[];
+}
+
+// A data never changes once imported: selectors showing the same attribute share one request
+const rangeRequests = new Map<string, Promise<AttributeRangeInfo | undefined>>();
+
+async function requestAttributeRange(
+  rangeSchema: JsonRpcSchema,
+  params: Record<string, unknown>,
+  key: string,
+): Promise<AttributeRangeInfo | undefined> {
+  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;
+  }
+}
+
+async function fetchAttributeRange(
+  rangeSchema: JsonRpcSchema,
+  target: AttributeRangeTarget,
+  attributeName: string,
+): Promise<AttributeRangeInfo | undefined> {
+  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);
+    rangeRequests.set(key, request);
+  }
+  const range = await request;
+  return range;
+}
+
+export { type AttributeRangeInfo, type AttributeSchemas, fetchAttributeRange };

package/internal/stores/data_style/model/blocks/polyhedron.ts

@@ -72,7 +72,7 @@ interface UseModelBlocksPolyhedronAttributeReturn {
     modelId: string,
     blockIds: string[],
     timeStep: number,
-  ) => Promise<void>;
+  ) => Promise<boolean>;
   modelBlocksPolyhedronAttributeColorMap: (modelId: string, blockId?: string) => string | undefined;
   modelBlocksPolyhedronAttributeStoredConfig: (
     modelId: string,
@@ -89,29 +89,29 @@ interface UseModelBlocksPolyhedronAttributeReturn {
     modelId: string,
     blockIds: string[],
     name: string,
-  ) => Promise<unknown>;
+  ) => Promise<boolean>;
   setModelBlocksPolyhedronAttributeItem: (
     modelId: string,
     blockIds: string[],
     item: number,
-  ) => Promise<unknown>;
+  ) => Promise<boolean>;
   setModelBlocksPolyhedronAttributeRange: (
     modelId: string,
     blockIds: string[],
     minimum: number,
     maximum: number,
-  ) => Promise<unknown>;
+  ) => Promise<boolean>;
   setModelBlocksPolyhedronAttributeColorMap: (
     modelId: string,
     blockIds: string[],
     colorMap: string | undefined,
-  ) => Promise<unknown>;
+  ) => Promise<boolean>;
   modelBlocksPolyhedronAttributeNoDataColor: (modelId: string, blockId?: string) => RGBAColor;
   setModelBlocksPolyhedronAttributeNoDataColor: (
     modelId: string,
     blockIds: string[],
     no_data_color: RGBAColor,
-  ) => Promise<unknown>;
+  ) => Promise<boolean>;
 }
 
 // oxlint-disable-next-line max-lines-per-function
@@ -281,7 +281,8 @@ function useModelBlocksPolyhedronAttribute(): UseModelBlocksPolyhedronAttributeR
       params,
     });
   }
-  async function applyPolyhedronAttribute(modelId: string, blockIds: string[]): Promise<unknown> {
+  // True when the attribute was sent to the viewer, so the caller knows a render is needed
+  async function applyPolyhedronAttribute(modelId: string, blockIds: string[]): Promise<boolean> {
     const name = modelBlocksPolyhedronAttributeName(modelId, blockIds[0]);
     const item = modelBlocksPolyhedronAttributeItem(modelId, blockIds[0]);
     const storedConfig = modelBlocksPolyhedronAttributeStoredConfig(
@@ -298,17 +299,17 @@ function useModelBlocksPolyhedronAttribute(): UseModelBlocksPolyhedronAttributeR
       colorMap: storedConfig.colorMap,
       no_data_color: storedConfig.no_data_color,
     };
-    if (isModelBlocksPolyhedronAttributeValid(attribute)) {
-      const result = await setModelBlocksPolyhedronAttribute(modelId, blockIds, attribute);
-      return result;
+    if (!isModelBlocksPolyhedronAttributeValid(attribute)) {
+      return false;
     }
-    return undefined;
+    await setModelBlocksPolyhedronAttribute(modelId, blockIds, attribute);
+    return true;
   }
   async function setModelBlocksPolyhedronAttributeName(
     modelId: string,
     blockIds: string[],
     name: string,
-  ): Promise<unknown> {
+  ): Promise<boolean> {
     const item = modelBlocksPolyhedronAttributeLastItem(modelId, blockIds[0], name);
     await mutateModelBlocksPolyhedronStyle(modelId, blockIds, {
       name,
@@ -320,7 +321,7 @@ function useModelBlocksPolyhedronAttribute(): UseModelBlocksPolyhedronAttributeR
     modelId: string,
     blockIds: string[],
     item: number,
-  ): Promise<unknown> {
+  ): Promise<boolean> {
     await mutateModelBlocksPolyhedronStyle(modelId, blockIds, {
       item,
     });
@@ -330,13 +331,14 @@ function useModelBlocksPolyhedronAttribute(): UseModelBlocksPolyhedronAttributeR
     modelId: string,
     blockIds: string[],
     timeStep: number,
-  ): Promise<void> {
+  ): Promise<boolean> {
     const name = modelBlocksPolyhedronAttributeName(modelId, blockIds[0]);
     if (name === undefined) {
-      return;
+      return false;
     }
     await setAttributeTimeStep(modelId, modelBlockPolyhedronAttributeSchema.$id, name, timeStep);
-    await Promise.all([
+    let reapplied = false;
+    const [applied] = await Promise.all([
       applyPolyhedronAttribute(modelId, blockIds),
       reapplySameSeries(
         await dataStore.getBlocksGeodeIds(modelId),
@@ -352,17 +354,18 @@ function useModelBlocksPolyhedronAttribute(): UseModelBlocksPolyhedronAttributeR
               ].join("|")
             : undefined,
         async (ids) => {
-          await applyPolyhedronAttribute(modelId, ids);
+          reapplied = (await applyPolyhedronAttribute(modelId, ids)) || reapplied;
         },
       ),
     ]);
+    return applied || reapplied;
   }
   async function setModelBlocksPolyhedronAttributeRange(
     modelId: string,
     blockIds: string[],
     minimum: number,
     maximum: number,
-  ): Promise<unknown> {
+  ): Promise<boolean> {
     const name = modelBlocksPolyhedronAttributeName(modelId, blockIds[0]);
     const item = modelBlocksPolyhedronAttributeItem(modelId, blockIds[0]);
     await setModelBlocksPolyhedronAttributeStoredConfig(modelId, blockIds, name, item, {
@@ -375,7 +378,7 @@ function useModelBlocksPolyhedronAttribute(): UseModelBlocksPolyhedronAttributeR
     modelId: string,
     blockIds: string[],
     colorMap: string | undefined,
-  ): Promise<unknown> {
+  ): Promise<boolean> {
     const name = modelBlocksPolyhedronAttributeName(modelId, blockIds[0]);
     const item = modelBlocksPolyhedronAttributeItem(modelId, blockIds[0]);
     await setModelBlocksPolyhedronAttributeStoredConfig(modelId, blockIds, name, item, {
@@ -387,7 +390,7 @@ function useModelBlocksPolyhedronAttribute(): UseModelBlocksPolyhedronAttributeR
     modelId: string,
     blockIds: string[],
     no_data_color: RGBAColor,
-  ): Promise<unknown> {
+  ): Promise<boolean> {
     const name = modelBlocksPolyhedronAttributeName(modelId, blockIds[0]);
     const item = modelBlocksPolyhedronAttributeItem(modelId, blockIds[0]);
     const storedConfig = modelBlocksPolyhedronAttributeStoredConfig(

package/package.json

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