@geode/opengeodeweb-front 10.6.2 → 10.6.3-rc.1

package/app/stores/hybrid_viewer.js

@@ -1,137 +1,137 @@
 // oxlint-disable-next-line import/no-unassigned-import
-import "@kitware/vtk.js/Rendering/Profiles/Geometry"
-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 "@kitware/vtk.js/Rendering/Profiles/Geometry";
+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 viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+import { Status } from "@ogw_front/utils/status";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-const RGB_MAX = 255
-const BACKGROUND_GREY_VALUE = 180
-const ACTOR_DARK_VALUE = 20
+const RGB_MAX = 255;
+const BACKGROUND_GREY_VALUE = 180;
+const ACTOR_DARK_VALUE = 20;
 const BACKGROUND_COLOR = [
   BACKGROUND_GREY_VALUE / RGB_MAX,
   BACKGROUND_GREY_VALUE / RGB_MAX,
   BACKGROUND_GREY_VALUE / RGB_MAX,
-]
+];
 const ACTOR_COLOR = [
   ACTOR_DARK_VALUE / RGB_MAX,
   ACTOR_DARK_VALUE / RGB_MAX,
   ACTOR_DARK_VALUE / RGB_MAX,
-]
-const WHEEL_TIME_OUT_MS = 600
+];
+const WHEEL_TIME_OUT_MS = 600;
 
 export const useHybridViewerStore = defineStore("hybridViewer", () => {
-  const dataStore = useDataStore()
-  const viewerStore = useViewerStore()
-  const hybridDb = reactive({})
-  const status = ref(Status.NOT_CREATED)
-  const camera_options = reactive({})
-  const genericRenderWindow = reactive({})
-  const is_moving = ref(false)
-  const zScale = ref(1)
-  let viewStream = undefined
-  const gridActor = undefined
+  const dataStore = useDataStore();
+  const viewerStore = useViewerStore();
+  const hybridDb = reactive({});
+  const status = ref(Status.NOT_CREATED);
+  const camera_options = reactive({});
+  const genericRenderWindow = reactive({});
+  const is_moving = ref(false);
+  const zScale = ref(1);
+  let viewStream = undefined;
+  const gridActor = undefined;
 
   async function initHybridViewer() {
     if (status.value !== Status.NOT_CREATED) {
-      return
+      return;
     }
-    status.value = Status.CREATING
+    status.value = Status.CREATING;
     genericRenderWindow.value = vtkGenericRenderWindow({
       background: BACKGROUND_COLOR,
       listenWindowResize: false,
-    })
+    });
 
-    const webGLRenderWindow =
-      genericRenderWindow.value.getApiSpecificRenderWindow()
-    const imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style
-    imageStyle.transition = "opacity 0.1s ease-in"
-    imageStyle.zIndex = 1
+    const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
+    const imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
+    imageStyle.transition = "opacity 0.1s ease-in";
+    imageStyle.zIndex = 1;
 
-    await viewerStore.ws_connect()
-    viewStream = viewerStore.client.getImageStream().createViewStream("-1")
+    await viewerStore.ws_connect();
+    viewStream = viewerStore.client.getImageStream().createViewStream("-1");
     viewStream.onImageReady((event) => {
       if (is_moving.value) {
-        return
+        return;
       }
-      webGLRenderWindow.setBackgroundImage(event.image)
-      imageStyle.opacity = 1
-    })
+      webGLRenderWindow.setBackgroundImage(event.image);
+      imageStyle.opacity = 1;
+    });
 
-    status.value = Status.CREATED
+    status.value = Status.CREATED;
   }
 
   async function addItem(id) {
     if (!genericRenderWindow.value) {
-      return
+      return;
     }
-    const value = await dataStore.item(id)
-    console.log("hybridViewerStore.addItem", { value })
-    const reader = vtkXMLPolyDataReader()
-    const textEncoder = new TextEncoder()
-    await reader.parseAsArrayBuffer(
-      textEncoder.encode(value.binary_light_viewable),
-    )
-    const polydata = reader.getOutputData(0)
-    const mapper = vtkMapper()
-    mapper.setInputData(polydata)
-    const actor = vtkActor()
-    actor.getProperty().setColor(ACTOR_COLOR)
-    actor.setMapper(mapper)
-    const renderer = genericRenderWindow.value.getRenderer()
-    const renderWindow = genericRenderWindow.value.getRenderWindow()
-    renderer.addActor(actor)
-    renderer.resetCamera()
-    renderWindow.render()
-    hybridDb[id] = { actor, polydata, mapper }
+    const value = await dataStore.item(id);
+    console.log("hybridViewerStore.addItem", { value });
+    const reader = vtkXMLPolyDataReader();
+    const textEncoder = new TextEncoder();
+    await reader.parseAsArrayBuffer(textEncoder.encode(value.binary_light_viewable));
+    const polydata = reader.getOutputData(0);
+    const mapper = vtkMapper();
+    mapper.setInputData(polydata);
+    const actor = vtkActor();
+    actor.getProperty().setColor(ACTOR_COLOR);
+    actor.setMapper(mapper);
+    const renderer = genericRenderWindow.value.getRenderer();
+    const renderWindow = genericRenderWindow.value.getRenderWindow();
+    renderer.addActor(actor);
+    renderer.resetCamera();
+    renderWindow.render();
+    hybridDb[id] = { actor, polydata, mapper };
   }
 
-  async function removeItem(id) {
+  function removeItem(id) {
     if (!hybridDb[id]) {
-      return
+      return;
     }
-    const renderer = genericRenderWindow.value.getRenderer()
-    renderer.removeActor(hybridDb[id].actor)
-    genericRenderWindow.value.getRenderWindow().render()
-    delete hybridDb[id]
+    const renderer = genericRenderWindow.value.getRenderer();
+    renderer.removeActor(hybridDb[id].actor);
+    genericRenderWindow.value.getRenderWindow().render();
+    delete hybridDb[id];
   }
 
-  async function setVisibility(id, visibility) {
-    hybridDb[id].actor.setVisibility(visibility)
-    const renderWindow = genericRenderWindow.value.getRenderWindow()
-    renderWindow.render()
+  function setVisibility(id, visibility) {
+    if (!hybridDb[id]) {
+      return;
+    }
+    hybridDb[id].actor.setVisibility(visibility);
+    const renderWindow = genericRenderWindow.value.getRenderWindow();
+    renderWindow.render();
   }
   async function setZScaling(z_scale) {
-    zScale.value = z_scale
-    const renderer = genericRenderWindow.value.getRenderer()
-    const actors = renderer.getActors()
+    zScale.value = z_scale;
+    const renderer = genericRenderWindow.value.getRenderer();
+    const actors = renderer.getActors();
     for (const actor of actors) {
       if (actor !== gridActor) {
-        const scale = actor.getScale()
-        actor.setScale(scale[0], scale[1], z_scale)
+        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
+    renderer.resetCamera();
+    genericRenderWindow.value.getRenderWindow().render();
+    const schema = viewer_schemas?.opengeodeweb_viewer?.viewer?.set_z_scaling;
     if (!schema) {
-      return
+      return;
     }
     await viewerStore.request(schema, {
       z_scale,
-    })
-    remoteRender()
+    });
+    remoteRender();
   }
 
   function syncRemoteCamera() {
-    console.log("syncRemoteCamera")
-    const renderer = genericRenderWindow.value.getRenderer()
-    const camera = renderer.getActiveCamera()
+    console.log("syncRemoteCamera");
+    const renderer = genericRenderWindow.value.getRenderer();
+    const camera = renderer.getActiveCamera();
     const params = {
       camera_options: {
         focal_point: [...camera.getFocalPoint()],
@@ -141,93 +141,84 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
         clipping_range: [...camera.getClippingRange()],
         distance: camera.getDistance(),
       },
-    }
-    viewerStore.request(
-      viewer_schemas.opengeodeweb_viewer.viewer.update_camera,
-      params,
-      {
-        response_function: () => {
-          remoteRender()
-          for (const key in params.camera_options) {
-            if (Object.hasOwn(params.camera_options, key)) {
-              camera_options[key] = params.camera_options[key]
-            }
+    };
+    viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, params, {
+      response_function: () => {
+        remoteRender();
+        for (const key in params.camera_options) {
+          if (Object.hasOwn(params.camera_options, key)) {
+            camera_options[key] = params.camera_options[key];
           }
-        },
+        }
       },
-    )
+    });
   }
 
   function remoteRender() {
-    return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.render)
+    return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.render);
   }
 
   function setContainer(container) {
-    genericRenderWindow.value.setContainer(container.value.$el)
-    const webGLRenderWindow =
-      genericRenderWindow.value.getApiSpecificRenderWindow()
-    webGLRenderWindow.setUseBackgroundImage(true)
-    const imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style
-    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)
+    genericRenderWindow.value.setContainer(container.value.$el);
+    const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
+    webGLRenderWindow.setUseBackgroundImage(true);
+    const imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
+    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")
+        console.log("onPressed");
         if (event.button === 0) {
-          is_moving.value = true
-          event.stopPropagation()
-          imageStyle.opacity = 0
+          is_moving.value = true;
+          event.stopPropagation();
+          imageStyle.opacity = 0;
         }
       },
       onReleased: () => {
         if (!is_moving.value) {
-          return
+          return;
         }
-        is_moving.value = false
-        console.log("onReleased")
-        syncRemoteCamera()
+        is_moving.value = false;
+        console.log("onReleased");
+        syncRemoteCamera();
       },
-    })
+    });
 
-    let wheelEventEndTimeout = undefined
+    let wheelEventEndTimeout = undefined;
     useEventListener(container, "wheel", () => {
-      is_moving.value = true
-      imageStyle.opacity = 0
-      clearTimeout(wheelEventEndTimeout)
+      is_moving.value = true;
+      imageStyle.opacity = 0;
+      clearTimeout(wheelEventEndTimeout);
       wheelEventEndTimeout = setTimeout(() => {
-        is_moving.value = false
-        syncRemoteCamera()
-      }, WHEEL_TIME_OUT_MS)
-    })
+        is_moving.value = false;
+        syncRemoteCamera();
+      }, WHEEL_TIME_OUT_MS);
+    });
   }
 
   async function resize(width, height) {
-    if (
-      viewerStore.status !== Status.CONNECTED ||
-      status.value !== Status.CREATED
-    ) {
-      return
+    if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) {
+      return;
     }
-    const webGLRenderWindow =
-      genericRenderWindow.value.getApiSpecificRenderWindow()
-    const canvas = webGLRenderWindow.getCanvas()
-    canvas.width = width
-    canvas.height = height
-    await nextTick()
-    webGLRenderWindow.setSize(width, height)
-    viewStream.setSize(width, height)
-    const renderWindow = genericRenderWindow.value.getRenderWindow()
-    renderWindow.render()
-    remoteRender()
+    const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
+    const canvas = webGLRenderWindow.getCanvas();
+    canvas.width = width;
+    canvas.height = height;
+    await nextTick();
+    webGLRenderWindow.setSize(width, height);
+    viewStream.setSize(width, height);
+    const renderWindow = genericRenderWindow.value.getRenderWindow();
+    renderWindow.render();
+    remoteRender();
   }
 
   function exportStores() {
-    const renderer = genericRenderWindow.value.getRenderer()
-    const camera = renderer.getActiveCamera()
+    const renderer = genericRenderWindow.value.getRenderer();
+    const camera = renderer.getActiveCamera();
     const cameraSnapshot = camera
       ? {
           focal_point: [...camera.getFocalPoint()],
@@ -237,33 +228,33 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
           clipping_range: [...camera.getClippingRange()],
           distance: camera.getDistance(),
         }
-      : camera_options
-    return { zScale: zScale.value, camera_options: cameraSnapshot }
+      : camera_options;
+    return { zScale: zScale.value, camera_options: cameraSnapshot };
   }
 
   async function importStores(snapshot) {
     if (!snapshot) {
-      console.warn("importStores called with undefined snapshot")
-      return
+      console.warn("importStores called with undefined snapshot");
+      return;
     }
-    const z_scale = snapshot.zScale
+    const z_scale = snapshot.zScale;
 
     function applyCamera() {
-      const { camera_options: snapshot_camera_options } = snapshot
+      const { camera_options: snapshot_camera_options } = snapshot;
       if (!snapshot_camera_options) {
-        return
+        return;
       }
 
-      const renderer = genericRenderWindow.value.getRenderer()
-      const camera = renderer.getActiveCamera()
+      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)
+      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);
 
-      genericRenderWindow.value.getRenderWindow().render()
+      genericRenderWindow.value.getRenderWindow().render();
 
       const payload = {
         camera_options: {
@@ -273,35 +264,31 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
           view_angle: snapshot_camera_options.view_angle,
           clipping_range: [...snapshot_camera_options.clipping_range],
         },
-      }
-      return viewerStore.request(
-        viewer_schemas.opengeodeweb_viewer.viewer.update_camera,
-        payload,
-        {
-          response_function: () => {
-            remoteRender()
-            Object.assign(camera_options, payload.camera_options)
-          },
+      };
+      return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, payload, {
+        response_function: () => {
+          remoteRender();
+          Object.assign(camera_options, payload.camera_options);
         },
-      )
+      });
     }
 
     if (typeof z_scale === "number") {
-      await setZScaling(z_scale)
-      return await applyCamera()
+      await setZScaling(z_scale);
+      return await applyCamera();
     }
-    return await applyCamera()
+    return await applyCamera();
   }
 
   function clear() {
-    const renderer = genericRenderWindow.value.getRenderer()
-    const actors = renderer.getActors()
+    const renderer = genericRenderWindow.value.getRenderer();
+    const actors = renderer.getActors();
     for (const actor of actors) {
-      renderer.removeActor(actor)
+      renderer.removeActor(actor);
     }
-    genericRenderWindow.value.getRenderWindow().render()
+    genericRenderWindow.value.getRenderWindow().render();
     for (const id of Object.keys(hybridDb)) {
-      delete hybridDb[id]
+      delete hybridDb[id];
     }
   }
 
@@ -321,5 +308,5 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     clear,
     exportStores,
     importStores,
-  }
-})
+  };
+});

package/app/stores/infra.js

@@ -1,8 +1,8 @@
-import { Status } from "@ogw_front/utils/status"
-import { appMode } from "@ogw_front/utils/local/app_mode"
-import { registerRunningExtensions } from "@ogw_front/utils/extension"
-import { useAppStore } from "@ogw_front/stores/app"
-import { useLambdaStore } from "@ogw_front/stores/lambda"
+import { Status } from "@ogw_front/utils/status";
+import { appMode } from "@ogw_front/utils/local/app_mode";
+import { registerRunningExtensions } from "@ogw_front/utils/extension";
+import { useAppStore } from "@ogw_front/stores/app";
+import { useLambdaStore } from "@ogw_front/stores/lambda";
 
 export const useInfraStore = defineStore("infra", {
   state: () => ({
@@ -15,96 +15,86 @@ export const useInfraStore = defineStore("infra", {
   getters: {
     domain_name() {
       if (this.app_mode === appMode.CLOUD) {
-        return useRuntimeConfig().public.API_URL
+        return useRuntimeConfig().public.API_URL;
       }
-      return "localhost"
+      return "localhost";
     },
     microservices_connected() {
-      console.log("microservices", this.microservices)
-      return this.microservices.every(
-        (store) => store.status === Status.CONNECTED,
-      )
+      console.log("microservices", this.microservices);
+      return this.microservices.every((store) => store.status === Status.CONNECTED);
     },
     microservices_busy() {
-      return this.microservices.some((store) => store.is_busy === true)
+      return this.microservices.some((store) => store.is_busy === true);
     },
   },
   actions: {
     register_microservice(store) {
-      const store_name = store.$id
-      console.log("[INFRA] Registering microservice:", store_name)
+      const store_name = store.$id;
+      console.log("[INFRA] Registering microservice:", store_name);
 
-      if (
-        !this.microservices.find(
-          (microservice) => microservice.$id === store_name,
-        )
-      ) {
-        this.microservices.push(store)
-        console.log("[INFRA] Microservice registered:", store_name)
+      if (!this.microservices.some((microservice) => microservice.$id === store_name)) {
+        this.microservices.push(store);
+        console.log("[INFRA] Microservice registered:", store_name);
       }
     },
-    async create_backend() {
-      console.log("[INFRA] Starting create_backend - Mode:", this.app_mode)
+    create_backend() {
+      console.log("[INFRA] Starting create_backend - Mode:", this.app_mode);
       console.log(
         "[INFRA] Registered microservices:",
         this.microservices.map((store) => store.$id),
-      )
+      );
       if (this.status === Status.CREATED) {
-        return
+        return;
       }
       return navigator.locks.request("infra.create_backend", async () => {
-        this.status = Status.CREATING
+        this.status = Status.CREATING;
         if (this.status === Status.CREATED) {
-          return
+          return;
         }
-        console.log("[INFRA] Lock granted for create_backend")
+        console.log("[INFRA] Lock granted for create_backend");
         if (this.app_mode === appMode.CLOUD) {
-          console.log("[INFRA] CLOUD mode - Launching lambda...")
-          const lambdaStore = useLambdaStore()
-          this.ID = await lambdaStore.launch()
-          console.log("[INFRA] Lambda launched successfully")
+          console.log("[INFRA] CLOUD mode - Launching lambda...");
+          const lambdaStore = useLambdaStore();
+          this.ID = await lambdaStore.launch();
+          console.log("[INFRA] Lambda launched successfully");
         } else {
-          console.log(
-            `[INFRA] ${this.app_mode} mode - Launching microservices...`,
-          )
-          const appStore = useAppStore()
-          await appStore.createProjectFolder()
+          console.log(`[INFRA] ${this.app_mode} mode - Launching microservices...`);
+          const appStore = useAppStore();
+          await appStore.createProjectFolder();
           if (this.app_mode === appMode.DESKTOP) {
             globalThis.electronAPI.project_folder_path({
               projectFolderPath: appStore.projectFolderPath,
-            })
+            });
           }
-          const microservices_with_launch = this.microservices.filter(
-            (store) => store.launch,
-          )
+          const microservices_with_launch = this.microservices.filter((store) => store.launch);
           const launch_promises = microservices_with_launch.map((store) =>
             store.launch({ projectFolderPath: appStore.projectFolderPath }),
-          )
-          launch_promises.push(registerRunningExtensions())
-          await Promise.all(launch_promises)
+          );
+          launch_promises.push(registerRunningExtensions());
+          await Promise.all(launch_promises);
         }
-        this.status = Status.CREATED
-        console.log("[INFRA] Backend created successfully")
-        return this.create_connection()
-      })
+        this.status = Status.CREATED;
+        console.log("[INFRA] Backend created successfully");
+        return this.create_connection();
+      });
     },
     async create_connection() {
-      console.log("[INFRA] Starting create_connection")
+      console.log("[INFRA] Starting create_connection");
       console.log(
         "[INFRA] Connecting microservices:",
         this.microservices.map((store) => store.$id),
-      )
+      );
 
       await Promise.all(
         this.microservices.map(async (store) => {
-          await store.connect()
-          console.log("[INFRA] Microservice connected:", store.$id)
+          await store.connect();
+          console.log("[INFRA] Microservice connected:", store.$id);
         }),
-      )
-      console.log("[INFRA] All microservices connected")
+      );
+      console.log("[INFRA] All microservices connected");
     },
   },
   share: {
     omit: ["microservices"],
   },
-})
+});