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

package/app/components/HybridRenderingView.vue

@@ -2,6 +2,7 @@
 import ColormapQuickPicker from "@ogw_front/components/Viewer/Options/ColormapQuickPicker.vue";
 import HybridViewerTooltip from "@ogw_front/components/HybridViewerTooltip.vue";
 import ViewToolbar from "@ogw_front/components/ViewToolbar.vue";
+import ZoomBoxOverlay from "@ogw_front/components/ZoomBoxOverlay.vue";
 
 import { useDataStore } from "@ogw_front/stores/data";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -102,6 +103,7 @@ async function handleClick(event: PointerEvent): Promise<void> {
         :y="quickColormap.y"
         :data-id="quickColormap.data_id"
       />
+      <ZoomBoxOverlay v-if="hybridViewerStore.is_zoom_box_active" />
       <ViewToolbar />
       <slot name="ui"></slot>
       <HybridViewerTooltip :container-width="elementWidth" :container-height="elementHeight" />

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/RemoteRenderingView.vue

@@ -9,7 +9,6 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 
 import ColormapQuickPicker from "@ogw_front/components/Viewer/Options/ColormapQuickPicker.vue";
 import ViewToolbar from "@ogw_front/components/ViewToolbar.vue";
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 import { newInstance as vtkRemoteView } from "@kitware/vtk.js/Rendering/Misc/RemoteView";
 
 interface Props {
@@ -32,9 +31,6 @@ async function get_x_y(event: PointerEvent): Promise<void> {
   const { offsetX, offsetY, clientX, clientY } = event;
   if (viewerStore.picking_mode === true) {
     viewerStore.set_picked_point(offsetX, offsetY);
-    const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
-    const params = { x: offsetX, y: offsetY };
-    viewerStore.request({ schema, params });
   } else {
     await pickColormap(offsetX, offsetY, clientX, clientY);
   }

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";
@@ -15,12 +16,15 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 
 const hybridViewerStore = useHybridViewerStore();
 const viewerStore = useViewerStore();
+const { is_picking, is_zoom_box_active } = storeToRefs(hybridViewerStore);
+const { picking_mode } = storeToRefs(viewerStore);
 const showScreenshot = ref<boolean>(false);
 const showCameraManager = ref<boolean>(false);
 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);
@@ -58,6 +62,11 @@ onKeyStroke("Escape", () => {
   }
 });
 
+function stopHoverHighlight(): void {
+  hybridViewerStore.is_hover_highlight = false;
+  hybridViewerStore.clearHoverHighlight();
+}
+
 function closeAllToolsExcept(toolRef: Ref<boolean>): void {
   const tools = [
     showCameraOrientation,
@@ -66,13 +75,20 @@ function closeAllToolsExcept(toolRef: Ref<boolean>): void {
     showZScaling,
     showClippingPlanes,
     showShrinkFilter,
+    showThresholdFilter,
     showRuler,
+    is_picking,
+    is_zoom_box_active,
+    picking_mode,
   ];
   for (const tool of tools) {
     if (tool !== toolRef) {
       tool.value = false;
     }
   }
+  if (toolRef !== showRuler) {
+    void nextTick(stopHoverHighlight);
+  }
 }
 
 function toggleTool(toolRef: Ref<boolean>): void {
@@ -80,6 +96,19 @@ function toggleTool(toolRef: Ref<boolean>): void {
   toolRef.value = !toolRef.value;
 }
 
+function toggleHoverHighlight(fieldType: string): void {
+  const activate =
+    !hybridViewerStore.is_hover_highlight ||
+    hybridViewerStore.hover_highlight_field_type !== fieldType;
+  closeAllToolsExcept(showRuler);
+  if (activate) {
+    hybridViewerStore.is_hover_highlight = true;
+    hybridViewerStore.hover_highlight_field_type = fieldType;
+  } else {
+    stopHoverHighlight();
+  }
+}
+
 const camera_options = computed<CameraOptionAction[]>(() => [
   {
     testId: "resetCameraButton",
@@ -95,7 +124,16 @@ const camera_options = computed<CameraOptionAction[]>(() => [
     icon: "mdi-crosshairs-question",
     color: hybridViewerStore.is_picking ? "primary" : undefined,
     action: (): void => {
-      hybridViewerStore.is_picking = !hybridViewerStore.is_picking;
+      toggleTool(is_picking);
+    },
+  },
+  {
+    testId: "zoomToBoxButton",
+    tooltip: "Zoom to box",
+    icon: "mdi-magnify-scan",
+    color: hybridViewerStore.is_zoom_box_active ? "primary" : undefined,
+    action: (): void => {
+      toggleTool(is_zoom_box_active);
     },
   },
   {
@@ -103,28 +141,14 @@ const camera_options = computed<CameraOptionAction[]>(() => [
     tooltip: "Highlight on hover",
     icon: "mdi-cursor-default-click",
     color: hybridViewerStore.is_hover_highlight ? "primary" : undefined,
-    action: hybridViewerStore.is_hover_highlight
-      ? (): void => {
-          hybridViewerStore.is_hover_highlight = false;
-          hybridViewerStore.clearHoverHighlight();
-        }
-      : undefined,
+    action: hybridViewerStore.is_hover_highlight ? stopHoverHighlight : undefined,
     menu: [
       {
         title: "Cells",
         testId: "highlightOnHoverCellsButton",
         icon: "mdi-select-all",
         action: (): void => {
-          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";
-          }
+          toggleHoverHighlight("CELL");
         },
       },
       {
@@ -132,16 +156,7 @@ const camera_options = computed<CameraOptionAction[]>(() => [
         testId: "highlightOnHoverPointsButton",
         icon: "mdi-select-drag",
         action: (): void => {
-          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";
-          }
+          toggleHoverHighlight("POINT");
         },
       },
     ],
@@ -219,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",
@@ -308,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/components/Viewer/ToolActiveChip.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+interface Props {
+  label: string;
+  color: string;
+  icon: string;
+}
+
+const { label, color, icon } = defineProps<Props>();
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+defineOptions({ inheritAttrs: false });
+</script>
+
+<template>
+  <div
+    class="tool-active-container d-flex justify-center w-100 pa-4"
+    :style="{ '--tool-active-color': `var(--v-theme-${color})` }"
+  >
+    <v-chip
+      v-bind="$attrs"
+      :color="color"
+      :prepend-icon="icon"
+      elevation="8"
+      size="large"
+      variant="flat"
+      class="tool-active-pulse"
+      style="pointer-events: auto"
+      @click="emit('close')"
+    >
+      {{ label }} &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>
+</template>
+
+<style scoped>
+.tool-active-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(--tool-active-color), 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(var(--tool-active-color), 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(var(--tool-active-color), 0);
+  }
+}
+
+.tool-active-pulse {
+  animation: pulse-ring 1.5s ease-out infinite;
+}
+</style>