@geode/opengeodeweb-front 10.32.2 → 10.33.0-rc.1

package/app/components/Viewer/Options/AttributeColorBar.vue

@@ -1,4 +1,5 @@
 <script setup>
+import AttributeRangeSelector from "./AttributeRangeSelector.vue";
 import ColorMapPicker from "./ColorMapPicker.vue";
 
 const emit = defineEmits(["reset"]);
@@ -11,43 +12,12 @@ const colorMap = defineModel("colorMap", { type: String });
 <template>
   <div class="attribute-colorbar mt-3">
     <ColorMapPicker v-model:selected-preset-name="colorMap" :min="minimum" :max="maximum" />
-    <v-row dense align="center" class="mt-2" no-gutters>
-      <v-col cols="5" class="pe-1">
-        <v-text-field
-          data-testid="attributeMinInput"
-          :model-value="minimum"
-          @update:model-value="(value) => (minimum = Number(value))"
-          label="Min"
-          type="number"
-          :max="maximum"
-          density="compact"
-          hide-details
-          variant="outlined"
-        />
-      </v-col>
-      <v-col cols="2" class="d-flex justify-center">
-        <v-btn
-          icon="mdi-arrow-left-right"
-          size="x-small"
-          variant="text"
-          @click="emit('reset')"
-          v-tooltip="'Reset range'"
-        />
-      </v-col>
-      <v-col cols="5" class="ps-1">
-        <v-text-field
-          data-testid="attributeMaxInput"
-          :model-value="maximum"
-          @update:model-value="(value) => (maximum = Number(value))"
-          label="Max"
-          type="number"
-          :min="minimum"
-          density="compact"
-          hide-details
-          variant="outlined"
-        />
-      </v-col>
-    </v-row>
+    <AttributeRangeSelector
+      v-model:minimum="minimum"
+      v-model:maximum="maximum"
+      class="mt-2"
+      @reset="emit('reset')"
+    />
   </div>
 </template>
 

package/app/components/Viewer/Options/AttributeRangeSelector.vue

@@ -0,0 +1,48 @@
+<script setup>
+const emit = defineEmits(["reset"]);
+
+const minimum = defineModel("minimum", { type: Number });
+const maximum = defineModel("maximum", { type: Number });
+</script>
+
+<template>
+  <v-row dense align="center" no-gutters>
+    <v-col cols="5" class="pe-1">
+      <v-text-field
+        data-testid="attributeMinInput"
+        :model-value="minimum"
+        @update:model-value="(value) => (minimum = Number(value))"
+        label="Min"
+        type="number"
+        :max="maximum"
+        density="compact"
+        hide-details
+        variant="outlined"
+      />
+    </v-col>
+    <v-col cols="2" class="d-flex justify-center">
+      <v-btn
+        data-testid="resetRangeButton"
+        aria-label="Reset range"
+        icon="mdi-arrow-left-right"
+        size="x-small"
+        variant="text"
+        @click="emit('reset')"
+        v-tooltip="'Reset range'"
+      />
+    </v-col>
+    <v-col cols="5" class="ps-1">
+      <v-text-field
+        data-testid="attributeMaxInput"
+        :model-value="maximum"
+        @update:model-value="(value) => (maximum = Number(value))"
+        label="Max"
+        type="number"
+        :min="minimum"
+        density="compact"
+        hide-details
+        variant="outlined"
+      />
+    </v-col>
+  </v-row>
+</template>

package/app/components/Viewer/Options/AttributeSelector.vue

@@ -1,5 +1,6 @@
 <script setup>
 import ViewerOptionsAttributeColorBar from "@ogw_front/components/Viewer/Options/AttributeColorBar.vue";
+import { getAttributeRange } from "@ogw_front/utils/attributes";
 import { useBackStore } from "@ogw_front/stores/back";
 
 const backStore = useBackStore();
@@ -17,6 +18,9 @@ const { id, componentIds, schema } = defineProps({
 
 const attributes = ref([]);
 
+const currentAttribute = computed(() =>
+  attributes.value.find((attr) => attr.attribute_name === attributeName.value),
+);
 const rangeMin = computed({
   get: () => (attributeRange.value ? attributeRange.value[0] : undefined),
   set: (val) => {
@@ -40,10 +44,6 @@ const rangeMax = computed({
   },
 });
 
-const currentAttribute = computed(() =>
-  attributes.value.find((attr) => attr.attribute_name === attributeName.value),
-);
-
 const componentItems = computed(() => {
   if (!currentAttribute.value) {
     return [];
@@ -57,10 +57,8 @@ const componentItems = computed(() => {
 function resetRange() {
   if (currentAttribute.value) {
     const comp = attributeItem.value ?? 0;
-    attributeRange.value = [
-      currentAttribute.value.min_values[comp],
-      currentAttribute.value.max_values[comp],
-    ];
+    const { min, max } = getAttributeRange(currentAttribute.value, comp);
+    attributeRange.value = [min, max];
   }
 }
 

package/app/components/Viewer/Options/ColorMapList.vue

@@ -168,6 +168,7 @@ watch(filteredPresets, drawAllCanvases);
         </v-list-item>
       </template>
     </v-list>
+    <slot></slot>
   </GlassCard>
 </template>
 

package/app/components/Viewer/Options/ColormapQuickPicker.vue

@@ -1,9 +1,9 @@
 <script setup>
+import AttributeRangeSelector from "@ogw_front/components/Viewer/Options/AttributeRangeSelector.vue";
 import ColorMapList from "@ogw_front/components/Viewer/Options/ColorMapList.vue";
-import { getPresetsWithCurrentAtTop } from "@ogw_front/utils/colormap";
 
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { getPresetsWithCurrentAtTop } from "@ogw_front/utils/colormap";
+import { useGlobalAttributeStyle } from "@ogw_front/composables/global_attribute_style";
 
 const { dataId, x, y } = defineProps({
   dataId: { required: false, type: String, default: undefined },
@@ -13,94 +13,28 @@ const { dataId, x, y } = defineProps({
 
 const show = defineModel("show", { type: Boolean, default: false });
 
-const dataStyleStore = useDataStyleStore();
-const hybridViewerStore = useHybridViewerStore();
-
-const componentNames = [
-  { getterKey: "meshPoints", setterKey: "MeshPoints", key: "points" },
-  { getterKey: "meshEdges", setterKey: "MeshEdges", key: "edges" },
-  { getterKey: "meshPolygons", setterKey: "MeshPolygons", key: "polygons" },
-  { getterKey: "meshCells", setterKey: "MeshCells", key: "cells" },
-  { getterKey: "meshPolyhedra", setterKey: "MeshPolyhedra", key: "polyhedra" },
-];
-
-const current = computed(() => {
-  const targetId = dataId;
-  if (!targetId) {
-    return "batlow";
-  }
-
-  const style = dataStyleStore.getStyle(targetId);
-  if (!style) {
-    return "batlow";
-  }
-
-  for (const { key, getterKey } of componentNames) {
-    if (!style[key] || !style[key].coloring) {
-      continue;
-    }
-
-    const activeColoring = style[key].coloring.active;
-    if (!["vertex", "edge", "polygon", "cell", "polyhedron"].includes(activeColoring)) {
-      continue;
-    }
-
-    const attributeType = `${activeColoring.charAt(0).toUpperCase()}${activeColoring.slice(1)}Attribute`;
-    const getterName = `${getterKey}${attributeType}ColorMap`;
-    const getter = dataStyleStore[getterName];
-
-    if (!getter) {
-      continue;
-    }
+const dataIdRef = computed(() => dataId);
+const { currentColormap, currentRange, applyGlobalColormap, resetGlobalRange } =
+  useGlobalAttributeStyle(dataIdRef);
 
-    const colorMap = getter(targetId);
-    if (colorMap) {
-      return colorMap;
-    }
-  }
+const minimum = computed({
+  get: () => currentRange.value[0],
+  set: (val) => {
+    currentRange.value = [val, currentRange.value[1]];
+  },
+});
 
-  return "batlow";
+const maximum = computed({
+  get: () => currentRange.value[1],
+  set: (val) => {
+    currentRange.value = [currentRange.value[0], val];
+  },
 });
 
-const quickColormapPresets = computed(() => getPresetsWithCurrentAtTop(current.value));
+const quickColormapPresets = computed(() => getPresetsWithCurrentAtTop(currentColormap.value));
 
 async function onQuickColormapSelect(preset) {
-  show.value = false;
-  const newMap = preset.Name;
-  const targetId = dataId;
-  if (!targetId) {
-    return;
-  }
-
-  const style = dataStyleStore.getStyle(targetId);
-  if (!style) {
-    return;
-  }
-
-  const promises = [];
-
-  for (const { key, setterKey } of componentNames) {
-    if (!style[key] || !style[key].coloring) {
-      continue;
-    }
-
-    const activeColoring = style[key].coloring.active;
-    if (!["vertex", "edge", "polygon", "cell", "polyhedron"].includes(activeColoring)) {
-      continue;
-    }
-
-    const attributeType = `${activeColoring.charAt(0).toUpperCase() + activeColoring.slice(1)}Attribute`;
-    const setterName = `set${setterKey}${attributeType}ColorMap`;
-    const setter = dataStyleStore[setterName];
-
-    if (setter) {
-      promises.push(setter(targetId, newMap));
-    }
-  }
-
-  await Promise.all(promises);
-
-  hybridViewerStore.remoteRender();
+  await applyGlobalColormap(preset.Name);
 }
 </script>
 
@@ -114,8 +48,15 @@ async function onQuickColormapSelect(preset) {
   >
     <ColorMapList
       :presets="quickColormapPresets"
-      :selected-preset-name="current"
+      :selected-preset-name="currentColormap"
       @select="onQuickColormapSelect"
-    />
+    >
+      <v-divider class="my-2"></v-divider>
+      <AttributeRangeSelector
+        v-model:minimum="minimum"
+        v-model:maximum="maximum"
+        @reset="resetGlobalRange"
+      />
+    </ColorMapList>
   </v-menu>
 </template>

package/app/composables/global_attribute_style.js

@@ -0,0 +1,181 @@
+import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json";
+import { computed } from "vue";
+
+import { getAttributeRange } from "@ogw_front/utils/attributes";
+import { useBackStore } from "@ogw_front/stores/back";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+export function useGlobalAttributeStyle(dataIdRef) {
+  const dataStyleStore = useDataStyleStore();
+  const hybridViewerStore = useHybridViewerStore();
+  const backStore = useBackStore();
+
+  const componentNames = [
+    { getterKey: "meshPoints", setterKey: "MeshPoints", key: "points" },
+    { getterKey: "meshEdges", setterKey: "MeshEdges", key: "edges" },
+    { getterKey: "meshPolygons", setterKey: "MeshPolygons", key: "polygons" },
+    { getterKey: "meshCells", setterKey: "MeshCells", key: "cells" },
+    { getterKey: "meshPolyhedra", setterKey: "MeshPolyhedra", key: "polyhedra" },
+  ];
+
+  function getActiveComponents(targetId) {
+    const style = dataStyleStore.getStyle(targetId);
+    const activeComponents = [];
+    if (!style) {
+      return activeComponents;
+    }
+    for (const { key, getterKey, setterKey } of componentNames) {
+      if (!style[key] || !style[key].coloring) {
+        continue;
+      }
+
+      const activeColoring = style[key].coloring.active;
+      if (!["vertex", "edge", "polygon", "cell", "polyhedron"].includes(activeColoring)) {
+        continue;
+      }
+
+      const attributeType = `${activeColoring.charAt(0).toUpperCase()}${activeColoring.slice(1)}Attribute`;
+      activeComponents.push({ activeColoring, attributeType, getterKey, setterKey });
+    }
+    return activeComponents;
+  }
+
+  const currentColormap = computed(() => {
+    const targetId = dataIdRef.value;
+    if (!targetId) {
+      return "batlow";
+    }
+
+    for (const comp of getActiveComponents(targetId)) {
+      const getterName = `${comp.getterKey}${comp.attributeType}ColorMap`;
+      const getter = dataStyleStore[getterName];
+      if (getter) {
+        const colorMap = getter(targetId);
+        if (colorMap) {
+          return colorMap;
+        }
+      }
+    }
+
+    return "batlow";
+  });
+
+  const currentRange = computed({
+    get() {
+      const targetId = dataIdRef.value;
+      if (!targetId) {
+        return [0, 1];
+      }
+
+      for (const comp of getActiveComponents(targetId)) {
+        const getterName = `${comp.getterKey}${comp.attributeType}Range`;
+        const getter = dataStyleStore[getterName];
+        if (getter) {
+          const range = getter(targetId);
+          if (range && range.length === 2) {
+            return range;
+          }
+        }
+      }
+      return [0, 1];
+    },
+    set(newValue) {
+      const targetId = dataIdRef.value;
+      if (!targetId) {
+        return;
+      }
+
+      let updated = false;
+      for (const comp of getActiveComponents(targetId)) {
+        const setterName = `set${comp.setterKey}${comp.attributeType}Range`;
+        const setter = dataStyleStore[setterName];
+        if (setter) {
+          setter(targetId, newValue[0], newValue[1]);
+          updated = true;
+        }
+      }
+      if (updated) {
+        hybridViewerStore.remoteRender();
+      }
+    },
+  });
+
+  async function applyGlobalColormap(newMap) {
+    const targetId = dataIdRef.value;
+    if (!targetId) {
+      return;
+    }
+
+    const promises = [];
+
+    for (const comp of getActiveComponents(targetId)) {
+      const setterName = `set${comp.setterKey}${comp.attributeType}ColorMap`;
+      const setter = dataStyleStore[setterName];
+
+      if (setter) {
+        promises.push(setter(targetId, newMap));
+      }
+    }
+
+    await Promise.all(promises);
+    hybridViewerStore.remoteRender();
+  }
+
+  function resetGlobalRange() {
+    const targetId = dataIdRef.value;
+    if (!targetId) {
+      return;
+    }
+
+    for (const comp of getActiveComponents(targetId)) {
+      const { activeColoring, attributeType, getterKey, setterKey } = comp;
+
+      const nameGetter = dataStyleStore[`${getterKey}${attributeType}Name`];
+      const itemGetter = dataStyleStore[`${getterKey}${attributeType}Item`];
+      if (!nameGetter || !itemGetter) {
+        continue;
+      }
+
+      const attrName = nameGetter(targetId);
+      const attrItem = itemGetter(targetId) ?? 0;
+
+      if (!attrName) {
+        continue;
+      }
+
+      const schemaName = `${activeColoring}_attribute_names`;
+      const schema = back_schemas.opengeodeweb_back[schemaName];
+      if (!schema) {
+        continue;
+      }
+
+      backStore.request(
+        { schema, params: { id: targetId } },
+        {
+          response_function: (response) => {
+            const attributes = response.attributes || [];
+            const currentAttribute = attributes.find((attr) => attr.attribute_name === attrName);
+            if (currentAttribute) {
+              const { min, max } = getAttributeRange(currentAttribute, attrItem);
+
+              const setterName = `set${setterKey}${attributeType}Range`;
+              const setter = dataStyleStore[setterName];
+              if (setter) {
+                setter(targetId, min, max);
+                hybridViewerStore.remoteRender();
+              }
+            }
+          },
+        },
+      );
+    }
+  }
+
+  return {
+    currentColormap,
+    currentRange,
+    applyGlobalColormap,
+    resetGlobalRange,
+  };
+}

package/app/stores/viewer.js

@@ -1,11 +1,9 @@
 // Third party imports
-import vtkWSLinkClient, { newInstance } from "@kitware/vtk.js/IO/Core/WSLinkClient";
 import _ from "lodash";
 // oxlint-disable-next-line no-unassigned-import
 import "@kitware/vtk.js/Rendering/OpenGL/Profiles/Geometry";
-import SmartConnect from "wslink/src/SmartConnect";
 import { connectImageStream } from "@kitware/vtk.js/Rendering/Misc/RemoteView";
-
+import { initWebSocketClient } from "@ogw_internal/utils/ws_client";
 import opengeodeweb_front_schemas from "@geode/opengeodeweb-front/opengeodeweb_front_schemas.json" with { type: "json" };
 import opengeodeweb_viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json" with { type: "json" };
 
@@ -37,7 +35,6 @@ export const useViewerStore = defineStore(
     const request_counter = ref(0);
     const status = ref(Status.NOT_CONNECTED);
     const version = ref("0.0.0");
-    const busy = ref(0);
 
     const protocol = computed(() => getWebsocketApiProtocol());
 
@@ -77,29 +74,10 @@ export const useViewerStore = defineStore(
         try {
           console.log("VIEWER LOCK GRANTED !", lock);
           status.value = Status.CONNECTING;
-          vtkWSLinkClient.setSmartConnectClass(SmartConnect);
-
-          if (_.isEmpty(client.value)) {
-            client.value = newInstance();
-          }
-
-          client.value.onBusyChange((count) => {
-            busy.value = count;
-          });
-          client.value.onConnectionError((httpReq) => {
-            const message = httpReq?.response?.error || `Connection error`;
-            console.error(message);
-          });
-          client.value.onConnectionClose((httpReq) => {
-            const message = httpReq?.response?.error || `Connection close`;
-            status.value = Status.NOT_CONNECTED;
-            console.error(message);
-          });
-
-          client.value.beginBusy();
-          await client.value.connect({
-            application: "Viewer",
-            sessionURL: base_url.value,
+          client.value = await initWebSocketClient(base_url.value, client.value, {
+            onConnectionClose: () => {
+              status.value = Status.NOT_CONNECTED;
+            },
           });
           connectImageStream(client.value.getConnection().getSession());
           client.value.endBusy();

package/app/utils/attributes.js

@@ -0,0 +1,23 @@
+export function getAttributeRange(currentAttribute, compIndex = 0) {
+  if (!currentAttribute) {
+    return { min: 0, max: 1 };
+  }
+
+  const { min_values, max_values, min_value, max_value } = currentAttribute;
+  let min = 0;
+  let max = 1;
+
+  if (min_values && min_values[compIndex] !== undefined) {
+    min = min_values[compIndex];
+  } else if (compIndex === 0 && min_value !== undefined) {
+    min = min_value;
+  }
+
+  if (max_values && max_values[compIndex] !== undefined) {
+    max = max_values[compIndex];
+  } else if (compIndex === 0 && max_value !== undefined) {
+    max = max_value;
+  }
+
+  return { min, max };
+}

package/internal/stores/data_style/mesh/points/common.js

@@ -9,6 +9,10 @@ export function useMeshPointsCommonStyle() {
     });
   }
 
+  function mutateMeshPointsVisibility(response) {
+    return mutateMeshPointsStyle(response.id, { visibility: response.visibility });
+  }
+
   function meshPointsStyle(id) {
     return dataStyleState.getStyle(id).points;
   }
@@ -26,7 +30,8 @@ export function useMeshPointsCommonStyle() {
   return {
     meshPointsStyle,
     meshPointsColoring,
-    mutateMeshPointsStyle,
     mutateMeshPointsColoring,
+    mutateMeshPointsStyle,
+    mutateMeshPointsVisibility,
   };
 }

package/internal/stores/data_style/mesh/points/visibility.js

@@ -23,7 +23,9 @@ export function useMeshPointsVisibilityStyle() {
         params,
       },
       {
-        response_function: () => meshPointsCommonStyle.mutateMeshPointsStyle(id, { visibility }),
+        response_function(response) {
+          return meshPointsCommonStyle.mutateMeshPointsVisibility(response);
+        },
       },
     );
   }

package/internal/utils/api_fetch.js

@@ -15,8 +15,8 @@ export function api_fetch(
   return fetchSchema(
     {
       schema,
-      baseURL: microservice.base_url,
       params,
+      baseURL: microservice.base_url,
       headers,
       max_retry: schema.max_retry,
       timeout,

package/internal/utils/viewer_call.js

@@ -1,12 +1,6 @@
-// Third party imports
-import pTimeout from "p-timeout";
-
-// Local imports
 import { endRequestLog, startRequestLog } from "@ogw_front/utils/log";
+import { callSchema } from "@ogw_shared/utils/call_schema";
 import { useFeedbackStore } from "@ogw_front/stores/feedback";
-import { validate_schema } from "@ogw_shared/utils/validate_schema";
-
-const ERROR_400 = 400;
 
 export function viewer_call(
   microservice,
@@ -14,52 +8,42 @@ export function viewer_call(
   { request_error_function, response_function, response_error_function } = {},
 ) {
   const feedbackStore = useFeedbackStore();
-
-  const { valid, error: schema_error } = validate_schema(schema, params);
-
-  if (!valid) {
-    if (process.env.NODE_ENV !== "production") {
-      console.log("Bad request", schema_error, schema, params);
-    }
-    feedbackStore.add_error(ERROR_400, schema.$id, "Bad request", schema_error);
-    throw new Error(`${schema.$id}: ${schema_error}`);
-  }
-
   const { client } = microservice;
 
-  async function performCall() {
-    if (!client.getConnection) {
-      return;
-    }
-    microservice.start_request();
-    const requestStart = startRequestLog(microservice, schema);
-    try {
-      const value = await client.getConnection().getSession().call(schema.$id, [params]);
-      endRequestLog(microservice, schema, requestStart);
-      if (response_function) {
-        await response_function(value);
-      }
-      return value;
-    } catch (error) {
-      feedbackStore.add_error(error.code, schema.$id, error.message, error.message);
-      if (request_error_function) {
-        request_error_function(error);
-      }
-      if (response_error_function) {
-        response_error_function(error);
-      }
-      throw error;
-    } finally {
-      microservice.stop_request();
-    }
-  }
-
-  if (timeout > 0) {
-    return pTimeout(performCall(), {
-      milliseconds: timeout,
-      message: `${schema.$id}: Timed out after ${timeout}ms`,
-    });
-  }
-
-  return performCall();
+  const requestStartingTime = startRequestLog(microservice, schema);
+  return callSchema(
+    {
+      schema,
+      params,
+      client,
+      timeout,
+    },
+    {
+      request_error_function(error) {
+        microservice.stop_request();
+        feedbackStore.add_error(error.code, schema.$id, error.message, error.message);
+        if (request_error_function) {
+          request_error_function(error);
+        }
+      },
+      response_function(data) {
+        endRequestLog(microservice, schema, requestStartingTime);
+        microservice.stop_request();
+        if (response_function) {
+          response_function(data);
+        }
+      },
+      response_error_function(response) {
+        microservice.stop_request();
+        feedbackStore.add_error(error.code, schema.$id, error.message, error.message);
+        if (response_error_function) {
+          response_error_function(response);
+        }
+      },
+      validation_error_function({ code, name, error }) {
+        microservice.stop_request();
+        feedbackStore.add_error(code, schema.$id, name, error);
+      },
+    },
+  );
 }

package/internal/utils/ws_client.js

@@ -0,0 +1,29 @@
+// Third party imports
+import vtkWSLinkClient, { newInstance } from "@kitware/vtk.js/IO/Core/WSLinkClient";
+import SmartConnect from "wslink/src/SmartConnect";
+import _ from "lodash";
+
+async function initWebSocketClient(baseUrl, initialClient = {}, { onConnectionClose } = {}) {
+  vtkWSLinkClient.setSmartConnectClass(SmartConnect);
+  const client = _.isEmpty(initialClient) ? newInstance() : initialClient;
+
+  client.onConnectionError((httpReq) => {
+    const message = httpReq?.response?.error || `Connection error`;
+    console.error(message);
+  });
+  client.onConnectionClose((httpReq) => {
+    const message = httpReq?.response?.error || `Connection close`;
+    onConnectionClose();
+    console.error(message);
+  });
+
+  client.beginBusy();
+  await client.connect({
+    application: "Viewer",
+    sessionURL: baseUrl,
+  });
+
+  return client;
+}
+
+export { initWebSocketClient };

package/nuxt.config.js

@@ -62,13 +62,36 @@ export default defineNuxtConfig({
   vite: {
     optimizeDeps: {
       include: [
+        "@kitware/vtk.js",
+        "@kitware/vtk.js/Common/Core/Math",
+        "@kitware/vtk.js/IO/Core/WSLinkClient",
+        "@kitware/vtk.js/IO/XML/XMLPolyDataReader",
+        "@kitware/vtk.js/Rendering/Core/Actor",
+        "@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor",
+        "@kitware/vtk.js/Rendering/Core/ColorTransferFunction",
+        "@kitware/vtk.js/Rendering/Core/Mapper",
+        "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow",
+        "@kitware/vtk.js/Rendering/Misc/RemoteView",
+        "@kitware/vtk.js/Rendering/OpenGL/Profiles/Geometry",
+        "@kitware/vtk.js/Widgets/Core/WidgetManager",
+        "@kitware/vtk.js/Widgets/Widgets3D/ImplicitPlaneWidget",
+        "@vue/devtools-core",
+        "@vue/devtools-kit",
         "ajv",
-        "fast-deep-equal",
+        "broadcast-channel",
+        "dexie",
         "globalthis",
         "h3",
         "js-file-download",
         "lodash",
+        "lodash/merge",
+        "p-timeout",
         "seedrandom",
+        "spark-md5",
+        "uuid",
+        "wslink",
+        "wslink/src/SmartConnect",
+        "xmlbuilder2",
       ],
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.32.2",
+  "version": "10.33.0-rc.1",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {
@@ -39,8 +39,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",

package/server/utils/server_config.js

@@ -1,3 +1,5 @@
+import { createServerWsRpcClient } from "./ws_client.js";
+
 const storage = new Map();
 
 function getAppBaseUrl() {
@@ -25,13 +27,36 @@ function setIsAppReady(isAppReady) {
   return storage.set("IS_APP_READY", isAppReady);
 }
 
+async function getViewerWebSocketClient() {
+  const viewerClient = storage.get("VIEWER_CLIENT") ?? undefined;
+  if (viewerClient?.isOpen()) {
+    return viewerClient;
+  }
+  const viewerBaseUrl = await getViewerBaseUrl();
+  return setViewerWebSocketClient(viewerBaseUrl);
+}
+
+async function setViewerWebSocketClient(baseUrl) {
+  const client = createServerWsRpcClient(baseUrl);
+  client.onConnectionClose(() => {
+    if (viewerClient === client) {
+      viewerClient = undefined;
+    }
+  });
+  await client.ready;
+  storage.set("VIEWER_CLIENT", client);
+  return client;
+}
+
 export {
   getAppBaseUrl,
   getBackBaseUrl,
   getIsAppReady,
   getViewerBaseUrl,
+  getViewerWebSocketClient,
   setAppBaseUrl,
   setBackBaseUrl,
   setIsAppReady,
   setViewerBaseUrl,
+  setViewerWebSocketClient,
 };

package/server/utils/ws_client.js

@@ -0,0 +1,112 @@
+// Third party imports
+import { WebSocket } from "ws";
+import { v4 as uuidv4 } from "uuid";
+
+// Local imports
+
+const HELLO_ID = "system:hello";
+const HELLO_SECRET = "wslink-secret";
+
+//oxlint-disable-next-line max-lines-per-function
+function createServerWsRpcClient(baseUrl) {
+  const socket = new WebSocket(baseUrl);
+  const pending = new Map();
+  let onCloseCallback = undefined;
+  let onErrorCallback = undefined;
+
+  //oxlint-disable-next-line promise/avoid-new
+  const ready = new Promise((resolve, reject) => {
+    socket.on("open", () => {
+      socket.send(
+        JSON.stringify({
+          id: HELLO_ID,
+          method: "wslink.hello",
+          args: [{ secret: HELLO_SECRET }],
+        }),
+      );
+    });
+
+    socket.on("message", (raw) => {
+      console.log("RAW WS MESSAGE:", raw.toString());
+      let message = undefined;
+      try {
+        message = JSON.parse(raw.toString());
+      } catch {
+        return;
+      }
+
+      if (message.id === HELLO_ID) {
+        resolve();
+        return;
+      }
+
+      if (typeof message.id === "string" && message.id.startsWith("publish:")) {
+        return;
+      }
+
+      const entry = pending.get(message.id);
+      if (!entry) {
+        return;
+      }
+      pending.delete(message.id);
+      if (message.error) {
+        entry.reject(new Error(message.error.message || "wslink RPC error"));
+      } else {
+        entry.resolve(message.result);
+      }
+    });
+
+    socket.on("error", (error) => {
+      onErrorCallback?.(error);
+      reject(error);
+    });
+
+    socket.on("close", () => {
+      onCloseCallback?.();
+      for (const { reject: rejectPending } of pending.values()) {
+        rejectPending(new Error("WebSocket closed"));
+      }
+      pending.clear();
+    });
+  });
+
+  async function call(rpc, params = {}) {
+    await ready;
+    const id = uuidv4();
+    //oxlint-disable-next-line promise/avoid-new
+    return new Promise((resolve, reject) => {
+      pending.set(id, { resolve, reject });
+      socket.send(
+        JSON.stringify({
+          wslink: "1.0",
+          id,
+          method: rpc,
+          args: [params],
+          kwargs: { stream: true },
+        }),
+      );
+    });
+  }
+
+  function close() {
+    socket.close();
+  }
+
+  function isOpen() {
+    return socket.readyState === WebSocket.OPEN;
+  }
+
+  //oxlint-disable-next-line promise/prefer-await-to-callbacks
+  function onConnectionClose(callback) {
+    onCloseCallback = callback;
+  }
+
+  //oxlint-disable-next-line promise/prefer-await-to-callbacks
+  function onConnectionError(callback) {
+    onErrorCallback = callback;
+  }
+
+  return { call, close, isOpen, onConnectionClose, onConnectionError, ready };
+}
+
+export { createServerWsRpcClient };

package/shared/utils/call_raw.js

@@ -0,0 +1,46 @@
+// Third party imports
+import _ from "lodash";
+import pTimeout from "p-timeout";
+
+// Local imports
+
+function callClient({ rpc, params = {}, client }) {
+  if (globalThis.window !== undefined) {
+    return client.getConnection().getSession().call(rpc, [params]);
+  }
+  return client.call(rpc, params);
+}
+
+function callRaw(
+  { rpc, params = {}, client, timeout },
+  { request_error_function, response_function, response_error_function } = {},
+) {
+  async function performCall() {
+    try {
+      const response = await callClient({ rpc, params, client });
+      if (response_function) {
+        await response_function(response);
+      }
+      return response;
+    } catch (error) {
+      if (request_error_function) {
+        request_error_function(error);
+      }
+      if (response_error_function) {
+        response_error_function(error);
+      }
+      throw error;
+    }
+  }
+
+  if (timeout > 0) {
+    return pTimeout(performCall(), {
+      milliseconds: timeout,
+      message: `${rpc}: Timed out after ${timeout}ms`,
+    });
+  }
+
+  return performCall();
+}
+
+export { callRaw };

package/shared/utils/call_schema.js

@@ -0,0 +1,45 @@
+// Third party imports
+
+// Local imports
+import { callRaw } from "./call_raw.js";
+import { validateSchema } from "./validate_schema.js";
+
+const ERROR_400 = 400;
+
+function callSchema(
+  { schema, params = {}, client, timeout },
+  {
+    request_error_function,
+    response_function,
+    response_error_function,
+    validation_error_function,
+  } = {},
+) {
+  const { valid, error: schema_error } = validateSchema(schema, params);
+
+  if (!valid) {
+    if (process.env.NODE_ENV !== "production") {
+      console.log("Bad request", schema_error, schema, params);
+    }
+    if (validation_error_function) {
+      validation_error_function({ code: ERROR_400, name: "Bad request", error: schema_error });
+    }
+    throw new Error(`${schema.$id}: ${schema_error}`);
+  }
+
+  return callRaw(
+    {
+      rpc: schema.$id,
+      params,
+      client,
+      timeout,
+    },
+    {
+      request_error_function,
+      response_function,
+      response_error_function,
+    },
+  );
+}
+
+export { callSchema };

package/shared/utils/fetch_schema.js

@@ -2,7 +2,7 @@
 
 // Local imports
 import { fetchRaw } from "./fetch_raw.js";
-import { validate_schema } from "./validate_schema.js";
+import { validateSchema } from "./validate_schema.js";
 
 const ERROR_400 = 400;
 
@@ -15,8 +15,7 @@ function fetchSchema(
     validation_error_function,
   } = {},
 ) {
-  console.log("fetchSchema", { schema, baseURL, params, headers, timeout });
-  const { valid, error: schema_error } = validate_schema(schema, params);
+  const { valid, error: schema_error } = validateSchema(schema, params);
 
   if (!valid) {
     if (process.env.NODE_ENV !== "production") {
@@ -39,7 +38,11 @@ function fetchSchema(
       timeout,
       expectEvent,
     },
-    { request_error_function, response_function, response_error_function },
+    {
+      request_error_function,
+      response_function,
+      response_error_function,
+    },
   );
 }
 

package/shared/utils/parse_boolean.js

@@ -0,0 +1,16 @@
+const TRUTHY_VALUES = new Set([true, 1, "1", "true", "yes"]);
+const FALSY_VALUES = new Set([false, 0, "0", "false", "no"]);
+
+function parseBoolean(value) {
+  const normalized = typeof value === "string" ? value.trim().toLowerCase() : value;
+
+  if (TRUTHY_VALUES.has(normalized)) {
+    return true;
+  }
+  if (FALSY_VALUES.has(normalized)) {
+    return false;
+  }
+  throw new Error(`Cannot parse boolean from: ${value}`);
+}
+
+export { parseBoolean };

package/shared/utils/validate_schema.js

@@ -1,6 +1,6 @@
 import Ajv from "ajv";
 
-function validate_schema(schema, body) {
+function validateSchema(schema, body) {
   const ajv = new Ajv();
   const list_keywords = ["methods", "route", "max_retry", "rpc"];
   for (const keyword of list_keywords) {
@@ -10,4 +10,4 @@ function validate_schema(schema, body) {
   return { valid, error: ajv.errorsText() };
 }
 
-export { validate_schema };
+export { validateSchema };

package/tests/unit/utils/validate_schema.nuxt.test.js

@@ -2,7 +2,7 @@
 import { describe, expect, test } from "vitest";
 
 // Local imports
-import { validate_schema } from "@ogw_shared/utils/validate_schema";
+import { validateSchema } from "@ogw_shared/utils/validate_schema";
 
 // CONSTANTS
 const MIN_0 = 0;
@@ -24,14 +24,14 @@ describe("validate schema", () => {
 
   test("ajv wrong params", () => {
     const params = {};
-    const { valid, error } = validate_schema(schema, params);
+    const { valid, error } = validateSchema(schema, params);
     expect(valid).toBe(false);
     expect(error).toBe("data must have required property 'var_1'");
   });
 
   test("good params", () => {
     const params = { var_1: "test", var_2: VAL_5 };
-    const { valid, error } = validate_schema(schema, params);
+    const { valid, error } = validateSchema(schema, params);
     expect(valid).toBe(true);
     expect(error).toBe("No errors");
   });