@geode/opengeodeweb-front 10.18.1 → 10.18.2-rc.1

package/app/stores/hybrid_viewer.js

@@ -1,15 +1,24 @@
 import {
   ACTOR_COLOR,
   BACKGROUND_COLOR,
+  HOVER_THROTTLE_MS,
   WHEEL_TIME_OUT_MS,
-  applySnapshot,
   computeAverageBrightness,
+  performAddItem,
+  performClearHoverHighlight,
+  performClickPicking,
+  performHoverHighlight,
+  performSetContainer,
+  performSetZScaling,
+} from "@ogw_internal/stores/hybrid_viewer";
+import {
+  applySnapshot,
   getCameraOptions,
   performCameraOrientation,
-  performClickPicking,
   performFocusCameraOnObject,
   performSetCamera,
-} from "@ogw_internal/stores/hybrid_viewer";
+  performSyncRemoteCamera,
+} from "@ogw_internal/stores/hybrid_viewer_camera";
 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";
@@ -30,6 +39,8 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   const status = ref(Status.NOT_CREATED);
   const is_moving = ref(false);
   const is_picking = ref(false);
+  const is_hover_highlight = ref(false);
+  const hover_highlight_field_type = ref("CELL");
   const zScale = ref(1);
   let imageStyle = undefined;
   let viewStream = undefined;
@@ -83,25 +94,15 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   async function addItem(id) {
-    if (!genericRenderWindow.value) {
-      return;
-    }
-    const reader = vtkXMLPolyDataReader();
-    const value = await dataStore.item(id);
-    await reader.parseAsArrayBuffer(new TextEncoder().encode(value.binary_light_viewable));
-    const actor = vtkActor();
-    const mapper = vtkMapper();
-    const polydata = reader.getOutputData(0);
-    mapper.setInputData(polydata);
-    actor.getProperty().setColor(ACTOR_COLOR);
-    actor.setMapper(mapper);
-    const renderer = genericRenderWindow.value.getRenderer();
-    const isFirst = renderer.getActors().length === 0;
-    renderer.addActor(actor);
-    if (isFirst) {
-      renderer.resetCamera();
-    }
-    hybridDb[id] = { actor, polydata, mapper };
+    await performAddItem(id, {
+      genericRenderWindow: genericRenderWindow.value,
+      dataStore,
+      vtkXMLPolyDataReader,
+      vtkActor,
+      vtkMapper,
+      actorColor: ACTOR_COLOR,
+      hybridDb,
+    });
   }
 
   function removeItem(id) {
@@ -122,21 +123,14 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   async function setZScaling(z_scale) {
-    zScale.value = z_scale;
-    const renderer = genericRenderWindow.value.getRenderer();
-    for (const actor of renderer.getActors()) {
-      if (actor !== gridActor) {
-        const scale = actor.getScale();
-        actor.setScale(scale[0], scale[1], z_scale);
-      }
-    }
-    renderer.resetCamera();
-    genericRenderWindow.value.getRenderWindow().render();
-    const schema = viewer_schemas?.opengeodeweb_viewer?.viewer?.set_z_scaling;
-    if (schema) {
-      await viewerStore.request(schema, { z_scale });
-    }
-    remoteRender();
+    await performSetZScaling(z_scale, {
+      zScale,
+      genericRenderWindow: genericRenderWindow.value,
+      gridActor,
+      viewerStore,
+      viewer_schemas,
+      remoteRender,
+    });
   }
 
   function resetCamera() {
@@ -177,76 +171,59 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   function syncRemoteCamera() {
-    const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
-    const options = getCameraOptions(camera);
-    viewerStore.request(
-      viewer_schemas.opengeodeweb_viewer.viewer.update_camera,
-      { camera_options: options },
-      {
-        response_function: () => {
-          remoteRender();
-          Object.assign(camera_options, options);
-        },
-      },
-    );
+    performSyncRemoteCamera({
+      genericRenderWindow: genericRenderWindow.value,
+      viewerStore,
+      viewer_schemas,
+      remoteRender,
+      camera_options,
+    });
   }
 
   function remoteRender() {
     return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.render);
   }
 
-  function setContainer(container) {
-    if (!container.value) {
-      return;
-    }
-    genericRenderWindow.value.setContainer(container.value.$el);
-    const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
-    webGLRenderWindow.setUseBackgroundImage(true);
-    imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
-    Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
-    resize(container.value.$el.offsetWidth, container.value.$el.offsetHeight);
-    useMousePressed({
-      target: container,
-      onPressed: (event) => {
-        if (event.button !== 0) {
-          return;
-        }
-        if (is_picking.value) {
-          performClickPicking(event, {
-            container: container.value.$el,
-            viewerStore,
-            viewer_schemas,
-            genericRenderWindow: genericRenderWindow.value,
-            syncRemoteCamera,
-          });
-          is_picking.value = false;
-          return;
-        }
-        is_moving.value = true;
-        event.stopPropagation();
-        imageStyle.opacity = 0;
-      },
-      onReleased: () => {
-        if (is_moving.value) {
-          is_moving.value = false;
-          syncRemoteCamera();
-        }
-        is_moving.value = false;
-        genericRenderWindow.value.getRenderer().resetCameraClippingRange();
-        syncRemoteCamera();
-      },
+  const throttledHoverHighlight = useThrottleFn(
+    (event) =>
+      performHoverHighlight(event, {
+        is_hover_highlight,
+        genericRenderWindow: genericRenderWindow.value,
+        viewerStore,
+        viewer_schemas,
+        hover_highlight_field_type,
+        hybridDb,
+      }),
+    HOVER_THROTTLE_MS,
+  );
+
+  function clearHoverHighlight() {
+    performClearHoverHighlight({
+      viewerStore,
+      viewer_schemas,
+      hover_highlight_field_type,
+      hybridDb,
     });
-    useEventListener(container, "wheel", () => {
-      is_moving.value = true;
-      if (imageStyle) {
-        imageStyle.opacity = 0;
-      }
-      clearTimeout(wheelEventEndTimeout);
-      wheelEventEndTimeout = setTimeout(() => {
-        is_moving.value = false;
-        genericRenderWindow.value.getRenderer().resetCameraClippingRange();
-        syncRemoteCamera();
-      }, WHEEL_TIME_OUT_MS);
+  }
+
+  function setContainer(container) {
+    performSetContainer({
+      container,
+      genericRenderWindow: genericRenderWindow.value,
+      imageStyleSetter: (style) => (imageStyle = style),
+      resize,
+      useMousePressed,
+      useEventListener,
+      is_picking,
+      is_moving,
+      clickPickingCallback: performClickPicking,
+      viewerStore,
+      viewer_schemas,
+      syncRemoteCamera,
+      throttledHoverHighlight,
+      wheelTimeoutMs: WHEEL_TIME_OUT_MS,
+      wheelEventEndTimeout,
+      wheelTimeoutSetter: (timeout) => (wheelEventEndTimeout = timeout),
     });
   }
 
@@ -317,6 +294,9 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     setContainer,
     zScale,
     is_picking,
+    is_hover_highlight,
+    hover_highlight_field_type,
+    clearHoverHighlight,
     clear,
     exportStores,
     importStores,

package/app/stores/viewer.js

@@ -145,7 +145,7 @@ export const useViewerStore = defineStore(
       return appStore.request(schema, params, {
         response_function: (response) => {
           console.log(`[VIEWER] Viewer launched on port ${response.port}`);
-          this.default_local_port = response.port;
+          default_local_port.value = response.port;
         },
       });
     }

package/app/utils/colormap.js

@@ -1,11 +1,10 @@
-import scientificPresets from "@ogw_front/assets/scientific_colormaps.json";
+import colormaps from "@ogw_front/assets/colormaps.json";
 
 function getRGBPointsFromPreset(presetName) {
   return (
-    scientificPresets
-      .flatMap((category) => category.Children)
-      .find((preset) => preset.Name === presetName)?.RGBPoints ?? []
+    colormaps.flatMap((category) => category.Children).find((preset) => preset.Name === presetName)
+      ?.RGBPoints ?? []
   );
 }
 
-export { getRGBPointsFromPreset, scientificPresets };
+export { getRGBPointsFromPreset, colormaps };

package/internal/stores/data_style/model/common.js

@@ -3,31 +3,32 @@ import merge from "lodash/merge";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
+// oxlint-disable-next-line max-lines-per-function
 export function useModelCommonStyle() {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
+  const model_component_datastyle_db = database.model_component_datastyle;
+  const model_component_type_datastyle_db = database.model_component_type_datastyle;
 
   async function mutateComponentStyle(id_model, id_component, values) {
-    const table = database.model_component_datastyle;
     const key = [id_model, id_component];
-    const entry = (await table.get(key)) || { id_model, id_component };
+    const entry = (await model_component_datastyle_db.get(key)) || { id_model, id_component };
     merge(entry, values);
-    return table.put(structuredClone(toRaw(entry)));
+    return model_component_datastyle_db.put(structuredClone(toRaw(entry)));
   }
 
   function mutateModelComponentTypeStyle(id_model, type, values) {
-    return database.transaction("rw", database.model_component_type_datastyle, async () => {
-      const table = database.model_component_type_datastyle;
+    return database.transaction("rw", model_component_type_datastyle_db, async () => {
       const key = [id_model, type];
-      const entry = (await table.get(key)) || { id_model, type };
+      const entry = (await model_component_type_datastyle_db.get(key)) || { id_model, type };
       merge(entry, values);
-      return table.put(structuredClone(toRaw(entry)));
+      return model_component_type_datastyle_db.put(structuredClone(toRaw(entry)));
     });
   }
 
   function mutateComponentStyles(id_model, id_components, values) {
-    return database.transaction("rw", database.model_component_datastyle, async () => {
-      const all_styles = await database.model_component_datastyle
+    return database.transaction("rw", model_component_datastyle_db, async () => {
+      const all_styles = await model_component_datastyle_db
         .where("id_model")
         .equals(id_model)
         .toArray();
@@ -43,14 +44,14 @@ export function useModelCommonStyle() {
         return toRaw(style);
       });
 
-      return database.model_component_datastyle.bulkPut(structuredClone(updates));
+      return model_component_datastyle_db.bulkPut(structuredClone(updates));
     });
   }
 
   function bulkMutateComponentStylesPerComponent(id_model, component_updates) {
-    return database.transaction("rw", database.model_component_datastyle, async () => {
+    return database.transaction("rw", model_component_datastyle_db, async () => {
       const component_ids = new Set(component_updates.map((update) => update.id_component));
-      const all_styles = await database.model_component_datastyle
+      const all_styles = await model_component_datastyle_db
         .where("id_model")
         .equals(id_model)
         .and((style) => component_ids.has(style.id_component))
@@ -61,7 +62,7 @@ export function useModelCommonStyle() {
         merge(style, values);
         return toRaw(style);
       });
-      return database.model_component_datastyle.bulkPut(structuredClone(updates));
+      return model_component_datastyle_db.bulkPut(structuredClone(updates));
     });
   }
 

package/internal/stores/data_style/state.js

@@ -4,9 +4,13 @@ import merge from "lodash/merge";
 import { useObservable } from "@vueuse/rxjs";
 
 export function useDataStyleState() {
+  const data_style_db = database.data_style;
+  const model_component_datastyle_db = database.model_component_datastyle;
+  const model_component_type_datastyle_db = database.model_component_type_datastyle;
+
   const styles = useObservable(
     liveQuery(async () => {
-      const allStyles = await database.data_style.toArray();
+      const allStyles = await data_style_db.toArray();
       const accumulator = {};
       for (const style of allStyles) {
         accumulator[style.id] = style;
@@ -35,7 +39,7 @@ export function useDataStyleState() {
 
   const modelComponentTypeStyles = useObservable(
     liveQuery(async () => {
-      const all = await database.model_component_type_datastyle.toArray();
+      const all = await model_component_type_datastyle_db.toArray();
       const accumulator = {};
       for (const style of all) {
         const key = `${style.id_model}_${style.type}`;
@@ -48,7 +52,7 @@ export function useDataStyleState() {
 
   const componentStyles = useObservable(
     liveQuery(async () => {
-      const all = await database.model_component_datastyle.toArray();
+      const all = await model_component_datastyle_db.toArray();
       const accumulator = {};
       for (const style of all) {
         const key = `${style.id_model}_${style.id_component}`;
@@ -66,7 +70,7 @@ export function useDataStyleState() {
   function mutateStyle(id, values) {
     const style = getStyle(id);
     merge(style, values);
-    return database.data_style.put(structuredClone({ id, ...toRaw(style) }));
+    return data_style_db.put(structuredClone({ id, ...toRaw(style) }));
   }
 
   function getComponentStyle(id_model, id_component) {
@@ -81,9 +85,9 @@ export function useDataStyleState() {
 
   function clear() {
     return Promise.all([
-      database.data_style.clear(),
-      database.model_component_datastyle.clear(),
-      database.model_component_type_datastyle.clear(),
+      data_style_db.clear(),
+      model_component_datastyle_db.clear(),
+      model_component_type_datastyle_db.clear(),
     ]);
   }