@geode/opengeodeweb-front 10.30.0-rc.3 → 10.30.0-rc.4

package/app/components/Viewer/ObjectTree/Base/TreeRow.vue

@@ -1,4 +1,8 @@
 <script setup>
+import { useDataStore } from "@ogw_front/stores/data";
+
+const dataStore = useDataStore();
+
 const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps({
   item: { type: Object, required: true },
   itemProps: { type: Object, required: true },
@@ -7,13 +11,34 @@ const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps
   getIndeterminate: { type: Function, required: true },
 });
 
-defineEmits(["toggle-open", "toggle-select", "hover-eye-enter", "hover-eye-leave"]);
+const emit = defineEmits(["toggle-open", "toggle-select", "hover-eye-enter", "hover-eye-leave"]);
 
 const INDENT_STEP = 10;
+
+function triggerHorizonStackModal(rawItem) {
+  globalThis.dispatchEvent(new CustomEvent("open-horizon-stack-modal", { detail: rawItem }));
+}
+const isHorizonStack = computed(() => item.raw.geode_object_type === "HorizonStack3D");
+const isViewable = computed(() => dataStore.isItemViewable(item.raw));
+const showEyeButton = computed(
+  () => !isHorizonStack.value && item.raw.title !== "HorizonStack3D" && isViewable.value,
+);
+
+function handleRowClick(event) {
+  if (isHorizonStack.value) {
+    if (!item.isLeaf) {
+      return;
+    }
+
+    event.stopPropagation();
+    event.preventDefault();
+    triggerHorizonStackModal(item.raw);
+  }
+}
 </script>
 
 <template>
-  <div class="tree-row-content d-flex align-center px-2 ps-2 w-100">
+  <div class="tree-row-content d-flex align-center px-2 ps-2 w-100" @click="handleRowClick">
     <div
       v-if="item.depth > 0"
       class="flex-shrink-0"
@@ -30,24 +55,37 @@ const INDENT_STEP = 10;
       />
       <div v-else class="icon-placeholder" />
 
-      <v-btn
-        v-if="selection.selectable"
-        :icon="
-          getIndeterminate(item.raw)
-            ? 'mdi-eye-minus-outline'
-            : isSelected(item.raw)
-              ? 'mdi-eye'
-              : 'mdi-eye-off-outline'
-        "
-        variant="text"
-        density="compact"
-        color="black"
-        class="flex-shrink-0"
-        @click.stop="$emit('toggle-select', item.raw)"
-        @mousedown.stop
-        @mouseenter="$emit('hover-eye-enter', item.raw)"
-        @mouseleave="$emit('hover-eye-leave', item.raw)"
-      />
+      <template v-if="selection.selectable">
+        <v-btn
+          v-if="isHorizonStack && item.isLeaf"
+          icon="mdi-layers-triple"
+          variant="text"
+          density="compact"
+          color="black"
+          class="flex-shrink-0"
+          style="z-index: 4"
+          @click.stop="triggerHorizonStackModal(item.raw)"
+          @mousedown.stop
+        />
+        <v-btn
+          v-else-if="showEyeButton"
+          :icon="
+            getIndeterminate(item.raw)
+              ? 'mdi-eye-minus-outline'
+              : isSelected(item.raw)
+                ? 'mdi-eye'
+                : 'mdi-eye-off-outline'
+          "
+          variant="text"
+          density="compact"
+          color="black"
+          class="flex-shrink-0"
+          @click.stop="$emit('toggle-select', item.raw)"
+          @mousedown.stop
+          @mouseenter="$emit('hover-eye-enter', item.raw)"
+          @mouseleave="$emit('hover-eye-leave', item.raw)"
+        />
+      </template>
     </div>
 
     <div class="tree-title flex-grow-1 overflow-hidden d-flex align-center ms-1 pt-1">

package/app/components/Viewer/ObjectTree/Views/GlobalObjects.vue

@@ -179,46 +179,48 @@ function expandAll() {
       </template>
 
       <template #append="{ item }">
-        <v-btn
-          v-if="item.viewer_type"
-          icon="mdi-target"
-          size="medium"
-          variant="text"
-          v-tooltip="'Focus camera on object'"
-          @click.stop="hybridViewerStore.focusCameraOnObject(item.id)"
-        />
-        <v-btn
-          v-if="isModel(item)"
-          icon="mdi-magnify-expand"
-          size="medium"
-          class="ml-2"
-          variant="text"
-          v-tooltip="'Model\'s mesh components'"
-          @click.stop="
-            treeviewStore.displayAdditionalTree(
-              item.id,
-              item.title,
-              item.geode_object_type,
-              'model_components',
-            )
-          "
-        />
-        <v-btn
-          v-if="isModel(item) && hasCollectionsMap[item.id]"
-          icon="mdi-format-list-group"
-          size="medium"
-          class="ml-2"
-          variant="text"
-          v-tooltip="'Model\'s collections'"
-          @click.stop="
-            treeviewStore.displayAdditionalTree(
-              item.id,
-              item.title,
-              item.geode_object_type,
-              'model_collections',
-            )
-          "
-        />
+        <template v-if="item.geode_object_type !== 'HorizonStack3D'">
+          <v-btn
+            v-if="item.viewer_type"
+            icon="mdi-target"
+            size="medium"
+            variant="text"
+            v-tooltip="'Focus camera on object'"
+            @click.stop="hybridViewerStore.focusCameraOnObject(item.id)"
+          />
+          <v-btn
+            v-if="isModel(item)"
+            icon="mdi-magnify-expand"
+            size="medium"
+            class="ml-2"
+            variant="text"
+            v-tooltip="'Model\'s mesh components'"
+            @click.stop="
+              treeviewStore.displayAdditionalTree(
+                item.id,
+                item.title,
+                item.geode_object_type,
+                'model_components',
+              )
+            "
+          />
+          <v-btn
+            v-if="isModel(item) && hasCollectionsMap[item.id]"
+            icon="mdi-format-list-group"
+            size="medium"
+            class="ml-2"
+            variant="text"
+            v-tooltip="'Model\'s collections'"
+            @click.stop="
+              treeviewStore.displayAdditionalTree(
+                item.id,
+                item.title,
+                item.geode_object_type,
+                'model_collections',
+              )
+            "
+          />
+        </template>
       </template>
     </CommonTreeView>
   </div>

package/app/composables/hover_highlight.js

@@ -1,3 +1,4 @@
+import { useDataStore } from "@ogw_front/stores/data";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import vtk_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
@@ -5,6 +6,7 @@ const HOVER_DELAY = 200;
 
 export function useHoverhighlight() {
   const viewerStore = useViewerStore();
+  const dataStore = useDataStore();
   let timer = undefined;
   let currentId = undefined;
   let currentType = undefined;
@@ -20,6 +22,10 @@ export function useHoverhighlight() {
       currentId = id;
       currentType = type;
 
+      if (!(await dataStore.isItemViewable(id))) {
+        return;
+      }
+
       let block_ids = [];
       if (typeof block_ids_provider === "function") {
         block_ids = await block_ids_provider();

package/app/composables/use_overlapping_picker.js

@@ -64,8 +64,21 @@ export function useOverlappingPicker() {
   }
 
   async function get_viewer_id({ x, y, containerWidth, containerHeight, containerRect }) {
-    const activeIds = new Set(dataItems.value.map((item) => item.id));
-    const ids = Object.keys(dataStyleStore.styles).filter((styleId) => activeIds.has(styleId));
+    const activeIds = new Set(dataItems.value.map((i) => i.id));
+    const visibleStyleIds = Object.keys(dataStyleStore.styles).filter(
+      (styleId) => activeIds.has(styleId) && dataStyleStore.objectVisibility(styleId),
+    );
+
+    const viewableChecks = await Promise.all(
+      visibleStyleIds.map(async (styleId) => {
+        try {
+          return (await dataStore.isItemViewable(styleId)) ? styleId : undefined;
+        } catch {
+          return undefined;
+        }
+      }),
+    );
+    const ids = viewableChecks.filter(Boolean);
 
     const result = { id: undefined, viewer_id: undefined };
     let pickedResponse = undefined;

package/app/stores/app.js

@@ -9,11 +9,10 @@ import { useInfraStore } from "@ogw_front/stores/infra";
 // oxlint-disable-next-line max-lines-per-function, max-statements
 export const useAppStore = defineStore("app", () => {
   const stores = [];
+  const globalComponents = ref(new Map());
   const default_local_port = ref(globalThis.location.port);
   const status = ref(Status.NOT_CONNECTED);
-
   const protocol = computed(() => getRestApiProtocol());
-
   const port = computed(() => getRestApiPort(default_local_port.value));
 
   const base_url = computed(() => {
@@ -25,6 +24,22 @@ export const useAppStore = defineStore("app", () => {
     return app_url;
   });
 
+  function registerGlobalComponent(extensionId, componentId, component) {
+    if (!globalComponents.value.has(extensionId)) {
+      globalComponents.value.set(extensionId, new Map());
+    }
+    globalComponents.value.get(extensionId).set(componentId, component);
+    console.log(
+      `[AppStore] Registered global component ${componentId} for extension ${extensionId}`,
+    );
+  }
+
+  function unregisterGlobalComponent(extensionId, componentId) {
+    if (globalComponents.value.has(extensionId)) {
+      globalComponents.value.get(extensionId).delete(componentId);
+    }
+  }
+
   function registerStore(store) {
     const isAlreadyRegistered = stores.some((registeredStore) => registeredStore.$id === store.$id);
     if (isAlreadyRegistered) {
@@ -311,5 +326,8 @@ export const useAppStore = defineStore("app", () => {
     createProjectFolder,
     start_request,
     stop_request,
+    globalComponents,
+    registerGlobalComponent,
+    unregisterGlobalComponent,
   };
 });

package/app/stores/data.js

@@ -11,6 +11,33 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 
 const viewer_generic_schemas = viewer_schemas.opengeodeweb_viewer.generic;
 
+function checkItemViewable(item) {
+  if (!item || typeof item !== "object") {
+    return false;
+  }
+  if (item.is_viewable !== undefined) {
+    return Boolean(item.is_viewable);
+  }
+  if (item.binary_light_viewable !== undefined) {
+    return item.binary_light_viewable !== "not_viewable";
+  }
+  if (
+    item.geode_object_type === "HorizonStack3D" ||
+    item.id === "HorizonStack3D" ||
+    item.title === "HorizonStack3D"
+  ) {
+    return false;
+  }
+  return true;
+}
+
+function isItemViewable(itemOrId) {
+  if (typeof itemOrId === "string") {
+    return database.data.get(itemOrId).then(checkItemViewable);
+  }
+  return checkItemViewable(itemOrId);
+}
+
 // oxlint-disable-next-line max-lines-per-function, max-statements
 export const useDataStore = defineStore("data", () => {
   const viewerStore = useViewerStore();
@@ -93,8 +120,11 @@ export const useDataStore = defineStore("data", () => {
       geode_object_type: new_item.geode_object_type,
       visible: true,
       created_at: new Date().toISOString(),
-      binary_light_viewable: new_item.binary_light_viewable,
+      is_viewable: new_item.is_viewable,
     };
+    if (new_item.binary_light_viewable !== undefined && new_item.binary_light_viewable !== null) {
+      itemData.binary_light_viewable = new_item.binary_light_viewable;
+    }
     return data_db.put(itemData);
   }
 
@@ -213,6 +243,7 @@ export const useDataStore = defineStore("data", () => {
     item,
     allItems,
     refItem,
+    isItemViewable,
     meshComponentType,
     registerObject,
     deregisterObject,

package/app/stores/data_style.js

@@ -21,6 +21,10 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
 
   async function setVisibility(id, visibility) {
     const item = await dataStore.item(id);
+    if (!(await dataStore.isItemViewable(item))) {
+      return dataStyleState.mutateStyle(id, { visibility });
+    }
+
     const { viewer_type } = item;
 
     if (viewer_type === "mesh") {
@@ -34,6 +38,10 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
 
   async function applyDefaultStyle(id) {
     const item = await dataStore.item(id);
+    if (!(await dataStore.isItemViewable(item))) {
+      throw new Error(`applyDefaultStyle called for non-viewable item: ${id}`);
+    }
+
     const { viewer_type } = item;
 
     if (viewer_type === "mesh") {
@@ -81,6 +89,9 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
     const ids = Object.keys(dataStyleState.styles.value);
     const promises = ids.map(async (id) => {
       const meta = await dataStore.item(id);
+      if (!(await dataStore.isItemViewable(meta))) {
+        return;
+      }
       const viewerType = meta.viewer_type;
       if (viewerType === "mesh") {
         return meshStyleStore.applyMeshStyle(id);

package/app/stores/hybrid_viewer.js

@@ -12,7 +12,10 @@ import {
   performSyncRemoteCamera,
 } from "@ogw_internal/stores/hybrid_viewer_camera";
 import {
-  computeAverageBrightness,
+  createClearHoverData,
+  createHoverHighlight,
+} from "@ogw_internal/stores/hybrid_viewer_highlight";
+import {
   performAddItem,
   performClear,
   performClearHoverHighlight,
@@ -22,10 +25,7 @@ import {
   performSetVisibility,
   performSetZScaling,
 } from "@ogw_internal/stores/hybrid_viewer";
-import {
-  createClearHoverData,
-  createHoverHighlight,
-} from "@ogw_internal/stores/hybrid_viewer_highlight";
+import { computeAverageBrightness } from "@ogw_internal/stores/hybrid_viewer_brightness";
 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";

package/app/utils/import_workflow.js

@@ -61,14 +61,19 @@ async function importItem(item) {
     item.viewer_type === "model" ? dataStore.addComponentRelations(item) : Promise.resolve();
   treeviewStore.addItem(item.geode_object_type, item.name, item.id, item.viewer_type);
   const addDataStyleTask = dataStyleStore.addDataStyle(item.id, item.geode_object_type);
-  const addViewerTask = addDataTask.then(() => {
-    if (item.nb_vertices === 0) {
+  const addViewerTask = addDataTask.then(async () => {
+    if (!(await dataStore.isItemViewable(item))) {
       return;
     }
     return hybridViewerStore.addItem(item.id);
   });
   const applyStyleTask = Promise.all([registerTask, addDataComponentsTask, addDataStyleTask]).then(
-    () => dataStyleStore.applyDefaultStyle(item.id),
+    async () => {
+      if (await dataStore.isItemViewable(item)) {
+        return dataStyleStore.applyDefaultStyle(item.id);
+      }
+      return undefined;
+    },
   );
   await Promise.all([
     registerTask,

package/internal/stores/hybrid_viewer.js

@@ -1,65 +1,5 @@
-import { BACKGROUND_GREY_VALUE, RGB_MAX } from "./hybrid_viewer_constants";
 import { centerCameraOnPosition } from "./hybrid_viewer_camera";
 
-const RGBA_CHANNELS = 4;
-const SAMPLE_SIZE = 10;
-const TOTAL_CHANNELS = 400;
-
-function mapRect(rect, latestImage, canvasRect) {
-  const scaleX = latestImage.width / canvasRect.width;
-  const scaleY = latestImage.height / canvasRect.height;
-  return {
-    relX: (rect.x - canvasRect.left) * scaleX,
-    relY: (rect.y - canvasRect.top) * scaleY,
-    relW: rect.width * scaleX,
-    relH: rect.height * scaleY,
-  };
-}
-
-function computeAverageBrightness(rect, options) {
-  const { latestImage, offscreenCtx, offscreenCanvas, genericRenderWindow } = options;
-  if (!latestImage || !offscreenCtx || !offscreenCanvas || !genericRenderWindow) {
-    return BACKGROUND_GREY_VALUE / RGB_MAX;
-  }
-  const canvas = genericRenderWindow.getApiSpecificRenderWindow().getCanvas();
-  if (!canvas) {
-    return BACKGROUND_GREY_VALUE / RGB_MAX;
-  }
-  if (rect.width <= 0 || rect.height <= 0) {
-    return BACKGROUND_GREY_VALUE / RGB_MAX;
-  }
-  const { relX, relY, relW, relH } = mapRect(rect, latestImage, canvas.getBoundingClientRect());
-  if (relW <= 0 || relH <= 0) {
-    return BACKGROUND_GREY_VALUE / RGB_MAX;
-  }
-  offscreenCanvas.width = SAMPLE_SIZE;
-  offscreenCanvas.height = SAMPLE_SIZE;
-  try {
-    offscreenCtx.drawImage(
-      latestImage,
-      Math.max(0, relX),
-      Math.max(0, relY),
-      Math.min(latestImage.width, relW),
-      Math.min(latestImage.height, relH),
-      0,
-      0,
-      SAMPLE_SIZE,
-      SAMPLE_SIZE,
-    );
-    const { data } = offscreenCtx.getImageData(0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
-    let minBrightness = 1;
-    for (let i = 0; i < TOTAL_CHANNELS; i += RGBA_CHANNELS) {
-      const brightness = (data[i] + data[i + 1] + data[i + 2]) / (3 * RGB_MAX);
-      if (brightness < minBrightness) {
-        minBrightness = brightness;
-      }
-    }
-    return minBrightness;
-  } catch {
-    return BACKGROUND_GREY_VALUE / RGB_MAX;
-  }
-}
-
 function performClickPicking(event, options) {
   const { container, viewerStore, viewer_schemas, genericRenderWindow, syncRemoteCamera } = options;
   const rect = container.getBoundingClientRect();
@@ -148,8 +88,11 @@ async function performAddItem(id, options) {
   if (!genericRenderWindow) {
     return;
   }
-  const reader = vtkXMLPolyDataReader(),
-    value = await dataStore.item(id);
+  const value = await dataStore.item(id);
+  if (value && !dataStore.isItemViewable(value)) {
+    return;
+  }
+  const reader = vtkXMLPolyDataReader();
   await reader.parseAsArrayBuffer(new TextEncoder().encode(value.binary_light_viewable));
   const actor = vtkActor(),
     mapper = vtkMapper(),
@@ -158,6 +101,9 @@ async function performAddItem(id, options) {
   actor.getProperty().setColor(actorColor);
   actor.setMapper(mapper);
   const renderer = genericRenderWindow.getRenderer();
+  if (hybridDb[id] && hybridDb[id].actor) {
+    renderer.removeActor(hybridDb[id].actor);
+  }
   const isFirst = renderer.getActors().length === 0;
   renderer.addActor(actor);
   if (isFirst) {
@@ -307,7 +253,6 @@ function performClear(options) {
 }
 
 export {
-  computeAverageBrightness,
   performAddItem,
   performClearHoverHighlight,
   performClickPicking,

package/internal/stores/hybrid_viewer_brightness.js

@@ -0,0 +1,62 @@
+import { BACKGROUND_GREY_VALUE, RGB_MAX } from "./hybrid_viewer_constants";
+
+const RGBA_CHANNELS = 4;
+const SAMPLE_SIZE = 10;
+const TOTAL_CHANNELS = 400;
+
+function mapRect(rect, latestImage, canvasRect) {
+  const scaleX = latestImage.width / canvasRect.width;
+  const scaleY = latestImage.height / canvasRect.height;
+  return {
+    relX: (rect.x - canvasRect.left) * scaleX,
+    relY: (rect.y - canvasRect.top) * scaleY,
+    relW: rect.width * scaleX,
+    relH: rect.height * scaleY,
+  };
+}
+
+function computeAverageBrightness(rect, options) {
+  const { latestImage, offscreenCtx, offscreenCanvas, genericRenderWindow } = options;
+  if (!latestImage || !offscreenCtx || !offscreenCanvas || !genericRenderWindow) {
+    return BACKGROUND_GREY_VALUE / RGB_MAX;
+  }
+  const canvas = genericRenderWindow.getApiSpecificRenderWindow().getCanvas();
+  if (!canvas) {
+    return BACKGROUND_GREY_VALUE / RGB_MAX;
+  }
+  if (rect.width <= 0 || rect.height <= 0) {
+    return BACKGROUND_GREY_VALUE / RGB_MAX;
+  }
+  const { relX, relY, relW, relH } = mapRect(rect, latestImage, canvas.getBoundingClientRect());
+  if (relW <= 0 || relH <= 0) {
+    return BACKGROUND_GREY_VALUE / RGB_MAX;
+  }
+  offscreenCanvas.width = SAMPLE_SIZE;
+  offscreenCanvas.height = SAMPLE_SIZE;
+  try {
+    offscreenCtx.drawImage(
+      latestImage,
+      Math.max(0, relX),
+      Math.max(0, relY),
+      Math.min(latestImage.width, relW),
+      Math.min(latestImage.height, relH),
+      0,
+      0,
+      SAMPLE_SIZE,
+      SAMPLE_SIZE,
+    );
+    const { data } = offscreenCtx.getImageData(0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
+    let minBrightness = 1;
+    for (let i = 0; i < TOTAL_CHANNELS; i += RGBA_CHANNELS) {
+      const brightness = (data[i] + data[i + 1] + data[i + 2]) / (3 * RGB_MAX);
+      if (brightness < minBrightness) {
+        minBrightness = brightness;
+      }
+    }
+    return minBrightness;
+  } catch {
+    return BACKGROUND_GREY_VALUE / RGB_MAX;
+  }
+}
+
+export { computeAverageBrightness };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.30.0-rc.3",
+  "version": "10.30.0-rc.4",
   "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

@@ -105,6 +105,7 @@ const dataStoreMock = {
   registerObject: vi.fn().mockResolvedValue(),
   addItem: vi.fn().mockResolvedValue(),
   importStores: vi.fn().mockResolvedValue(),
+  isItemViewable: vi.fn().mockReturnValue(true),
 };
 const dataStyleStoreMock = {
   importStores: vi.fn().mockResolvedValue(),

package/tests/unit/stores/data.nuxt.test.js

@@ -124,4 +124,39 @@ describe("useDataStore - collections", () => {
       },
     ]);
   });
+
+  describe("isItemViewable", () => {
+    test("correctly identifies viewable and HorizonStack3D items", () => {
+      const dataStore = useDataStore();
+
+      // Standard viewable item (BRep)
+      expect(
+        dataStore.isItemViewable({ id: "1", title: "BRep 1", geode_object_type: "BRep" }),
+      ).toBe(true);
+
+      // Group node for viewable type
+      expect(dataStore.isItemViewable({ id: "BRep", title: "BRep" })).toBe(true);
+
+      // HorizonStack3D leaf item
+      expect(
+        dataStore.isItemViewable({
+          id: "2",
+          title: "HS 1",
+          geode_object_type: "HorizonStack3D",
+        }),
+      ).toBe(false);
+
+      // HorizonStack3D group node
+      expect(dataStore.isItemViewable({ id: "HorizonStack3D", title: "HorizonStack3D" })).toBe(
+        false,
+      );
+    });
+
+    test("respects explicit is_viewable overrides", () => {
+      const dataStore = useDataStore();
+
+      expect(dataStore.isItemViewable({ is_viewable: false })).toBe(false);
+      expect(dataStore.isItemViewable({ is_viewable: true })).toBe(true);
+    });
+  });
 });