@geode/opengeodeweb-front 10.18.2 → 10.19.0

package/app/components/FeedBack/ErrorBanner.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { useFeedbackStore } from "@ogw_front/stores/feedback";
+
 const feedbackStore = useFeedbackStore();
 
 function reload() {

package/app/components/GlassCard.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, useAttrs } from "vue";
+
 const { variant, rounded, padding, theme } = defineProps({
   variant: {
     type: String,

package/app/components/HybridRenderingView.vue

@@ -1,4 +1,5 @@
 <script setup>
+import HybridViewerTooltip from "@ogw_front/components/HybridViewerTooltip";
 import ViewToolbar from "@ogw_front/components/ViewToolbar";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
@@ -60,6 +61,7 @@ async function handleClick(event) {
     <div data-testid="hybridViewer" class="fill-height" style="position: relative; height: 100%">
       <ViewToolbar />
       <slot name="ui"></slot>
+      <HybridViewerTooltip :container-width="elementWidth" :container-height="elementHeight" />
       <v-col
         class="pa-0"
         ref="viewer"

package/app/components/HybridViewerTooltip.vue

@@ -0,0 +1,216 @@
+<script setup>
+import GlassCard from "@ogw_front/components/GlassCard";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const TOOLTIP_SCREEN_MARGIN = 10;
+
+const { containerWidth, containerHeight } = defineProps({
+  containerWidth: {
+    type: Number,
+    required: true,
+  },
+  containerHeight: {
+    type: Number,
+    required: true,
+  },
+});
+
+const hybridViewerStore = useHybridViewerStore();
+
+const tooltipRef = useTemplateRef("tooltip");
+const { width: tooltipWidth, height: tooltipHeight } = useElementSize(tooltipRef);
+
+const tooltipStyle = computed(() => {
+  if (!hybridViewerStore.hoverData) {
+    return {};
+  }
+  const mouseX = hybridViewerStore.hoverPosition.x;
+  const mouseY = hybridViewerStore.hoverPosition.y;
+  const measuredTooltipWidth = tooltipWidth.value;
+  const measuredTooltipHeight = tooltipHeight.value;
+  const tooltipOffsetGap = 20;
+
+  let left = mouseX + tooltipOffsetGap;
+  if (left + measuredTooltipWidth > containerWidth) {
+    left = mouseX - measuredTooltipWidth - tooltipOffsetGap;
+  }
+  if (left < 0) {
+    left = TOOLTIP_SCREEN_MARGIN;
+  }
+
+  let top = mouseY - measuredTooltipHeight - tooltipOffsetGap;
+  if (top < 0) {
+    top = mouseY + tooltipOffsetGap;
+  }
+  if (top + measuredTooltipHeight > containerHeight) {
+    top = containerHeight - measuredTooltipHeight - TOOLTIP_SCREEN_MARGIN;
+  }
+
+  return {
+    left: `${left}px`,
+    top: `${top}px`,
+  };
+});
+
+const originalIndex = computed(() => {
+  const attributes = hybridViewerStore.hoverData?.attributes || {};
+  const originalId =
+    attributes.vtkOriginalCellIds ??
+    attributes.vtkOriginalPointIds ??
+    hybridViewerStore.hoverData?.pickedId;
+  if (originalId === undefined) {
+    return undefined;
+  }
+  return Math.floor(Number(originalId));
+});
+
+const hasOtherAttributes = computed(() => {
+  const attributes = hybridViewerStore.hoverData?.attributes || {};
+  return Object.keys(attributes).some(
+    (key) => key !== "vtkOriginalCellIds" && key !== "vtkOriginalPointIds",
+  );
+});
+
+function capitalize(val) {
+  if (!val) {
+    return "";
+  }
+  const spaced = val.replaceAll("_", " ");
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+
+function formatAttributeValue(val) {
+  if (Array.isArray(val)) {
+    const formattedValues = val.map((value) => {
+      if (typeof value === "number") {
+        if (Number.isInteger(value)) {
+          return String(value);
+        }
+        return Number(value).toFixed(3);
+      }
+      return value;
+    });
+    return `[ ${formattedValues.join(", ")} ]`;
+  }
+  if (typeof val === "number") {
+    return Number.isInteger(val) ? String(val) : Number(val).toFixed(4);
+  }
+  return val;
+}
+</script>
+
+<template>
+  <GlassCard
+    v-if="hybridViewerStore.hoverData"
+    ref="tooltip"
+    variant="panel"
+    padding="pa-3"
+    rounded="lg"
+    class="floating-tooltip"
+    :style="tooltipStyle"
+  >
+    <v-container fluid class="pa-0 tooltip-container">
+      <v-row no-gutters class="flex-column ga-1">
+        <v-col>
+          <span class="tooltip-label">Name:</span>
+          <span class="tooltip-value">
+            {{
+              hybridViewerStore.hoverData.component?.name ||
+              hybridViewerStore.hoverData.component?.id ||
+              hybridViewerStore.hoverData.blockName ||
+              hybridViewerStore.hoverData.modelName ||
+              `${capitalize(hybridViewerStore.hoverData.fieldType.toLowerCase())} #${hybridViewerStore.hoverData.pickedId}`
+            }}
+          </span>
+        </v-col>
+        <v-col>
+          <span class="tooltip-label">Id:</span>
+          <span class="tooltip-value-dim font-mono">
+            {{ hybridViewerStore.hoverData.component?.id || hybridViewerStore.hoverData.modelId }}
+          </span>
+        </v-col>
+        <v-col v-if="originalIndex !== undefined">
+          <span class="tooltip-label">Index:</span>
+          <span class="tooltip-value font-mono">
+            {{ originalIndex }}
+          </span>
+        </v-col>
+        <v-col v-if="hybridViewerStore.hoverData.component?.type">
+          <span class="tooltip-label">Type:</span>
+          <span class="tooltip-value">
+            {{ hybridViewerStore.hoverData.component.type }}
+          </span>
+        </v-col>
+      </v-row>
+      <template v-if="hasOtherAttributes">
+        <v-divider class="my-2" opacity="0.15" />
+        <v-row no-gutters class="flex-column ga-1">
+          <v-col
+            v-if="hybridViewerStore.hoverData.attributes.coordinates"
+            class="d-flex justify-space-between ga-3"
+          >
+            <span class="tooltip-label">Position:</span>
+            <span class="tooltip-value font-mono">
+              [ {{ Number(hybridViewerStore.hoverData.attributes.coordinates[0]).toFixed(3) }},
+              {{ Number(hybridViewerStore.hoverData.attributes.coordinates[1]).toFixed(3) }},
+              {{ Number(hybridViewerStore.hoverData.attributes.coordinates[2]).toFixed(3) }} ]
+            </span>
+          </v-col>
+          <template v-for="(val, name) in hybridViewerStore.hoverData.attributes" :key="name">
+            <v-col
+              v-if="
+                name !== 'coordinates' &&
+                name !== 'vtkOriginalCellIds' &&
+                name !== 'vtkOriginalPointIds'
+              "
+              class="d-flex justify-space-between ga-3"
+            >
+              <span class="tooltip-label">{{ capitalize(name) }}:</span>
+              <span class="tooltip-value font-mono">
+                {{ formatAttributeValue(val) }}
+              </span>
+            </v-col>
+          </template>
+        </v-row>
+      </template>
+    </v-container>
+  </GlassCard>
+</template>
+
+<style scoped>
+.floating-tooltip {
+  position: absolute;
+  pointer-events: none;
+  z-index: 10000;
+  min-width: 200px;
+  max-width: 450px;
+  transition: opacity 0.15s ease;
+}
+.font-mono {
+  font-family: monospace !important;
+}
+.tooltip-container {
+  min-width: 220px;
+  color: white;
+  font-size: 0.875rem;
+}
+.tooltip-label {
+  color: #bdbdbd;
+  font-weight: bold;
+}
+.tooltip-value {
+  color: #a7ffeb;
+  font-weight: 500;
+}
+.tooltip-value-dim {
+  color: #eeeeee;
+  font-size: 0.75rem !important;
+}
+.tooltip-label + .tooltip-value,
+.tooltip-label + .tooltip-value-dim {
+  margin-left: 4px;
+}
+.justify-space-between > .tooltip-value {
+  margin-left: 0 !important;
+}
+</style>

package/app/components/InfraConnected.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { useInfraStore } from "@ogw_front/stores/infra";
+
 const infraStore = useInfraStore();
 console.log("TEST", { infraStore });
 </script>

package/app/components/Inspector/InspectionButton.vue

@@ -1,6 +1,7 @@
 <script setup>
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 import { useGeodeStore } from "@ogw_front/stores/geode";
+
 const schema = schemas.opengeodeweb_back.inspect_file;
 
 const emit = defineEmits(["update_values", "increment_step", "decrement_step"]);

package/app/components/Viewer/Options/Sliders/Size.vue

@@ -1,5 +1,6 @@
 <script setup>
 import Slider from "./Slider";
+
 const size = defineModel();
 </script>
 

package/app/components/Viewer/Options/Sliders/Width.vue

@@ -1,5 +1,6 @@
 <script setup>
 import Slider from "./Slider";
+
 const width = defineModel();
 </script>
 

package/app/composables/run_function_when_microservices_connected.js

@@ -1,4 +1,5 @@
 import { useInfraStore } from "@ogw_front/stores/infra";
+
 export function run_function_when_microservices_connected(function_to_run) {
   const infraStore = useInfraStore();
   const { microservices_connected } = storeToRefs(infraStore);

package/app/stores/hybrid_viewer.js

@@ -1,14 +1,15 @@
 import {
   ACTOR_COLOR,
   BACKGROUND_COLOR,
-  HOVER_THROTTLE_MS,
   WHEEL_TIME_OUT_MS,
   computeAverageBrightness,
   performAddItem,
+  performClear,
   performClearHoverHighlight,
   performClickPicking,
-  performHoverHighlight,
+  performRemoveItem,
   performSetContainer,
+  performSetVisibility,
   performSetZScaling,
 } from "@ogw_internal/stores/hybrid_viewer";
 import {
@@ -19,6 +20,10 @@ import {
   performSetCamera,
   performSyncRemoteCamera,
 } from "@ogw_internal/stores/hybrid_viewer_camera";
+import {
+  createClearHoverData,
+  createHoverHighlight,
+} from "@ogw_internal/stores/hybrid_viewer_highlight";
 import { newInstance as vtkActor } from "@kitware/vtk.js/Rendering/Core/Actor";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
 import { newInstance as vtkMapper } from "@kitware/vtk.js/Rendering/Core/Mapper";
@@ -30,6 +35,7 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
+// oxlint-disable max-lines-per-function max-statements
 export const useHybridViewerStore = defineStore("hybridViewer", () => {
   const dataStore = useDataStore();
   const hybridDb = reactive({});
@@ -41,6 +47,8 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   const is_picking = ref(false);
   const is_hover_highlight = ref(false);
   const hover_highlight_field_type = ref("CELL");
+  const hoverData = ref(undefined);
+  const hoverPosition = ref({ x: 0, y: 0 });
   const zScale = ref(1);
   let imageStyle = undefined;
   let viewStream = undefined;
@@ -106,20 +114,14 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   function removeItem(id) {
-    if (!hybridDb[id]) {
-      return;
-    }
-    genericRenderWindow.value.getRenderer().removeActor(hybridDb[id].actor);
-    genericRenderWindow.value.getRenderWindow().render();
-    delete hybridDb[id];
+    performRemoveItem(id, { genericRenderWindow: genericRenderWindow.value, hybridDb });
   }
 
   function setVisibility(id, visibility) {
-    if (!hybridDb[id]) {
-      return;
-    }
-    hybridDb[id].actor.setVisibility(visibility);
-    genericRenderWindow.value.getRenderWindow().render();
+    performSetVisibility(id, visibility, {
+      genericRenderWindow: genericRenderWindow.value,
+      hybridDb,
+    });
   }
 
   async function setZScaling(z_scale) {
@@ -184,20 +186,27 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.render);
   }
 
-  const throttledHoverHighlight = useThrottleFn(
-    (event) =>
-      performHoverHighlight(event, {
-        is_hover_highlight,
-        genericRenderWindow: genericRenderWindow.value,
-        viewerStore,
-        viewer_schemas,
-        hover_highlight_field_type,
-        hybridDb,
-      }),
-    HOVER_THROTTLE_MS,
-  );
+  const hoverTimeoutRef = ref(undefined);
+  const currentHoverId = ref(undefined);
+
+  const clearHoverData = createClearHoverData(hoverTimeoutRef, hoverData, currentHoverId);
+
+  const hoverHighlight = createHoverHighlight({
+    genericRenderWindow,
+    is_hover_highlight,
+    viewerStore,
+    viewer_schemas,
+    hover_highlight_field_type,
+    hybridDb,
+    hoverData,
+    hoverPosition,
+    currentHoverId,
+    hoverTimeoutRef,
+    clearHoverData,
+  });
 
   function clearHoverHighlight() {
+    clearHoverData();
     performClearHoverHighlight({
       viewerStore,
       viewer_schemas,
@@ -220,7 +229,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       viewerStore,
       viewer_schemas,
       syncRemoteCamera,
-      throttledHoverHighlight,
+      hoverHighlight,
       wheelTimeoutMs: WHEEL_TIME_OUT_MS,
       wheelEventEndTimeout,
       wheelTimeoutSetter: (timeout) => (wheelEventEndTimeout = timeout),
@@ -266,14 +275,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   function clear() {
-    const renderer = genericRenderWindow.value.getRenderer();
-    for (const actor of renderer.getActors()) {
-      renderer.removeActor(actor);
-    }
-    genericRenderWindow.value.getRenderWindow().render();
-    for (const id of Object.keys(hybridDb)) {
-      delete hybridDb[id];
-    }
+    performClear({ genericRenderWindow: genericRenderWindow.value, hybridDb });
   }
 
   return {
@@ -297,6 +299,8 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     is_hover_highlight,
     hover_highlight_field_type,
     clearHoverHighlight,
+    hoverData,
+    hoverPosition,
     clear,
     exportStores,
     importStores,

package/app/stores/treeview.js

@@ -3,6 +3,7 @@ import { defineStore } from "pinia";
 import { ref, toRaw, watch } from "vue";
 import { compareSelections } from "@ogw_front/utils/treeview";
 import { database } from "@ogw_internal/database/database";
+
 const PANEL_WIDTH = 300;
 
 export const useTreeviewStore = defineStore("treeview", () => {

package/commitlint.config.js

@@ -14,6 +14,7 @@ const Configuration = {
     "type-empty": [0],
     "type-enum": [2, "always", ["feat", "fix", "perf"]],
   },
+  defaultIgnores: false,
 };
 
 export default Configuration;

package/internal/stores/hybrid_viewer.js

@@ -16,6 +16,7 @@ const ACTOR_COLOR = [
 ];
 const WHEEL_TIME_OUT_MS = 600;
 const HOVER_THROTTLE_MS = 50;
+const HOVER_TIMEOUT_MS = 500;
 
 const SAMPLE_SIZE = 10;
 const TOTAL_CHANNELS = 400;
@@ -112,7 +113,7 @@ function performHoverHighlight(event, options) {
   }
   const rect = container.getBoundingClientRect();
   viewerStore.request(
-    viewer_schemas.opengeodeweb_viewer.viewer.hover_highlight,
+    viewer_schemas.opengeodeweb_viewer.viewer.highlight,
     {
       x: Math.round(event.clientX - rect.left),
       y: Math.round(rect.height - (event.clientY - rect.top)),
@@ -127,7 +128,7 @@ function performHoverHighlight(event, options) {
 
 function performClearHoverHighlight(options) {
   const { viewerStore, viewer_schemas, hover_highlight_field_type, hybridDb } = options;
-  viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.hover_highlight, {
+  viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.highlight, {
     x: -1,
     y: -1,
     field_type: hover_highlight_field_type.value,
@@ -200,7 +201,7 @@ function performSetContainer(options) {
     viewerStore,
     viewer_schemas,
     syncRemoteCamera,
-    throttledHoverHighlight,
+    hoverHighlight,
     wheelTimeoutMs,
     wheelEventEndTimeout,
     wheelTimeoutSetter,
@@ -251,7 +252,7 @@ function performSetContainer(options) {
     },
   });
 
-  useEventListener(container, "mousemove", throttledHoverHighlight);
+  useEventListener(container, "mousemove", hoverHighlight);
   useEventListener(container, "wheel", () => {
     is_moving.value = true;
     if (imageStyle) {
@@ -268,11 +269,43 @@ function performSetContainer(options) {
   });
 }
 
+function performRemoveItem(id, options) {
+  const { genericRenderWindow, hybridDb } = options;
+  if (!hybridDb[id]) {
+    return;
+  }
+  genericRenderWindow.getRenderer().removeActor(hybridDb[id].actor);
+  genericRenderWindow.getRenderWindow().render();
+  delete hybridDb[id];
+}
+
+function performSetVisibility(id, visibility, options) {
+  const { genericRenderWindow, hybridDb } = options;
+  if (!hybridDb[id]) {
+    return;
+  }
+  hybridDb[id].actor.setVisibility(visibility);
+  genericRenderWindow.getRenderWindow().render();
+}
+
+function performClear(options) {
+  const { genericRenderWindow, hybridDb } = options;
+  const renderer = genericRenderWindow.getRenderer();
+  for (const actor of renderer.getActors()) {
+    renderer.removeActor(actor);
+  }
+  genericRenderWindow.getRenderWindow().render();
+  for (const id of Object.keys(hybridDb)) {
+    delete hybridDb[id];
+  }
+}
+
 export {
   BACKGROUND_COLOR,
   ACTOR_COLOR,
   WHEEL_TIME_OUT_MS,
   HOVER_THROTTLE_MS,
+  HOVER_TIMEOUT_MS,
   computeAverageBrightness,
   performAddItem,
   performClearHoverHighlight,
@@ -280,4 +313,7 @@ export {
   performHoverHighlight,
   performSetContainer,
   performSetZScaling,
+  performRemoveItem,
+  performSetVisibility,
+  performClear,
 };

package/internal/stores/hybrid_viewer_highlight.js

@@ -0,0 +1,113 @@
+import { HOVER_THROTTLE_MS, HOVER_TIMEOUT_MS, performHoverHighlight } from "./hybrid_viewer";
+import { database } from "@ogw_internal/database/database.js";
+
+function createClearHoverData(hoverTimeoutRef, hoverData, currentHoverId) {
+  return function clearHoverData() {
+    if (hoverTimeoutRef.value) {
+      clearTimeout(hoverTimeoutRef.value);
+      hoverTimeoutRef.value = undefined;
+    }
+    hoverData.value = undefined;
+    currentHoverId.value = undefined;
+  };
+}
+
+function createHoverHighlight(options) {
+  const {
+    genericRenderWindow,
+    is_hover_highlight,
+    viewerStore,
+    viewer_schemas,
+    hover_highlight_field_type,
+    hybridDb,
+    hoverData,
+    hoverPosition,
+    currentHoverId,
+    hoverTimeoutRef,
+    clearHoverData,
+  } = options;
+
+  return useThrottleFn((event) => {
+    const containerElement = genericRenderWindow.value?.getContainer();
+    let relativeMousePosition = { x: 0, y: 0 };
+    if (containerElement) {
+      const containerRect = containerElement.getBoundingClientRect();
+      relativeMousePosition = {
+        x: event.clientX - containerRect.left,
+        y: event.clientY - containerRect.top,
+      };
+    } else {
+      relativeMousePosition = { x: event.clientX, y: event.clientY };
+    }
+
+    performHoverHighlight(event, {
+      is_hover_highlight,
+      genericRenderWindow: genericRenderWindow.value,
+      viewerStore,
+      viewer_schemas,
+      hover_highlight_field_type,
+      hybridDb,
+      onResponse: async (response) => {
+        const isResponseValid =
+          response && response.id && response.picked_id !== undefined && response.picked_id !== -1;
+        if (!is_hover_highlight.value || !isResponseValid) {
+          clearHoverData();
+          return;
+        }
+
+        const hoverKey = `${response.id}_${response.field_type}_${response.picked_id}`;
+        if (currentHoverId.value === hoverKey) {
+          return;
+        }
+
+        if (hoverTimeoutRef.value) {
+          clearTimeout(hoverTimeoutRef.value);
+          hoverTimeoutRef.value = undefined;
+        }
+
+        hoverData.value = undefined;
+        currentHoverId.value = hoverKey;
+
+        let componentInfo = undefined;
+        let modelName = undefined;
+
+        const modelRecord = await database.data.get(response.id);
+        if (modelRecord) {
+          modelName = modelRecord.name;
+        }
+
+        if (response.geode_id) {
+          const component = await database.model_components
+            .where("[id+geode_id]")
+            .equals([response.id, response.geode_id])
+            .first();
+          if (component) {
+            componentInfo = {
+              name: component.name,
+              id: component.geode_id,
+              type: component.type,
+            };
+          }
+        }
+
+        const newHoverData = {
+          modelId: response.id,
+          modelName,
+          blockName: response.geode_id,
+          pickedId: response.picked_id,
+          fieldType: response.field_type,
+          component: componentInfo,
+          attributes: response.attributes || {},
+        };
+
+        hoverTimeoutRef.value = setTimeout(() => {
+          hoverPosition.value = relativeMousePosition;
+          hoverData.value = newHoverData;
+          hoverTimeoutRef.value = undefined;
+        }, HOVER_TIMEOUT_MS);
+      },
+    });
+  }, HOVER_THROTTLE_MS);
+}
+
+export { createClearHoverData, createHoverHighlight };

package/package.json

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