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

package/app/components/Viewer/ObjectTree/Layout.vue

@@ -284,9 +284,7 @@ function onVerticalResizeStart(event: MouseEvent, index: number): void {
             >
               <ModelTree
                 data-testid="modelComponentsObjectTree"
-                :id="view.modelId || view.id"
-                :view-id="view.id"
-                :view-type="view.viewType"
+                :id="view.id"
                 @show-menu="emit('show-menu', $event)"
               />
             </ViewerObjectTreeBox>

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

@@ -8,7 +8,6 @@ import CommonTreeView from "@ogw_front/components/Viewer/ObjectTree/Base/CommonT
 import type { DisplayItem } from "@ogw_front/composables/virtual_tree";
 import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
-import { consola } from "consola";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHoverhighlight } from "@ogw_front/composables/hover_highlight";
@@ -110,31 +109,6 @@ function isModel(item: TreeGroupItem): boolean {
   );
 }
 
-const hasCollectionsMap = reactive<Record<string, boolean>>({});
-
-watch(
-  () => treeviewStore.items,
-  async (newItems) => {
-    const models = newItems
-      .flatMap((group) => group.children || [])
-      .filter((item) => isModel(item));
-    const fetchPromises = models.map(async (model) => {
-      if (hasCollectionsMap[model.id] === undefined) {
-        hasCollectionsMap[model.id] = false;
-        try {
-          const hasCollections = await dataStore.hasCollectionComponents(model.id);
-          hasCollectionsMap[model.id] = hasCollections;
-        } catch (error) {
-          consola.error("Failed to check collections", error);
-        }
-      }
-    });
-
-    await Promise.all(fetchPromises);
-  },
-  { immediate: true, deep: true },
-);
-
 function handleHoverEnter({
   item,
   immediate = false,
@@ -245,29 +219,11 @@ function expandAll(): void {
                 item.id as string,
                 item.title as string | undefined,
                 item.geode_object_type as string,
-                'model_components',
               )
             "
           >
             <v-icon size="18">mdi-magnify-expand</v-icon>
           </v-btn>
-          <v-btn
-            v-if="isModel(item as unknown as TreeGroupItem) && hasCollectionsMap[item.id as string]"
-            data-testid="expandModelCollectionsButton"
-            icon="mdi-format-list-group"
-            size="medium"
-            class="ml-2"
-            variant="text"
-            v-tooltip="'Model\'s collections'"
-            @click.stop="
-              treeviewStore.displayAdditionalTree(
-                item.id as string,
-                item.title as string | undefined,
-                item.geode_object_type as string,
-                'model_collections',
-              )
-            "
-          />
         </template>
       </template>
     </CommonTreeView>

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

@@ -3,24 +3,19 @@ import { sortAndFormatItems, useTreeFilter } from "@ogw_front/composables/tree_f
 import CommonTreeView from "@ogw_front/components/Viewer/ObjectTree/Base/CommonTreeView.vue";
 import type { DisplayItem } from "@ogw_front/composables/virtual_tree";
 import FetchingData from "@ogw_front/components/FetchingData.vue";
-import { MESH_COMPONENT_TYPES } from "@ogw_front/utils/default_styles";
 import type { ModelComponentMenuPayload } from "@ogw_front/utils/treeview";
 import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
 import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
 import { useHoverhighlight } from "@ogw_front/composables/hover_highlight";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import { useModelCollections } from "@ogw_front/composables/model_collections";
-import { useModelComponents } from "@ogw_front/composables/model_components";
+import { useModelTree } from "@ogw_front/composables/model_tree";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 interface Props {
   id: string;
-  viewId?: string;
-  viewType?: string;
 }
 
-const { id, viewId = undefined, viewType = "model_components" } = defineProps<Props>();
-const actualViewId = viewId || id;
+const { id } = defineProps<Props>();
 
 interface CollectionTreeItem {
   raw?: CollectionTreeItem;
@@ -41,29 +36,20 @@ const emit = defineEmits<Emits>();
 
 const treeviewStore = useTreeviewStore();
 
-const isCollections = computed(() => viewType === "model_collections");
-
-const composable = isCollections.value ? useModelCollections(id) : useModelComponents(id);
 const {
-  items: rawItems,
+  isLoading,
   localCategories,
+  cache,
+  collectionTypes,
   selection: visibleComponents,
   updateVisibility,
-} = composable;
-
-const cache = computed(
-  () =>
-    ("componentsCache" in composable ? composable.componentsCache.value : undefined) ??
-    ("collectionsCache" in composable ? composable.collectionsCache.value : undefined),
-);
+} = useModelTree(id);
 
-const currentView = computed(() =>
-  treeviewStore.opened_views.find((view) => view.id === actualViewId),
-);
+const currentView = computed(() => treeviewStore.opened_views.find((view) => view.id === id));
 
 const opened = computed<string[]>({
   get: () => currentView.value?.opened || [],
-  set: (val) => treeviewStore.setOpened(actualViewId, val),
+  set: (val) => treeviewStore.setOpened(id, val),
 });
 
 const {
@@ -84,25 +70,37 @@ function onUpdateSelection(newSelection: string[]): void {
 
 const visibleSelection = computed<string[]>(() => applySearchFilter(visibleComponents.value, []));
 
+function matchesSearch(item: CollectionTreeItem, query: string): boolean {
+  return (
+    (item.title ?? "").toLowerCase().includes(query) ||
+    item.id.toLowerCase().includes(query) ||
+    (item.children ?? []).some((child) => matchesSearch(child, query))
+  );
+}
+
+function searchGroups(query: string): CollectionTreeItem[] {
+  const groups = (cache.value ?? {}) as Record<string, CollectionTreeItem[]>;
+  const result: CollectionTreeItem[] = [];
+  for (const [type, components] of Object.entries(groups)) {
+    const matches = components.filter((component) => matchesSearch(component, query));
+    if (matches.length > 0) {
+      result.push({
+        id: type,
+        title: `${type}s (${matches.length})`,
+        children: sortAndFormatItems(matches, sortType.value) as unknown as CollectionTreeItem[],
+      });
+    }
+  }
+  return result;
+}
+
 const itemsForTreeView = computed<CollectionTreeItem[]>(() => {
-  if (search.value && cache.value) {
+  if (search.value) {
     const query = search.value.toLowerCase();
-    const result: CollectionTreeItem[] = [];
-    for (const type of Object.keys(cache.value)) {
-      const matches = (cache.value[type] ?? []).filter(
-        (component: { title: string; id: string }) =>
-          component.title.toLowerCase().includes(query) ||
-          component.id.toLowerCase().includes(query),
-      );
-      if (matches.length > 0) {
-        result.push({
-          id: type,
-          title: `${type}s (${matches.length})`,
-          children: sortAndFormatItems(matches, sortType.value) as unknown as CollectionTreeItem[],
-        });
-      }
-    }
-    return result;
+    return sortAndFormatItems(
+      searchGroups(query),
+      sortType.value,
+    ) as unknown as CollectionTreeItem[];
   }
 
   const result: CollectionTreeItem[] = [];
@@ -127,9 +125,13 @@ function extractComponentIds(node: CollectionTreeItem): string[] {
   return [node.id];
 }
 
+function isCollectionNode(item: CollectionTreeItem): boolean {
+  return collectionTypes.value.has(item.category ?? item.id);
+}
+
 function showContextMenu(event: MouseEvent, item: CollectionTreeItem): void {
   const actualItem = item.raw || item;
-  if (isCollections.value && !MESH_COMPONENT_TYPES.includes(actualItem.category ?? "")) {
+  if (isCollectionNode(actualItem)) {
     emit("show-menu", {
       event,
       itemId: id,
@@ -217,9 +219,10 @@ function getLeafViewerIds(item: CollectionTreeItem): number[] {
       @expand-all="expandAll"
     />
 
-    <FetchingData v-if="rawItems === undefined" :size="48" :width="4" text="" />
+    <FetchingData v-if="isLoading" :size="48" :width="4" text="" />
 
     <CommonTreeView
+      v-else
       :selected="visibleSelection"
       v-model:opened="opened"
       v-model:active="treeviewStore.activeItems"
@@ -233,7 +236,7 @@ function getLeafViewerIds(item: CollectionTreeItem): number[] {
       class="transparent-treeview virtual-tree-height"
       @update:selected="(val) => onUpdateSelection(val as string[])"
       @click:item="onUpdateSelection([$event.id as string, ...visibleComponents])"
-      @update:scroll-top="treeviewStore.setScrollTop(actualViewId, $event)"
+      @update:scroll-top="treeviewStore.setScrollTop(id, $event)"
       @hover:enter="({ item }) => handleHoverEnter({ item: item as unknown as CollectionTreeItem })"
       @hover:leave="handleHoverLeave"
       @contextmenu="showContextMenu($event.event, $event.item as unknown as CollectionTreeItem)"

package/app/composables/model_tree.ts

@@ -0,0 +1,82 @@
+import type {
+  CollectionComponent,
+  CollectionComponentGroup,
+} from "@ogw_front/stores/data_helpers/collections";
+import type {
+  FormattedComponent,
+  FormattedComponentGroup,
+} from "@ogw_front/stores/data_helpers/mesh";
+import { compareSelections } from "@ogw_front/utils/treeview";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+type ModelTreeCategory = FormattedComponentGroup | CollectionComponentGroup;
+type ModelTreeCache = Record<string, (FormattedComponent | CollectionComponent)[]>;
+
+function useModelVisibility(modelId: string): {
+  selection: typeof selection;
+  updateVisibility: typeof updateVisibility;
+} {
+  const dataStyleStore = useDataStyleStore();
+  const hybridViewerStore = useHybridViewerStore();
+  const selection = dataStyleStore.visibleMeshComponents(modelId);
+
+  async function updateVisibility(current: readonly string[]): Promise<void> {
+    const { added, removed } = compareSelections([...current], selection.value);
+    if (added.length > 0) {
+      await dataStyleStore.setModelComponentsVisibility(modelId, added, true);
+    }
+    if (removed.length > 0) {
+      await dataStyleStore.setModelComponentsVisibility(modelId, removed, false);
+    }
+    if (added.length > 0 || removed.length > 0) {
+      await hybridViewerStore.remoteRender();
+    }
+  }
+
+  return { selection, updateVisibility };
+}
+
+export function useModelTree(modelId: string): {
+  isLoading: ComputedRef<boolean>;
+  localCategories: Ref<ModelTreeCategory[]>;
+  cache: Ref<ModelTreeCache | undefined>;
+  collectionTypes: Ref<Set<string>>;
+} & ReturnType<typeof useModelVisibility> {
+  const dataStore = useDataStore();
+
+  const meshGroups = dataStore.refFormatedMeshComponents(modelId);
+  const collectionGroups = dataStore.refFormatedCollectionComponents(modelId);
+  const cache = ref<ModelTreeCache | undefined>(undefined);
+  const localCategories = ref<ModelTreeCategory[]>([]);
+  const collectionTypes = ref<Set<string>>(new Set());
+
+  // The mesh cache also groups collection components by their type; the collections cache overrides those keys with the real collection -> mesh components hierarchy.
+  watch(
+    [meshGroups, collectionGroups],
+    async ([mesh, collections]) => {
+      if (!mesh || !collections) {
+        return;
+      }
+      const [meshByType, collectionsByType] = await Promise.all([
+        dataStore.fetchAllMeshComponents(modelId),
+        dataStore.fetchAllCollectionComponents(modelId),
+      ]);
+      cache.value = markRaw({ ...meshByType, ...collectionsByType });
+      localCategories.value = [...mesh, ...collections];
+      collectionTypes.value = new Set(Object.keys(collectionsByType));
+    },
+    { immediate: true },
+  );
+
+  const isLoading = computed(() => cache.value === undefined);
+
+  return {
+    isLoading,
+    localCategories,
+    cache,
+    collectionTypes,
+    ...useModelVisibility(modelId),
+  };
+}

package/app/stores/data_style.ts

@@ -132,6 +132,7 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
       ...component_style_promises,
       ...model_component_type_style_promises,
     ]);
+    await dataStyleState.loadFromDatabase();
   }
 
   async function applyAllStylesFromState(): Promise<void> {

package/app/stores/treeview.ts

@@ -6,7 +6,6 @@ import { defineStore } from "pinia";
 
 import type { Table } from "dexie";
 import { ref, watch } from "vue";
-import { compareSelections } from "@ogw_front/utils/treeview";
 import { database } from "@ogw_internal/database/database";
 
 const PANEL_WIDTH = 300;
@@ -17,8 +16,6 @@ interface OpenedView {
   title: string;
   scrollTop: number;
   opened: string[];
-  modelId?: string;
-  viewType?: string;
   geode_object_type?: string;
 }
 
@@ -144,18 +141,6 @@ export const useTreeviewStore = defineStore("treeview", () => {
     opened_views.value = opened_views.value.filter((view: ReadonlyOpenedView) => view.id !== id);
   }
 
-  watch(selection, (current: readonly string[], previous: readonly string[]) => {
-    const { removed } = compareSelections(current, previous);
-    for (const id of removed) {
-      const index = opened_views.value.findIndex(
-        (view: ReadonlyOpenedView) => view.type === "component" && view.id === id,
-      );
-      if (index !== -1) {
-        closeView(id);
-      }
-    }
-  });
-
   function toggleView(id: string): void {
     const index = opened_views.value.findIndex((view: ReadonlyOpenedView) => view.id === id);
     if (index !== -1) {
@@ -229,20 +214,16 @@ export const useTreeviewStore = defineStore("treeview", () => {
     id: string,
     title: string | undefined,
     geodeObjectType: string,
-    viewType = "model_components",
   ): void {
-    const viewId = `${id}_${viewType}`;
-    const index = opened_views.value.findIndex((view: ReadonlyOpenedView) => view.id === viewId);
+    const index = opened_views.value.findIndex((view: ReadonlyOpenedView) => view.id === id);
     if (index !== -1) {
-      closeView(viewId);
+      closeView(id);
       return;
     }
     additionalPanelWidth.value = panelWidth.value;
     opened_views.value.push({
       type: "component",
-      id: viewId,
-      modelId: id,
-      viewType,
+      id,
       title: title ?? id,
       geode_object_type: geodeObjectType,
       scrollTop: 0,

package/package.json

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

package/app/composables/model_collections.ts

@@ -1,91 +0,0 @@
-import type {
-  CollectionComponent,
-  CollectionComponentGroup,
-} from "@ogw_front/stores/data_helpers/collections";
-import { compareSelections } from "@ogw_front/utils/treeview";
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-
-// The `watch` callback receives the freshly-fetched collection groups purely for reading (matching against and copying into `localCategories`, never mutated in place), so it's typed with its own fully-readonly mirror of `CollectionComponentGroup` rather than that (intentionally mutable, see `existing.title` below) store type directly.
-interface ReadonlyCollectionComponentGroup {
-  readonly id: string;
-  readonly title: string;
-  readonly children: readonly CollectionComponent[];
-}
-
-export function useModelCollections(viewId: string): {
-  items: typeof items;
-  collectionsCache: typeof collectionsCache;
-  localCategories: typeof localCategories;
-  selection: typeof selection;
-  updateVisibility: typeof updateVisibility;
-} {
-  const dataStore = useDataStore();
-  const dataStyleStore = useDataStyleStore();
-  const hybridViewerStore = useHybridViewerStore();
-
-  const items = dataStore.refFormatedCollectionComponents(viewId);
-  const collectionsCache = ref<Record<string, CollectionComponent[]> | undefined>(undefined);
-  const localCategories = ref<CollectionComponentGroup[]>([]);
-
-  onMounted(async () => {
-    const data = await dataStore.fetchAllCollectionComponents(viewId);
-    collectionsCache.value = markRaw(data);
-  });
-
-  watch(
-    items,
-    async (newItems: readonly ReadonlyCollectionComponentGroup[] | undefined) => {
-      if (!newItems) {
-        localCategories.value = [];
-        return;
-      }
-
-      const data = await dataStore.fetchAllCollectionComponents(viewId);
-      collectionsCache.value = markRaw(data);
-
-      localCategories.value = newItems.map((newCategory: ReadonlyCollectionComponentGroup) => {
-        const existing = localCategories.value.find(
-          (category: ReadonlyCollectionComponentGroup) => category.id === newCategory.id,
-        );
-        if (existing) {
-          existing.title = newCategory.title || newCategory.id;
-          return existing;
-        }
-        return reactive({
-          ...newCategory,
-          title: newCategory.title || newCategory.id,
-        });
-      });
-    },
-    { immediate: true },
-  );
-
-  const selection = dataStyleStore.visibleMeshComponents(viewId);
-
-  async function updateVisibility(current: readonly string[]): Promise<void> {
-    const previous = selection.value;
-    const { added, removed } = compareSelections([...current], previous);
-
-    if (added.length === 0 && removed.length === 0) {
-      return;
-    }
-
-    if (added.length > 0) {
-      await dataStyleStore.setModelComponentsVisibility(viewId, added, true);
-    }
-    if (removed.length > 0) {
-      await dataStyleStore.setModelComponentsVisibility(viewId, removed, false);
-    }
-    await hybridViewerStore.remoteRender();
-  }
-
-  return {
-    items,
-    collectionsCache,
-    localCategories,
-    selection,
-    updateVisibility,
-  };
-}

package/app/composables/model_components.ts

@@ -1,91 +0,0 @@
-import type {
-  FormattedComponent,
-  FormattedComponentGroup,
-} from "@ogw_front/stores/data_helpers/mesh";
-import { compareSelections } from "@ogw_front/utils/treeview";
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-
-// The `watch` callback receives the freshly-fetched component groups purely for reading (matching against and copying into `localCategories`, never mutated in place), so it's typed with its own fully-readonly mirror of `FormattedComponentGroup` rather than that (intentionally mutable, see `existing.title` below) store type directly.
-interface ReadonlyFormattedComponentGroup {
-  readonly id: string;
-  readonly title: string;
-  readonly children: readonly FormattedComponent[];
-}
-
-export function useModelComponents(viewId: string): {
-  items: typeof items;
-  componentsCache: typeof componentsCache;
-  localCategories: typeof localCategories;
-  selection: typeof selection;
-  updateVisibility: typeof updateVisibility;
-} {
-  const dataStore = useDataStore();
-  const dataStyleStore = useDataStyleStore();
-  const hybridViewerStore = useHybridViewerStore();
-
-  const items = dataStore.refFormatedMeshComponents(viewId);
-  const componentsCache = ref<Record<string, FormattedComponent[]> | undefined>(undefined);
-  const localCategories = ref<FormattedComponentGroup[]>([]);
-
-  onMounted(async () => {
-    const data = await dataStore.fetchAllMeshComponents(viewId);
-    componentsCache.value = markRaw(data);
-  });
-
-  watch(
-    items,
-    async (newItems: readonly ReadonlyFormattedComponentGroup[] | undefined) => {
-      if (!newItems) {
-        localCategories.value = [];
-        return;
-      }
-
-      const data = await dataStore.fetchAllMeshComponents(viewId);
-      componentsCache.value = markRaw(data);
-
-      localCategories.value = newItems.map((newCategory: ReadonlyFormattedComponentGroup) => {
-        const existing = localCategories.value.find(
-          (category: ReadonlyFormattedComponentGroup) => category.id === newCategory.id,
-        );
-        if (existing) {
-          existing.title = newCategory.title || newCategory.id;
-          return existing;
-        }
-        return reactive({
-          ...newCategory,
-          title: newCategory.title || newCategory.id,
-        });
-      });
-    },
-    { immediate: true },
-  );
-
-  const selection = dataStyleStore.visibleMeshComponents(viewId);
-
-  async function updateVisibility(current: readonly string[]): Promise<void> {
-    const previous = selection.value;
-    const { added, removed } = compareSelections([...current], previous);
-
-    if (added.length === 0 && removed.length === 0) {
-      return;
-    }
-
-    if (added.length > 0) {
-      await dataStyleStore.setModelComponentsVisibility(viewId, added, true);
-    }
-    if (removed.length > 0) {
-      await dataStyleStore.setModelComponentsVisibility(viewId, removed, false);
-    }
-    await hybridViewerStore.remoteRender();
-  }
-
-  return {
-    items,
-    componentsCache,
-    localCategories,
-    selection,
-    updateVisibility,
-  };
-}