@geode/opengeodeweb-front 10.30.2 → 10.31.0-rc.1

package/app/components/ShrinkFilter.vue

@@ -0,0 +1,172 @@
+<script setup>
+import ToolPanel from "@ogw_front/components/ToolPanel";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDebounceFn } from "@vueuse/core";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const DEFAULT_SHRINK_VALUE = 0.8;
+const MAX_SHRINK_VALUE = 1;
+const DEBOUNCE_DELAY = 100;
+
+const show = defineModel("show", { type: Boolean, default: false });
+const dataStore = useDataStore();
+const hybridViewerStore = useHybridViewerStore();
+const targetAllVisible = ref(true);
+const selectedDatasetIds = ref([]);
+const shrinkFactor = ref(DEFAULT_SHRINK_VALUE);
+
+const allItems = dataStore.refAllItems();
+const availableDatasets = computed(() =>
+  allItems.value.map((item) => ({ title: item.name || item.id, value: item.id })),
+);
+
+const debouncedApply = useDebounceFn(() => applyShrink(), DEBOUNCE_DELAY);
+
+async function applyShrink() {
+  const allIds = allItems.value.map((item) => item.id);
+  if (allIds.length === 0) {
+    return;
+  }
+  const targetIds = targetAllVisible.value ? allIds : selectedDatasetIds.value;
+  const untargetedIds = allIds.filter((id) => !targetIds.includes(id));
+
+  if (targetIds.length > 0) {
+    await hybridViewerStore.setShrink(targetIds, Number(shrinkFactor.value));
+  }
+  if (untargetedIds.length > 0) {
+    await hybridViewerStore.setShrink(untargetedIds, MAX_SHRINK_VALUE);
+  }
+}
+
+async function resetShrink() {
+  shrinkFactor.value = DEFAULT_SHRINK_VALUE;
+  await applyShrink();
+}
+
+async function removeShrink() {
+  shrinkFactor.value = MAX_SHRINK_VALUE;
+  const allIds = allItems.value.map((item) => item.id);
+  if (allIds.length > 0) {
+    await hybridViewerStore.setShrink(allIds, MAX_SHRINK_VALUE);
+  }
+}
+
+watch(shrinkFactor, () => {
+  debouncedApply();
+});
+
+watch(show, (visible) => {
+  if (visible) {
+    applyShrink();
+  }
+});
+
+watch(
+  [targetAllVisible, selectedDatasetIds],
+  () => {
+    if (show.value) {
+      applyShrink();
+    }
+  },
+  { deep: true },
+);
+
+watch(allItems, () => {
+  if (show.value) {
+    applyShrink();
+  }
+});
+
+watch(
+  () => Object.values(hybridViewerStore.hybridDb).filter((entry) => entry && entry.actor).length,
+  (actorCount) => {
+    if (show.value && actorCount > 0) {
+      applyShrink();
+    }
+  },
+);
+</script>
+
+<template>
+  <ToolPanel v-model="show" title="Shrink Filter" :width="340" :click-outside="false">
+    <v-card-text class="pa-3 max-panel-height overflow-y-auto overflow-x-hidden">
+      <v-switch
+        v-model="targetAllVisible"
+        data-testid="shrinkTargetAllVisibleSwitch"
+        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="shrinkSelectedDatasetsSelect"
+        :items="availableDatasets"
+        label="Select datasets"
+        multiple
+        chips
+        closable-chips
+        variant="outlined"
+        density="compact"
+        hide-details
+        class="mb-3 text-caption"
+      />
+
+      <v-divider class="my-3" />
+
+      <div class="d-flex align-center justify-space-between mb-1">
+        <span class="text-caption font-weight-bold">Shrink Factor</span>
+        <span class="text-caption text-primary font-weight-bold">
+          {{ (shrinkFactor * 100).toFixed(0) }}% ({{ shrinkFactor.toFixed(2) }})
+        </span>
+      </div>
+
+      <v-slider
+        v-model="shrinkFactor"
+        data-testid="shrinkFactorSlider"
+        min="0.0"
+        max="1.0"
+        step="0.01"
+        color="primary"
+        track-color="grey-lighten-2"
+        density="compact"
+        hide-details
+        class="my-2 px-1"
+      />
+    </v-card-text>
+
+    <template #actions>
+      <v-card-actions class="justify-space-between px-3 pb-3 pt-0">
+        <v-btn
+          data-testid="removeShrinkButton"
+          variant="text"
+          size="small"
+          color="error"
+          class="text-caption text-none"
+          @click="removeShrink"
+        >
+          Remove Shrink
+        </v-btn>
+        <v-btn
+          data-testid="resetShrinkButton"
+          variant="tonal"
+          size="small"
+          color="secondary"
+          class="text-caption text-none"
+          @click="resetShrink"
+        >
+          Reset
+        </v-btn>
+      </v-card-actions>
+    </template>
+  </ToolPanel>
+</template>
+
+<style scoped>
+.max-panel-height {
+  max-height: 520px;
+}
+</style>

package/app/components/ViewToolbar.vue

@@ -5,6 +5,7 @@ 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 ShrinkFilter from "@ogw_front/components/ShrinkFilter";
 import ZScaling from "@ogw_front/components/ZScaling";
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -17,6 +18,7 @@ const show_camera_manager = ref(false);
 const showCameraOrientation = ref(false);
 const showZScaling = ref(false);
 const showClippingPlanes = ref(false);
+const showShrinkFilter = ref(false);
 const grid_scale = ref(false);
 const zScale = ref(hybridViewerStore.zScale);
 
@@ -162,6 +164,15 @@ const camera_options = computed(() => [
       showClippingPlanes.value = !showClippingPlanes.value;
     },
   },
+  {
+    testId: "shrinkFilterButton",
+    tooltip: "Shrink Filter",
+    icon: "mdi-arrow-collapse-all",
+    color: showShrinkFilter.value ? "primary" : undefined,
+    action: () => {
+      showShrinkFilter.value = !showShrinkFilter.value;
+    },
+  },
 ]);
 </script>
 
@@ -235,6 +246,7 @@ const camera_options = computed(() => [
     @apply="handleZScalingClose"
   />
   <ClippingPlanes v-model:show="showClippingPlanes" />
+  <ShrinkFilter v-model:show="showShrinkFilter" />
 </template>
 
 <style module>

package/app/stores/hybrid_viewer.js

@@ -21,7 +21,10 @@ import {
   performClearHoverHighlight,
   performClickPicking,
   performRemoveItem,
+  performResize,
+  performSetClippingPlanes,
   performSetContainer,
+  performSetShrink,
   performSetVisibility,
   performSetZScaling,
 } from "@ogw_internal/stores/hybrid_viewer";
@@ -138,10 +141,11 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   async function setClippingPlanes(ids, planes) {
-    const schema = viewer_schemas.opengeodeweb_viewer.viewer.clipping_planes;
-    const params = { ids, planes };
-    await viewerStore.request({ schema, params });
-    await remoteRender();
+    await performSetClippingPlanes(ids, planes, { viewerStore, viewer_schemas, remoteRender });
+  }
+
+  async function setShrink(ids, shrink_factor) {
+    await performSetShrink(ids, shrink_factor, { viewerStore, viewer_schemas, remoteRender });
   }
 
   function resetCamera() {
@@ -266,18 +270,14 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   async function resize(width, height) {
-    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);
-    genericRenderWindow.value.getRenderWindow().render();
-    remoteRender();
+    await performResize(width, height, {
+      viewerStore,
+      status,
+      Status,
+      genericRenderWindow: genericRenderWindow.value,
+      viewStream,
+      remoteRender,
+    });
   }
 
   function getAverageBrightness(rect) {
@@ -315,6 +315,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     setVisibility,
     setZScaling,
     setClippingPlanes,
+    setShrink,
     syncRemoteCamera,
     setCamera,
     initHybridViewer,

package/internal/stores/hybrid_viewer.js

@@ -252,14 +252,49 @@ function performClear(options) {
   }
 }
 
+async function performSetClippingPlanes(ids, planes, options) {
+  const { viewerStore, viewer_schemas, remoteRender } = options;
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.clipping_planes;
+  const params = { ids, planes };
+  await viewerStore.request({ schema, params });
+  await remoteRender();
+}
+
+async function performSetShrink(ids, shrink_factor, options) {
+  const { viewerStore, viewer_schemas, remoteRender } = options;
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.shrink;
+  const params = { ids, shrink_factor };
+  await viewerStore.request({ schema, params });
+  await remoteRender();
+}
+
+async function performResize(width, height, options) {
+  const { viewerStore, status, Status, genericRenderWindow, viewStream, remoteRender } = options;
+  if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) {
+    return;
+  }
+  const webGLRenderWindow = genericRenderWindow.getApiSpecificRenderWindow();
+  const canvas = webGLRenderWindow.getCanvas();
+  canvas.width = width;
+  canvas.height = height;
+  await nextTick();
+  webGLRenderWindow.setSize(width, height);
+  viewStream.setSize(width, height);
+  genericRenderWindow.getRenderWindow().render();
+  remoteRender();
+}
+
 export {
   performAddItem,
+  performClear,
   performClearHoverHighlight,
   performClickPicking,
   performHoverHighlight,
-  performSetContainer,
-  performSetZScaling,
   performRemoveItem,
+  performResize,
+  performSetClippingPlanes,
+  performSetContainer,
+  performSetShrink,
   performSetVisibility,
-  performClear,
+  performSetZScaling,
 };

package/nuxt.config.js

@@ -41,6 +41,9 @@ export default defineNuxtConfig({
   },
 
   vuetify: {
+    moduleOptions: {
+      prefixComposables: true,
+    },
     vuetifyOptions: {
       defaults: {
         VTooltip: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.30.2",
+  "version": "10.31.0-rc.1",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {
@@ -34,8 +34,8 @@
     "build": ""
   },
   "dependencies": {
-    "@geode/opengeodeweb-back": "latest",
-    "@geode/opengeodeweb-viewer": "latest",
+    "@geode/opengeodeweb-back": "next",
+    "@geode/opengeodeweb-viewer": "next",
     "@google-cloud/run": "3.2.0",
     "@kitware/vtk.js": "33.3.0",
     "@mdi/font": "7.4.47",