fix(QuickScalarRange and MinValue): closes https://github.com/Geode-s…

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>
 

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>

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];
   }
 }
 

app/components/Viewer/Options/ColorMapList.vue

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

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>