@geode/opengeodeweb-front 10.14.1 → 10.14.2-rc.2

package/app/composables/{use_tree_filter.js → tree_filter.js}

@@ -2,30 +2,45 @@ function customFilter(value, searchQuery, item) {
   if (!searchQuery) {
     return true;
   }
+  if (!item || !item.raw) {
+    return false;
+  }
   const query = searchQuery.toLowerCase();
   const { title = "", id = value } = item.raw || {};
   return [title, id].some((field) => String(field).toLowerCase().includes(query));
 }
 
-function sortAndFormatItems(items, sortType) {
+function sortAndFormatItems(itemList, sortType, options = {}) {
+  if (!itemList || !Array.isArray(itemList)) {
+    return [];
+  }
   const field = sortType === "name" ? "title" : "id";
-  return items.map((category) => {
-    const children = (category.children || []).toSorted((itemA, itemB) => {
-      const valueA = itemA[field] || "";
-      const valueB = itemB[field] || "";
-      return valueA.localeCompare(valueB, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      });
+  const localeOptions = { numeric: true, sensitivity: "base" };
+
+  const sorted = itemList
+    .filter((item) => item !== null && item !== undefined)
+    .toSorted((itemA, itemB) => {
+      const fieldA = String(itemA[field] || itemA.id || "");
+      const fieldB = String(itemB[field] || itemB.id || "");
+      return fieldA.localeCompare(fieldB, undefined, localeOptions);
     });
-    return {
-      ...category,
-      children,
-    };
-  });
+
+  if (options.recursiveSort) {
+    return sorted.map((item) => {
+      if (item.children && item.children.length > 0) {
+        return {
+          ...item,
+          children: sortAndFormatItems(item.children, sortType, options),
+        };
+      }
+      return item;
+    });
+  }
+  return sorted;
 }
 
-function useTreeFilter(rawItems, options = {}) {
+function useTreeFilter(itemsIn, options = {}) {
+  const rawItems = typeof itemsIn === "function" ? computed(itemsIn) : toRef(itemsIn);
   const search = ref("");
   const sortType = ref(options.defaultSort || "name");
   const filterOptions = ref(options.defaultFilters || {});
@@ -53,24 +68,27 @@ function useTreeFilter(rawItems, options = {}) {
     if (!rawItems.value) {
       return [];
     }
-    const sorted = sortAndFormatItems(
-      rawItems.value.filter((category) => {
-        const key = category.title || category.id;
-        return filterOptions.value[key] !== false;
-      }),
-      sortType.value,
-    );
+    const filteredByCategory = rawItems.value.filter((category) => {
+      const key = category.title || category.id;
+      return filterOptions.value[key] !== false;
+    });
+
+    const sorted = sortAndFormatItems(filteredByCategory, sortType.value, options);
+
     if (!search.value) {
       return sorted;
     }
-    return sorted
-      .map((category) => {
-        category.children = (category.children || []).filter((child) =>
-          customFilter(child.id, search.value, { raw: child }),
-        );
-        return category;
-      })
-      .filter((category) => category.children.length > 0);
+
+    const result = [];
+    for (const category of sorted) {
+      const children = (category.children || []).filter((child) =>
+        customFilter(child.id, search.value, { raw: child }),
+      );
+      if (children.length > 0 || customFilter(category.id, search.value, { raw: category })) {
+        result.push({ ...category, children });
+      }
+    }
+    return result;
   });
 
   function toggleSort() {
@@ -117,4 +135,4 @@ function useTreeFilter(rawItems, options = {}) {
   };
 }
 
-export { customFilter, useTreeFilter };
+export { customFilter, useTreeFilter, sortAndFormatItems };

package/app/composables/tree_keyboard_nav.js

@@ -0,0 +1,81 @@
+export function useTreeKeyboardNav(displayItems, emit, scrollToIndex, toggleOpen, handleItemClick) {
+  const focusedIndex = ref(-1);
+
+  function findParentIndex(item, currentIndex) {
+    for (let index = currentIndex - 1; index >= 0; index -= 1) {
+      if (displayItems.value[index].depth < item.depth) {
+        return index;
+      }
+    }
+    return -1;
+  }
+
+  function getNextIndex(key, item) {
+    const lastIndex = displayItems.value.length - 1;
+    const currentIndex = focusedIndex.value;
+
+    if (key === "ArrowDown") {
+      return Math.min(currentIndex + 1, lastIndex);
+    }
+    if (key === "ArrowUp") {
+      return Math.max(currentIndex - 1, 0);
+    }
+    if (key === "Home") {
+      return 0;
+    }
+    if (key === "End") {
+      return lastIndex;
+    }
+
+    if (key === "ArrowRight") {
+      if (!item.isLeaf && !item.isOpen) {
+        toggleOpen(item.raw);
+        return currentIndex;
+      }
+      return Math.min(currentIndex + 1, lastIndex);
+    }
+
+    if (key === "ArrowLeft") {
+      if (!item.isLeaf && item.isOpen) {
+        toggleOpen(item.raw);
+        return currentIndex;
+      }
+      const parentIndex = findParentIndex(item, currentIndex);
+      return parentIndex === -1 ? currentIndex : parentIndex;
+    }
+
+    return currentIndex;
+  }
+
+  function handleKeyDown(event) {
+    if (displayItems.value.length === 0) {
+      return;
+    }
+
+    const prevIndex = focusedIndex.value;
+    const item = displayItems.value[focusedIndex.value];
+
+    if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
+      event.preventDefault();
+      focusedIndex.value = getNextIndex(event.key, item);
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (focusedIndex.value !== -1) {
+        handleItemClick(item);
+      }
+    }
+
+    if (focusedIndex.value !== prevIndex) {
+      if (prevIndex !== -1) {
+        emit("hover:leave", { item: displayItems.value[prevIndex] });
+      }
+      emit("hover:enter", {
+        item: displayItems.value[focusedIndex.value],
+        immediate: true,
+      });
+      scrollToIndex(focusedIndex.value);
+    }
+  }
+
+  return { focusedIndex, handleKeyDown };
+}

package/app/composables/tree_scroll.js

@@ -0,0 +1,91 @@
+export function useTreeScroll(propsIn, emit, displayItems, actualItemProps) {
+  const SCROLL_STICKY_THRESHOLD = 10;
+  const DEFAULT_ITEM_HEIGHT = 44;
+
+  const props = toRef(propsIn);
+  const internalScrollTop = ref(props.value.scrollTop || 0);
+  const virtualScrollRef = ref(undefined);
+
+  function handleScroll(event) {
+    internalScrollTop.value = event.target.scrollTop;
+    emit("update:scrollTop", event.target.scrollTop);
+  }
+
+  watch(
+    () => props.value.scrollTop,
+    (newVal) => {
+      if (Math.abs(newVal - internalScrollTop.value) > 1) {
+        internalScrollTop.value = newVal;
+        if (virtualScrollRef.value && virtualScrollRef.value.$el) {
+          virtualScrollRef.value.$el.scrollTop = newVal;
+        }
+      }
+    },
+  );
+
+  const stickyHeader = computed(() => {
+    if (internalScrollTop.value <= SCROLL_STICKY_THRESHOLD) {
+      return undefined;
+    }
+
+    const itemHeight = actualItemProps.value.height || DEFAULT_ITEM_HEIGHT;
+    const firstVisibleIndex = Math.floor(internalScrollTop.value / itemHeight);
+
+    if (firstVisibleIndex < 0 || firstVisibleIndex >= displayItems.value.length) {
+      return undefined;
+    }
+
+    const firstVisibleItem = displayItems.value[firstVisibleIndex];
+    if (!firstVisibleItem) {
+      return undefined;
+    }
+
+    let current = firstVisibleIndex;
+    const firstVisibleDepth = firstVisibleItem.depth;
+
+    while (current >= 0) {
+      const item = displayItems.value[current];
+      if (item && !item.isLeaf && item.depth < firstVisibleDepth) {
+        return item;
+      }
+      if (item && item.depth === 0 && !item.isLeaf && current < firstVisibleIndex) {
+        return item;
+      }
+      current -= 1;
+    }
+    return undefined;
+  });
+
+  function scrollToIndex(index) {
+    if (index === -1 || !virtualScrollRef.value) {
+      return;
+    }
+
+    const container = virtualScrollRef.value.$el;
+    if (!container) {
+      return;
+    }
+
+    const itemHeight = actualItemProps.value.height;
+    const itemTop = index * itemHeight;
+    const itemBottom = itemTop + itemHeight;
+
+    const currentScrollTop = container.scrollTop;
+    const containerHeight = container.clientHeight;
+    const scrollBottom = currentScrollTop + containerHeight;
+
+    if (itemTop < currentScrollTop) {
+      container.scrollTop = itemTop;
+    } else if (itemBottom > scrollBottom) {
+      container.scrollTop = itemBottom - containerHeight;
+    }
+  }
+
+  return {
+    internalScrollTop,
+    virtualScrollRef,
+    stickyHeader,
+    handleScroll,
+    scrollToIndex,
+  };
+}

package/app/composables/virtual_tree.js

@@ -0,0 +1,164 @@
+export function useVirtualTree(propsIn, emit) {
+  const props = toRef(propsIn);
+
+  const actualItemProps = computed(() => ({
+    value: "id",
+    title: "title",
+    children: "children",
+    height: 44,
+    ...props.value.itemProps,
+  }));
+
+  const actualSelection = computed(() => ({
+    selectable: false,
+    strategy: "classic",
+    ...props.value.selection,
+  }));
+
+  const openedSet = computed(() => new Set(props.value.opened));
+  const selectedSet = computed(() => new Set(props.value.selected));
+
+  function toggleOpen(item) {
+    const id = item[actualItemProps.value.value];
+    const { opened: openedArray = [] } = props.value;
+    const newOpened = new Set(openedArray);
+    if (newOpened.has(id)) {
+      newOpened.delete(id);
+    } else {
+      newOpened.add(id);
+    }
+    emit("update:opened", [...newOpened]);
+  }
+
+  function getAllChildrenIds(item, ids = []) {
+    const children = item[actualItemProps.value.children];
+    if (children) {
+      for (const child of children) {
+        ids.push(child[actualItemProps.value.value]);
+        getAllChildrenIds(child, ids);
+      }
+    }
+    return ids;
+  }
+
+  function isSelected(item) {
+    const id = item[actualItemProps.value.value];
+    if (selectedSet.value.has(id)) {
+      return true;
+    }
+    if (actualSelection.value.strategy === "classic") {
+      const childrenIds = getAllChildrenIds(item);
+      return (
+        childrenIds.length > 0 && childrenIds.every((childId) => selectedSet.value.has(childId))
+      );
+    }
+    return false;
+  }
+
+  function getIndeterminate(item) {
+    if (actualSelection.value.strategy !== "classic") {
+      return false;
+    }
+    const childrenIds = getAllChildrenIds(item);
+    if (childrenIds.length === 0) {
+      return false;
+    }
+
+    const selectedChildren = childrenIds.filter((childId) => selectedSet.value.has(childId));
+    return selectedChildren.length > 0 && selectedChildren.length < childrenIds.length;
+  }
+
+  function toggleSelect(item) {
+    const id = item[actualItemProps.value.value];
+    const { selected: selectedArray = [] } = props.value;
+    const newSelected = new Set(selectedArray);
+    const isCurrentlySelected = newSelected.has(id) || isSelected(item);
+
+    if (actualSelection.value.strategy === "classic") {
+      const childrenIds = getAllChildrenIds(item);
+      if (isCurrentlySelected) {
+        newSelected.delete(id);
+        for (const childId of childrenIds) {
+          newSelected.delete(childId);
+        }
+      } else {
+        newSelected.add(id);
+        for (const childId of childrenIds) {
+          newSelected.add(childId);
+        }
+      }
+    } else if (isCurrentlySelected) {
+      newSelected.delete(id);
+    } else {
+      newSelected.add(id);
+    }
+    emit("update:selected", [...newSelected]);
+  }
+
+  function flattenTree(itemsList, depth = 0, result = []) {
+    const { search, customFilter } = props.value;
+    const lowerSearch = search ? search.toLowerCase() : "";
+
+    for (const item of itemsList) {
+      const id = item[actualItemProps.value.value];
+      const children = item[actualItemProps.value.children];
+      const hasChildren = children && children.length > 0;
+
+      const isOpen = openedSet.value.has(id);
+
+      if (lowerSearch) {
+        const matches = customFilter
+          ? customFilter(id, search, { raw: item })
+          : (item[actualItemProps.value.title] || "").toLowerCase().includes(lowerSearch) ||
+            String(id).toLowerCase().includes(lowerSearch);
+
+        if (!hasChildren && !matches) {
+          continue;
+        }
+
+        if (hasChildren) {
+          const subtree = [];
+          flattenTree(children, depth + 1, subtree);
+          if (subtree.length === 0 && !matches) {
+            continue;
+          }
+
+          result.push({
+            raw: item,
+            id,
+            depth,
+            isOpen: true,
+            isLeaf: false,
+          });
+          result.push(...subtree);
+          continue;
+        }
+      }
+
+      result.push({
+        raw: item,
+        id,
+        depth,
+        isOpen,
+        isLeaf: !hasChildren,
+      });
+
+      if (isOpen && hasChildren) {
+        flattenTree(children, depth + 1, result);
+      }
+    }
+    return result;
+  }
+
+  const displayItems = computed(() => flattenTree(props.value.items || []));
+
+  return {
+    actualItemProps,
+    actualSelection,
+    displayItems,
+    toggleOpen,
+    toggleSelect,
+    isSelected,
+    getIndeterminate,
+  };
+}

package/app/stores/data.js

@@ -63,12 +63,49 @@ export const useDataStore = defineStore("data", () => {
           id: meshComponent.geode_id,
           title: meshComponent.name,
           category: meshComponent.type,
-          viewer_id: meshComponent.viewer_id,
+          viewer_id: Number(meshComponent.viewer_id),
           is_active: meshComponent.is_active,
         })),
       }));
   }
 
+  async function getMeshComponentsByType(modelId, type) {
+    const components = await database.model_components
+      .where("[id+type]")
+      .equals([modelId, type])
+      .toArray();
+    return components.map((meshComponent) => ({
+      id: meshComponent.geode_id,
+      title: meshComponent.name,
+      category: meshComponent.type,
+      viewer_id: Number(meshComponent.viewer_id),
+      is_active: meshComponent.is_active,
+    }));
+  }
+
+  async function getAllMeshComponents(modelId) {
+    const items = await database.model_components.where("id").equals(modelId).toArray();
+    return items.map((meshComponent) => ({
+      id: meshComponent.geode_id,
+      title: meshComponent.name,
+      category: meshComponent.type,
+      viewer_id: Number(meshComponent.viewer_id),
+      is_active: meshComponent.is_active,
+    }));
+  }
+
+  async function fetchAllMeshComponents(modelId) {
+    const components = await getAllMeshComponents(modelId);
+    const byType = {};
+    for (const component of components) {
+      if (!byType[component.category]) {
+        byType[component.category] = [];
+      }
+      byType[component.category].push(component);
+    }
+    return byType;
+  }
+
   function refFormatedMeshComponents(modelId) {
     return useObservable(
       liveQuery(() => formatedMeshComponents(modelId)),
@@ -240,6 +277,8 @@ export const useDataStore = defineStore("data", () => {
     meshComponentType,
     formatedMeshComponents,
     refFormatedMeshComponents,
+    getMeshComponentsByType,
+    getAllMeshComponents,
     registerObject,
     deregisterObject,
     addItem,
@@ -259,5 +298,6 @@ export const useDataStore = defineStore("data", () => {
     exportStores,
     importStores,
     clear,
+    fetchAllMeshComponents,
   };
 });

package/app/stores/hybrid_viewer.js

@@ -1,13 +1,17 @@
-// oxlint-disable-next-line import/no-unassigned-import
-import "@kitware/vtk.js/Rendering/Profiles/Geometry";
+import {
+  applyCameraOptions,
+  computeAverageBrightness,
+  getCameraOptions,
+} from "@ogw_front/utils/hybrid_viewer";
 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";
 import { newInstance as vtkXMLPolyDataReader } from "@kitware/vtk.js/IO/XML/XMLPolyDataReader";
 
-import { Status } from "@ogw_front/utils/status";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useViewerStore } from "@ogw_front/stores/viewer";
+
+import { Status } from "@ogw_front/utils/status";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const RGB_MAX = 255;
@@ -37,6 +41,13 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   let viewStream = undefined;
   const gridActor = undefined;
 
+  const latestImage = ref(undefined);
+  const offscreenCanvas =
+    typeof document === "undefined" ? undefined : document.createElement("canvas");
+  const offscreenCtx = offscreenCanvas
+    ? offscreenCanvas.getContext("2d", { willReadFrequently: true })
+    : undefined;
+
   async function initHybridViewer() {
     if (status.value !== Status.NOT_CREATED) {
       return;
@@ -58,6 +69,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       if (is_moving.value) {
         return;
       }
+      latestImage.value = event.image;
       webGLRenderWindow.setBackgroundImage(event.image);
       imageStyle.opacity = 1;
     });
@@ -136,18 +148,10 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   function syncRemoteCamera() {
-    console.log("syncRemoteCamera");
     const renderer = genericRenderWindow.value.getRenderer();
     const camera = renderer.getActiveCamera();
     const params = {
-      camera_options: {
-        focal_point: [...camera.getFocalPoint()],
-        view_up: [...camera.getViewUp()],
-        position: [...camera.getPosition()],
-        view_angle: camera.getViewAngle(),
-        clipping_range: [...camera.getClippingRange()],
-        distance: camera.getDistance(),
-      },
+      camera_options: getCameraOptions(camera),
     };
     viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, params, {
       response_function: () => {
@@ -173,12 +177,10 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     imageStyle.transition = "opacity 0.1s ease-in";
     imageStyle.zIndex = 1;
     resize(container.value.$el.offsetWidth, container.value.$el.offsetHeight);
-    console.log("setContainer", container.value.$el);
 
     useMousePressed({
       target: container,
       onPressed: (event) => {
-        console.log("onPressed");
         if (event.button === 0) {
           is_moving.value = true;
           event.stopPropagation();
@@ -190,7 +192,6 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
           return;
         }
         is_moving.value = false;
-        console.log("onReleased");
         syncRemoteCamera();
       },
     });
@@ -223,25 +224,24 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     remoteRender();
   }
 
+  function getAverageBrightness(rect) {
+    return computeAverageBrightness(rect, {
+      latestImage: latestImage.value,
+      offscreenCtx,
+      offscreenCanvas,
+      genericRenderWindow: genericRenderWindow.value,
+    });
+  }
+
   function exportStores() {
     const renderer = genericRenderWindow.value.getRenderer();
     const camera = renderer.getActiveCamera();
-    const cameraSnapshot = camera
-      ? {
-          focal_point: [...camera.getFocalPoint()],
-          view_up: [...camera.getViewUp()],
-          position: [...camera.getPosition()],
-          view_angle: camera.getViewAngle(),
-          clipping_range: [...camera.getClippingRange()],
-          distance: camera.getDistance(),
-        }
-      : camera_options;
+    const cameraSnapshot = getCameraOptions(camera) || camera_options;
     return { zScale: zScale.value, camera_options: cameraSnapshot };
   }
 
   async function importStores(snapshot) {
     if (!snapshot) {
-      console.warn("importStores called with undefined snapshot");
       return;
     }
     const z_scale = snapshot.zScale;
@@ -255,22 +255,12 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       const renderer = genericRenderWindow.value.getRenderer();
       const camera = renderer.getActiveCamera();
 
-      camera.setFocalPoint(...snapshot_camera_options.focal_point);
-      camera.setViewUp(...snapshot_camera_options.view_up);
-      camera.setPosition(...snapshot_camera_options.position);
-      camera.setViewAngle(snapshot_camera_options.view_angle);
-      camera.setClippingRange(...snapshot_camera_options.clipping_range);
+      applyCameraOptions(camera, snapshot_camera_options);
 
       genericRenderWindow.value.getRenderWindow().render();
 
       const payload = {
-        camera_options: {
-          focal_point: [...snapshot_camera_options.focal_point],
-          view_up: [...snapshot_camera_options.view_up],
-          position: [...snapshot_camera_options.position],
-          view_angle: snapshot_camera_options.view_angle,
-          clipping_range: [...snapshot_camera_options.clipping_range],
-        },
+        camera_options: getCameraOptions(snapshot_camera_options),
       };
       return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, payload, {
         response_function: () => {
@@ -316,5 +306,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     clear,
     exportStores,
     importStores,
+    latestImage,
+    getAverageBrightness,
   };
 });