@geode/opengeodeweb-front 10.26.1 → 10.26.2

package/app/components/CameraManager/List.vue

@@ -54,7 +54,7 @@ async function saveRename() {
           color="success"
           size="x-small"
           class="mr-1"
-          :data-testid="'restoreCameraPosition' + position.name + 'Button'"
+          :data-testid="`restoreCameraPosition${position.name}Button`"
           @click="restorePosition(position.id)"
         >
           <v-icon size="14">mdi-play</v-icon>

package/app/components/CameraOrientation.vue

@@ -212,7 +212,7 @@ watch(hoveredFace, (newFace, oldFace) => {
         size="32"
         class="satellite-node position-absolute"
         :style="orientation.position"
-        :data-testid="'cameraOrientation' + orientation.vtkKey + 'Button'"
+        :data-testid="`cameraOrientation${orientation.vtkKey}Button`"
         @mouseenter="hoveredFace = orientation.face"
         @mouseleave="hoveredFace = undefined"
         @click.stop="emit('select', orientation.value)"
@@ -242,7 +242,7 @@ watch(hoveredFace, (newFace, oldFace) => {
           size="32"
           variant="text"
           class="ma-1"
-          :data-testid="'cameraOrientation' + orientation.vtkKey + 'Button'"
+          :data-testid="`cameraOrientation${orientation.vtkKey}Button`"
           @mouseenter="hoveredFace = orientation.face"
           @mouseleave="hoveredFace = undefined"
           @click.stop="emit('select', orientation.value)"

package/app/components/FileUploader.vue

@@ -129,9 +129,9 @@ watch(
     />
     <DragAndDrop
       ref="dragAndDropRef"
-      class="d-none"
       :multiple
       :accept
+      :inline="false"
       @files-selected="processSelectedFiles"
     />
   </template>

package/app/components/HybridRenderingView.vue

@@ -95,10 +95,13 @@ async function handleClick(event) {
   </ClientOnly>
 </template>
 
-<style scoped>
-:deep(img) {
-  pointer-events: none;
+<style>
+[data-testid="hybridViewer"] img {
+  pointer-events: none !important;
 }
+</style>
+
+<style scoped>
 .picking-cursor {
   cursor: crosshair !important;
 }

package/app/components/HybridViewerTooltip.vue

@@ -63,6 +63,11 @@ const originalIndex = computed(() => {
   }
   return Math.floor(Number(originalId));
 });
+const RESERVED_ATTRIBUTE_KEYS = new Set([
+  "coordinates",
+  "vtkOriginalCellIds",
+  "vtkOriginalPointIds",
+]);
 
 const hasOtherAttributes = computed(() => {
   const attributes = hybridViewerStore.hoverData?.attributes || {};
@@ -71,6 +76,16 @@ const hasOtherAttributes = computed(() => {
   );
 });
 
+const sortedAttributes = computed(() => {
+  const attributes = hybridViewerStore.hoverData?.attributes || {};
+  return (
+    Object.entries(attributes)
+      .filter(([key]) => !RESERVED_ATTRIBUTE_KEYS.has(key))
+      // oxlint-disable-next-line unicorn/no-array-sort
+      .sort(([keyA], [keyB]) => keyA.localeCompare(keyB))
+  );
+});
+
 function capitalize(val) {
   if (!val) {
     return "";
@@ -156,15 +171,8 @@ function formatAttributeValue(val) {
               {{ Number(hybridViewerStore.hoverData.attributes.coordinates[2]).toFixed(3) }} ]
             </span>
           </v-col>
-          <template v-for="(val, name) in hybridViewerStore.hoverData.attributes" :key="name">
-            <v-col
-              v-if="
-                name !== 'coordinates' &&
-                name !== 'vtkOriginalCellIds' &&
-                name !== 'vtkOriginalPointIds'
-              "
-              class="d-flex justify-space-between ga-3"
-            >
+          <template v-for="[name, val] in sortedAttributes" :key="name">
+            <v-col class="d-flex justify-space-between ga-3">
               <span class="tooltip-label">{{ capitalize(name) }}:</span>
               <span class="tooltip-value font-mono">
                 {{ formatAttributeValue(val) }}
@@ -183,7 +191,7 @@ function formatAttributeValue(val) {
   pointer-events: none;
   z-index: 4;
   min-width: 200px;
-  max-width: 450px;
+  max-width: max-content;
   transition: opacity 0.15s ease;
 }
 .font-mono {
@@ -197,10 +205,12 @@ function formatAttributeValue(val) {
 .tooltip-label {
   color: #bdbdbd;
   font-weight: bold;
+  white-space: nowrap;
 }
 .tooltip-value {
   color: #a7ffeb;
   font-weight: 500;
+  white-space: nowrap;
 }
 .tooltip-value-dim {
   color: #eeeeee;

package/app/components/Screenshot.vue

@@ -102,10 +102,10 @@ watch(screenshot_type, (value) => {
               File
             </v-btn>
             <v-btn
+              data-testid="screenshotClipboardButton"
               value="clipboard"
               prepend-icon="mdi-content-copy"
               size="small"
-              data-testid="screenshotClipboardButton"
               class="text-caption text-none"
             >
               Clipboard
@@ -117,11 +117,11 @@ watch(screenshot_type, (value) => {
       <v-row dense v-if="screenshot_type === 'file'">
         <v-col cols="12" class="py-1">
           <v-text-field
+            data-testid="screenshotFileNameInput"
             v-model="filename"
             label="File name"
             variant="outlined"
             density="compact"
-            data-testid="screenshotFileNameInput"
             hide-details
             class="text-caption"
           ></v-text-field>
@@ -144,10 +144,10 @@ watch(screenshot_type, (value) => {
       <v-row dense>
         <v-col cols="12" class="py-1">
           <v-switch
+            data-testid="screenshotIncludeBackgroundSwitch"
             v-model="include_background"
             :disabled="screenshot_type === 'file' && output_extension !== 'png'"
             label="Include background"
-            data-testid="screenshotIncludeBackgroundSwitch"
             density="compact"
             hide-details
             inset
@@ -170,10 +170,10 @@ watch(screenshot_type, (value) => {
           Cancel
         </v-btn>
         <v-btn
+          data-testid="screenshotActionButton"
           variant="outlined"
           size="small"
           class="text-caption text-none"
-          data-testid="screenshotActionButton"
           :disabled="(screenshot_type === 'file' && !filename) || !output_extension"
           color="white"
           @click="takeScreenshot()"

package/app/components/ViewToolbar.vue

@@ -62,8 +62,8 @@ const camera_options = computed(() => [
     menu: [
       {
         title: "Cells",
-        icon: "mdi-select-all",
         testId: "highlightOnHoverCellsButton",
+        icon: "mdi-select-all",
         action: () => {
           if (
             hybridViewerStore.is_hover_highlight &&
@@ -79,8 +79,8 @@ const camera_options = computed(() => [
       },
       {
         title: "Points",
-        icon: "mdi-select-drag",
         testId: "highlightOnHoverPointsButton",
+        icon: "mdi-select-drag",
         action: () => {
           if (
             hybridViewerStore.is_hover_highlight &&
@@ -180,9 +180,9 @@ const camera_options = computed(() => [
             <v-row dense>
               <v-col v-for="item in camera_option.menu" :key="item.title">
                 <ActionButton
+                  :data-testid="item.testId"
                   :icon="item.icon"
                   :tooltip="item.title"
-                  :data-testid="item.testId"
                   :color="
                     hybridViewerStore.is_hover_highlight &&
                     hybridViewerStore.hover_highlight_field_type ===

package/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -121,7 +121,7 @@ const edge_attribute_color_map = computed({
       <ViewerOptionsVisibilitySwitch data-testid="meshEdgesVisibilitySwitch" v-model="visibility" />
       <template v-if="visibility">
         <v-divider class="my-2" />
-        <ViewerOptionsWidthSlider v-model="width" />
+        <ViewerOptionsWidthSlider data-testid="meshEdgesWidthSlider" v-model="width" />
         <ViewerOptionsColoringTypeSelector
           :id="id"
           v-model:coloring_style_key="coloring_style_key"

package/app/components/Viewer/Generic/Mesh/CellsOptions.vue

@@ -121,6 +121,7 @@ const cell_attribute_color_map = computed({
     <template #options>
       <ViewerOptionsVisibilitySwitch data-testid="meshCellsVisibilitySwitch" v-model="visibility" />
       <template v-if="visibility">
+        <v-divider />
         <ViewerOptionsColoringTypeSelector
           :id="id"
           v-model:coloring_style_key="coloring_style_key"

package/app/components/Viewer/Generic/Mesh/EdgesOptions.vue

@@ -66,7 +66,14 @@ const color = computed({
     :btnImage="btnImage"
   >
     <template #options>
-      <ViewerOptionsVisibilitySwitch data-testid="meshEdgesVisibilitySwitch" v-model="visibility" />
+      <v-row>
+        <v-col>
+          <ViewerOptionsVisibilitySwitch
+            data-testid="meshEdgesVisibilitySwitch"
+            v-model="visibility"
+          />
+        </v-col>
+      </v-row>
       <template v-if="visibility">
         <v-divider class="my-2" />
         <ViewerOptionsWidthSlider data-testid="meshEdgesWidthSlider" v-model="size" />

package/app/components/Viewer/Generic/Mesh/PointsOptions.vue

@@ -93,10 +93,14 @@ const vertex_attribute_color_map = computed({
     :btnImage="btnImage"
   >
     <template #options>
-      <ViewerOptionsVisibilitySwitch
-        data-testid="meshPointsVisibilitySwitch"
-        v-model="visibility"
-      />
+      <v-row class="pa-1">
+        <v-col>
+          <ViewerOptionsVisibilitySwitch
+            data-testid="meshPointsVisibilitySwitch"
+            v-model="visibility"
+          />
+        </v-col>
+      </v-row>
       <template v-if="visibility">
         <v-divider class="my-2" />
         <ViewerOptionsSizeSlider data-testid="meshPointsSizeSlider" v-model="size" />

package/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue

@@ -11,10 +11,11 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const { applyBatchStyle } = useBatchStyle();
 
-const { itemProps, btnImage, tooltip } = defineProps({
+const { itemProps, btnImage, tooltip, capabilities } = defineProps({
   itemProps: { type: Object, required: true },
   btnImage: { type: String, required: true },
   tooltip: { type: String, required: false, default: "Polygons options" },
+  capabilities: { type: Object, default: () => ({}) },
 });
 
 const id = toRef(() => itemProps.id);
@@ -70,11 +71,13 @@ const textures = computed({
         v-model="visibility"
       />
       <template v-if="visibility">
+        <v-divider />
         <ViewerOptionsColoringTypeSelector
           :id="id"
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
           v-model:textures="textures"
+          :capabilities="capabilities"
         />
       </template>
     </template>

package/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue

@@ -117,6 +117,7 @@ const polyhedron_attribute_color_map = computed({
         v-model="visibility"
       />
       <template v-if="visibility">
+        <v-divider />
         <ViewerOptionsColoringTypeSelector
           :id="id"
           v-model:coloring_style_key="coloring_style_key"

package/app/components/Viewer/Generic/Model/BlocksOptions.vue

@@ -203,7 +203,7 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
 
 <template>
   <OptionsSection title="Blocks Options" class="mt-4">
-    <VisibilitySwitch v-model="blocksVisibility" />
+    <VisibilitySwitch data-testid="modelBlocksVisibilitySwitch" v-model="blocksVisibility" />
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="targetBlockIds[0]"

package/app/components/Viewer/Generic/Model/CornersOptions.vue

@@ -13,6 +13,7 @@ const { modelId, cornerId, targetCornerIds } = defineProps({
 });
 
 const dataStyleStore = useDataStyleStore();
+console.log("CornersOptions setup!");
 const hybridViewerStore = useHybridViewerStore();
 
 // Visibility
@@ -140,7 +141,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
 
 <template>
   <OptionsSection title="Corners Options" class="mt-4">
-    <VisibilitySwitch v-model="cornersVisibility" />
+    <VisibilitySwitch data-testid="modelCornersVisibilitySwitch" v-model="cornersVisibility" />
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="targetCornerIds[0]"

package/app/components/Viewer/Generic/Model/LinesOptions.vue

@@ -199,7 +199,7 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
 
 <template>
   <OptionsSection title="Lines Options" class="mt-4">
-    <VisibilitySwitch v-model="linesVisibility" />
+    <VisibilitySwitch data-testid="modelLinesVisibilitySwitch" v-model="linesVisibility" />
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="targetLineIds[0]"

package/app/components/Viewer/Generic/Model/ModelStyleCard.vue

@@ -122,7 +122,7 @@ const modelComponentsColor = computed({
 <template>
   <v-sheet class="model-style-card" color="transparent">
     <OptionsSection title="Model Options">
-      <VisibilitySwitch v-model="modelVisibility" />
+      <VisibilitySwitch data-testid="modelStyleVisibilitySwitch" v-model="modelVisibility" />
     </OptionsSection>
 
     <OptionsSection v-if="!componentType && !componentId" title="Components Options" class="mt-4">

package/app/components/Viewer/Generic/Model/SurfacesOptions.vue

@@ -207,7 +207,7 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
 
 <template>
   <OptionsSection title="Surfaces Options" class="mt-4">
-    <VisibilitySwitch v-model="surfacesVisibility" />
+    <VisibilitySwitch data-testid="modelSurfacesVisibilitySwitch" v-model="surfacesVisibility" />
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="targetSurfaceIds[0]"

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

@@ -95,19 +95,19 @@ watch(textureId, (value) => {
       hide-details
     />
   </v-col>
-  <v-badge :model-value="textureId != ''" color="white" floating dot offset-x="10" offset-y="10">
-    <v-col cols="1" class="ma-1" justify="center" align="center">
+  <v-col cols="1" class="ma-1 d-flex justify-center align-center">
+    <v-badge :model-value="textureId !== ''" color="white" floating dot offset-x="10" offset-y="10">
       <FileUploader
-        @files_uploaded="files_uploaded_event($event, index)"
+        @files_uploaded="files_uploaded_event($event)"
         :accept="['image/png', 'image/jpeg', 'image/bmp']"
         :autoUpload="true"
         :multiple="true"
         :mini="true"
         class="mt-2"
       />
-    </v-col>
-  </v-badge>
-  <v-col v-if="textureName == '' || textureId == ''" cols="1">
+    </v-badge>
+  </v-col>
+  <v-col v-if="textureName === '' || textureId === ''" cols="1">
     <v-icon size="20" icon="mdi-close-circle" v-tooltip:bottom="'Invalid texture'" />
   </v-col>
 </template>

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

@@ -10,7 +10,7 @@ const { id } = defineProps({
 const internal_textures = ref([]);
 
 onMounted(() => {
-  if (textures.value === null) {
+  if (textures.value === null || textures.value === undefined || textures.value.length === 0) {
     internal_textures.value = [{ id: "", texture_name: "" }];
   } else {
     internal_textures.value = textures.value;
@@ -29,8 +29,7 @@ function update_value_event($event, index) {
 </script>
 
 <template>
-  <v-row v-for="(texture, index) in internal_textures" :key="texture" align="center">
-    <br />
+  <v-row v-for="(texture, index) in internal_textures" :key="index" align="center" class="mt-2">
     <v-col cols="1" class="pa-0">
       <v-icon
         v-if="internal_textures.length > 1"

package/app/components/Viewer/PointSet/SpecificPointsOptions.vue

@@ -2,6 +2,7 @@
 import PointSetPoints from "@ogw_front/assets/viewer_svgs/point_set_points.svg";
 import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenu/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
+import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
 import { useBatchStyle } from "@ogw_front/composables/batch_style";
@@ -96,7 +97,7 @@ const vertex_attribute_color_map = computed({
       />
       <template v-if="visibility">
         <v-divider class="my-2" />
-        <ViewerOptionsSizeSlider v-model="size" />
+        <ViewerOptionsSizeSlider data-testid="meshPointsSizeSlider" v-model="size" />
         <ViewerOptionsColoringTypeSelector
           :id="id"
           v-model:coloring_style_key="coloring_style_key"

package/app/components/Viewer/Solid/PolygonsOptions.vue

@@ -8,5 +8,9 @@ const { itemProps } = defineProps({
 </script>
 
 <template>
-  <ViewerGenericMeshPolygonsOptions :itemProps="itemProps" :btnImage="SolidFacets" />
+  <ViewerGenericMeshPolygonsOptions
+    :itemProps="itemProps"
+    :btnImage="SolidFacets"
+    :capabilities="{ textures: { available: false } }"
+  />
 </template>

package/app/components/Viewer/Ui.vue

@@ -112,12 +112,12 @@ defineExpose({ get_viewer_id });
       class="picking-message-container d-flex justify-center w-100 pa-4"
     >
       <v-chip
+        data-testid="hoverHighlightChip"
         color="primary"
         elevation="8"
         size="large"
         variant="flat"
         class="pick-pulse"
-        data-testid="hoverHighlightChip"
         style="pointer-events: auto"
         @click="stopHoverHighlight"
       >

package/app/utils/colormap.js

@@ -1,3 +1,4 @@
+// oxlint-disable unicorn/prefer-export-from
 import colormaps from "@ogw_front/assets/colormaps.json";
 
 import { newInstance as vtkColorTransferFunction } from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";

package/app/utils/default_styles/meshes.js

@@ -69,7 +69,8 @@ function meshCellsDefaultStyle(
         storedConfigs: {},
       },
       constant,
-      textures: undefined,
+      // oxlint-disable-next-line unicorn/no-null
+      textures: null,
       vertex: {
         name: undefined,
         storedConfigs: {},
@@ -87,7 +88,8 @@ function meshPolygonsDefaultStyle(
     coloring: {
       active: MESH_DEFAULT_ACTIVE_COLORING,
       constant,
-      textures: undefined,
+      // oxlint-disable-next-line unicorn/no-null
+      textures: null,
       polygon: {
         name: undefined,
         storedConfigs: {},

package/app/utils/local/cleanup.js

@@ -38,9 +38,14 @@ function killHttpMicroservice(microservice) {
   console.log("killHttpMicroservice", { ...microservice });
   const failMessage = `Failed to kill ${microservice.name}`;
   async function do_kill() {
-    await fetch(microservice.url, {
-      method: microservice.method,
-    });
+    try {
+      const fetchFunc = typeof $fetch === "undefined" ? fetch : $fetch;
+      await fetchFunc(microservice.url, {
+        method: microservice.method,
+      });
+    } catch (error) {
+      console.log(`Expected error during kill of ${microservice.name}:`, error.message);
+    }
   }
   return pTimeout(do_kill(), {
     milliseconds: 5000,

package/app/utils/local/microservices.js

@@ -13,7 +13,7 @@ import { commandExistsSync, waitForReady } from "./scripts.js";
 import { microservicesMetadatasPath, projectMicroservices } from "./cleanup.js";
 import { executablePath } from "./path.js";
 
-const DEFAULT_TIMEOUT_SECONDS = 60;
+const DEFAULT_TIMEOUT_SECONDS = 120;
 const MILLISECONDS_PER_SECOND = 1000;
 
 function getAvailablePort() {

package/app/utils/local/scripts.js

@@ -24,18 +24,26 @@ async function waitForReady(child, expectedResponse) {
 }
 
 async function waitNuxt(nuxtProcess) {
+  nuxtProcess.stderr.on("data", (data) => {
+    console.log("Nuxt STDERR:", data.toString().trim());
+  });
+  nuxtProcess.on("close", (code) => {
+    console.log(`Nuxt process closed with code ${code}`);
+  });
+
   for await (const [data] of on(nuxtProcess.stdout, "data")) {
     const output = data.toString();
-    console.log("Nuxt:", output);
+    console.log("Nuxt STDOUT:", output.trim());
     const portMatch = output.match(/Listening on http:\/\/\[::\]:(?<port>\d+)/u);
     if (portMatch) {
-      const [, nuxtPort] = portMatch;
-
-      console.log("Nuxt listening on port", nuxtPort);
-      return nuxtPort;
+      console.log("Nuxt listening on port", portMatch.groups.port);
+      nuxtProcess.stdout.on("data", (newData) => {
+        console.log("Nuxt STDOUT:", newData.toString().trim());
+      });
+      return portMatch.groups.port;
     }
   }
-  throw new Error("Nuxt process closed without accepting connections");
+  throw new Error("Nuxt process closed");
 }
 
 async function runBrowser(scriptName) {

package/internal/stores/data_style/model/color.js

@@ -78,7 +78,7 @@ function useModelColorStyle(componentStyleFunctions) {
   };
 
   function getModelComponentColor(modelId, componentId) {
-    return dataStyleState.getComponentStyle(modelId, componentId).coloring.constant;
+    return dataStyleState.getComponentStyle(modelId, componentId).coloring?.constant;
   }
 
   function getModelComponentEffectiveColor(modelId, componentId, type) {
@@ -90,19 +90,19 @@ function useModelColorStyle(componentStyleFunctions) {
   }
 
   function getModelComponentActiveColoring(modelId, componentId) {
-    return dataStyleState.getComponentStyle(modelId, componentId).coloring.active;
+    return dataStyleState.getComponentStyle(modelId, componentId).coloring?.active;
   }
 
   function modelComponentTypeColor(modelId, type) {
     return (
-      dataStyleState.getModelComponentTypeStyle(modelId, type).coloring.constant ||
+      dataStyleState.getModelComponentTypeStyle(modelId, type).coloring?.constant ||
       dataStyleState.getStyle(modelId)[`${type.toLowerCase()}s`].coloring.constant
     );
   }
 
   function getModelComponentTypeActiveColoring(modelId, type) {
     return (
-      dataStyleState.getModelComponentTypeStyle(modelId, type).coloring.active ||
+      dataStyleState.getModelComponentTypeStyle(modelId, type).coloring?.active ||
       dataStyleState.getStyle(modelId)[`${type.toLowerCase()}s`].coloring.active
     );
   }

package/package.json

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