@geode/opengeodeweb-front 10.18.1 → 10.18.2

package/app/components/CameraOrientation.vue

@@ -1,6 +1,6 @@
 <script setup>
 import ToolPanel from "@ogw_front/components/ToolPanel";
-import { applyCameraOptions } from "@ogw_internal/stores/hybrid_viewer";
+import { applyCameraOptions } from "@ogw_internal/stores/hybrid_viewer_camera";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { newInstance as vtkAnnotatedCubeActor } from "@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";

package/app/components/ViewToolbar.vue

@@ -30,7 +30,7 @@ async function handleZScalingClose() {
   showZScaling.value = false;
 }
 
-const camera_options = [
+const camera_options = computed(() => [
   {
     tooltip: "Reset camera",
     icon: "mdi-cube-scan",
@@ -41,10 +41,50 @@ const camera_options = [
   {
     tooltip: "Center on click",
     icon: "mdi-crosshairs-question",
+    color: hybridViewerStore.is_picking ? "primary" : undefined,
     action: () => {
       hybridViewerStore.is_picking = !hybridViewerStore.is_picking;
     },
   },
+  {
+    tooltip: "Highlight on hover",
+    icon: "mdi-cursor-default-click",
+    color: hybridViewerStore.is_hover_highlight ? "primary" : undefined,
+    menu: [
+      {
+        title: "Cells",
+        icon: "mdi-select-all",
+        action: () => {
+          if (
+            hybridViewerStore.is_hover_highlight &&
+            hybridViewerStore.hover_highlight_field_type === "CELL"
+          ) {
+            hybridViewerStore.is_hover_highlight = false;
+            hybridViewerStore.clearHoverHighlight();
+          } else {
+            hybridViewerStore.is_hover_highlight = true;
+            hybridViewerStore.hover_highlight_field_type = "CELL";
+          }
+        },
+      },
+      {
+        title: "Points",
+        icon: "mdi-select-drag",
+        action: () => {
+          if (
+            hybridViewerStore.is_hover_highlight &&
+            hybridViewerStore.hover_highlight_field_type === "POINT"
+          ) {
+            hybridViewerStore.is_hover_highlight = false;
+            hybridViewerStore.clearHoverHighlight();
+          } else {
+            hybridViewerStore.is_hover_highlight = true;
+            hybridViewerStore.hover_highlight_field_type = "POINT";
+          }
+        },
+      },
+    ],
+  },
   {
     tooltip: "Camera orientation",
     icon: "mdi-rotate-3d",
@@ -70,6 +110,7 @@ const camera_options = [
   {
     tooltip: "Toggle grid scale",
     icon: "mdi-ruler-square",
+    color: grid_scale.value ? "primary" : undefined,
     action: () => {
       viewerStore.request(
         schemas.opengeodeweb_viewer.viewer.grid_scale,
@@ -90,19 +131,54 @@ const camera_options = [
       showZScaling.value = !showZScaling.value;
     },
   },
-];
+]);
 </script>
 
 <template>
   <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
     <v-row v-for="camera_option in camera_options" :key="camera_option.icon" dense>
       <v-col>
+        <v-menu v-if="camera_option.menu" location="start" :close-on-content-click="false">
+          <template #activator="{ props }">
+            <ActionButton
+              v-bind="props"
+              :icon="
+                typeof camera_option.icon === 'function' ? camera_option.icon() : camera_option.icon
+              "
+              :tooltip="camera_option.tooltip"
+              :color="camera_option.color"
+              :icon-size="camera_option.iconSize"
+              tooltip-location="left"
+            />
+          </template>
+          <v-card class="pa-1 mr-2" elevation="4" rounded="pill">
+            <v-row dense>
+              <v-col v-for="item in camera_option.menu" :key="item.title">
+                <ActionButton
+                  :icon="item.icon"
+                  :tooltip="item.title"
+                  :color="
+                    hybridViewerStore.is_hover_highlight &&
+                    hybridViewerStore.hover_highlight_field_type ===
+                      item.title.toUpperCase().slice(0, -1)
+                      ? 'primary'
+                      : undefined
+                  "
+                  tooltip-location="top"
+                  @click="item.action"
+                />
+              </v-col>
+            </v-row>
+          </v-card>
+        </v-menu>
         <ActionButton
+          v-else
           :icon="camera_option.icon"
           :tooltip="camera_option.tooltip"
+          :color="camera_option.color"
           :icon-size="camera_option.iconSize"
           tooltip-location="left"
-          @click.stop="camera_option.action"
+          @click.stop="camera_option.action?.()"
         />
       </v-col>
     </v-row>

package/app/components/Viewer/Options/ColorMapPicker.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { getRGBPointsFromPreset, scientificPresets } from "@ogw_front/utils/colormap";
+import { colormaps, getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
 import ColorMapList from "./ColorMapList.vue";
 import { newInstance } from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
 
@@ -18,13 +18,13 @@ const lutCanvas = ref();
 
 const presets = computed(() => {
   let currentPreset = undefined;
-  for (const category of scientificPresets) {
+  for (const category of colormaps) {
     currentPreset = category.Children.find((preset) => preset.Name === selectedPresetName.value);
     if (currentPreset) {
       break;
     }
   }
-  return [currentPreset, ...scientificPresets].filter(Boolean);
+  return [currentPreset, ...colormaps].filter(Boolean);
 });
 
 function drawLutCanvas() {

package/app/composables/project_manager.js

@@ -12,89 +12,87 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
-export function useProjectManager() {
-  async function exportProject() {
-    console.log("[export triggered]");
-    const appStore = useAppStore();
-    const geodeStore = useGeodeStore();
-    const snapshot = await appStore.exportStores();
-    const schema = back_schemas.opengeodeweb_back.export_project;
-    const defaultName = "project.vease";
-
-    const result = await $fetch(schema.$id, {
-      baseURL: geodeStore.base_url,
-      method: schema.methods.find((method) => method !== "OPTIONS"),
-      body: { snapshot, filename: defaultName },
-    });
-    fileDownload(result, defaultName);
-    return { result };
+async function exportProject() {
+  console.log("[export triggered]");
+  const appStore = useAppStore();
+  const geodeStore = useGeodeStore();
+  const snapshot = await appStore.exportStores();
+  const schema = back_schemas.opengeodeweb_back.export_project;
+  const defaultName = "project.vease";
+
+  const result = await $fetch(schema.$id, {
+    baseURL: geodeStore.base_url,
+    method: schema.methods.find((method) => method !== "OPTIONS"),
+    body: { snapshot, filename: defaultName },
+  });
+  fileDownload(result, defaultName);
+  return { result };
+}
+
+async function importProject(project) {
+  const geodeStore = useGeodeStore();
+  const dataStyleStore = useDataStyleStore();
+  const viewerStore = useViewerStore();
+  const dataStore = useDataStore();
+  const treeviewStore = useTreeviewStore();
+  const hybridViewerStore = useHybridViewerStore();
+
+  await viewerStore.ws_connect();
+
+  const { client } = viewerStore;
+  if (client && client.getConnection && client.getConnection().getSession) {
+    await client.getConnection().getSession().call("opengeodeweb_viewer.release_database", [{}]);
+  }
+
+  await viewerStore.request(
+    viewer_schemas.opengeodeweb_viewer.viewer.reset_visualization,
+    {},
+    undefined,
+  );
+
+  treeviewStore.clear();
+  dataStore.clear();
+  hybridViewerStore.clear();
+
+  const schemaImport = back_schemas.opengeodeweb_back.import_project;
+  const form = new FormData();
+  const originalFileName = project && project.name ? project.name : "project.vease";
+  if (!originalFileName.toLowerCase().endsWith(".vease")) {
+    throw new Error("Uploaded file must be a .vease");
+  }
+  form.append("file", project, originalFileName);
+
+  const result = await $fetch(schemaImport.$id, {
+    baseURL: geodeStore.base_url,
+    method: "POST",
+    body: form,
+  });
+  const snapshot = result && result.snapshot ? result.snapshot : {};
+
+  treeviewStore.isImporting = true;
+
+  const { client: client2 } = viewerStore;
+  if (client2 && client2.getConnection && client2.getConnection().getSession) {
+    await client2.getConnection().getSession().call("opengeodeweb_viewer.import_project", [{}]);
   }
 
-  async function importProjectFile(file) {
-    const geodeStore = useGeodeStore();
-    const dataStyleStore = useDataStyleStore();
-    const viewerStore = useViewerStore();
-    const dataStore = useDataStore();
-    const treeviewStore = useTreeviewStore();
-    const hybridViewerStore = useHybridViewerStore();
-
-    await viewerStore.ws_connect();
-
-    const { client } = viewerStore;
-    if (client && client.getConnection && client.getConnection().getSession) {
-      await client.getConnection().getSession().call("opengeodeweb_viewer.release_database", [{}]);
-    }
-
-    await viewerStore.request(
-      viewer_schemas.opengeodeweb_viewer.viewer.reset_visualization,
-      {},
-      undefined,
-    );
-
-    treeviewStore.clear();
-    dataStore.clear();
-    hybridViewerStore.clear();
-
-    const schemaImport = back_schemas.opengeodeweb_back.import_project;
-    const form = new FormData();
-    const originalFileName = file && file.name ? file.name : "project.vease";
-    if (!originalFileName.toLowerCase().endsWith(".vease")) {
-      throw new Error("Uploaded file must be a .vease");
-    }
-    form.append("file", file, originalFileName);
-
-    const result = await $fetch(schemaImport.$id, {
-      baseURL: geodeStore.base_url,
-      method: "POST",
-      body: form,
-    });
-    const snapshot = result && result.snapshot ? result.snapshot : {};
-
-    treeviewStore.isImporting = true;
-
-    const { client: client2 } = viewerStore;
-    if (client2 && client2.getConnection && client2.getConnection().getSession) {
-      await client2.getConnection().getSession().call("opengeodeweb_viewer.import_project", [{}]);
-    }
-
-    await treeviewStore.importStores(snapshot.treeview || {});
-    await hybridViewerStore.initHybridViewer();
-    await hybridViewerStore.importStores(snapshot.hybridViewer || {});
-
-    const items = snapshot?.data?.items || [];
-
-    await importWorkflowFromSnapshot(items);
-    await hybridViewerStore.importStores(snapshot.hybridViewer || {});
-    {
-      await dataStyleStore.importStores(snapshot.dataStyle || {});
-    }
-    {
-      await dataStyleStore.applyAllStylesFromState();
-    }
-
-    treeviewStore.finalizeImportSelection();
-    treeviewStore.isImporting = false;
+  await treeviewStore.importStores(snapshot.treeview || {});
+  await hybridViewerStore.initHybridViewer();
+  await hybridViewerStore.importStores(snapshot.hybridViewer || {});
+
+  const items = snapshot?.data?.items || [];
+
+  await importWorkflowFromSnapshot(items);
+  await hybridViewerStore.importStores(snapshot.hybridViewer || {});
+  {
+    await dataStyleStore.importStores(snapshot.dataStyle || {});
+  }
+  {
+    await dataStyleStore.applyAllStylesFromState();
   }
 
-  return { exportProject, importProjectFile };
+  treeviewStore.finalizeImportSelection();
+  treeviewStore.isImporting = false;
 }
+
+export { exportProject, importProject };

package/app/stores/camera_manager.js

@@ -9,27 +9,28 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 
 export const useCameraManagerStore = defineStore("camera_manager", () => {
   const viewerStore = useViewerStore();
+  const camera_positions_db = database.camera_positions;
 
   function refAllCameraPositions() {
     return useObservable(
-      liveQuery(() => database.camera_positions.toArray()),
+      liveQuery(() => camera_positions_db.toArray()),
       { initialValue: [] },
     );
   }
 
   async function getCameraPosition(id) {
-    return await database.camera_positions.get(id);
+    return await camera_positions_db.get(id);
   }
 
   async function saveCameraPosition(name, camera_options) {
-    await database.camera_positions.put({
+    await camera_positions_db.put({
       name,
       camera_options,
     });
   }
 
   async function restoreCameraPosition(id) {
-    const position = await database.camera_positions.get(id);
+    const position = await camera_positions_db.get(id);
     if (position) {
       await viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, {
         camera_options: position.camera_options,
@@ -38,11 +39,11 @@ export const useCameraManagerStore = defineStore("camera_manager", () => {
   }
 
   async function deleteCameraPosition(id) {
-    await database.camera_positions.delete(id);
+    await camera_positions_db.delete(id);
   }
 
   async function renameCameraPosition(id, newName) {
-    await database.camera_positions.update(id, { name: newName });
+    await camera_positions_db.update(id, { name: newName });
   }
 
   return {

package/app/stores/data.js

@@ -12,9 +12,12 @@ const viewer_generic_schemas = viewer_schemas.opengeodeweb_viewer.generic;
 // oxlint-disable-next-line max-lines-per-function, max-statements
 export const useDataStore = defineStore("data", () => {
   const viewerStore = useViewerStore();
+  const data_db = database.data;
+  const model_components_db = database.model_components;
+  const model_components_relation_db = database.model_components_relation;
 
   async function item(id) {
-    const data_item = await database.data.get(id);
+    const data_item = await data_db.get(id);
     if (!data_item) {
       throw new Error(`Item not found: ${id}`);
     }
@@ -23,20 +26,20 @@ export const useDataStore = defineStore("data", () => {
 
   function refItem(id) {
     return useObservable(
-      liveQuery(() => database.data.get(id)),
+      liveQuery(() => data_db.get(id)),
       { initialValue: {} },
     );
   }
 
   function refAllItems() {
     return useObservable(
-      liveQuery(() => database.data.toArray()),
+      liveQuery(() => data_db.toArray()),
       { initialValue: [] },
     );
   }
 
   async function formatedMeshComponents(modelId) {
-    const items = await database.model_components.where("id").equals(modelId).toArray();
+    const items = await model_components_db.where("id").equals(modelId).toArray();
     const componentTitles = {
       Corner: "Corners",
       Line: "Lines",
@@ -70,7 +73,7 @@ export const useDataStore = defineStore("data", () => {
   }
 
   async function getMeshComponentsByType(modelId, type) {
-    const components = await database.model_components
+    const components = await model_components_db
       .where("[id+type]")
       .equals([modelId, type])
       .toArray();
@@ -84,7 +87,7 @@ export const useDataStore = defineStore("data", () => {
   }
 
   async function getAllMeshComponents(modelId) {
-    const items = await database.model_components.where("id").equals(modelId).toArray();
+    const items = await model_components_db.where("id").equals(modelId).toArray();
     return items.map((meshComponent) => ({
       id: meshComponent.geode_id,
       title: meshComponent.name,
@@ -114,7 +117,7 @@ export const useDataStore = defineStore("data", () => {
   }
 
   async function meshComponentType(modelId, geode_id) {
-    const component = await database.model_components
+    const component = await model_components_db
       .where("[id+geode_id]")
       .equals([modelId, geode_id])
       .first();
@@ -139,7 +142,7 @@ export const useDataStore = defineStore("data", () => {
       created_at: new Date().toISOString(),
       binary_light_viewable: new_item.binary_light_viewable,
     };
-    return database.data.put(itemData);
+    return data_db.put(itemData);
   }
 
   function addComponents(new_item) {
@@ -162,7 +165,7 @@ export const useDataStore = defineStore("data", () => {
     if (new_item.collection_components) {
       addModelComponents(new_item.collection_components);
     }
-    return database.model_components.bulkPut(allComponents);
+    return model_components_db.bulkPut(allComponents);
   }
 
   function addComponentRelations(new_item) {
@@ -194,11 +197,11 @@ export const useDataStore = defineStore("data", () => {
         }
       }
     }
-    return database.model_components_relation.bulkPut(relations);
+    return model_components_relation_db.bulkPut(relations);
   }
 
   async function getComponentByViewerId(modelId, viewer_id) {
-    const component = await database.model_components
+    const component = await model_components_db
       .where("viewer_id")
       .equals(Number(viewer_id))
       .and((model_component) => model_component.id === modelId)
@@ -207,21 +210,21 @@ export const useDataStore = defineStore("data", () => {
   }
 
   async function deleteItem(id) {
-    await database.data.delete(id);
+    await data_db.delete(id);
     await deleteModelComponents(id);
   }
 
   async function updateItem(id, changes) {
-    await database.data.update(id, changes);
+    await data_db.update(id, changes);
   }
 
   async function deleteModelComponents(modelId) {
-    await database.model_components.where("id").equals(modelId).delete();
+    await model_components_db.where("id").equals(modelId).delete();
     await database.model_components_relation.where("id").equals(modelId).delete();
   }
 
   async function getMeshComponentGeodeIds(modelId, type) {
-    const components = await database.model_components
+    const components = await model_components_db
       .where("[id+type]")
       .equals([modelId, type])
       .toArray();
@@ -245,12 +248,12 @@ export const useDataStore = defineStore("data", () => {
   }
 
   async function getAllModelComponentsViewerIds(modelId) {
-    const components = await database.model_components.where("id").equals(modelId).toArray();
+    const components = await model_components_db.where("id").equals(modelId).toArray();
     return components.map((component) => Number.parseInt(component.viewer_id, 10));
   }
 
   async function getMeshComponentsViewerIds(modelId, meshComponentGeodeIds) {
-    const components = await database.model_components
+    const components = await model_components_db
       .where("[id+geode_id]")
       .anyOf(meshComponentGeodeIds.map((geode_id) => [modelId, geode_id]))
       .toArray();
@@ -258,7 +261,7 @@ export const useDataStore = defineStore("data", () => {
   }
 
   async function exportStores() {
-    const items = await database.data.toArray();
+    const items = await data_db.toArray();
     return { items };
   }
 
@@ -267,7 +270,7 @@ export const useDataStore = defineStore("data", () => {
   }
 
   async function clear() {
-    await database.data.clear();
+    await data_db.clear();
   }
 
   return {

package/app/stores/data_style.js

@@ -5,14 +5,18 @@ import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useMeshStyle } from "@ogw_internal/stores/data_style/mesh/index";
 import { useModelStyle } from "@ogw_internal/stores/data_style/model/index";
 
+// oxlint-disable-next-line max-lines-per-function
 export const useDataStyleStore = defineStore("dataStyle", () => {
   const dataStyleState = useDataStyleState();
   const meshStyleStore = useMeshStyle();
   const modelStyleStore = useModelStyle();
   const dataStore = useDataStore();
+  const data_style_db = database.data_style;
+  const model_component_type_datastyle_db = database.model_component_type_datastyle;
+  const component_datastyle_db = database.component_datastyle;
 
   async function addDataStyle(id, geode_object) {
-    await database.data_style.put(structuredClone({ id, ...getDefaultStyle(geode_object) }));
+    await data_style_db.put(structuredClone({ id, ...getDefaultStyle(geode_object) }));
   }
 
   async function setVisibility(id, visibility) {
@@ -57,13 +61,13 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
     await dataStyleState.clear();
 
     const style_promises = Object.entries(stylesSnapshot).map(([id, style]) =>
-      database.data_style.put(structuredClone({ id, ...style })),
+      data_style_db.put(structuredClone({ id, ...style })),
     );
     const component_style_promises = Object.values(componentStylesSnapshot).map((style) =>
-      database.model_component_datastyle.put(structuredClone(style)),
+      component_datastyle_db.put(structuredClone(style)),
     );
     const model_component_type_style_promises = Object.values(modelComponentTypeStylesSnapshot).map(
-      (style) => database.model_component_type_datastyle.put(structuredClone(style)),
+      (style) => model_component_type_datastyle_db.put(structuredClone(style)),
     );
 
     await Promise.all([