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

package/app/components/Launcher.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import Loading from "@ogw_front/components/Loading.vue";
-import Recaptcha from "@ogw_front/components/Recaptcha.vue";
 import { Status } from "@ogw_front/utils/status";
 import { appMode } from "@ogw_shared/app_mode";
 import { getCloudUrlParam } from "@ogw_front/utils/cloud";
@@ -8,22 +7,28 @@ import { useInfraStore } from "@ogw_front/stores/infra";
 
 interface Props {
   appName: string;
-  email?: string;
+  // Firebase ID token for the cloud launch; required in cloud mode.
+  authToken?: string;
   isUserAuthenticated?: boolean;
   logo?: string;
 }
 
-const { appName, email = undefined, isUserAuthenticated = false, logo = "" } = defineProps<Props>();
+const {
+  appName,
+  authToken = undefined,
+  isUserAuthenticated = false,
+  logo = "",
+} = defineProps<Props>();
 
 const infraStore = useInfraStore();
 // In cloud mode, wait for the user to authenticate and load the app, unless a `?cloud_url=` link
 // Points at an already running service: that one is connected straight away, without authentication.
 if (infraStore.app_mode !== appMode.CLOUD || getCloudUrlParam() !== undefined) {
-  infraStore.create_backend(email);
+  infraStore.create_backend(authToken);
 }
 
 function cloudCreateBackend(): Promise<void> {
-  return infraStore.create_backend(email);
+  return infraStore.create_backend(authToken);
 }
 </script>
 

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/api.ts

@@ -1,4 +1,4 @@
-import type { RequestHandlers } from "@ogw_shared/utils/types";
+import type { ParamsOf, RequestHandlers, ResponseOf } from "@ogw_shared/utils/types";
 import { api_fetch } from "@ogw_internal/utils/api_fetch";
 import { consola } from "consola";
 
@@ -8,7 +8,7 @@ interface ApiSchema {
   [key: string]: unknown;
 }
 
-type ApiCallbacks = RequestHandlers & {
+type ApiCallbacks<Response = unknown> = RequestHandlers<Response> & {
   skip_feedback_error?: boolean;
 };
 
@@ -26,21 +26,21 @@ export const useAPIStore = defineStore("api", () => {
     request_counter.value -= 1;
   }
 
-  // `TResult` is asserted, not verified: the response is only checked against `schema` at runtime
-  async function request<TResult = unknown>(
+  // The response type comes from the schema's generated `response` type (see the Cloud API typed schemas), asserted at the API boundary below, not verified
+  async function request<Schema extends ApiSchema>(
     {
       schema,
-      params = {},
+      params,
       headers = {},
-    }: { schema: ApiSchema; params?: Record<string, unknown>; headers?: Record<string, string> },
-    callbacks: ApiCallbacks = {},
-  ): Promise<TResult> {
+    }: { schema: Schema; params?: ParamsOf<Schema>; headers?: Record<string, string> },
+    callbacks: ApiCallbacks<ResponseOf<Schema>> = {},
+  ): Promise<ResponseOf<Schema>> {
     consola.info("[API] Request:", schema.$id);
     const start = Date.now();
 
     const result = await api_fetch(
       { $id: schema.$id, base_url: base_url.value, start_request, stop_request },
-      { schema, params, headers },
+      { schema, params: params ?? {}, headers },
       {
         ...callbacks,
         response_function: async (response: unknown) => {
@@ -52,13 +52,14 @@ export const useAPIStore = defineStore("api", () => {
             "s",
           );
           if (callbacks.response_function) {
-            await callbacks.response_function(response);
+            // oxlint-disable-next-line no-unsafe-type-assertion -- trusted API boundary; see comment above.
+            await callbacks.response_function(response as ResponseOf<Schema>);
           }
         },
       },
     );
     // oxlint-disable-next-line no-unsafe-type-assertion -- trusted API boundary; see comment above.
-    return result as TResult;
+    return result as ResponseOf<Schema>;
   }
   return {
     base_url,

package/app/stores/cloud.ts

@@ -1,9 +1,8 @@
 import { clearCloudUrlParam, getCloudUrlParam } from "@ogw_front/utils/cloud";
-import type { RunCloudResponse } from "@geode/cloud-api/types";
 import { Status } from "@ogw_front/utils/status";
 import { api_fetch } from "@ogw_internal/utils/api_fetch";
 import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_typed_schemas.js";
-import cloud_api_schemas from "@geode/cloud-api/cloud_api_schemas.json";
+import cloud_api_schemas from "@geode/cloud-api/cloud_api_typed_schemas.js";
 import { setAppBaseUrl } from "@ogw_shared/scripts";
 import { useAPIStore } from "@ogw_front/stores/api";
 import { useFeedbackStore } from "@ogw_front/stores/feedback";
@@ -17,10 +16,13 @@ export const useCloudStore = defineStore("cloud", {
   actions: {
     // Reuses the running service given by `?cloud_url=` when present, otherwise launches a new one.
     // The param is single use: it is cleared whatever the outcome, so a retry launches a new service.
-    async start(email: string) {
+    async start(authToken?: string) {
       const existing_host = getCloudUrlParam();
       if (existing_host === undefined) {
-        await this.launch(email);
+        if (authToken === undefined) {
+          throw new Error("Launching a cloud service requires an authenticated user");
+        }
+        await this.launch(authToken);
         return;
       }
       try {
@@ -29,29 +31,23 @@ export const useCloudStore = defineStore("cloud", {
         clearCloudUrlParam();
       }
     },
-    async launch(email: string) {
+    // `authToken` is the user's Firebase ID token, checked by the Cloud API
+    async launch(authToken: string) {
       this.status = Status.CONNECTING;
       const { PROJECT, BRANCH } = useRuntimeConfig().public;
-      const params = { email, project: PROJECT, branch: BRANCH };
+      const params = { project: PROJECT, branch: BRANCH };
+      const headers = { Authorization: `Bearer ${authToken}` };
       const feedbackStore = useFeedbackStore();
       const APIStore = useAPIStore();
-      const result = await APIStore.request<RunCloudResponse>(
-        { schema: run_cloud_schema, params },
+      const result = await APIStore.request(
+        { schema: run_cloud_schema, params, headers },
         {
           request_error_function: () => {
             feedbackStore.$patch({ server_error: true });
             this.status = Status.NOT_CONNECTED;
           },
-          response_function: async (response: unknown) => {
-            if (
-              typeof response !== "object" ||
-              response === null ||
-              !("url" in response) ||
-              typeof response.url !== "string"
-            ) {
-              return;
-            }
-            await this.on_connected(response.url);
+          response_function: async ({ url }) => {
+            await this.on_connected(url);
           },
           response_error_function: () => {
             feedbackStore.$patch({ server_error: true });

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/infra.ts

@@ -44,7 +44,7 @@ export const useInfraStore = defineStore("infra", {
         (microservice: Microservice) => microservice.$id !== microserviceId,
       );
     },
-    async create_backend(email?: string) {
+    async create_backend(authToken?: string) {
       if (this.status === Status.CREATED) {
         return undefined;
       }
@@ -56,7 +56,7 @@ export const useInfraStore = defineStore("infra", {
         if (this.app_mode === appMode.CLOUD) {
           const cloudStore = useCloudStore();
           try {
-            await cloudStore.start(email ?? "");
+            await cloudStore.start(authToken);
           } catch (error) {
             // Back to the "Load the app" button so the user is not stuck on the loading screen.
             this.status = Status.NOT_CREATED;

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.4",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {

package/app/components/Recaptcha.vue

@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import { useInfraStore } from "@ogw_front/stores/infra";
-
-interface Props {
-  buttonLabel?: string;
-  buttonColor?: string;
-  color?: string;
-}
-
-const {
-  buttonLabel = "Load the app",
-  buttonColor = "white",
-  color = undefined,
-} = defineProps<Props>();
-
-const name = ref("");
-const email = ref("");
-const launch = ref(false);
-const valid = ref(false);
-const emailRules = [
-  (value: string): boolean | string => {
-    if (value) {
-      return true;
-    }
-    return "E-mail is required.";
-  },
-  (value: string): boolean | string => {
-    if (/.+@.+\..+/u.test(value)) {
-      return true;
-    }
-    return "E-mail must be valid.";
-  },
-];
-
-function submit(): Promise<void> {
-  const infraStore = useInfraStore();
-  return infraStore.create_backend(email.value);
-}
-</script>
-
-<template>
-  <VRow align="center" justify="center" style="display: none">
-    <VCol cols="4">
-      <VForm v-model="valid">
-        <VContainer>
-          <VRow>
-            <VCol>
-              <VTextField v-model="name" label="Name" required />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol>
-              <VTextField v-model="email" :rules="emailRules" label="E-mail" required />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol>
-              <VCheckbox label="Load the app" v-model="launch" />
-            </VCol>
-          </VRow>
-        </VContainer>
-      </VForm>
-    </VCol>
-  </VRow>
-  <VRow align="center" justify="center">
-    <VCol cols="auto" class="d-flex justify-center align-center">
-      <VBtn class="load-btn" :text="buttonLabel" :color="color || buttonColor" @click="submit" />
-    </VCol>
-  </VRow>
-</template>
-
-<style scoped>
-.load-btn {
-  padding: 0 40px !important;
-  height: 50px !important;
-  border-radius: 8px;
-  text-transform: none !important;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-  transition:
-    transform 0.2s ease,
-    box-shadow 0.2s ease !important;
-}
-
-.load-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
-}
-</style>

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,
-  };
-}