@geode/opengeodeweb-front 10.33.2 → 10.33.3-rc.2

package/app/components/Viewer/ContextMenu/InfoCard.vue

@@ -21,6 +21,11 @@ const TRUNCATE_START_CHARS = 12;
 const TRUNCATE_END_CHARS = 7;
 
 const { copy, copied } = useClipboard({ copiedDuring: COPIED_TIMEOUT });
+const copiedId = ref("");
+
+function isCopied(id) {
+  return copied.value && copiedId.value === id;
+}
 
 const menuStore = useMenuStore();
 const dataStore = useDataStore();
@@ -87,6 +92,7 @@ async function copyId(targetId) {
   }
   try {
     await copy(targetId);
+    copiedId.value = targetId;
   } catch (error) {
     console.error("Failed to copy ID:", error);
   }
@@ -102,7 +108,7 @@ function formatId(id) {
   return `${id.slice(0, ID_SLICE_START)}...${id.slice(id.length - ID_SLICE_END_OFFSET)}`;
 }
 
-const formattedId = computed(() => formatId(metaData?.id));
+const formattedId = computed(() => formatId(metaData.id));
 </script>
 
 <template>
@@ -136,12 +142,12 @@ const formattedId = computed(() => formatId(metaData?.id));
             @click.stop="copyId(metaData.id)"
           >
             <span class="id-text">
-              {{ copied ? "COPIED!" : formattedId }}
+              {{ isCopied(metaData.id) ? "COPIED!" : formattedId }}
             </span>
             <v-icon
-              :icon="copied ? 'mdi-check' : 'mdi-content-copy'"
+              :icon="isCopied(metaData.id) ? 'mdi-check' : 'mdi-content-copy'"
               size="10"
-              :color="copied ? 'success' : 'white'"
+              :color="isCopied(metaData.id) ? 'success' : 'white'"
               class="ml-1"
             />
           </v-col>
@@ -166,9 +172,14 @@ const formattedId = computed(() => formatId(metaData?.id));
               @click.stop="copyId(componentItem.id)"
             >
               <span class="id-text">
-                {{ formatId(componentItem.id) }}
+                {{ isCopied(componentItem.id) ? "COPIED!" : formatId(componentItem.id) }}
               </span>
-              <v-icon icon="mdi-content-copy" size="10" color="white" class="ml-1" />
+              <v-icon
+                :icon="isCopied(componentItem.id) ? 'mdi-check' : 'mdi-content-copy'"
+                size="10"
+                :color="isCopied(componentItem.id) ? 'success' : 'white'"
+                class="ml-1"
+              />
             </v-col>
           </template>
         </v-row>

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

@@ -2,6 +2,7 @@
 import { middleTruncate } from "@ogw_front/utils/string";
 import { useClipboard } from "@vueuse/core";
 import { useFeedbackStore } from "@ogw_front/stores/feedback";
+import { useResponsiveMiddleTruncate } from "@ogw_front/composables/responsive_middle_truncate";
 
 const feedbackStore = useFeedbackStore();
 const { copy } = useClipboard();
@@ -18,33 +19,20 @@ const { width: containerWidth } = useElementSize(labelContainer);
 
 const actualItem = computed(() => item.raw || item);
 
-const UUID_END_CHARS = 12;
-const ELLIPSIS_LENGTH = 3;
-const MIN_START_CHARS = 4;
+const TOOLTIP_NAME_MAX_LENGTH = 40;
+const TOOLTIP_NAME_START_CHARS = 10;
+const TOOLTIP_NAME_END_CHARS = 8;
 
-const displayTitle = computed(() => {
-  const { title } = actualItem.value;
-  if (!title) {
-    return "";
-  }
-
-  // Estimate max characters based on width (approx 9px per char for typical font)
-  // We subtract some padding/icon space
-  const estimatedCharWidth = 8.5;
-  const maxChars = Math.floor(containerWidth.value / estimatedCharWidth);
-
-  // Only truncate if the text is longer than what fits
-  if (title.length <= maxChars) {
-    return title;
-  }
-
-  // Calculate dynamic start/end based on available space
-  // For UUIDs, showing the last 12 characters is often useful
-  const endChars = Math.min(UUID_END_CHARS, Math.floor(maxChars / ELLIPSIS_LENGTH));
-  const startChars = Math.max(MIN_START_CHARS, maxChars - endChars - ELLIPSIS_LENGTH);
+const displayTitle = useResponsiveMiddleTruncate(() => actualItem.value.title, containerWidth);
 
-  return middleTruncate(title, maxChars, startChars, endChars);
-});
+const tooltipTitle = computed(() =>
+  middleTruncate(
+    actualItem.value.title,
+    TOOLTIP_NAME_MAX_LENGTH,
+    TOOLTIP_NAME_START_CHARS,
+    TOOLTIP_NAME_END_CHARS,
+  ),
+);
 
 const tooltipDisabled = computed(() => {
   if (isLeaf !== undefined) {
@@ -75,6 +63,7 @@ async function copyToClipboard(text, label) {
       <template #activator="{ props: tooltipProps }">
         <span
           v-bind="tooltipProps"
+          data-testid="treeItemLabel"
           class="tree-item-label"
           :class="{ 'inactive-item': actualItem.is_active === false }"
           @contextmenu.prevent.stop="emit('contextmenu', $event)"
@@ -90,6 +79,7 @@ async function copyToClipboard(text, label) {
           <strong class="text-white mr-1">ID:</strong>
           <span>{{ actualItem.id }}</span>
           <v-btn
+            data-testid="copyIdBtn"
             icon="mdi-content-copy"
             variant="text"
             size="x-small"
@@ -100,8 +90,9 @@ async function copyToClipboard(text, label) {
         </span>
         <span v-if="actualItem.title" class="text-caption d-flex align-center">
           <strong class="text-white mr-1">Name:</strong>
-          <span>{{ actualItem.title }}</span>
+          <span>{{ tooltipTitle }}</span>
           <v-btn
+            data-testid="copyNameBtn"
             icon="mdi-content-copy"
             variant="text"
             size="x-small"

package/app/composables/responsive_middle_truncate.js

@@ -0,0 +1,34 @@
+import { middleTruncate } from "@ogw_front/utils/string";
+
+const UUID_END_CHARS = 12;
+const ELLIPSIS_LENGTH = 3;
+const MIN_START_CHARS = 4;
+const DEFAULT_ESTIMATED_CHAR_WIDTH = 8.5;
+
+export function useResponsiveMiddleTruncate(textRef, containerWidthRef, options = {}) {
+  const {
+    estimatedCharWidth = DEFAULT_ESTIMATED_CHAR_WIDTH,
+    uuidEndChars = UUID_END_CHARS,
+    ellipsisLength = ELLIPSIS_LENGTH,
+    minStartChars = MIN_START_CHARS,
+  } = options;
+
+  return computed(() => {
+    const text = toValue(textRef);
+    if (!text) {
+      return "";
+    }
+
+    const width = toValue(containerWidthRef) || 0;
+    const maxChars = Math.floor(width / estimatedCharWidth);
+
+    if (maxChars <= 0 || text.length <= maxChars) {
+      return text;
+    }
+
+    const endChars = Math.min(uuidEndChars, Math.floor(maxChars / ellipsisLength));
+    const startChars = Math.max(minStartChars, maxChars - endChars - ellipsisLength);
+
+    return middleTruncate(text, maxChars, startChars, endChars);
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.33.2",
+  "version": "10.33.3-rc.2",
   "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",