@geode/opengeodeweb-front 10.17.0 → 10.18.0-rc.2

package/app/components/HybridRenderingView.vue

@@ -42,6 +42,17 @@ function debounce(func, wait) {
     timeout = setTimeout(later, wait);
   };
 }
+
+async function handleClick(event) {
+  if (viewerStore.picking_mode) {
+    const rect = container.value.$el.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = elementHeight.value - (event.clientY - rect.top);
+    await viewerStore.set_picked_point(x, y);
+    return;
+  }
+  emit("click", event);
+}
 </script>
 
 <template>
@@ -52,16 +63,19 @@ function debounce(func, wait) {
       <v-col
         class="pa-0"
         ref="viewer"
+        :class="{ 'picking-cursor': viewerStore.picking_mode }"
         style="height: 100%; overflow: hidden; position: relative; z-index: 0"
-        @click="emit('click', $event)"
-        @keydown.esc="viewerStore.toggle_picking_mode(false)"
+        @click="handleClick"
       />
     </div>
   </ClientOnly>
 </template>
 
-<style>
+<style scoped>
 img {
   pointer-events: none;
 }
+.picking-cursor {
+  cursor: crosshair !important;
+}
 </style>

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

@@ -81,7 +81,7 @@ watch(
     ) {
       resetRange();
       if (colorMap.value === undefined) {
-        colorMap.value = "Cool to Warm";
+        colorMap.value = "batlow";
       }
     }
   },

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

@@ -1,5 +1,5 @@
 <script setup>
-import vtkColorMaps from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps";
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import { newInstance as vtkColorTransferFunction } from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
 
 const LAST_POINT_OFFSET = 4;
@@ -50,14 +50,13 @@ function drawPresetCanvas(presetName, canvas) {
   if (!canvas) {
     return;
   }
-  const preset = vtkColorMaps.getPresetByName(presetName);
-  if (!preset || !preset.RGBPoints) {
+  const rgbPoints = getRGBPointsFromPreset(presetName);
+  if (!rgbPoints || rgbPoints.length === 0) {
     return;
   }
   const ctx = canvas.getContext("2d");
   const { height, width } = canvas;
   const lut = vtkColorTransferFunction();
-  const rgbPoints = preset.RGBPoints;
   for (let pointIdx = 0; pointIdx < rgbPoints.length; pointIdx += 4) {
     lut.addRGBPoint(
       rgbPoints[pointIdx],
@@ -161,8 +160,8 @@ watch(filteredPresets, drawAllCanvases);
           </template>
 
           <v-list-item
-            v-for="(child, cIdx) in item.Children"
-            :key="cIdx"
+            v-for="(child, childIdx) in item.Children"
+            :key="childIdx"
             :active="child.Name === selectedPresetName"
             @click="emit('select', child)"
             class="px-2 mb-1"
@@ -171,7 +170,7 @@ watch(filteredPresets, drawAllCanvases);
             <div class="d-flex flex-column py-1">
               <span class="text-caption text-grey-lighten-1 mb-1">{{ child.Name }}</span>
               <canvas
-                :ref="(el) => setCanvasRef(child.Name, el, `g-${index}-${cIdx}`)"
+                :ref="(element) => setCanvasRef(child.Name, element, `g-${index}-${childIdx}`)"
                 width="200"
                 height="18"
                 class="w-100 rounded-xs border-thin"
@@ -191,7 +190,7 @@ watch(filteredPresets, drawAllCanvases);
           <div class="d-flex flex-column py-1">
             <span class="text-caption text-grey-lighten-1 mb-1">{{ item.Name }}</span>
             <canvas
-              :ref="(el) => setCanvasRef(item.Name, el, `s-${index}`)"
+              :ref="(element) => setCanvasRef(item.Name, element, `s-${index}`)"
               width="200"
               height="18"
               class="w-100 rounded-xs border-thin"

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

@@ -1,7 +1,7 @@
 <script setup>
+import { getRGBPointsFromPreset, scientificPresets } from "@ogw_front/utils/colormap";
 import ColorMapList from "./ColorMapList.vue";
 import { newInstance } from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
-import vtkColorMaps from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps";
 
 const LAST_POINT_OFFSET = 4;
 const THREE = 3;
@@ -11,56 +11,28 @@ const { max, min } = defineProps({
   max: { type: Number, required: true },
 });
 
-const selectedPresetName = defineModel("selectedPresetName", { default: "Cool to Warm" });
+const selectedPresetName = defineModel("selectedPresetName", { default: "batlow" });
 
 const menuOpen = ref(false);
 const lutCanvas = ref();
 
 const presets = computed(() => {
-  const allPresets = vtkColorMaps.rgbPresetNames.map((name) => vtkColorMaps.getPresetByName(name));
-
-  const paraviewNames = [
-    "Cool to Warm",
-    "Warm to Cool",
-    "rainbow",
-    "Grayscale",
-    "X Ray",
-    "Black-Body Radiation",
-    "erdc_rainbow_bright",
-  ];
-  const matplotlibNames = [
-    "Viridis (matplotlib)",
-    "Plasma (matplotlib)",
-    "Inferno (matplotlib)",
-    "Magma (matplotlib)",
-  ];
-
-  const paraviewPresets = paraviewNames
-    .map((name) => vtkColorMaps.getPresetByName(name))
-    .filter(Boolean);
-  const matplotlibPresets = matplotlibNames
-    .map((name) => vtkColorMaps.getPresetByName(name))
-    .filter(Boolean);
-  const otherPresets = allPresets.filter(
-    (preset) => !paraviewNames.includes(preset.Name) && !matplotlibNames.includes(preset.Name),
-  );
-
-  const currentPreset = vtkColorMaps.getPresetByName(selectedPresetName.value);
-
-  return [
-    currentPreset,
-    { Name: "ParaView", Children: paraviewPresets },
-    { Name: "Matplotlib", Children: matplotlibPresets },
-    { Name: "Others", Children: otherPresets },
-  ].filter(Boolean);
+  let currentPreset = undefined;
+  for (const category of scientificPresets) {
+    currentPreset = category.Children.find((preset) => preset.Name === selectedPresetName.value);
+    if (currentPreset) {
+      break;
+    }
+  }
+  return [currentPreset, ...scientificPresets].filter(Boolean);
 });
 
 function drawLutCanvas() {
   if (!lutCanvas.value) {
     return;
   }
-  const preset = vtkColorMaps.getPresetByName(selectedPresetName.value);
-  if (!preset || !preset.RGBPoints) {
+  const rgbPoints = getRGBPointsFromPreset(selectedPresetName.value);
+  if (!rgbPoints || rgbPoints.length === 0) {
     return;
   }
 
@@ -69,7 +41,6 @@ function drawLutCanvas() {
   const { height, width } = canvas;
 
   const lut = newInstance();
-  const rgbPoints = preset.RGBPoints;
 
   for (let pointIdx = 0; pointIdx < rgbPoints.length; pointIdx += 4) {
     lut.addRGBPoint(

package/app/components/Viewer/Ui.vue

@@ -14,7 +14,6 @@ const { displayMenu, containerWidth, containerHeight } = defineProps({
 });
 
 const emit = defineEmits(["show-menu"]);
-
 const dataStore = useDataStore();
 const dataStyleStore = useDataStyleStore();
 const viewerStore = useViewerStore();
@@ -56,4 +55,52 @@ defineExpose({ get_viewer_id });
     :container-width="containerWidth"
     :container-height="containerHeight"
   />
+
+  <v-fade-transition>
+    <div
+      v-if="viewerStore.picking_mode"
+      class="picking-message-container d-flex justify-center w-100 pa-4"
+    >
+      <v-chip
+        color="secondary"
+        elevation="8"
+        size="large"
+        variant="flat"
+        prepend-icon="mdi-crosshairs-gps"
+        class="pick-pulse"
+        style="pointer-events: auto"
+        @click="viewerStore.toggle_picking_mode(false)"
+      >
+        Picking active — click in the viewer &middot; Esc to stop
+        <v-divider vertical class="mx-2 my-1" opacity="0.3" />
+        <v-icon icon="mdi-close" size="small" />
+      </v-chip>
+    </div>
+  </v-fade-transition>
 </template>
+
+<style scoped>
+.picking-message-container {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  pointer-events: none;
+  z-index: 100;
+}
+
+@keyframes pulse-ring {
+  0% {
+    box-shadow: 0 0 0 0 rgba(var(--v-theme-secondary), 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(var(--v-theme-secondary), 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(var(--v-theme-secondary), 0);
+  }
+}
+
+.pick-pulse {
+  animation: pulse-ring 1.5s ease-out infinite;
+}
+</style>

package/app/stores/viewer.js

@@ -27,7 +27,7 @@ export const useViewerStore = defineStore(
     const client = ref({});
     const config = ref(undefined);
     const picking_mode = ref(false);
-    const picked_point = ref({ x: undefined, y: undefined });
+    const picked_point = ref({ x: undefined, y: undefined, z: undefined });
     const request_counter = ref(0);
     const status = ref(Status.NOT_CONNECTED);
     const buzy = ref(0);
@@ -62,14 +62,12 @@ export const useViewerStore = defineStore(
     }
 
     async function set_picked_point(x, y) {
-      const response = await request(schemas.opengeodeweb_viewer.generic.get_point_position, {
-        x,
-        y,
+      const response = await request(schemas.opengeodeweb_viewer.viewer.get_point_position, {
+        x: Math.round(x),
+        y: Math.round(y),
       });
-      const { x: world_x, y: world_y } = response;
-      picked_point.value.x = world_x;
-      picked_point.value.y = world_y;
-      picking_mode.value = false;
+      const { x: world_x, y: world_y, z: world_z } = response;
+      picked_point.value = { x: world_x, y: world_y, z: world_z };
     }
 
     function ws_connect() {

package/app/utils/colormap.js

@@ -1,7 +1,11 @@
-import vtkColorMaps from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps";
+import scientificPresets from "@ogw_front/assets/scientific_colormaps.json";
 
 function getRGBPointsFromPreset(presetName) {
-  return vtkColorMaps.getPresetByName(presetName)?.RGBPoints ?? [];
+  return (
+    scientificPresets
+      .flatMap((category) => category.Children)
+      .find((preset) => preset.Name === presetName)?.RGBPoints ?? []
+  );
 }
 
-export { getRGBPointsFromPreset };
+export { getRGBPointsFromPreset, scientificPresets };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.17.0",
+  "version": "10.18.0-rc.2",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {
@@ -34,8 +34,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",