@geode/opengeodeweb-front 10.38.0-rc.3 → 10.38.0-rc.5

package/app/components/ExplodeFilter.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import FactorFilterPanel from "@ogw_front/components/FactorFilterPanel.vue";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const DEFAULT_EXPLODE_VALUE = 0.2;
+const MIN_EXPLODE_VALUE = 0;
+const MAX_EXPLODE_VALUE = 1;
+
+interface Props {
+  escapeFunction?: () => void;
+}
+
+const { escapeFunction = undefined } = defineProps<Props>();
+
+const show = defineModel<boolean>("show", { default: false });
+const hybridViewerStore = useHybridViewerStore();
+</script>
+
+<template>
+  <FactorFilterPanel
+    v-model:show="show"
+    title="Exploded View"
+    label="Explode Factor"
+    test-id-prefix="explode"
+    :set-factor="hybridViewerStore.setExplode"
+    :factor-range="{
+      min: MIN_EXPLODE_VALUE,
+      max: MAX_EXPLODE_VALUE,
+      defaultValue: DEFAULT_EXPLODE_VALUE,
+      neutralValue: MIN_EXPLODE_VALUE,
+    }"
+    :escapeFunction="escapeFunction"
+  />
+</template>

package/app/components/FactorFilterPanel.vue

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import ToolPanel from "@ogw_front/components/ToolPanel.vue";
+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 FactorRange {
+  min: number;
+  max: number;
+  defaultValue: number;
+  neutralValue: number;
+}
+
+interface Props {
+  title: string;
+  label: string;
+  testIdPrefix: string;
+  setFactor: (ids: string[], factor: number) => Promise<void>;
+  factorRange: FactorRange;
+  formatValue?: (value: number) => string;
+  escapeFunction?: () => void;
+}
+
+const {
+  title,
+  label,
+  testIdPrefix,
+  setFactor,
+  factorRange,
+  formatValue = (value: number): string => value.toFixed(2),
+  escapeFunction = undefined,
+} = defineProps<Props>();
+
+const capitalizedPrefix = computed<string>(
+  () => `${testIdPrefix.charAt(0).toUpperCase()}${testIdPrefix.slice(1)}`,
+);
+const show = defineModel<boolean>("show", { default: false });
+const dataStore = useDataStore();
+const hybridViewerStore = useHybridViewerStore();
+const targetAllVisible = ref<boolean>(true);
+const selectedDatasetIds = ref<string[]>([]);
+const factor = ref<number>(factorRange.defaultValue);
+
+const allItems = dataStore.refAllItems();
+const availableDatasets = computed<{ title: string; value: string }[]>(() =>
+  allItems.value.map((item) => ({
+    title: item.name || item.id,
+    value: item.id,
+  })),
+);
+
+let appliedFactor: number | undefined = undefined;
+
+async function applyFactor(): Promise<void> {
+  appliedFactor = factor.value;
+  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 setFactor(targetIds, Number(factor.value));
+  }
+  if (untargetedIds.length > 0) {
+    await setFactor(untargetedIds, factorRange.neutralValue);
+  }
+}
+
+const debouncedApply = useDebounceFn(() => applyFactor(), DEBOUNCE_DELAY);
+
+async function resetFactor(): Promise<void> {
+  factor.value = factorRange.defaultValue;
+  await applyFactor();
+}
+
+async function removeFactor(): Promise<void> {
+  factor.value = factorRange.neutralValue;
+  await applyFactor();
+}
+
+watch(factor, (value) => {
+  if (value !== appliedFactor) {
+    debouncedApply();
+  }
+});
+
+watch(show, (visible) => {
+  if (visible) {
+    applyFactor();
+  }
+});
+
+watch(
+  [targetAllVisible, selectedDatasetIds],
+  () => {
+    if (show.value) {
+      applyFactor();
+    }
+  },
+  { deep: true },
+);
+
+watch(allItems, () => {
+  if (show.value) {
+    applyFactor();
+  }
+});
+
+watch(
+  () => Object.values(hybridViewerStore.hybridDb).filter((entry) => entry && entry.actor).length,
+  (actorCount) => {
+    if (show.value && actorCount > 0) {
+      applyFactor();
+    }
+  },
+);
+</script>
+
+<template>
+  <ToolPanel
+    v-model="show"
+    :title="title"
+    :width="340"
+    :click-outside="false"
+    :escapeFunction="escapeFunction"
+  >
+    <v-card-text class="pa-3 max-panel-height overflow-y-auto overflow-x-hidden">
+      <v-switch
+        v-model="targetAllVisible"
+        :data-testid="`${testIdPrefix}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="`${testIdPrefix}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-3" />
+
+      <div class="d-flex align-center justify-space-between mb-1">
+        <span class="text-caption font-weight-bold">{{ label }}</span>
+        <span class="text-caption text-primary font-weight-bold">
+          {{ formatValue(factor) }}
+        </span>
+      </div>
+
+      <v-slider
+        v-model="factor"
+        :data-testid="`${testIdPrefix}FactorSlider`"
+        :min="factorRange.min"
+        :max="factorRange.max"
+        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="`remove${capitalizedPrefix}Button`"
+          variant="text"
+          size="small"
+          color="error"
+          class="text-caption text-none"
+          @click="removeFactor"
+        >
+          Remove {{ capitalizedPrefix }}
+        </v-btn>
+        <v-btn
+          :data-testid="`reset${capitalizedPrefix}Button`"
+          variant="tonal"
+          size="small"
+          color="secondary"
+          class="text-caption text-none"
+          @click="resetFactor"
+        >
+          Reset
+        </v-btn>
+      </v-card-actions>
+    </template>
+  </ToolPanel>
+</template>
+
+<style scoped>
+.max-panel-height {
+  max-height: 520px;
+}
+</style>

package/app/components/Launcher.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 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";
@@ -8,22 +7,28 @@ import { useInfraStore } from "@ogw_front/stores/infra";
 
 interface Props {
   appName: string;
-  email?: string;
+  // Firebase ID token for the cloud launch; required in cloud mode.
+  authToken?: string;
   isUserAuthenticated?: boolean;
   logo?: string;
 }
 
-const { appName, email = undefined, isUserAuthenticated = false, logo = "" } = defineProps<Props>();
+const {
+  appName,
+  authToken = undefined,
+  isUserAuthenticated = false,
+  logo = "",
+} = defineProps<Props>();
 
 const infraStore = useInfraStore();
 // 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);
+  infraStore.create_backend(authToken);
 }
 
 function cloudCreateBackend(): Promise<void> {
-  return infraStore.create_backend(email);
+  return infraStore.create_backend(authToken);
 }
 </script>
 

package/app/components/ShrinkFilter.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import ToolPanel from "@ogw_front/components/ToolPanel.vue";
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDebounceFn } from "@vueuse/core";
+import FactorFilterPanel from "@ogw_front/components/FactorFilterPanel.vue";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const DEFAULT_SHRINK_VALUE = 0.8;
+const MIN_SHRINK_VALUE = 0;
 const MAX_SHRINK_VALUE = 1;
-const DEBOUNCE_DELAY = 100;
+const PERCENT = 100;
 
 interface Props {
   escapeFunction?: () => void;
@@ -15,173 +14,27 @@ interface Props {
 const { escapeFunction = undefined } = defineProps<Props>();
 
 const show = defineModel<boolean>("show", { default: false });
-const dataStore = useDataStore();
 const hybridViewerStore = useHybridViewerStore();
-const targetAllVisible = ref<boolean>(true);
-const selectedDatasetIds = ref<string[]>([]);
-const shrinkFactor = ref<number>(DEFAULT_SHRINK_VALUE);
 
-const allItems = dataStore.refAllItems();
-const availableDatasets = computed<{ title: string; value: string }[]>(() =>
-  allItems.value.map((item) => ({
-    title: item.name || item.id,
-    value: item.id,
-  })),
-);
-
-async function applyShrink(): Promise<void> {
-  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);
-  }
-}
-
-const debouncedApply = useDebounceFn(() => applyShrink(), DEBOUNCE_DELAY);
-
-async function resetShrink(): Promise<void> {
-  shrinkFactor.value = DEFAULT_SHRINK_VALUE;
-  await applyShrink();
+function formatShrinkFactor(value: number): string {
+  return `${(value * PERCENT).toFixed(0)}% (${value.toFixed(2)})`;
 }
-
-async function removeShrink(): Promise<void> {
-  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"
+  <FactorFilterPanel
+    v-model:show="show"
     title="Shrink Filter"
-    :width="340"
-    :click-outside="false"
+    label="Shrink Factor"
+    test-id-prefix="shrink"
+    :set-factor="hybridViewerStore.setShrink"
+    :factor-range="{
+      min: MIN_SHRINK_VALUE,
+      max: MAX_SHRINK_VALUE,
+      defaultValue: DEFAULT_SHRINK_VALUE,
+      neutralValue: MAX_SHRINK_VALUE,
+    }"
+    :format-value="formatShrinkFactor"
     :escapeFunction="escapeFunction"
-  >
-    <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

@@ -7,6 +7,7 @@ import CameraBookmarkIcon from "@ogw_front/assets/viewer_svgs/camera-bookmark.sv
 import CameraManager from "@ogw_front/components/CameraManager.vue";
 import CameraOrientation from "@ogw_front/components/CameraOrientation.vue";
 import ClippingPlanes from "@ogw_front/components/ClippingPlanes.vue";
+import ExplodeFilter from "@ogw_front/components/ExplodeFilter.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";
@@ -26,6 +27,7 @@ const showCameraOrientation = ref<boolean>(false);
 const showZScaling = ref<boolean>(false);
 const showClippingPlanes = ref<boolean>(false);
 const showShrinkFilter = ref<boolean>(false);
+const showExplodeFilter = ref<boolean>(false);
 const showThresholdFilter = ref<boolean>(false);
 const showRuler = ref<boolean>(false);
 const gridScale = ref<boolean>(false);
@@ -77,6 +79,7 @@ function closeAllToolsExcept(toolRef: Ref<boolean>): void {
     showZScaling,
     showClippingPlanes,
     showShrinkFilter,
+    showExplodeFilter,
     showThresholdFilter,
     showRuler,
     is_picking,
@@ -236,6 +239,15 @@ const camera_options = computed<CameraOptionAction[]>(() => [
       toggleTool(showShrinkFilter);
     },
   },
+  {
+    testId: "explodeFilterButton",
+    tooltip: "Exploded View",
+    icon: "mdi-arrow-expand-all",
+    color: showExplodeFilter.value ? "primary" : undefined,
+    action: (): void => {
+      toggleTool(showExplodeFilter);
+    },
+  },
   {
     testId: "thresholdFilterButton",
     tooltip: "Threshold Filter",
@@ -334,6 +346,10 @@ const camera_options = computed<CameraOptionAction[]>(() => [
     v-model:show="showShrinkFilter"
     :escapeFunction="() => (showShrinkFilter = false)"
   />
+  <ExplodeFilter
+    v-model:show="showExplodeFilter"
+    :escapeFunction="() => (showExplodeFilter = false)"
+  />
   <ThresholdFilter
     v-model:show="showThresholdFilter"
     :escapeFunction="() => (showThresholdFilter = false)"

package/app/stores/api.ts

@@ -1,4 +1,4 @@
-import type { RequestHandlers } from "@ogw_shared/utils/types";
+import type { ParamsOf, RequestHandlers, ResponseOf } from "@ogw_shared/utils/types";
 import { api_fetch } from "@ogw_internal/utils/api_fetch";
 import { consola } from "consola";
 
@@ -8,7 +8,7 @@ interface ApiSchema {
   [key: string]: unknown;
 }
 
-type ApiCallbacks = RequestHandlers & {
+type ApiCallbacks<Response = unknown> = RequestHandlers<Response> & {
   skip_feedback_error?: boolean;
 };
 
@@ -26,21 +26,21 @@ export const useAPIStore = defineStore("api", () => {
     request_counter.value -= 1;
   }
 
-  // `TResult` is asserted, not verified: the response is only checked against `schema` at runtime
-  async function request<TResult = unknown>(
+  // The response type comes from the schema's generated `response` type (see the Cloud API typed schemas), asserted at the API boundary below, not verified
+  async function request<Schema extends ApiSchema>(
     {
       schema,
-      params = {},
+      params,
       headers = {},
-    }: { schema: ApiSchema; params?: Record<string, unknown>; headers?: Record<string, string> },
-    callbacks: ApiCallbacks = {},
-  ): Promise<TResult> {
+    }: { schema: Schema; params?: ParamsOf<Schema>; headers?: Record<string, string> },
+    callbacks: ApiCallbacks<ResponseOf<Schema>> = {},
+  ): Promise<ResponseOf<Schema>> {
     consola.info("[API] Request:", schema.$id);
     const start = Date.now();
 
     const result = await api_fetch(
       { $id: schema.$id, base_url: base_url.value, start_request, stop_request },
-      { schema, params, headers },
+      { schema, params: params ?? {}, headers },
       {
         ...callbacks,
         response_function: async (response: unknown) => {
@@ -52,13 +52,14 @@ export const useAPIStore = defineStore("api", () => {
             "s",
           );
           if (callbacks.response_function) {
-            await callbacks.response_function(response);
+            // oxlint-disable-next-line no-unsafe-type-assertion -- trusted API boundary; see comment above.
+            await callbacks.response_function(response as ResponseOf<Schema>);
           }
         },
       },
     );
     // oxlint-disable-next-line no-unsafe-type-assertion -- trusted API boundary; see comment above.
-    return result as TResult;
+    return result as ResponseOf<Schema>;
   }
   return {
     base_url,

package/app/stores/cloud.ts

@@ -1,9 +1,8 @@
 import { clearCloudUrlParam, getCloudUrlParam } from "@ogw_front/utils/cloud";
-import type { RunCloudResponse } from "@geode/cloud-api/types";
 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_typed_schemas.js";
-import cloud_api_schemas from "@geode/cloud-api/cloud_api_schemas.json";
+import cloud_api_schemas from "@geode/cloud-api/cloud_api_typed_schemas.js";
 import { setAppBaseUrl } from "@ogw_shared/scripts";
 import { useAPIStore } from "@ogw_front/stores/api";
 import { useFeedbackStore } from "@ogw_front/stores/feedback";
@@ -17,10 +16,13 @@ export const useCloudStore = defineStore("cloud", {
   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) {
+    async start(authToken?: string) {
       const existing_host = getCloudUrlParam();
       if (existing_host === undefined) {
-        await this.launch(email);
+        if (authToken === undefined) {
+          throw new Error("Launching a cloud service requires an authenticated user");
+        }
+        await this.launch(authToken);
         return;
       }
       try {
@@ -29,29 +31,23 @@ export const useCloudStore = defineStore("cloud", {
         clearCloudUrlParam();
       }
     },
-    async launch(email: string) {
+    // `authToken` is the user's Firebase ID token, checked by the Cloud API
+    async launch(authToken: string) {
       this.status = Status.CONNECTING;
       const { PROJECT, BRANCH } = useRuntimeConfig().public;
-      const params = { email, project: PROJECT, branch: BRANCH };
+      const params = { project: PROJECT, branch: BRANCH };
+      const headers = { Authorization: `Bearer ${authToken}` };
       const feedbackStore = useFeedbackStore();
       const APIStore = useAPIStore();
-      const result = await APIStore.request<RunCloudResponse>(
-        { schema: run_cloud_schema, params },
+      const result = await APIStore.request(
+        { schema: run_cloud_schema, params, headers },
         {
           request_error_function: () => {
             feedbackStore.$patch({ server_error: true });
             this.status = Status.NOT_CONNECTED;
           },
-          response_function: async (response: unknown) => {
-            if (
-              typeof response !== "object" ||
-              response === null ||
-              !("url" in response) ||
-              typeof response.url !== "string"
-            ) {
-              return;
-            }
-            await this.on_connected(response.url);
+          response_function: async ({ url }) => {
+            await this.on_connected(url);
           },
           response_error_function: () => {
             feedbackStore.$patch({ server_error: true });

package/app/stores/infra.ts

@@ -44,7 +44,7 @@ export const useInfraStore = defineStore("infra", {
         (microservice: Microservice) => microservice.$id !== microserviceId,
       );
     },
-    async create_backend(email?: string) {
+    async create_backend(authToken?: string) {
       if (this.status === Status.CREATED) {
         return undefined;
       }
@@ -56,7 +56,7 @@ export const useInfraStore = defineStore("infra", {
         if (this.app_mode === appMode.CLOUD) {
           const cloudStore = useCloudStore();
           try {
-            await cloudStore.start(email ?? "");
+            await cloudStore.start(authToken);
           } catch (error) {
             // Back to the "Load the app" button so the user is not stuck on the loading screen.
             this.status = Status.NOT_CREATED;

package/internal/stores/hybrid_viewer/filters.ts

@@ -1,3 +1,4 @@
+import type { JsonRpcSchema, ParamsOf, ResponseOf } from "@ogw_shared/utils/types.js";
 import viewer_schemas, {
   type ViewerClippingPlanesParams,
 } from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_typed_schemas.js";
@@ -5,55 +6,51 @@ import type { SliceAxis } from "@ogw_front/utils/slice";
 import { useHybridViewerCore } from "./core";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
+async function requestAndRender<Schema extends JsonRpcSchema>(
+  schema: Schema,
+  params: ParamsOf<Schema>,
+): Promise<ResponseOf<Schema>> {
+  const viewerStore = useViewerStore();
+  const { remoteRender } = useHybridViewerCore();
+  const response = await viewerStore.request({
+    schema,
+    params,
+  });
+  await remoteRender();
+  return response;
+}
+
 async function setClippingPlanes(
   ids: string[],
   planes: ViewerClippingPlanesParams["planes"],
 ): Promise<void> {
-  const viewerStore = useViewerStore();
-  const { remoteRender } = useHybridViewerCore();
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.clipping_planes;
-  const params = {
+  await requestAndRender(viewer_schemas.opengeodeweb_viewer.viewer.clipping_planes, {
     ids,
     planes,
-  };
-  await viewerStore.request({
-    schema,
-    params,
   });
-  await remoteRender();
 }
 async function setShrink(ids: string[], shrink_factor: number): Promise<void> {
-  const viewerStore = useViewerStore();
-  const { remoteRender } = useHybridViewerCore();
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.shrink;
-  const params = {
+  await requestAndRender(viewer_schemas.opengeodeweb_viewer.viewer.shrink, {
     ids,
     shrink_factor,
-  };
-  await viewerStore.request({
-    schema,
-    params,
   });
-  await remoteRender();
+}
+async function setExplode(ids: string[], explode_factor: number): Promise<void> {
+  await requestAndRender(viewer_schemas.opengeodeweb_viewer.viewer.explode, {
+    ids,
+    explode_factor,
+  });
 }
 async function setSlice(
   ids: string[],
   slices: { axis: SliceAxis; index: number }[],
 ): Promise<[number, number, number]> {
-  const viewerStore = useViewerStore();
-  const { remoteRender } = useHybridViewerCore();
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.slice;
-  const params = {
-    ids,
-    slices,
-  };
   const {
     max_indices: [max_i = 0, max_j = 0, max_k = 0],
-  } = await viewerStore.request({
-    schema,
-    params,
+  } = await requestAndRender(viewer_schemas.opengeodeweb_viewer.viewer.slice, {
+    ids,
+    slices,
   });
-  await remoteRender();
   return [max_i, max_j, max_k];
 }
 interface ThresholdAttribute {
@@ -64,22 +61,15 @@ interface ThresholdAttribute {
   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 = {
+  await requestAndRender(viewer_schemas.opengeodeweb_viewer.viewer.threshold, {
     ids,
     attribute,
-  };
-  await viewerStore.request({
-    schema,
-    params,
   });
-  await remoteRender();
 }
 function useHybridViewerFilters(): {
   setClippingPlanes: (ids: string[], planes: ViewerClippingPlanesParams["planes"]) => Promise<void>;
   setShrink: (ids: string[], shrink_factor: number) => Promise<void>;
+  setExplode: (ids: string[], explode_factor: number) => Promise<void>;
   setSlice: (
     ids: string[],
     slices: { axis: SliceAxis; index: number }[],
@@ -89,6 +79,7 @@ function useHybridViewerFilters(): {
   return {
     setClippingPlanes,
     setShrink,
+    setExplode,
     setSlice,
     setThreshold,
   };

package/package.json

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

package/app/components/Recaptcha.vue

@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import { useInfraStore } from "@ogw_front/stores/infra";
-
-interface Props {
-  buttonLabel?: string;
-  buttonColor?: string;
-  color?: string;
-}
-
-const {
-  buttonLabel = "Load the app",
-  buttonColor = "white",
-  color = undefined,
-} = defineProps<Props>();
-
-const name = ref("");
-const email = ref("");
-const launch = ref(false);
-const valid = ref(false);
-const emailRules = [
-  (value: string): boolean | string => {
-    if (value) {
-      return true;
-    }
-    return "E-mail is required.";
-  },
-  (value: string): boolean | string => {
-    if (/.+@.+\..+/u.test(value)) {
-      return true;
-    }
-    return "E-mail must be valid.";
-  },
-];
-
-function submit(): Promise<void> {
-  const infraStore = useInfraStore();
-  return infraStore.create_backend(email.value);
-}
-</script>
-
-<template>
-  <VRow align="center" justify="center" style="display: none">
-    <VCol cols="4">
-      <VForm v-model="valid">
-        <VContainer>
-          <VRow>
-            <VCol>
-              <VTextField v-model="name" label="Name" required />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol>
-              <VTextField v-model="email" :rules="emailRules" label="E-mail" required />
-            </VCol>
-          </VRow>
-          <VRow>
-            <VCol>
-              <VCheckbox label="Load the app" v-model="launch" />
-            </VCol>
-          </VRow>
-        </VContainer>
-      </VForm>
-    </VCol>
-  </VRow>
-  <VRow align="center" justify="center">
-    <VCol cols="auto" class="d-flex justify-center align-center">
-      <VBtn class="load-btn" :text="buttonLabel" :color="color || buttonColor" @click="submit" />
-    </VCol>
-  </VRow>
-</template>
-
-<style scoped>
-.load-btn {
-  padding: 0 40px !important;
-  height: 50px !important;
-  border-radius: 8px;
-  text-transform: none !important;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-  transition:
-    transform 0.2s ease,
-    box-shadow 0.2s ease !important;
-}
-
-.load-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
-}
-</style>