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

package/app/components/Viewer/Ui.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import OverlappingObjectsPicker from "@ogw_front/components/Viewer/OverlappingObjectsPicker.vue";
+import ToolActiveChip from "@ogw_front/components/Viewer/ToolActiveChip.vue";
 import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu/ContextMenu.vue";
 import ViewerObjectTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layout.vue";
 import { getCurrentInstance } from "vue";
@@ -23,6 +24,11 @@ const menuStore = useMenuStore();
 const viewerStore = useViewerStore();
 const hybridViewerStore = useHybridViewerStore();
 
+const hoverHighlightLabel = computed(
+  () =>
+    `Highlight active (${hybridViewerStore.hover_highlight_field_type === "CELL" ? "Cells" : "Points"})`,
+);
+
 function stopHoverHighlight(): void {
   hybridViewerStore.is_hover_highlight = false;
   hybridViewerStore.clearHoverHighlight();
@@ -36,6 +42,9 @@ onKeyStroke("Escape", (event) => {
   } else if (hybridViewerStore.is_picking) {
     hybridViewerStore.is_picking = false;
     consumed = true;
+  } else if (hybridViewerStore.is_zoom_box_active) {
+    hybridViewerStore.is_zoom_box_active = false;
+    consumed = true;
   } else if (hybridViewerStore.is_ruler_active) {
     hybridViewerStore.deactivateRuler();
     consumed = true;
@@ -101,101 +110,40 @@ defineExpose({ get_viewer_id });
     @update:display-intermediate="handleIntermediateMenuUpdate"
   />
 
-  <v-fade-transition>
-    <div
+  <v-fade-transition group>
+    <ToolActiveChip
       v-if="viewerStore.picking_mode"
-      class="picking-message-container d-flex justify-center w-100 pa-4"
-    >
-      <v-chip
-        color="secondary"
-        elevation="8"
-        size="large"
-        variant="flat"
-        prepend-icon="mdi-crosshairs-gps"
-        class="pick-pulse"
-        data-testid="pickingActiveChip"
-        style="pointer-events: auto"
-        @click="viewerStore.toggle_picking_mode(false)"
-      >
-        Picking active — click in the viewer &middot; Esc to stop
-        <v-divider vertical class="mx-2 my-1" opacity="0.3" />
-        <v-icon icon="mdi-close" size="small" />
-      </v-chip>
-    </div>
-  </v-fade-transition>
-
-  <v-fade-transition>
-    <div
+      key="picking"
+      data-testid="pickingActiveChip"
+      label="Picking active — click in the viewer"
+      color="secondary"
+      icon="mdi-crosshairs-gps"
+      @close="viewerStore.toggle_picking_mode(false)"
+    />
+    <ToolActiveChip
       v-if="hybridViewerStore.is_hover_highlight"
-      class="picking-message-container d-flex justify-center w-100 pa-4"
-    >
-      <v-chip
-        data-testid="hoverHighlightChip"
-        color="primary"
-        elevation="8"
-        size="large"
-        variant="flat"
-        class="pick-pulse"
-        style="pointer-events: auto"
-        @click="stopHoverHighlight"
-      >
-        Highlight active ({{
-          hybridViewerStore.hover_highlight_field_type === "CELL" ? "Cells" : "Points"
-        }}) &middot; Esc to stop
-        <v-divider vertical class="mx-2 my-1" opacity="0.3" />
-        <v-icon icon="mdi-close" size="small" />
-      </v-chip>
-    </div>
-  </v-fade-transition>
-
-  <v-fade-transition>
-    <div
+      key="hoverHighlight"
+      data-testid="hoverHighlightChip"
+      :label="hoverHighlightLabel"
+      color="primary"
+      @close="stopHoverHighlight"
+    />
+    <ToolActiveChip
       v-if="hybridViewerStore.is_ruler_active"
-      class="picking-message-container d-flex justify-center w-100 pa-4"
-    >
-      <v-chip
-        data-testid="rulerActiveChip"
-        color="secondary"
-        elevation="8"
-        size="large"
-        variant="flat"
-        class="pick-pulse"
-        style="pointer-events: auto"
-        prepend-icon="mdi-ruler"
-        @click="hybridViewerStore.clearRuler()"
-      >
-        Ruler &mdash; click to set point
-        {{ hybridViewerStore.ruler_awaiting_point }}
-        &middot; Esc to stop
-        <v-divider vertical class="mx-2 my-1" opacity="0.3" />
-        <v-icon icon="mdi-close" size="small" />
-      </v-chip>
-    </div>
+      key="ruler"
+      data-testid="rulerActiveChip"
+      :label="`Ruler — click to set point ${hybridViewerStore.ruler_awaiting_point}`"
+      color="secondary"
+      icon="mdi-ruler"
+      @close="hybridViewerStore.clearRuler()"
+    />
+    <ToolActiveChip
+      v-if="hybridViewerStore.is_zoom_box_active"
+      key="zoomBox"
+      data-testid="zoomBoxActiveChip"
+      label="Zoom to box"
+      color="primary"
+      @close="hybridViewerStore.is_zoom_box_active = false"
+    />
   </v-fade-transition>
 </template>
-
-<style scoped>
-.picking-message-container {
-  position: absolute;
-  top: 20px;
-  left: 0;
-  pointer-events: none;
-  z-index: 3;
-}
-
-@keyframes pulse-ring {
-  0% {
-    box-shadow: 0 0 0 0 rgba(var(--v-theme-secondary), 0.7);
-  }
-  70% {
-    box-shadow: 0 0 0 10px rgba(var(--v-theme-secondary), 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(var(--v-theme-secondary), 0);
-  }
-}
-
-.pick-pulse {
-  animation: pulse-ring 1.5s ease-out infinite;
-}
-</style>

package/app/components/ZoomBoxOverlay.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { type ZoomBox, viewportShapedBox } from "@ogw_internal/stores/hybrid_viewer/zoom_box";
+import type { Position } from "@vueuse/core";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const MIN_ZOOM_BOX_PIXELS = 5;
+
+const hybridViewerStore = useHybridViewerStore();
+const overlay = useTemplateRef<HTMLDivElement>("overlay");
+const { left, top, width, height } = useElementBounding(overlay);
+const viewport = computed(() => ({ width: width.value, height: height.value }));
+
+function draggedBox(start: Position, end: Position): ZoomBox {
+  return viewportShapedBox(
+    { x: start.x - left.value, y: start.y - top.value },
+    { x: end.x - left.value, y: end.y - top.value },
+    viewport.value,
+  );
+}
+
+const { isSwiping, posStart, posEnd } = usePointerSwipe(overlay, {
+  threshold: MIN_ZOOM_BOX_PIXELS,
+  disableTextSelect: true,
+  onSwipeEnd: async () => {
+    try {
+      await hybridViewerStore.zoomToBox(draggedBox(posStart, posEnd), viewport.value);
+    } catch {
+      // The viewer store already reported the failed pick request to the user.
+    }
+  },
+});
+
+const rectangle_style = computed(() => {
+  const { start, end } = draggedBox(posStart, posEnd);
+  return {
+    left: `${Math.min(start.x, end.x)}px`,
+    top: `${Math.min(start.y, end.y)}px`,
+    width: `${Math.abs(end.x - start.x)}px`,
+    height: `${Math.abs(end.y - start.y)}px`,
+  };
+});
+</script>
+
+<template>
+  <div ref="overlay" data-testid="zoomBoxOverlay" class="zoom-box-overlay" @contextmenu.prevent>
+    <div v-if="isSwiping" class="zoom-box-rectangle" :style="rectangle_style" />
+  </div>
+</template>
+
+<style scoped>
+.zoom-box-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  cursor: crosshair;
+}
+
+.zoom-box-rectangle {
+  position: absolute;
+  border: 2px dashed rgb(var(--v-theme-primary));
+  background-color: rgba(var(--v-theme-primary), 0.15);
+  pointer-events: none;
+}
+</style>

package/app/stores/back.ts

@@ -29,12 +29,16 @@ export const useBackStore = defineStore("back", {
       return getRestApiPort(this.default_local_port);
     },
     base_url(): string {
-      const infraStore = useInfraStore();
-      let back_url = `${this.protocol}://${infraStore.domain_name}:${this.port}`;
-      if (isCloudMode()) {
-        back_url += `/geode`;
-      }
-      return back_url;
+      return this.base_url_for(useInfraStore().domain_name);
+    },
+    base_url_for(): (domain_name: string) => string {
+      return (domain_name: string) => {
+        let back_url = `${this.protocol}://${domain_name}:${this.port}`;
+        if (isCloudMode()) {
+          back_url += `/geode`;
+        }
+        return back_url;
+      };
     },
     is_busy(): boolean {
       return this.request_counter > 0;

package/app/stores/cloud.ts

@@ -1,6 +1,10 @@
+import { clearCloudUrlParam, getCloudUrlParam } from "@ogw_front/utils/cloud";
 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_schemas.json";
 import { setAppBaseUrl } from "@ogw_shared/scripts";
 import { useAPIStore } from "@ogw_front/stores/api";
+import { useFeedbackStore } from "@ogw_front/stores/feedback";
 
 const run_cloud_schema = {
   $id: "/cloud/run",
@@ -20,13 +24,24 @@ export const useCloudStore = defineStore("cloud", {
     status: Status.NOT_CONNECTED,
   }),
   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) {
+      const existing_host = getCloudUrlParam();
+      if (existing_host === undefined) {
+        await this.launch(email);
+        return;
+      }
+      try {
+        await this.connect_existing(existing_host);
+      } finally {
+        clearCloudUrlParam();
+      }
+    },
     async launch(email: string) {
       this.status = Status.CONNECTING;
       const { PROJECT, BRANCH } = useRuntimeConfig().public;
       const params = { email, project: PROJECT, branch: BRANCH };
-      const { useAppStore } = await import("./app");
-      const { useFeedbackStore } = await import("./feedback");
-      const appStore = useAppStore();
       const feedbackStore = useFeedbackStore();
       const APIStore = useAPIStore();
       const result = await APIStore.request(
@@ -45,18 +60,7 @@ export const useCloudStore = defineStore("cloud", {
             ) {
               return;
             }
-            const { url } = response;
-            feedbackStore.$patch({ server_error: false });
-            this.status = Status.CONNECTED;
-            const { useInfraStore } = await import("./infra");
-            const infraStore = useInfraStore();
-            infraStore.$patch({
-              domain_name: url,
-            });
-            setAppBaseUrl(appStore.base_url).catch(() => undefined);
-            appStore.$patch({
-              projectFolderPath: "/project",
-            });
+            await this.on_connected(response.url);
           },
           response_error_function: () => {
             feedbackStore.$patch({ server_error: true });
@@ -66,6 +70,46 @@ export const useCloudStore = defineStore("cloud", {
       );
       return result;
     },
+    async connect_existing(host: string) {
+      this.status = Status.CONNECTING;
+      const { useBackStore } = await import("./back");
+      const backStore = useBackStore();
+      // Probe the candidate host directly so domain_name is only updated once the service answers.
+      try {
+        await api_fetch(
+          {
+            $id: backStore.$id,
+            base_url: backStore.base_url_for(host),
+            start_request: () => {
+              backStore.start_request();
+            },
+            stop_request: () => {
+              backStore.stop_request();
+            },
+          },
+          { schema: back_schemas.opengeodeweb_back.ping },
+        );
+      } catch (error) {
+        useFeedbackStore().$patch({ server_error: true });
+        this.status = Status.NOT_CONNECTED;
+        throw error;
+      }
+      await this.on_connected(host);
+    },
+    async on_connected(url: string) {
+      const { useAppStore } = await import("./app");
+      const { useInfraStore } = await import("./infra");
+      const appStore = useAppStore();
+      useFeedbackStore().$patch({ server_error: false });
+      this.status = Status.CONNECTED;
+      useInfraStore().$patch({
+        domain_name: url,
+      });
+      appStore.$patch({
+        projectFolderPath: "/project",
+      });
+      await setAppBaseUrl(appStore.base_url);
+    },
     connect() {
       this.status = Status.CONNECTED;
     },

package/app/stores/hybrid_viewer.ts

@@ -15,6 +15,7 @@ import { useHybridViewerFilters } from "@ogw_internal/stores/hybrid_viewer/filte
 import { useHybridViewerHighlight } from "@ogw_internal/stores/hybrid_viewer/highlight";
 import { useHybridViewerRuler } from "@ogw_internal/stores/hybrid_viewer/ruler";
 import { useHybridViewerScene } from "@ogw_internal/stores/hybrid_viewer/scene";
+import { useHybridViewerZoomBox } from "@ogw_internal/stores/hybrid_viewer/zoom_box";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
 
 import { Status } from "@ogw_front/utils/status";
@@ -34,6 +35,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   const rulerStore = useHybridViewerRuler();
   const cameraStore = useHybridViewerCamera();
   const viewportStore = useHybridViewerViewport();
+  const zoomBoxStore = useHybridViewerZoomBox();
 
   const is_cursor_crosshair = computed(() => is_picking.value || rulerStore.is_ruler_active.value);
 
@@ -132,5 +134,6 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     ...highlightStore,
     ...rulerStore,
     ...cameraStore,
+    ...zoomBoxStore,
   };
 });

package/app/stores/infra.ts

@@ -55,7 +55,13 @@ export const useInfraStore = defineStore("infra", {
         this.status = Status.CREATING;
         if (this.app_mode === appMode.CLOUD) {
           const cloudStore = useCloudStore();
-          await cloudStore.launch(email ?? "");
+          try {
+            await cloudStore.start(email ?? "");
+          } catch (error) {
+            // Back to the "Load the app" button so the user is not stuck on the loading screen.
+            this.status = Status.NOT_CREATED;
+            throw error;
+          }
         } else {
           const { useAppStore } = await import("@ogw_front/stores/app");
           const appStore = useAppStore();

package/app/stores/viewer.ts

@@ -1,6 +1,7 @@
 // Third party imports
 // oxlint-disable-next-line no-unassigned-import
 import "@kitware/vtk.js/Rendering/OpenGL/Profiles/Geometry";
+import type { Vector3 } from "@kitware/vtk.js/types";
 import { connectImageStream } from "@kitware/vtk.js/Rendering/Misc/RemoteView";
 import { initWebSocketClient } from "@ogw_internal/utils/ws_client";
 import opengeodeweb_front_schemas from "@geode/opengeodeweb-front/opengeodeweb_front_schemas.json" with { type: "json" };
@@ -106,27 +107,16 @@ export const useViewerStore = defineStore(
       );
       return result;
     }
-    async function set_picked_point(x: number, y: number): Promise<void> {
+    async function pick_world_position(x: number, y: number): Promise<Vector3> {
       const schema = opengeodeweb_viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
-      const params = {
-        x: Math.round(x),
-        y: Math.round(y),
-      };
-      const response = await request({
-        schema,
-        params,
-      });
-      const {
-        x: world_x,
-        y: world_y,
-        z: world_z,
-        // oxlint-disable-next-line no-unsafe-type-assertion -- response shape is defined by the get_point_position schema.
-      } = response as { x: number; y: number; z: number };
-      picked_point.value = {
-        x: world_x,
-        y: world_y,
-        z: world_z,
-      };
+      const response = await request({ schema, params: { x: Math.round(x), y: Math.round(y) } });
+      // oxlint-disable-next-line no-unsafe-type-assertion -- response shape is defined by the get_point_position schema.
+      const position = response as { x: number; y: number; z: number };
+      return [position.x, position.y, position.z];
+    }
+    async function set_picked_point(x: number, y: number): Promise<void> {
+      const [world_x, world_y, world_z] = await pick_world_position(x, y);
+      picked_point.value = { x: world_x, y: world_y, z: world_z };
     }
     async function ws_connect(): Promise<void> {
       if (status.value === Status.CONNECTED) {
@@ -219,6 +209,7 @@ export const useViewerStore = defineStore(
       is_busy,
       toggle_picking_mode,
       set_picked_point,
+      pick_world_position,
       ws_connect,
       start_request,
       stop_request,

package/app/utils/attributes.ts

@@ -10,7 +10,7 @@ interface AttributeRange {
   max: number;
 }
 
-export function getAttributeRange(
+function getAttributeRange(
   currentAttribute: AttributeRangeSource | undefined | null,
   compIndex = 0,
 ): AttributeRange {
@@ -38,3 +38,28 @@ export function getAttributeRange(
 
   return { min, max };
 }
+
+const MESH_ELEMENT_KINDS: Record<string, string> = {
+  EdgedCurve2D: "edge",
+  EdgedCurve3D: "edge",
+  LightRegularGrid2D: "cell",
+  LightRegularGrid3D: "cell",
+  RegularGrid2D: "cell",
+  RegularGrid3D: "cell",
+  PolygonalSurface2D: "polygon",
+  PolygonalSurface3D: "polygon",
+  TriangulatedSurface2D: "polygon",
+  TriangulatedSurface3D: "polygon",
+  HybridSolid3D: "polyhedron",
+  PolyhedralSolid3D: "polyhedron",
+  TetrahedralSolid3D: "polyhedron",
+};
+
+const MODEL_COMPONENT_KINDS: Record<string, string[]> = {
+  Corner: ["vertex"],
+  Line: ["vertex", "edge"],
+  Surface: ["vertex", "polygon"],
+  Block: ["vertex", "polyhedron"],
+};
+
+export { MESH_ELEMENT_KINDS, MODEL_COMPONENT_KINDS, getAttributeRange };

package/app/utils/cloud.ts

@@ -0,0 +1,35 @@
+const CLOUD_URL_PARAM = "cloud_url";
+const CLOUD_RUN_HOST_SUFFIX = ".run.app";
+
+// Hostname of an already running Cloud Run service passed as `?cloud_url=`, restricted to Cloud Run hosts so a crafted link cannot point the app at an arbitrary server.
+function getCloudUrlParam(): string | undefined {
+  const value = new URLSearchParams(globalThis.location.search).get(CLOUD_URL_PARAM);
+  if (value === null || value === "") {
+    return undefined;
+  }
+  const url_string = value.includes("://") ? value : `https://${value}`;
+  let hostname = "";
+  try {
+    ({ hostname } = new URL(url_string));
+  } catch {
+    console.warn(`[Cloud] Invalid ${CLOUD_URL_PARAM}:`, value);
+    return undefined;
+  }
+  if (!hostname.endsWith(CLOUD_RUN_HOST_SUFFIX)) {
+    console.warn(`[Cloud] Ignoring ${CLOUD_URL_PARAM}, not a Cloud Run host:`, hostname);
+    return undefined;
+  }
+  return hostname;
+}
+
+// Drops `?cloud_url=` from the address bar, keeping the router's history state, so a later "Load the app" launches a new service.
+function clearCloudUrlParam(): void {
+  const url = new URL(globalThis.location.href);
+  if (!url.searchParams.has(CLOUD_URL_PARAM)) {
+    return;
+  }
+  url.searchParams.delete(CLOUD_URL_PARAM);
+  globalThis.history.replaceState(globalThis.history.state, "", url);
+}
+
+export { clearCloudUrlParam, getCloudUrlParam };

package/internal/stores/hybrid_viewer/camera.ts

@@ -182,11 +182,13 @@ const useHybridViewerCamera = createSharedComposable(() => {
       bumpMultiplier: 0,
       easeExponent: EASE_EXPONENT,
       onUpdate: () => {
+        renderer.resetCameraClippingRange();
         const renderWindow = requireRenderWindow(genericRenderWindow).getRenderWindow();
         renderWindow.render();
       },
       onEnd: () => {
         applyCameraOptions(camera, targetCameraOptions);
+        renderer.resetCameraClippingRange();
         const renderWindow = requireRenderWindow(genericRenderWindow).getRenderWindow();
         renderWindow.render();
         is_moving.value = false;

package/internal/stores/hybrid_viewer/filters.ts

@@ -30,13 +30,37 @@ async function setShrink(ids: string[], shrink_factor: number): Promise<void> {
   });
   await remoteRender();
 }
+interface ThresholdAttribute {
+  name: string;
+  location: "point" | "cell";
+  item: number;
+  minimum: number;
+  maximum: number;
+}
+async function setThreshold(ids: string[], attribute?: ThresholdAttribute): Promise<void> {
+  const viewerStore = useViewerStore();
+  const { remoteRender } = useHybridViewerCore();
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.threshold;
+  const params = {
+    ids,
+    attribute,
+  };
+  await viewerStore.request({
+    schema,
+    params,
+  });
+  await remoteRender();
+}
 function useHybridViewerFilters(): {
   setClippingPlanes: (ids: string[], planes: unknown) => Promise<void>;
   setShrink: (ids: string[], shrink_factor: number) => Promise<void>;
+  setThreshold: (ids: string[], attribute?: ThresholdAttribute) => Promise<void>;
 } {
   return {
     setClippingPlanes,
     setShrink,
+    setThreshold,
   };
 }
 export { useHybridViewerFilters };
+export type { ThresholdAttribute };

package/internal/stores/hybrid_viewer/ruler.ts

@@ -27,22 +27,24 @@ function useHybridViewerRuler(): {
   const ruler_point2 = ref<number[] | undefined>(undefined);
   const ruler_distance = ref<number | undefined>(undefined);
   const ruler_awaiting_point = ref(1);
-  const ruler_previous_hover_state = ref<RulerHoverState>({ active: false, fieldType: "CELL" });
+  // Hover highlight state overridden by the snap, restored when snapping stops. Without snap the ruler leaves the hover highlight untouched.
+  let hover_state_before_snap: RulerHoverState | undefined = undefined;
 
   function updateRulerSnapHighlight(): void {
     const { is_hover_highlight, hover_highlight_field_type, clearHoverHighlight } =
       useHybridViewerHighlight();
 
     if (is_ruler_active.value && ruler_snap.value) {
-      ruler_previous_hover_state.value = {
+      hover_state_before_snap = {
         active: is_hover_highlight.value,
         fieldType: hover_highlight_field_type.value,
       };
       is_hover_highlight.value = true;
       hover_highlight_field_type.value = "POINT";
-    } else {
-      is_hover_highlight.value = ruler_previous_hover_state.value.active;
-      hover_highlight_field_type.value = ruler_previous_hover_state.value.fieldType;
+    } else if (hover_state_before_snap) {
+      is_hover_highlight.value = hover_state_before_snap.active;
+      hover_highlight_field_type.value = hover_state_before_snap.fieldType;
+      hover_state_before_snap = undefined;
       if (!is_hover_highlight.value) {
         clearHoverHighlight();
       }
@@ -87,15 +89,7 @@ function useHybridViewerRuler(): {
       };
       coords = response.attributes?.coordinates;
     } else {
-      const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
-      const params = { x: Math.round(x), y: Math.round(y) };
-      // oxlint-disable-next-line no-unsafe-type-assertion -- response shape is defined by the get_point_position schema.
-      const response = (await viewerStore.request({ schema, params })) as {
-        x: number;
-        y: number;
-        z: number;
-      };
-      coords = [response.x, response.y, response.z];
+      coords = await viewerStore.pick_world_position(x, y);
     }
     if (!coords) {
       return;