@geode/opengeodeweb-front 10.32.2 → 10.32.3-rc.1

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

@@ -1,4 +1,5 @@
 <script setup>
+import AttributeRangeSelector from "./AttributeRangeSelector.vue";
 import ColorMapPicker from "./ColorMapPicker.vue";
 
 const emit = defineEmits(["reset"]);
@@ -11,43 +12,12 @@ const colorMap = defineModel("colorMap", { type: String });
 <template>
   <div class="attribute-colorbar mt-3">
     <ColorMapPicker v-model:selected-preset-name="colorMap" :min="minimum" :max="maximum" />
-    <v-row dense align="center" class="mt-2" no-gutters>
-      <v-col cols="5" class="pe-1">
-        <v-text-field
-          data-testid="attributeMinInput"
-          :model-value="minimum"
-          @update:model-value="(value) => (minimum = Number(value))"
-          label="Min"
-          type="number"
-          :max="maximum"
-          density="compact"
-          hide-details
-          variant="outlined"
-        />
-      </v-col>
-      <v-col cols="2" class="d-flex justify-center">
-        <v-btn
-          icon="mdi-arrow-left-right"
-          size="x-small"
-          variant="text"
-          @click="emit('reset')"
-          v-tooltip="'Reset range'"
-        />
-      </v-col>
-      <v-col cols="5" class="ps-1">
-        <v-text-field
-          data-testid="attributeMaxInput"
-          :model-value="maximum"
-          @update:model-value="(value) => (maximum = Number(value))"
-          label="Max"
-          type="number"
-          :min="minimum"
-          density="compact"
-          hide-details
-          variant="outlined"
-        />
-      </v-col>
-    </v-row>
+    <AttributeRangeSelector
+      v-model:minimum="minimum"
+      v-model:maximum="maximum"
+      class="mt-2"
+      @reset="emit('reset')"
+    />
   </div>
 </template>
 

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

@@ -0,0 +1,48 @@
+<script setup>
+const emit = defineEmits(["reset"]);
+
+const minimum = defineModel("minimum", { type: Number });
+const maximum = defineModel("maximum", { type: Number });
+</script>
+
+<template>
+  <v-row dense align="center" no-gutters>
+    <v-col cols="5" class="pe-1">
+      <v-text-field
+        data-testid="attributeMinInput"
+        :model-value="minimum"
+        @update:model-value="(value) => (minimum = Number(value))"
+        label="Min"
+        type="number"
+        :max="maximum"
+        density="compact"
+        hide-details
+        variant="outlined"
+      />
+    </v-col>
+    <v-col cols="2" class="d-flex justify-center">
+      <v-btn
+        data-testid="resetRangeButton"
+        aria-label="Reset range"
+        icon="mdi-arrow-left-right"
+        size="x-small"
+        variant="text"
+        @click="emit('reset')"
+        v-tooltip="'Reset range'"
+      />
+    </v-col>
+    <v-col cols="5" class="ps-1">
+      <v-text-field
+        data-testid="attributeMaxInput"
+        :model-value="maximum"
+        @update:model-value="(value) => (maximum = Number(value))"
+        label="Max"
+        type="number"
+        :min="minimum"
+        density="compact"
+        hide-details
+        variant="outlined"
+      />
+    </v-col>
+  </v-row>
+</template>

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

@@ -1,5 +1,6 @@
 <script setup>
 import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar.vue";
+import { getAttributeRange } from "@ogw_front/utils/attributes";
 import { useBackStore } from "@ogw_front/stores/back";
 
 const backStore = useBackStore();
@@ -17,6 +18,9 @@ const { id, componentIds, schema } = defineProps({
 
 const attributes = ref([]);
 
+const currentAttribute = computed(() =>
+  attributes.value.find((attr) => attr.attribute_name === attributeName.value),
+);
 const rangeMin = computed({
   get: () => (attributeRange.value ? attributeRange.value[0] : undefined),
   set: (val) => {
@@ -40,10 +44,6 @@ const rangeMax = computed({
   },
 });
 
-const currentAttribute = computed(() =>
-  attributes.value.find((attr) => attr.attribute_name === attributeName.value),
-);
-
 const componentItems = computed(() => {
   if (!currentAttribute.value) {
     return [];
@@ -57,10 +57,8 @@ const componentItems = computed(() => {
 function resetRange() {
   if (currentAttribute.value) {
     const comp = attributeItem.value ?? 0;
-    attributeRange.value = [
-      currentAttribute.value.min_values[comp],
-      currentAttribute.value.max_values[comp],
-    ];
+    const { min, max } = getAttributeRange(currentAttribute.value, comp);
+    attributeRange.value = [min, max];
   }
 }
 

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

@@ -168,6 +168,7 @@ watch(filteredPresets, drawAllCanvases);
         </v-list-item>
       </template>
     </v-list>
+    <slot></slot>
   </GlassCard>
 </template>
 

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

@@ -1,9 +1,9 @@
 <script setup>
+import AttributeRangeSelector from "@ogw_front/components/Viewer/Options/AttributeRangeSelector.vue";
 import ColorMapList from "@ogw_front/components/Viewer/Options/ColorMapList.vue";
-import { getPresetsWithCurrentAtTop } from "@ogw_front/utils/colormap";
 
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { getPresetsWithCurrentAtTop } from "@ogw_front/utils/colormap";
+import { useGlobalAttributeStyle } from "@ogw_front/composables/global_attribute_style";
 
 const { dataId, x, y } = defineProps({
   dataId: { required: false, type: String, default: undefined },
@@ -13,94 +13,28 @@ const { dataId, x, y } = defineProps({
 
 const show = defineModel("show", { type: Boolean, default: false });
 
-const dataStyleStore = useDataStyleStore();
-const hybridViewerStore = useHybridViewerStore();
-
-const componentNames = [
-  { 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" },
-];
-
-const current = computed(() => {
-  const targetId = dataId;
-  if (!targetId) {
-    return "batlow";
-  }
-
-  const style = dataStyleStore.getStyle(targetId);
-  if (!style) {
-    return "batlow";
-  }
-
-  for (const { key, getterKey } of componentNames) {
-    if (!style[key] || !style[key].coloring) {
-      continue;
-    }
-
-    const activeColoring = style[key].coloring.active;
-    if (!["vertex", "edge", "polygon", "cell", "polyhedron"].includes(activeColoring)) {
-      continue;
-    }
-
-    const attributeType = `${activeColoring.charAt(0).toUpperCase()}${activeColoring.slice(1)}Attribute`;
-    const getterName = `${getterKey}${attributeType}ColorMap`;
-    const getter = dataStyleStore[getterName];
-
-    if (!getter) {
-      continue;
-    }
+const dataIdRef = computed(() => dataId);
+const { currentColormap, currentRange, applyGlobalColormap, resetGlobalRange } =
+  useGlobalAttributeStyle(dataIdRef);
 
-    const colorMap = getter(targetId);
-    if (colorMap) {
-      return colorMap;
-    }
-  }
+const minimum = computed({
+  get: () => currentRange.value[0],
+  set: (val) => {
+    currentRange.value = [val, currentRange.value[1]];
+  },
+});
 
-  return "batlow";
+const maximum = computed({
+  get: () => currentRange.value[1],
+  set: (val) => {
+    currentRange.value = [currentRange.value[0], val];
+  },
 });
 
-const quickColormapPresets = computed(() => getPresetsWithCurrentAtTop(current.value));
+const quickColormapPresets = computed(() => getPresetsWithCurrentAtTop(currentColormap.value));
 
 async function onQuickColormapSelect(preset) {
-  show.value = false;
-  const newMap = preset.Name;
-  const targetId = dataId;
-  if (!targetId) {
-    return;
-  }
-
-  const style = dataStyleStore.getStyle(targetId);
-  if (!style) {
-    return;
-  }
-
-  const promises = [];
-
-  for (const { key, setterKey } of componentNames) {
-    if (!style[key] || !style[key].coloring) {
-      continue;
-    }
-
-    const activeColoring = style[key].coloring.active;
-    if (!["vertex", "edge", "polygon", "cell", "polyhedron"].includes(activeColoring)) {
-      continue;
-    }
-
-    const attributeType = `${activeColoring.charAt(0).toUpperCase() + activeColoring.slice(1)}Attribute`;
-    const setterName = `set${setterKey}${attributeType}ColorMap`;
-    const setter = dataStyleStore[setterName];
-
-    if (setter) {
-      promises.push(setter(targetId, newMap));
-    }
-  }
-
-  await Promise.all(promises);
-
-  hybridViewerStore.remoteRender();
+  await applyGlobalColormap(preset.Name);
 }
 </script>
 
@@ -114,8 +48,15 @@ async function onQuickColormapSelect(preset) {
   >
     <ColorMapList
       :presets="quickColormapPresets"
-      :selected-preset-name="current"
+      :selected-preset-name="currentColormap"
       @select="onQuickColormapSelect"
-    />
+    >
+      <v-divider class="my-2"></v-divider>
+      <AttributeRangeSelector
+        v-model:minimum="minimum"
+        v-model:maximum="maximum"
+        @reset="resetGlobalRange"
+      />
+    </ColorMapList>
   </v-menu>
 </template>

package/app/composables/global_attribute_style.js

@@ -0,0 +1,181 @@
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
+import { computed } from "vue";
+
+import { getAttributeRange } from "@ogw_front/utils/attributes";
+import { useBackStore } from "@ogw_front/stores/back";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+export function useGlobalAttributeStyle(dataIdRef) {
+  const dataStyleStore = useDataStyleStore();
+  const hybridViewerStore = useHybridViewerStore();
+  const backStore = useBackStore();
+
+  const componentNames = [
+    { 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) {
+    const style = dataStyleStore.getStyle(targetId);
+    const activeComponents = [];
+    if (!style) {
+      return activeComponents;
+    }
+    for (const { key, getterKey, setterKey } of componentNames) {
+      if (!style[key] || !style[key].coloring) {
+        continue;
+      }
+
+      const activeColoring = style[key].coloring.active;
+      if (!["vertex", "edge", "polygon", "cell", "polyhedron"].includes(activeColoring)) {
+        continue;
+      }
+
+      const attributeType = `${activeColoring.charAt(0).toUpperCase()}${activeColoring.slice(1)}Attribute`;
+      activeComponents.push({ activeColoring, attributeType, getterKey, setterKey });
+    }
+    return activeComponents;
+  }
+
+  const currentColormap = computed(() => {
+    const targetId = dataIdRef.value;
+    if (!targetId) {
+      return "batlow";
+    }
+
+    for (const comp of getActiveComponents(targetId)) {
+      const getterName = `${comp.getterKey}${comp.attributeType}ColorMap`;
+      const getter = dataStyleStore[getterName];
+      if (getter) {
+        const colorMap = getter(targetId);
+        if (colorMap) {
+          return colorMap;
+        }
+      }
+    }
+
+    return "batlow";
+  });
+
+  const currentRange = computed({
+    get() {
+      const targetId = dataIdRef.value;
+      if (!targetId) {
+        return [0, 1];
+      }
+
+      for (const comp of getActiveComponents(targetId)) {
+        const getterName = `${comp.getterKey}${comp.attributeType}Range`;
+        const getter = dataStyleStore[getterName];
+        if (getter) {
+          const range = getter(targetId);
+          if (range && range.length === 2) {
+            return range;
+          }
+        }
+      }
+      return [0, 1];
+    },
+    set(newValue) {
+      const targetId = dataIdRef.value;
+      if (!targetId) {
+        return;
+      }
+
+      let updated = false;
+      for (const comp of getActiveComponents(targetId)) {
+        const setterName = `set${comp.setterKey}${comp.attributeType}Range`;
+        const setter = dataStyleStore[setterName];
+        if (setter) {
+          setter(targetId, newValue[0], newValue[1]);
+          updated = true;
+        }
+      }
+      if (updated) {
+        hybridViewerStore.remoteRender();
+      }
+    },
+  });
+
+  async function applyGlobalColormap(newMap) {
+    const targetId = dataIdRef.value;
+    if (!targetId) {
+      return;
+    }
+
+    const promises = [];
+
+    for (const comp of getActiveComponents(targetId)) {
+      const setterName = `set${comp.setterKey}${comp.attributeType}ColorMap`;
+      const setter = dataStyleStore[setterName];
+
+      if (setter) {
+        promises.push(setter(targetId, newMap));
+      }
+    }
+
+    await Promise.all(promises);
+    hybridViewerStore.remoteRender();
+  }
+
+  function resetGlobalRange() {
+    const targetId = dataIdRef.value;
+    if (!targetId) {
+      return;
+    }
+
+    for (const comp of getActiveComponents(targetId)) {
+      const { activeColoring, attributeType, getterKey, setterKey } = comp;
+
+      const nameGetter = dataStyleStore[`${getterKey}${attributeType}Name`];
+      const itemGetter = dataStyleStore[`${getterKey}${attributeType}Item`];
+      if (!nameGetter || !itemGetter) {
+        continue;
+      }
+
+      const attrName = nameGetter(targetId);
+      const attrItem = itemGetter(targetId) ?? 0;
+
+      if (!attrName) {
+        continue;
+      }
+
+      const schemaName = `${activeColoring}_attribute_names`;
+      const schema = back_schemas.opengeodeweb_back[schemaName];
+      if (!schema) {
+        continue;
+      }
+
+      backStore.request(
+        { schema, params: { id: targetId } },
+        {
+          response_function: (response) => {
+            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 = dataStyleStore[setterName];
+              if (setter) {
+                setter(targetId, min, max);
+                hybridViewerStore.remoteRender();
+              }
+            }
+          },
+        },
+      );
+    }
+  }
+
+  return {
+    currentColormap,
+    currentRange,
+    applyGlobalColormap,
+    resetGlobalRange,
+  };
+}

package/app/utils/attributes.js

@@ -0,0 +1,23 @@
+export function getAttributeRange(currentAttribute, compIndex = 0) {
+  if (!currentAttribute) {
+    return { min: 0, max: 1 };
+  }
+
+  const { min_values, max_values, min_value, max_value } = currentAttribute;
+  let min = 0;
+  let max = 1;
+
+  if (min_values && min_values[compIndex] !== undefined) {
+    min = min_values[compIndex];
+  } else if (compIndex === 0 && min_value !== undefined) {
+    min = min_value;
+  }
+
+  if (max_values && max_values[compIndex] !== undefined) {
+    max = max_values[compIndex];
+  } else if (compIndex === 0 && max_value !== undefined) {
+    max = max_value;
+  }
+
+  return { min, max };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.32.2",
+  "version": "10.32.3-rc.1",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {
@@ -39,8 +39,8 @@
     "build": ""
   },
   "dependencies": {
-    "@geode/opengeodeweb-back": "latest",
-    "@geode/opengeodeweb-viewer": "latest",
+    "@geode/opengeodeweb-back": "next",
+    "@geode/opengeodeweb-viewer": "next",
     "@google-cloud/run": "3.2.0",
     "@kitware/vtk.js": "33.3.0",
     "@mdi/font": "7.4.47",