@geode/opengeodeweb-front 10.29.1 → 10.30.0-rc.10

package/app/components/ClippingPlaneCard.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { getPlaneCssColor } from "@ogw_front/utils/clipping_planes";
+
+const { plane, index } = defineProps({
+  plane: {
+    type: Object,
+    required: true,
+  },
+  index: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["remove", "flipNormal"]);
+</script>
+
+<template>
+  <v-card
+    data-testid="planeCard"
+    variant="outlined"
+    class="pa-2 mb-3 rounded-lg border-opacity-50"
+    :style="{ borderColor: getPlaneCssColor(index) }"
+  >
+    <v-row align="center" justify="space-between" no-gutters class="mb-1">
+      <v-col cols="auto" class="d-flex align-center">
+        <v-chip
+          size="x-small"
+          variant="flat"
+          :style="{
+            backgroundColor: getPlaneCssColor(index),
+            color: 'white',
+          }"
+          class="font-weight-bold"
+        >
+          Plane #{{ index + 1 }}
+        </v-chip>
+      </v-col>
+      <v-col cols="auto">
+        <v-btn
+          data-testid="removePlaneButton"
+          icon="mdi-trash-can-outline"
+          size="x-small"
+          variant="text"
+          color="error"
+          @click="emit('remove')"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row no-gutters class="mb-1">
+      <v-col class="text-caption text-medium-emphasis">Origin [X, Y, Z]</v-col>
+    </v-row>
+    <v-row v-if="plane.origin" dense class="mb-2">
+      <v-col v-for="axis in 3" :key="'orig-' + axis" cols="4">
+        <v-text-field
+          v-model.number="plane.origin[axis - 1]"
+          data-testid="planeOriginInput"
+          type="number"
+          variant="outlined"
+          density="compact"
+          hide-details
+          step="any"
+          class="text-caption"
+        />
+      </v-col>
+    </v-row>
+    <v-row v-else dense class="mb-2">
+      <v-col v-for="axis in 3" :key="'orig-placeholder-' + axis" cols="4">
+        <v-text-field
+          placeholder="—"
+          variant="outlined"
+          density="compact"
+          hide-details
+          disabled
+          class="text-caption"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row align="center" justify="space-between" no-gutters class="mb-1">
+      <v-col class="text-caption text-medium-emphasis">Normal [X, Y, Z]</v-col>
+      <v-col cols="auto">
+        <v-btn
+          data-testid="invertNormalButton"
+          size="x-small"
+          variant="text"
+          color="primary"
+          prepend-icon="mdi-swap-horizontal"
+          class="text-none text-caption px-1"
+          @click="emit('flipNormal')"
+        >
+          Invert Normal
+        </v-btn>
+      </v-col>
+    </v-row>
+    <v-row dense>
+      <v-col v-for="axis in 3" :key="'norm-' + axis" cols="4">
+        <v-text-field
+          v-model.number="plane.normal[axis - 1]"
+          data-testid="planeNormalInput"
+          type="number"
+          variant="outlined"
+          density="compact"
+          hide-details
+          step="any"
+          class="text-caption"
+        />
+      </v-col>
+    </v-row>
+  </v-card>
+</template>

package/app/components/ClippingPlanes.vue

@@ -0,0 +1,238 @@
+<script setup>
+import { DEBOUNCE_DELAY, DEFAULT_NORMALS } from "@ogw_front/utils/clipping_planes";
+import ClippingPlaneCard from "@ogw_front/components/ClippingPlaneCard";
+import ToolPanel from "@ogw_front/components/ToolPanel";
+import { useClippingPlanesWidget } from "@ogw_front/composables/clipping_planes_widget";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDebounceFn } from "@vueuse/core";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const show = defineModel("show", { type: Boolean, default: false });
+const dataStore = useDataStore();
+const hybridViewerStore = useHybridViewerStore();
+const targetAllVisible = ref(true);
+const selectedDatasetIds = ref([]);
+const planes = ref([{ origin: undefined, normal: [1, 0, 0] }]);
+const allItems = dataStore.refAllItems();
+const availableDatasets = computed(() =>
+  allItems.value.map((item) => ({ title: item.name || item.id, value: item.id })),
+);
+const widgetContainer = useTemplateRef("widgetContainer");
+const debouncedApply = useDebounceFn(() => applyClippingPlanes(), DEBOUNCE_DELAY);
+const {
+  getSceneCenter,
+  syncWidgets,
+  syncLocalCamera,
+  cleanupLocalWidget,
+  initLocalWidget,
+  updateWidgetPlacement,
+  isFromWidget,
+  setFromWidget,
+} = useClippingPlanesWidget({
+  planes,
+  targetAllVisible,
+  selectedDatasetIds,
+  allItems,
+  hybridViewerStore,
+  debouncedApply,
+});
+
+function addPlane() {
+  const normal = DEFAULT_NORMALS[planes.value.length % DEFAULT_NORMALS.length];
+  planes.value.push({ origin: getSceneCenter(), normal });
+}
+
+function removePlane(index) {
+  planes.value.splice(index, 1);
+}
+
+function flipNormal(plane) {
+  plane.normal = plane.normal.map((component) => -component);
+  syncWidgets();
+  applyClippingPlanes();
+}
+
+async function applyClippingPlanes() {
+  const allIds = allItems.value.map((item) => item.id);
+  if (allIds.length === 0) {
+    return;
+  }
+  const center = getSceneCenter();
+  const targetIds = targetAllVisible.value ? allIds : selectedDatasetIds.value;
+  const untargetedIds = allIds.filter((id) => !targetIds.includes(id));
+  const planesData = planes.value.map((plane) => ({
+    origin: (plane.origin || center).map(Number),
+    normal: plane.normal.map(Number),
+  }));
+
+  if (targetIds.length > 0) {
+    await hybridViewerStore.setClippingPlanes(targetIds, planesData);
+  }
+  if (untargetedIds.length > 0) {
+    await hybridViewerStore.setClippingPlanes(untargetedIds, []);
+  }
+}
+
+async function resetClippingPlanes() {
+  setFromWidget(true);
+  planes.value = [{ origin: undefined, normal: [1, 0, 0] }];
+  updateWidgetPlacement({ isReset: true });
+  setFromWidget(false);
+  await applyClippingPlanes();
+}
+
+async function removeClippingPlanes() {
+  const allIds = allItems.value.map((item) => item.id);
+  await hybridViewerStore.setClippingPlanes(allIds, []);
+}
+
+watch(widgetContainer, (container) => {
+  if (container) {
+    initLocalWidget(container.$el || container);
+  }
+});
+
+watch(
+  planes,
+  () => {
+    if (isFromWidget()) {
+      return;
+    }
+    syncWidgets();
+    debouncedApply();
+  },
+  { deep: true },
+);
+
+watch(show, (visible) => {
+  if (visible) {
+    updateWidgetPlacement({ isReset: true });
+    applyClippingPlanes();
+  }
+});
+
+watch(
+  [targetAllVisible, selectedDatasetIds],
+  () => {
+    if (show.value) {
+      updateWidgetPlacement({ isReset: true });
+      applyClippingPlanes();
+    }
+  },
+  { deep: true },
+);
+
+watch(allItems, () => {
+  if (show.value) {
+    updateWidgetPlacement({ isReset: true });
+    applyClippingPlanes();
+  }
+});
+
+watch(
+  () => Object.values(hybridViewerStore.hybridDb).filter((entry) => entry && entry.actor).length,
+  (actorCount) => {
+    if (show.value && actorCount > 0) {
+      updateWidgetPlacement({ isReset: true });
+      applyClippingPlanes();
+    }
+  },
+);
+
+watch(() => hybridViewerStore.camera_options, syncLocalCamera, { deep: true });
+
+onBeforeUnmount(cleanupLocalWidget);
+</script>
+
+<template>
+  <ToolPanel v-model="show" title="Clipping Planes" :width="360" :click-outside="false">
+    <v-card-text class="pa-3 max-panel-height overflow-y-auto">
+      <v-sheet
+        ref="widgetContainer"
+        height="180"
+        color="transparent"
+        class="rounded-lg mb-3 overflow-hidden"
+      />
+      <v-switch
+        v-model="targetAllVisible"
+        data-testid="targetAllVisibleSwitch"
+        label="Apply to all visible datasets"
+        color="primary"
+        density="compact"
+        hide-details
+        class="mb-2 text-caption"
+      />
+
+      <v-select
+        v-if="!targetAllVisible"
+        v-model="selectedDatasetIds"
+        data-testid="selectedDatasetsSelect"
+        :items="availableDatasets"
+        label="Select datasets"
+        multiple
+        chips
+        closable-chips
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="mb-3 text-caption"
+      />
+
+      <v-divider class="my-2" />
+
+      <v-row align="center" justify="space-between" no-gutters class="mb-2">
+        <v-col class="text-caption font-weight-bold">Planes ({{ planes.length }})</v-col>
+        <v-col cols="auto">
+          <v-btn
+            data-testid="addPlaneButton"
+            size="x-small"
+            variant="tonal"
+            color="primary"
+            icon="mdi-plus"
+            @click="addPlane"
+          />
+        </v-col>
+      </v-row>
+
+      <ClippingPlaneCard
+        v-for="(plane, idx) in planes"
+        :key="idx"
+        :plane="plane"
+        :index="idx"
+        @remove="removePlane(idx)"
+        @flip-normal="flipNormal(plane)"
+      />
+    </v-card-text>
+
+    <template #actions>
+      <v-card-actions class="justify-space-between px-3 pb-3 pt-0">
+        <v-btn
+          data-testid="removeClippingPlanesButton"
+          variant="text"
+          size="small"
+          color="error"
+          class="text-caption text-none"
+          @click="removeClippingPlanes"
+        >
+          Remove Clipping
+        </v-btn>
+        <v-btn
+          data-testid="resetClippingPlanesButton"
+          variant="tonal"
+          size="small"
+          color="secondary"
+          class="text-caption text-none"
+          @click="resetClippingPlanes"
+        >
+          Reset
+        </v-btn>
+      </v-card-actions>
+    </template>
+  </ToolPanel>
+</template>
+
+<style scoped>
+.max-panel-height {
+  max-height: 520px;
+}
+</style>

package/app/components/Launcher.vue

@@ -2,7 +2,7 @@
 import Loading from "@ogw_front/components/Loading";
 import Recaptcha from "@ogw_front/components/Recaptcha";
 import { Status } from "@ogw_front/utils/status";
-import { appMode } from "@ogw_front/utils/local/app_mode";
+import { appMode } from "@ogw_shared/app_mode";
 import { useInfraStore } from "@ogw_front/stores/infra";
 
 const { appName, email, isUserAuthenticated, logo } = defineProps({

package/app/components/ObjectSelector.vue

@@ -1,6 +1,7 @@
 <script setup>
 import FetchingData from "@ogw_front/components/FetchingData.vue";
 import { geode_objects } from "@ogw_front/assets/geode_objects";
+import { resolveAllowedObjects } from "@ogw_shared/utils/response_handlers/load.js";
 import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
 import { useBackStore } from "@ogw_front/stores/back";
 
@@ -15,100 +16,49 @@ const { filenames } = defineProps({
 const backStore = useBackStore();
 
 const loading = ref(false);
-const allowed_objects = ref({});
-const toggle_loading = useToggle(loading);
-const multiple_files_no_common = ref(false);
+const allowedGeodeObjects = ref({});
+const toggleLoading = useToggle(loading);
+const multipleFilesNoCommon = ref(false);
 
-function select_geode_object(object_map) {
-  const object_keys = Object.keys(object_map);
-  if (object_keys.length === 0) {
-    return undefined;
-  }
-  if (object_keys.length === 1 && object_map[object_keys[0]].is_loadable > 0) {
-    return object_keys[0];
-  }
-  const highest_load_score = Math.max(...object_keys.map((key) => object_map[key].is_loadable));
-  if (highest_load_score <= 0) {
-    return undefined;
-  }
-  const best_score_objects = object_keys.filter(
-    (key) => object_map[key].is_loadable === highest_load_score,
-  );
-  if (best_score_objects.length === 1) {
-    return best_score_objects[0];
-  }
-  const highest_priority = Math.max(
-    ...best_score_objects.map((key) => object_map[key].object_priority ?? -Infinity),
-  );
-  const best_priority_objects = best_score_objects.filter(
-    (key) => object_map[key].object_priority === highest_priority,
-  );
-  if (highest_priority !== -Infinity && best_priority_objects.length === 1) {
-    return best_priority_objects[0];
-  }
-  return undefined;
-}
-
-function isCsvFile(filename) {
-  return filename.toLowerCase().endsWith(".csv") || filename.toLowerCase().endsWith(".csv.json");
-}
-
-async function get_allowed_objects() {
-  toggle_loading();
-  allowed_objects.value = {};
-  multiple_files_no_common.value = false;
-
-  const promise_array = filenames.map((filename) => {
+async function fetchAllowedObjectsList() {
+  const promiseArray = filenames.map((filename) => {
     const params = { filename };
     return backStore.request({ schema, params });
   });
-  const responses = await Promise.all(promise_array);
-  const allowed_objects_list = responses.map((response) => response.allowed_objects);
-  const all_keys = [...new Set(allowed_objects_list.flatMap((obj) => Object.keys(obj)))];
-  const common_keys = all_keys.filter((key) => allowed_objects_list.every((obj) => key in obj));
+  const responses = await Promise.all(promiseArray);
+  return responses.map((response) => response.allowed_objects);
+}
 
-  if (filenames.length > 1 && all_keys.length > 0 && common_keys.length === 0) {
-    multiple_files_no_common.value = true;
-  }
+async function getAllowedGeodeObjects() {
+  toggleLoading();
+  allowedGeodeObjects.value = {};
+  multipleFilesNoCommon.value = false;
 
-  const final_object = {};
-  for (const key of common_keys) {
-    const load_scores = allowed_objects_list.map((obj) => obj[key].is_loadable);
-    const priorities = allowed_objects_list
-      .map((obj) => obj[key].object_priority)
-      .filter((priority) => priority !== undefined);
-    final_object[key] = { is_loadable: Math.min(...load_scores) };
-    if (priorities.length > 0) {
-      final_object[key].object_priority = Math.max(...priorities);
-    }
-  }
-  const isCsv = filenames.some((filename) => isCsvFile(filename));
-  if (isCsv && !final_object["PointSet3D"]) {
-    final_object["PointSet3D"] = { is_loadable: 1, object_priority: 100 };
-  }
+  const allowedGeodeObjectsList = await fetchAllowedObjectsList();
+  const resolved = resolveAllowedObjects(filenames, allowedGeodeObjectsList);
 
-  allowed_objects.value = final_object;
-  const selected_object = select_geode_object(final_object);
-  if (selected_object) {
-    set_geode_object(selected_object);
+  allowedGeodeObjects.value = resolved.mergedAllowedObjects;
+  multipleFilesNoCommon.value = resolved.multipleFilesNoCommon;
+  if (resolved.selectedGeodeObject) {
+    setGeodeObject(resolved.selectedGeodeObject);
   }
-  toggle_loading();
+  toggleLoading();
 }
 
-function set_geode_object(geode_object_type) {
+function setGeodeObject(geode_object_type) {
   if (geode_object_type) {
     emit("update_values", { geode_object_type });
     emit("increment_step");
   }
 }
 // oxlint-disable-next-line no-top-level-await
-await get_allowed_objects();
+await getAllowedGeodeObjects();
 </script>
 
 <template>
   <FetchingData v-if="loading" />
-  <v-row v-else-if="Object.keys(allowed_objects).length" class="justify-left">
-    <v-col v-for="(value, key) in allowed_objects" :key="key" cols="3" md="4">
+  <v-row v-else-if="Object.keys(allowedGeodeObjects).length" class="justify-left">
+    <v-col v-for="(value, key) in allowedGeodeObjects" :key="key" cols="3" md="4">
       <v-tooltip
         :text="
           value['is_loadable']
@@ -124,7 +74,7 @@ await get_allowed_objects();
               class="card ma-2"
               hover
               rounded
-              @click="set_geode_object(key)"
+              @click="setGeodeObject(key)"
               :disabled="!value['is_loadable']"
               :elevation="value['is_loadable'] ? 5 : 3"
             >
@@ -139,7 +89,7 @@ await get_allowed_objects();
       </v-tooltip>
     </v-col>
   </v-row>
-  <v-row v-else-if="multiple_files_no_common" class="pa-5">
+  <v-row v-else-if="multipleFilesNoCommon" class="pa-5">
     <v-card class="card" variant="tonal" rounded>
       <v-card-text>
         These files cannot be loaded together because they don't share a common data type.

package/app/components/ToolPanel.vue

@@ -1,11 +1,12 @@
 <script setup>
 import GlassCard from "@ogw_front/components/GlassCard";
 
-const { title, width, closeLabel, actionLabel } = defineProps({
+const { title, width, closeLabel, actionLabel, clickOutside } = defineProps({
   title: { type: String, default: "" },
   width: { type: Number, default: 260 },
   closeLabel: { type: String, default: "Close" },
   actionLabel: { type: String, default: undefined },
+  clickOutside: { type: Boolean, default: true },
 });
 
 const model = defineModel({ type: Boolean, default: false });
@@ -19,7 +20,7 @@ function close() {
 <template>
   <GlassCard
     v-if="model"
-    v-click-outside="close"
+    v-click-outside="{ handler: close, closeConditional: () => clickOutside }"
     :title="title"
     :width="width"
     :ripple="false"

package/app/components/ViewToolbar.vue

@@ -3,6 +3,7 @@ import ActionButton from "@ogw_front/components/ActionButton";
 import CameraBookmarkIcon from "@ogw_front/assets/viewer_svgs/camera-bookmark.svg";
 import CameraManager from "@ogw_front/components/CameraManager";
 import CameraOrientation from "@ogw_front/components/CameraOrientation";
+import ClippingPlanes from "@ogw_front/components/ClippingPlanes";
 import Screenshot from "@ogw_front/components/Screenshot";
 import ZScaling from "@ogw_front/components/ZScaling";
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
@@ -15,6 +16,7 @@ const take_screenshot = ref(false);
 const show_camera_manager = ref(false);
 const showCameraOrientation = ref(false);
 const showZScaling = ref(false);
+const showClippingPlanes = ref(false);
 const grid_scale = ref(false);
 const zScale = ref(hybridViewerStore.zScale);
 
@@ -151,6 +153,15 @@ const camera_options = computed(() => [
       showZScaling.value = !showZScaling.value;
     },
   },
+  {
+    testId: "clippingPlanesButton",
+    tooltip: "Clipping Planes",
+    icon: "mdi-content-cut",
+    color: showClippingPlanes.value ? "primary" : undefined,
+    action: () => {
+      showClippingPlanes.value = !showClippingPlanes.value;
+    },
+  },
 ]);
 </script>
 
@@ -223,6 +234,7 @@ const camera_options = computed(() => [
     :width="260"
     @apply="handleZScalingClose"
   />
+  <ClippingPlanes v-model:show="showClippingPlanes" />
 </template>
 
 <style module>

package/app/components/Viewer/ObjectTree/Base/TreeRow.vue

@@ -1,4 +1,8 @@
 <script setup>
+import { useDataStore } from "@ogw_front/stores/data";
+
+const dataStore = useDataStore();
+
 const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps({
   item: { type: Object, required: true },
   itemProps: { type: Object, required: true },
@@ -7,13 +11,34 @@ const { item, itemProps, selection, isSelected, getIndeterminate } = defineProps
   getIndeterminate: { type: Function, required: true },
 });
 
-defineEmits(["toggle-open", "toggle-select", "hover-eye-enter", "hover-eye-leave"]);
+const emit = defineEmits(["toggle-open", "toggle-select", "hover-eye-enter", "hover-eye-leave"]);
 
 const INDENT_STEP = 10;
+
+function triggerHorizonStackModal(rawItem) {
+  globalThis.dispatchEvent(new CustomEvent("open-horizon-stack-modal", { detail: rawItem }));
+}
+const isHorizonStack = computed(() => item.raw.geode_object_type === "HorizonStack3D");
+const isViewable = computed(() => dataStore.isItemViewable(item.raw));
+const showEyeButton = computed(
+  () => !isHorizonStack.value && item.raw.title !== "HorizonStack3D" && isViewable.value,
+);
+
+function handleRowClick(event) {
+  if (isHorizonStack.value) {
+    if (!item.isLeaf) {
+      return;
+    }
+
+    event.stopPropagation();
+    event.preventDefault();
+    triggerHorizonStackModal(item.raw);
+  }
+}
 </script>
 
 <template>
-  <div class="tree-row-content d-flex align-center px-2 ps-2 w-100">
+  <div class="tree-row-content d-flex align-center px-2 ps-2 w-100" @click="handleRowClick">
     <div
       v-if="item.depth > 0"
       class="flex-shrink-0"
@@ -30,24 +55,37 @@ const INDENT_STEP = 10;
       />
       <div v-else class="icon-placeholder" />
 
-      <v-btn
-        v-if="selection.selectable"
-        :icon="
-          getIndeterminate(item.raw)
-            ? 'mdi-eye-minus-outline'
-            : isSelected(item.raw)
-              ? 'mdi-eye'
-              : 'mdi-eye-off-outline'
-        "
-        variant="text"
-        density="compact"
-        color="black"
-        class="flex-shrink-0"
-        @click.stop="$emit('toggle-select', item.raw)"
-        @mousedown.stop
-        @mouseenter="$emit('hover-eye-enter', item.raw)"
-        @mouseleave="$emit('hover-eye-leave', item.raw)"
-      />
+      <template v-if="selection.selectable">
+        <v-btn
+          v-if="isHorizonStack && item.isLeaf"
+          icon="mdi-layers-triple"
+          variant="text"
+          density="compact"
+          color="black"
+          class="flex-shrink-0"
+          style="z-index: 4"
+          @click.stop="triggerHorizonStackModal(item.raw)"
+          @mousedown.stop
+        />
+        <v-btn
+          v-else-if="showEyeButton"
+          :icon="
+            getIndeterminate(item.raw)
+              ? 'mdi-eye-minus-outline'
+              : isSelected(item.raw)
+                ? 'mdi-eye'
+                : 'mdi-eye-off-outline'
+          "
+          variant="text"
+          density="compact"
+          color="black"
+          class="flex-shrink-0"
+          @click.stop="$emit('toggle-select', item.raw)"
+          @mousedown.stop
+          @mouseenter="$emit('hover-eye-enter', item.raw)"
+          @mouseleave="$emit('hover-eye-leave', item.raw)"
+        />
+      </template>
     </div>
 
     <div class="tree-title flex-grow-1 overflow-hidden d-flex align-center ms-1 pt-1">