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

package/app/components/Launcher.vue

@@ -3,6 +3,7 @@ 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";
 import { useInfraStore } from "@ogw_front/stores/infra";
 
 interface Props {
@@ -15,8 +16,10 @@ interface Props {
 const { appName, email = undefined, isUserAuthenticated = false, logo = "" } = defineProps<Props>();
 
 const infraStore = useInfraStore();
-if (infraStore.app_mode !== appMode.CLOUD) {
-  infraStore.create_backend();
+// 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);
 }
 
 function cloudCreateBackend(): Promise<void> {

package/app/components/ThresholdFilter.vue

@@ -0,0 +1,291 @@
+<script setup lang="ts">
+import {
+  MESH_ELEMENT_KINDS,
+  MODEL_COMPONENT_KINDS,
+  getAttributeRange,
+} from "@ogw_front/utils/attributes";
+import type { JsonRpcSchema } from "@ogw_shared/utils/types.js";
+import ToolPanel from "@ogw_front/components/ToolPanel.vue";
+import ViewerOptionsAttributeRangeSelector from "@ogw_front/components/Viewer/Options/AttributeRangeSelector.vue";
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
+import { useBackStore } from "@ogw_front/stores/back";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDebounceFn } from "@vueuse/core";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const DEBOUNCE_DELAY = 100;
+
+interface Props {
+  escapeFunction?: () => void;
+}
+
+const { escapeFunction = undefined } = defineProps<Props>();
+
+interface AttributeSource {
+  title: string;
+  schema: JsonRpcSchema;
+  params: Record<string, unknown>;
+  location: "point" | "cell";
+}
+
+interface AttributeInfo {
+  attribute_name: string;
+  nb_items: number;
+  [key: string]: unknown;
+}
+
+const show = defineModel<boolean>("show", { default: false });
+const backStore = useBackStore();
+const dataStore = useDataStore();
+const hybridViewerStore = useHybridViewerStore();
+const selectedDatasetId = ref<string>();
+const sources = ref<AttributeSource[]>([]);
+const selectedSourceIndex = ref<number>();
+const attributes = ref<AttributeInfo[]>([]);
+const attributeName = ref<string>();
+const attributeItem = ref<number>(0);
+const minimum = ref<number>();
+const maximum = ref<number>();
+
+const allItems = dataStore.refAllItems();
+const availableDatasets = computed<{ title: string; value: string }[]>(() =>
+  allItems.value.map((item) => ({
+    title: item.name || item.id,
+    value: item.id,
+  })),
+);
+const availableSources = computed<{ title: string; value: number }[]>(() =>
+  sources.value.map((source, index) => ({ title: source.title, value: index })),
+);
+const currentAttribute = computed<AttributeInfo | undefined>(() =>
+  attributes.value.find((attribute) => attribute.attribute_name === attributeName.value),
+);
+const itemOptions = computed<{ title: string; value: number }[]>(() =>
+  Array.from({ length: currentAttribute.value?.nb_items ?? 0 }, (_, index) => ({
+    title: `Item ${index + 1}`,
+    value: index,
+  })),
+);
+
+function attributeSchema(kind: string, isModel: boolean): JsonRpcSchema {
+  const prefix = isModel ? "model_component_" : "";
+  return back_schemas.opengeodeweb_back[
+    `${prefix}${kind}_attribute_names` as keyof typeof back_schemas.opengeodeweb_back
+  ] as JsonRpcSchema;
+}
+
+function attributeSource(
+  kind: string,
+  title: string,
+  params: Record<string, unknown>,
+  isModel: boolean,
+): AttributeSource {
+  return {
+    title: `${title}${kind} attribute`,
+    schema: attributeSchema(kind, isModel),
+    params,
+    location: kind === "vertex" ? "point" : "cell",
+  };
+}
+
+async function fetchSources(id: string): Promise<AttributeSource[]> {
+  const item = await dataStore.item(id);
+  if (item.viewer_type !== "model") {
+    return ["vertex", MESH_ELEMENT_KINDS[item.geode_object_type]]
+      .filter((kind): kind is string => kind !== undefined)
+      .map((kind) => attributeSource(kind, "", { id }, false));
+  }
+  const modelSources = await Promise.all(
+    Object.entries(MODEL_COMPONENT_KINDS).map(async ([type, kinds]) => {
+      const component_ids = await dataStore.getMeshComponentGeodeIds(id, type);
+      if (component_ids.length === 0) {
+        return [];
+      }
+      return kinds.map((kind) => attributeSource(kind, `${type} `, { id, component_ids }, true));
+    }),
+  );
+  return modelSources.flat();
+}
+
+async function applyThreshold(): Promise<void> {
+  const source = sources.value[selectedSourceIndex.value ?? -1];
+  if (
+    !selectedDatasetId.value ||
+    !source ||
+    !attributeName.value ||
+    minimum.value === undefined ||
+    maximum.value === undefined ||
+    minimum.value > maximum.value
+  ) {
+    return;
+  }
+  await hybridViewerStore.setThreshold([selectedDatasetId.value], {
+    name: attributeName.value,
+    location: source.location,
+    item: attributeItem.value,
+    minimum: minimum.value,
+    maximum: maximum.value,
+  });
+}
+
+const debouncedApply = useDebounceFn(() => applyThreshold(), DEBOUNCE_DELAY);
+
+function resetRange(): void {
+  const { min, max } = getAttributeRange(
+    currentAttribute.value as Parameters<typeof getAttributeRange>[0],
+    attributeItem.value,
+  );
+  minimum.value = min;
+  maximum.value = max;
+}
+
+async function removeThreshold(): Promise<void> {
+  attributeName.value = undefined;
+  if (selectedDatasetId.value) {
+    await hybridViewerStore.setThreshold([selectedDatasetId.value]);
+  }
+}
+
+watch(selectedDatasetId, async (id, previousId) => {
+  if (previousId) {
+    await hybridViewerStore.setThreshold([previousId]);
+  }
+  selectedSourceIndex.value = undefined;
+  sources.value = id ? await fetchSources(id) : [];
+});
+
+watch(selectedSourceIndex, async (index) => {
+  attributeName.value = undefined;
+  attributes.value = [];
+  const source = sources.value[index ?? -1];
+  if (!source) {
+    return;
+  }
+  const response = (await backStore.request({
+    schema: source.schema,
+    params: source.params,
+  })) as { attributes: AttributeInfo[] };
+  attributes.value = response.attributes;
+});
+
+watch(attributeName, () => {
+  attributeItem.value = 0;
+  resetRange();
+});
+
+watch(attributeItem, () => {
+  resetRange();
+});
+
+watch([minimum, maximum], () => {
+  debouncedApply();
+});
+
+watch(show, (visible) => {
+  if (visible) {
+    applyThreshold();
+  }
+});
+</script>
+
+<template>
+  <ToolPanel
+    v-model="show"
+    data-testid="thresholdFilterPanel"
+    title="Threshold Filter"
+    :width="340"
+    :click-outside="false"
+    :escapeFunction="escapeFunction"
+  >
+    <v-card-text class="pa-3 max-panel-height overflow-y-auto overflow-x-hidden">
+      <v-select
+        v-model="selectedDatasetId"
+        data-testid="thresholdDatasetSelect"
+        :items="availableDatasets"
+        label="Select a dataset"
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="mb-3 text-caption"
+      />
+
+      <v-select
+        v-if="selectedDatasetId"
+        v-model="selectedSourceIndex"
+        data-testid="thresholdAttributeTypeSelect"
+        :items="availableSources"
+        label="Select an attribute type"
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="mb-3 text-caption"
+      />
+
+      <v-select
+        v-if="selectedSourceIndex !== undefined"
+        v-model="attributeName"
+        data-testid="thresholdAttributeSelect"
+        :items="attributes.map((attribute) => attribute.attribute_name)"
+        label="Select an attribute"
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="mb-3 text-caption"
+      />
+
+      <v-select
+        v-if="currentAttribute && currentAttribute.nb_items > 1"
+        v-model="attributeItem"
+        data-testid="thresholdItemSelect"
+        :items="itemOptions"
+        label="Select an item"
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="mb-3 text-caption"
+      />
+
+      <template v-if="attributeName">
+        <v-divider class="my-3" />
+        <span class="text-caption font-weight-bold">Range</span>
+        <ViewerOptionsAttributeRangeSelector
+          v-model:minimum="minimum"
+          v-model:maximum="maximum"
+          class="mt-2"
+          @reset="resetRange"
+        />
+      </template>
+    </v-card-text>
+
+    <template #actions>
+      <v-card-actions class="justify-space-between px-3 pb-3 pt-0">
+        <v-btn
+          data-testid="removeThresholdButton"
+          variant="text"
+          size="small"
+          color="error"
+          class="text-caption text-none"
+          @click="removeThreshold"
+        >
+          Remove Threshold
+        </v-btn>
+        <v-btn
+          data-testid="resetThresholdButton"
+          variant="tonal"
+          size="small"
+          color="secondary"
+          class="text-caption text-none"
+          @click="resetRange"
+        >
+          Reset
+        </v-btn>
+      </v-card-actions>
+    </template>
+  </ToolPanel>
+</template>
+
+<style scoped>
+.max-panel-height {
+  max-height: 520px;
+}
+</style>

package/app/components/ViewToolbar.vue

@@ -7,6 +7,7 @@ import ClippingPlanes from "@ogw_front/components/ClippingPlanes.vue";
 import Ruler from "@ogw_front/components/Ruler.vue";
 import Screenshot from "@ogw_front/components/Screenshot.vue";
 import ShrinkFilter from "@ogw_front/components/ShrinkFilter.vue";
+import ThresholdFilter from "@ogw_front/components/ThresholdFilter.vue";
 import ZScaling from "@ogw_front/components/ZScaling.vue";
 import { onKeyStroke } from "@vueuse/core";
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
@@ -23,6 +24,7 @@ const showCameraOrientation = ref<boolean>(false);
 const showZScaling = ref<boolean>(false);
 const showClippingPlanes = ref<boolean>(false);
 const showShrinkFilter = ref<boolean>(false);
+const showThresholdFilter = ref<boolean>(false);
 const showRuler = ref<boolean>(false);
 const gridScale = ref<boolean>(false);
 const zScale = ref<number>(hybridViewerStore.zScale);
@@ -73,6 +75,7 @@ function closeAllToolsExcept(toolRef: Ref<boolean>): void {
     showZScaling,
     showClippingPlanes,
     showShrinkFilter,
+    showThresholdFilter,
     showRuler,
     is_picking,
     is_zoom_box_active,
@@ -231,6 +234,15 @@ const camera_options = computed<CameraOptionAction[]>(() => [
       toggleTool(showShrinkFilter);
     },
   },
+  {
+    testId: "thresholdFilterButton",
+    tooltip: "Threshold Filter",
+    icon: "mdi-filter-variant",
+    color: showThresholdFilter.value ? "primary" : undefined,
+    action: (): void => {
+      toggleTool(showThresholdFilter);
+    },
+  },
   {
     testId: "rulerButton",
     tooltip: "Ruler",
@@ -320,6 +332,10 @@ const camera_options = computed<CameraOptionAction[]>(() => [
     v-model:show="showShrinkFilter"
     :escapeFunction="() => (showShrinkFilter = false)"
   />
+  <ThresholdFilter
+    v-model:show="showThresholdFilter"
+    :escapeFunction="() => (showThresholdFilter = false)"
+  />
   <Ruler v-model:show="showRuler" :escapeFunction="() => (showRuler = false)" />
 </template>
 

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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.35.0-rc.3",
+  "version": "10.35.0-rc.4",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {