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

package/app/components/HybridRenderingView.vue

@@ -1,7 +1,12 @@
 <script setup>
+import ColormapQuickPicker from "@ogw_front/components/Viewer/Options/ColormapQuickPicker.vue";
 import HybridViewerTooltip from "@ogw_front/components/HybridViewerTooltip";
 import ViewToolbar from "@ogw_front/components/ViewToolbar";
+
+import { useDataStore } from "@ogw_front/stores/data";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useMenuStore } from "@ogw_front/stores/menu";
+import { useQuickColormap } from "@ogw_front/composables/use_quick_colormap";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 const DEFAULT_ELEMENT_HEIGHT = 100;
@@ -11,6 +16,8 @@ const emit = defineEmits(["click"]);
 const container = useTemplateRef("viewer");
 const hybridViewerStore = useHybridViewerStore();
 const viewerStore = useViewerStore();
+const menuStore = useMenuStore();
+const dataStore = useDataStore();
 
 const { width: elementWidth, height: elementHeight } = useElementSize(container);
 const { width: windowWidth, height: windowHeight } = useWindowSize();
@@ -32,6 +39,8 @@ onMounted(async () => {
   }
 });
 
+const { pickColormap, quickColormap } = useQuickColormap();
+
 function debounce(func, wait) {
   let timeout = undefined;
   return function executedFunction(...args) {
@@ -45,6 +54,7 @@ function debounce(func, wait) {
 }
 
 async function handleClick(event) {
+  const { offsetX, offsetY, clientX, clientY } = event;
   if (viewerStore.picking_mode) {
     const rect = container.value.$el.getBoundingClientRect();
     const x = event.clientX - rect.left;
@@ -52,6 +62,12 @@ async function handleClick(event) {
     await viewerStore.set_picked_point(x, y);
     return;
   }
+
+  const picked = await pickColormap(offsetX, offsetY, clientX, clientY);
+  if (picked) {
+    return;
+  }
+
   emit("click", event);
 }
 </script>
@@ -59,6 +75,12 @@ async function handleClick(event) {
 <template>
   <ClientOnly>
     <div data-testid="hybridViewer" class="fill-height" style="position: relative; height: 100%">
+      <ColormapQuickPicker
+        v-model:show="quickColormap.show"
+        :x="quickColormap.x"
+        :y="quickColormap.y"
+        :data-id="quickColormap.data_id"
+      />
       <ViewToolbar />
       <slot name="ui"></slot>
       <HybridViewerTooltip :container-width="elementWidth" :container-height="elementHeight" />
@@ -67,7 +89,7 @@ async function handleClick(event) {
         ref="viewer"
         :class="{ 'picking-cursor': viewerStore.picking_mode }"
         style="height: 100%; overflow: hidden; position: relative; z-index: 0"
-        @click="handleClick"
+        @pointerup.capture="handleClick"
       />
     </div>
   </ClientOnly>

package/app/components/RemoteRenderingView.vue

@@ -1,8 +1,14 @@
 <script setup>
 import { useElementSize, useWindowSize } from "@vueuse/core";
+
 import { Status } from "@ogw_front/utils/status";
-import ViewToolbar from "@ogw_front/components/ViewToolbar";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useMenuStore } from "@ogw_front/stores/menu";
+import { useQuickColormap } from "@ogw_front/composables/use_quick_colormap";
 import { useViewerStore } from "@ogw_front/stores/viewer";
+
+import ColormapQuickPicker from "@ogw_front/components/Viewer/Options/ColormapQuickPicker.vue";
+import ViewToolbar from "@ogw_front/components/ViewToolbar";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 import vtkRemoteView from "@kitware/vtk.js/Rendering/Misc/RemoteView";
 
@@ -11,18 +17,24 @@ const { viewId } = defineProps({
 });
 
 const viewerStore = useViewerStore();
+const menuStore = useMenuStore();
+const dataStore = useDataStore();
 const viewer = useTemplateRef("viewer");
 const { width, height } = useElementSize(viewer);
 
 const { width: windowWidth, height: windowHeight } = useWindowSize();
 
-function get_x_y(event) {
-  if (viewerStore.picking_mode.value === true) {
-    const { offsetX, offsetY } = event;
+const { pickColormap, quickColormap } = useQuickColormap();
+
+async function get_x_y(event) {
+  const { offsetX, offsetY, clientX, clientY } = event;
+  if (viewerStore.picking_mode === true) {
     viewerStore.set_picked_point(offsetX, offsetY);
     const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
     const params = { x: offsetX, y: offsetY };
     viewerStore.request({ schema, params });
+  } else {
+    await pickColormap(offsetX, offsetY, clientX, clientY);
   }
 }
 
@@ -101,13 +113,19 @@ onMounted(async () => {
 <template>
   <ClientOnly>
     <div style="position: relative; width: 100%; height: 100%">
+      <ColormapQuickPicker
+        v-model:show="quickColormap.show"
+        :x="quickColormap.x"
+        :y="quickColormap.y"
+        :data-id="quickColormap.data_id"
+      />
       <ViewToolbar />
       <slot name="ui"></slot>
       <v-col
         ref="viewer"
         style="overflow: hidden; position: relative; z-index: 0; height: 100%; width: 100%"
         class="pa-0"
-        @click="get_x_y"
+        @pointerup.capture="get_x_y"
         @keydown.esc="viewerStore.toggle_picking_mode(false)"
       />
     </div>

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

@@ -1,9 +1,7 @@
 <script setup>
-import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
-import { newInstance as vtkColorTransferFunction } from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
+import GlassCard from "@ogw_front/components/GlassCard.vue";
+import { drawCanvasForPreset } from "@ogw_front/utils/colormap";
 
-const LAST_POINT_OFFSET = 4;
-const THREE = 3;
 const CHUNK_SIZE = 5;
 
 const { presets, selectedPresetName } = defineProps({
@@ -46,43 +44,6 @@ const filteredPresets = computed(() => {
   return result;
 });
 
-function drawPresetCanvas(presetName, canvas) {
-  if (!canvas) {
-    return;
-  }
-  const rgbPoints = getRGBPointsFromPreset(presetName);
-  if (!rgbPoints || rgbPoints.length === 0) {
-    return;
-  }
-  const ctx = canvas.getContext("2d");
-  const { height, width } = canvas;
-  const lut = vtkColorTransferFunction();
-  for (let pointIdx = 0; pointIdx < rgbPoints.length; pointIdx += 4) {
-    lut.addRGBPoint(
-      rgbPoints[pointIdx],
-      rgbPoints[pointIdx + 1],
-      rgbPoints[pointIdx + 2],
-      rgbPoints[pointIdx + THREE],
-    );
-  }
-  const table = lut.getUint8Table(rgbPoints[0], rgbPoints.at(-LAST_POINT_OFFSET), width, true);
-  const imageData = ctx.createImageData(width, height);
-  for (let xCoord = 0; xCoord < width; xCoord += 1) {
-    const alpha = table[xCoord * 4 + THREE],
-      blue = table[xCoord * 4 + 2],
-      green = table[xCoord * 4 + 1],
-      red = table[xCoord * 4];
-    for (let yCoord = 0; yCoord < height; yCoord += 1) {
-      const pixelIdx = (yCoord * width + xCoord) * 4;
-      imageData.data[pixelIdx] = red;
-      imageData.data[pixelIdx + 1] = green;
-      imageData.data[pixelIdx + 2] = blue;
-      imageData.data[pixelIdx + THREE] = alpha;
-    }
-  }
-  ctx.putImageData(imageData, 0, 0);
-}
-
 function processChunk(entries, index, jobId) {
   if (jobId !== renderJobId.value || index >= entries.length) {
     if (jobId === renderJobId.value) {
@@ -94,7 +55,7 @@ function processChunk(entries, index, jobId) {
   const end = Math.min(index + CHUNK_SIZE, entries.length);
   for (let i = index; i < end; i += 1) {
     const [unusedKey, refValue] = entries[i];
-    drawPresetCanvas(refValue.presetName, refValue.element);
+    drawCanvasForPreset(refValue.presetName, refValue.element);
   }
   const ZERO = 0;
   setTimeout(() => processChunk(entries, end, jobId), ZERO);
@@ -115,13 +76,7 @@ watch(filteredPresets, drawAllCanvases);
 </script>
 
 <template>
-  <v-card
-    width="320"
-    class="pa-3 blur-card overflow-hidden"
-    theme="dark"
-    variant="outlined"
-    rounded="lg"
-  >
+  <GlassCard width="320" variant="panel" padding="pa-3" rounded="lg" class="overflow-hidden">
     <v-overlay
       v-model="loading"
       contained
@@ -199,17 +154,10 @@ watch(filteredPresets, drawAllCanvases);
         </v-list-item>
       </template>
     </v-list>
-  </v-card>
+  </GlassCard>
 </template>
 
 <style scoped>
-.blur-card {
-  background-color: rgba(35, 35, 35, 0.8) !important;
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border-color: rgba(255, 255, 255, 0.1) !important;
-}
-
 .border-thin {
   border: 1px solid rgba(255, 255, 255, 0.15) !important;
 }

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

@@ -1,10 +1,7 @@
 <script setup>
-import { colormaps, getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
+import { drawCanvasForPreset, getPresetsWithCurrentAtTop } from "@ogw_front/utils/colormap";
 import ColorMapList from "./ColorMapList.vue";
-import { newInstance } from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
-
-const LAST_POINT_OFFSET = 4;
-const THREE = 3;
+import GlassCard from "@ogw_front/components/GlassCard.vue";
 
 const { max, min } = defineProps({
   min: { type: Number, required: true },
@@ -16,58 +13,10 @@ const selectedPresetName = defineModel("selectedPresetName", { default: "batlow"
 const menuOpen = ref(false);
 const lutCanvas = ref();
 
-const presets = computed(() => {
-  let currentPreset = undefined;
-  for (const category of colormaps) {
-    currentPreset = category.Children.find((preset) => preset.Name === selectedPresetName.value);
-    if (currentPreset) {
-      break;
-    }
-  }
-  return [currentPreset, ...colormaps].filter(Boolean);
-});
+const presets = computed(() => getPresetsWithCurrentAtTop(selectedPresetName.value));
 
 function drawLutCanvas() {
-  if (!lutCanvas.value) {
-    return;
-  }
-  const rgbPoints = getRGBPointsFromPreset(selectedPresetName.value);
-  if (!rgbPoints || rgbPoints.length === 0) {
-    return;
-  }
-
-  const canvas = lutCanvas.value;
-  const ctx = canvas.getContext("2d");
-  const { height, width } = canvas;
-
-  const lut = newInstance();
-
-  for (let pointIdx = 0; pointIdx < rgbPoints.length; pointIdx += 4) {
-    lut.addRGBPoint(
-      rgbPoints[pointIdx],
-      rgbPoints[pointIdx + 1],
-      rgbPoints[pointIdx + 2],
-      rgbPoints[pointIdx + THREE],
-    );
-  }
-
-  const table = lut.getUint8Table(rgbPoints[0], rgbPoints.at(-LAST_POINT_OFFSET), width, true);
-  const imageData = ctx.createImageData(width, height);
-
-  for (let xCoord = 0; xCoord < width; xCoord += 1) {
-    const red = table[xCoord * 4];
-    const green = table[xCoord * 4 + 1];
-    const blue = table[xCoord * 4 + 2];
-    const alpha = table[xCoord * 4 + THREE];
-    for (let yCoord = 0; yCoord < height; yCoord += 1) {
-      const pixelIdx = (yCoord * width + xCoord) * 4;
-      imageData.data[pixelIdx] = red;
-      imageData.data[pixelIdx + 1] = green;
-      imageData.data[pixelIdx + 2] = blue;
-      imageData.data[pixelIdx + THREE] = alpha;
-    }
-  }
-  ctx.putImageData(imageData, 0, 0);
+  drawCanvasForPreset(selectedPresetName.value, lutCanvas.value);
 }
 
 function onSelectPreset(preset) {
@@ -82,19 +31,19 @@ watch([lutCanvas, selectedPresetName, () => min, () => max], drawLutCanvas);
 <template>
   <v-menu v-model="menuOpen" :close-on-content-click="false" location="bottom">
     <template #activator="{ props: menuProps }">
-      <v-card
+      <GlassCard
         v-bind="menuProps"
-        theme="dark"
-        variant="outlined"
+        variant="ui"
+        padding="pa-2"
         rounded="sm"
-        class="pa-2 blur-picker d-flex flex-column"
+        class="d-flex flex-column"
         style="gap: 4px; cursor: pointer"
       >
         <span class="text-caption text-white font-weight-medium">
           {{ selectedPresetName }}
         </span>
         <canvas ref="lutCanvas" width="200" height="18" class="w-100 rounded-xs border-thin" />
-      </v-card>
+      </GlassCard>
     </template>
 
     <ColorMapList
@@ -106,18 +55,6 @@ watch([lutCanvas, selectedPresetName, () => min, () => max], drawLutCanvas);
 </template>
 
 <style scoped>
-.blur-picker {
-  background-color: rgba(40, 40, 40, 0.7) !important;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border-color: rgba(255, 255, 255, 0.2) !important;
-  transition: background-color 0.2s;
-}
-
-.blur-picker {
-  background-color: rgba(60, 60, 60, 0.9) !important;
-}
-
 .border-thin {
   border: 1px solid rgba(255, 255, 255, 0.15) !important;
 }

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

@@ -0,0 +1,120 @@
+<script setup>
+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";
+
+const { dataId, x, y } = defineProps({
+  dataId: { required: false, type: String },
+  x: { required: true, type: Number },
+  y: { required: true, type: Number },
+});
+
+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 colorMap = getter(targetId);
+    if (colorMap) {
+      return colorMap;
+    }
+  }
+
+  return "batlow";
+});
+
+const quickColormapPresets = computed(() => getPresetsWithCurrentAtTop(current.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();
+}
+</script>
+
+<template>
+  <v-menu
+    v-model="show"
+    :target="[x, y - 80]"
+    location="top center"
+    :close-on-content-click="false"
+    eager
+  >
+    <ColorMapList
+      :presets="quickColormapPresets"
+      :selected-preset-name="current"
+      @select="onQuickColormapSelect"
+    />
+  </v-menu>
+</template>

package/app/composables/use_quick_colormap.js

@@ -0,0 +1,32 @@
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+export function useQuickColormap() {
+  const viewerStore = useViewerStore();
+  const quickColormap = reactive({
+    data_id: undefined,
+    show: false,
+    x: 0,
+    y: 0,
+  });
+
+  async function pickColormap(offsetX, offsetY, clientX, clientY) {
+    try {
+      const schema = viewer_schemas.opengeodeweb_viewer.viewer.pick_colormap;
+      const params = { x: offsetX, y: offsetY };
+      const result = await viewerStore.request({ schema, params });
+      if (result && result.data_id) {
+        quickColormap.data_id = result.data_id;
+        quickColormap.x = clientX;
+        quickColormap.y = clientY;
+        quickColormap.show = true;
+        return true;
+      }
+    } catch (error) {
+      console.error("Error picking colormap:", error);
+    }
+    return false;
+  }
+
+  return { pickColormap, quickColormap };
+}

package/app/stores/data.js

@@ -73,9 +73,9 @@ export const useDataStore = defineStore("data", () => {
     return component?.type;
   }
 
-  async function registerObject(id) {
+  async function registerObject(id, name) {
     const schema = viewer_generic_schemas.register;
-    const params = { id };
+    const params = { id, name };
     return await viewerStore.request({ schema, params });
   }
 

package/app/utils/colormap.js

@@ -1,10 +1,67 @@
 import colormaps from "@ogw_front/assets/colormaps.json";
 
+import { newInstance as vtkColorTransferFunction } from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
+
+function getPresetByName(presetName) {
+  return colormaps
+    .flatMap((category) => category.Children)
+    .find((preset) => preset.Name === presetName);
+}
+
 function getRGBPointsFromPreset(presetName) {
-  return (
-    colormaps.flatMap((category) => category.Children).find((preset) => preset.Name === presetName)
-      ?.RGBPoints ?? []
-  );
+  return getPresetByName(presetName)?.RGBPoints ?? [];
+}
+
+function getPresetsWithCurrentAtTop(presetName) {
+  const currentPreset = getPresetByName(presetName);
+  return [currentPreset, ...colormaps].filter(Boolean);
+}
+
+function drawCanvasForPreset(presetName, canvas) {
+  if (!canvas) {
+    return;
+  }
+  const rgbPoints = getRGBPointsFromPreset(presetName);
+  if (!rgbPoints || rgbPoints.length === 0) {
+    return;
+  }
+  const ctx = canvas.getContext("2d");
+  const { height, width } = canvas;
+  const lut = vtkColorTransferFunction();
+
+  const LAST_POINT_OFFSET = 4;
+  const THREE = 3;
+
+  for (let pointIdx = 0; pointIdx < rgbPoints.length; pointIdx += 4) {
+    lut.addRGBPoint(
+      rgbPoints[pointIdx],
+      rgbPoints[pointIdx + 1],
+      rgbPoints[pointIdx + 2],
+      rgbPoints[pointIdx + THREE],
+    );
+  }
+  const table = lut.getUint8Table(rgbPoints[0], rgbPoints.at(-LAST_POINT_OFFSET), width, true);
+  const imageData = ctx.createImageData(width, height);
+  for (let xCoord = 0; xCoord < width; xCoord += 1) {
+    const alpha = table[xCoord * 4 + THREE],
+      blue = table[xCoord * 4 + 2],
+      green = table[xCoord * 4 + 1],
+      red = table[xCoord * 4];
+    for (let yCoord = 0; yCoord < height; yCoord += 1) {
+      const pixelIdx = (yCoord * width + xCoord) * 4;
+      imageData.data[pixelIdx] = red;
+      imageData.data[pixelIdx + 1] = green;
+      imageData.data[pixelIdx + 2] = blue;
+      imageData.data[pixelIdx + THREE] = alpha;
+    }
+  }
+  ctx.putImageData(imageData, 0, 0);
 }
 
-export { getRGBPointsFromPreset, colormaps };
+export {
+  drawCanvasForPreset,
+  getRGBPointsFromPreset,
+  getPresetByName,
+  getPresetsWithCurrentAtTop,
+  colormaps,
+};

package/app/utils/import_workflow.js

@@ -53,7 +53,7 @@ async function importItem(item) {
     feedbackStore.add_warning(`Pointset "${item.name}" is empty`);
   }
 
-  const registerTask = dataStore.registerObject(item.id);
+  const registerTask = dataStore.registerObject(item.id, item.name);
   const addDataTask = dataStore.addItem(item);
   const addDataComponentsTask =
     item.viewer_type === "model" ? dataStore.addComponents(item) : Promise.resolve();

package/internal/stores/data_style/mesh/edges/vertex.js

@@ -2,6 +2,7 @@
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 // Local imports
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { useMeshEdgesCommonStyle } from "./common";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 

package/package.json

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

package/tests/unit/composables/project_manager.nuxt.test.js

@@ -210,7 +210,7 @@ function verifyStoreImports() {
 function verifyDataManagement() {
   expect(dataStyleStoreMock.importStores).toHaveBeenCalledWith(snapshotMock.dataStyle);
   expect(dataStyleStoreMock.applyAllStylesFromState).toHaveBeenCalledWith();
-  expect(dataStoreMock.registerObject).toHaveBeenCalledWith("abc123");
+  expect(dataStoreMock.registerObject).toHaveBeenCalledWith("abc123", "My Data");
   expect(dataStoreMock.addItem).toHaveBeenCalledWith(snapshotMock.data.items[0]);
   expect(treeviewStoreMock.addItem).toHaveBeenCalledWith("PointSet2D", "My Data", "abc123", "mesh");
 }