From 200ee9b0e70f67326aecc73c14cdf9b7b6aea0a1 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 20 Apr 2026 07:34:27 -0400
Subject: [PATCH 1/4] dataset info attributes section

---
 client/dive-common/components/DatasetInfo.vue |  12 +-
 .../components/DatasetInfoAttributes.vue      | 313 ++++++++++++++++++
 2 files changed, 321 insertions(+), 4 deletions(-)
 create mode 100644 client/dive-common/components/DatasetInfoAttributes.vue

diff --git a/client/dive-common/components/DatasetInfo.vue b/client/dive-common/components/DatasetInfo.vue
index 074b5b1..93b6fc0 100644
--- a/client/dive-common/components/DatasetInfo.vue
+++ b/client/dive-common/components/DatasetInfo.vue
@@ -19,6 +19,7 @@ import {
   setDiveDatasetMetadataKey,
 } from 'platform/web-girder/api/divemetadata.service';
 import { usePrompt } from 'dive-common/vue-utilities/prompt-service';
+import DatasetInfoAttributes from './DatasetInfoAttributes.vue';
 
 export default defineComponent({
   name: 'DatasetInfo',
@@ -26,6 +27,7 @@ export default defineComponent({
     StackedVirtualSidebarContainer,
     DIVEMetadataEditKey,
     MetadataKeyLabel,
+    DatasetInfoAttributes,
   },
 
   props: {
@@ -244,7 +246,7 @@ export default defineComponent({
                       />
                     </span>
                     <span v-else>
-                      {{ item.value !== undefined ? item.value.toString() : '' }}
+                      {{ item.value !== undefined && item.value !== null ? item.value.toString() : '' }}
                     </span>
                   </v-list-item-subtitle>
                 </v-list-item-content>
@@ -287,7 +289,7 @@ export default defineComponent({
                             />
                           </span>
                           <span v-else>
-                            {{ item.value !== undefined ? item.value.toString() : '' }}
+                            {{ item.value !== undefined && item.value !== null ? item.value.toString() : '' }}
                           </span>
                         </v-list-item-subtitle>
                       </v-list-item-content>
@@ -318,7 +320,7 @@ export default defineComponent({
                             />
                           </span>
                           <span v-else>
-                            {{ item.value !== undefined ? item.value.toString() : '' }}
+                            {{ item.value !== undefined && item.value !== null ? item.value.toString() : '' }}
                           </span>
                         </v-list-item-subtitle>
                       </v-list-item-content>
@@ -361,7 +363,7 @@ export default defineComponent({
                                   />
                                 </span>
                                 <span v-else>
-                                  {{ item.value !== undefined ? item.value.toString() : '' }}
+                                  {{ item.value !== undefined && item.value !== null ? item.value.toString() : '' }}
                                 </span>
                               </v-list-item-subtitle>
                             </v-list-item-content>
@@ -374,6 +376,7 @@ export default defineComponent({
               </v-expansion-panels>
             </v-expansion-panel-content>
           </v-expansion-panel>
+          <DatasetInfoAttributes />
         </v-expansion-panels>
       </v-container>
     </template>
@@ -385,4 +388,5 @@ export default defineComponent({
   white-space: normal !important;
   word-break: break-word;
 }
+
 </style>
diff --git a/client/dive-common/components/DatasetInfoAttributes.vue b/client/dive-common/components/DatasetInfoAttributes.vue
new file mode 100644
index 0000000..71b5e95
--- /dev/null
+++ b/client/dive-common/components/DatasetInfoAttributes.vue
@@ -0,0 +1,313 @@
+<script lang="ts">
+import {
+  computed, defineComponent, ref, watch,
+} from 'vue';
+import { useStore } from 'platform/web-girder/store/types';
+import {
+  useAttributes, useCameraStore, useSelectedTrackId, useTime,
+} from 'vue-media-annotator/provides';
+import type { Attribute } from 'vue-media-annotator/use/AttributeTypes';
+import { StringKeyObject } from 'vue-media-annotator/BaseAnnotation';
+
+export default defineComponent({
+  name: 'DatasetInfoAttributes',
+  setup() {
+    const store = useStore();
+    const attributes = useAttributes();
+    const cameraStore = useCameraStore();
+    const selectedTrackId = useSelectedTrackId();
+    const time = useTime();
+    const stickyDetectionEnabled = ref(false);
+    const hasInitializedStickyDetection = ref(false);
+    const detectionAttributes = computed(() => attributes.value.filter((attribute) => attribute.belongs === 'detection'));
+    const trackAttributes = computed(() => attributes.value.filter((attribute) => attribute.belongs === 'track'));
+    const hasAttributeInfo = computed(() => detectionAttributes.value.length > 0 || trackAttributes.value.length > 0);
+    const selectedTrack = computed(() => {
+      if (selectedTrackId.value === null) {
+        return undefined;
+      }
+      return cameraStore.getAnyPossibleTrack(selectedTrackId.value);
+    });
+    const shouldShowAttributes = computed(() => hasAttributeInfo.value && !!selectedTrack.value);
+    const getAttributeUserMap = (
+      source: StringKeyObject | undefined,
+      attribute: Attribute,
+    ) => {
+      const user = store.state.User.user?.login;
+      if (attribute.user && user && source?.userAttributes) {
+        return (source.userAttributes as StringKeyObject)[user] as StringKeyObject | undefined;
+      }
+      return source;
+    };
+    const getDetectionValue = (attribute: Attribute, sticky = false) => {
+      const track = selectedTrack.value;
+      if (!track) {
+        return undefined;
+      }
+      const [feature] = track.getFeature(time.frame.value);
+      let value: unknown;
+      if (feature?.attributes) {
+        value = getAttributeUserMap(feature.attributes, attribute)?.[attribute.name];
+      }
+      if (!sticky || (value !== undefined && value !== '')) {
+        return value;
+      }
+      let previousFrame = time.frame.value;
+      while (previousFrame >= 0) {
+        const previousKeyframe = track.getPreviousKeyframe(previousFrame);
+        if (previousKeyframe === undefined) {
+          break;
+        }
+        const [previousFeature] = track.getFeature(previousKeyframe);
+        value = getAttributeUserMap(previousFeature?.attributes, attribute)?.[attribute.name];
+        if (value !== undefined && value !== '') {
+          return value;
+        }
+        previousFrame = previousKeyframe - 1;
+      }
+      return undefined;
+    };
+    const getTrackValue = (attribute: Attribute) => {
+      const track = selectedTrack.value;
+      if (!track) {
+        return undefined;
+      }
+      return getAttributeUserMap(track.attributes, attribute)?.[attribute.name];
+    };
+    const getDisplayValue = (attribute: Attribute) => {
+      if (attribute.belongs === 'detection') {
+        return getDetectionValue(attribute, stickyDetectionEnabled.value);
+      }
+      return getTrackValue(attribute);
+    };
+    const getDisplayString = (attribute: Attribute) => {
+      const value = getDisplayValue(attribute);
+      return value === undefined ? 'N/A' : String(value);
+    };
+    watch(
+      detectionAttributes,
+      (newAttributes) => {
+        if (!hasInitializedStickyDetection.value) {
+          stickyDetectionEnabled.value = newAttributes.some((attribute) => !!attribute.render?.sticky);
+          hasInitializedStickyDetection.value = true;
+        }
+      },
+      { immediate: true },
+    );
+
+    return {
+      hasAttributeInfo,
+      shouldShowAttributes,
+      detectionAttributes,
+      trackAttributes,
+      stickyDetectionEnabled,
+      getDisplayValue,
+      getDisplayString,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-expansion-panel v-if="shouldShowAttributes">
+    <v-expansion-panel-header>Attributes</v-expansion-panel-header>
+    <v-expansion-panel-content class="pa-0">
+      <v-expansion-panels multiple flat class="attribute-sections pa-0">
+        <v-expansion-panel class="attribute-section-panel">
+          <v-expansion-panel-header class="subtitle-2 py-2 attribute-section-header">
+            Track Attributes
+          </v-expansion-panel-header>
+          <v-expansion-panel-content class="pa-0 track-attributes-content">
+            <v-list-item
+              v-for="attribute in trackAttributes"
+              :key="`datasetInfo_track_attribute_${attribute.key}`"
+              dense
+            >
+              <v-list-item-content>
+                <div class="attribute-row">
+                  <div class="attribute-name d-flex align-center">
+                    <span>{{ attribute.name }}</span>
+                    <v-tooltip bottom max-width="320" open-delay="200">
+                      <template #activator="{ on }">
+                        <v-icon small class="ml-1" color="grey lighten-1" v-on="on">
+                          mdi-information
+                        </v-icon>
+                      </template>
+                      <div class="attribute-info-tooltip">
+                        <div>
+                          <strong>Type:</strong> {{ attribute.datatype }}
+                        </div>
+                        <template v-if="attribute.values && attribute.values.length">
+                          <div class="mt-1">
+                            <strong>Predefined values:</strong>
+                          </div>
+                          <ul class="ma-0 pl-4">
+                            <li v-for="value in attribute.values" :key="`${attribute.key}_${value}`">
+                              {{ value }}
+                            </li>
+                          </ul>
+                        </template>
+                        <div v-else class="mt-1">
+                          <strong>Predefined values:</strong> None
+                        </div>
+                      </div>
+                    </v-tooltip>
+                  </div>
+                  <div class="attribute-value">
+                    {{ getDisplayString(attribute) }}
+                  </div>
+                </div>
+              </v-list-item-content>
+            </v-list-item>
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+
+        <v-expansion-panel class="attribute-section-panel">
+          <v-expansion-panel-header class="subtitle-2 py-2 attribute-section-header">
+            <span>Detection Attributes</span>
+            <v-menu left offset-y @click.stop>
+              <template #activator="{ on, attrs }">
+                <v-btn
+                  icon
+                  small
+                  class="ml-2"
+                  v-bind="attrs"
+                  v-on="on"
+                  @click.stop
+                >
+                  <v-icon small>
+                    mdi-cog
+                  </v-icon>
+                </v-btn>
+              </template>
+              <v-list dense>
+                <v-list-item>
+                  <v-list-item-content>
+                    <v-list-item-title class="d-flex align-center">
+                      <span>Stickiness</span>
+                      <v-tooltip bottom max-width="320" open-delay="200">
+                        <template #activator="{ on: infoOn }">
+                          <v-icon
+                            small
+                            class="ml-1"
+                            color="grey lighten-1"
+                            v-on="infoOn"
+                          >
+                            mdi-information
+                          </v-icon>
+                        </template>
+                        <span>
+                          When enabled, empty detection attribute values reuse the most recent non-empty value from earlier keyframes.
+                        </span>
+                      </v-tooltip>
+                    </v-list-item-title>
+                  </v-list-item-content>
+                  <v-list-item-action>
+                    <v-switch
+                      v-model="stickyDetectionEnabled"
+                      hide-details
+                      dense
+                      inset
+                    />
+                  </v-list-item-action>
+                </v-list-item>
+              </v-list>
+            </v-menu>
+          </v-expansion-panel-header>
+          <v-expansion-panel-content class="pa-0">
+            <v-list-item
+              v-for="attribute in detectionAttributes"
+              :key="`datasetInfo_detection_attribute_${attribute.key}`"
+              dense
+            >
+              <v-list-item-content>
+                <div class="attribute-row">
+                  <div class="attribute-name d-flex align-center">
+                    <span>{{ attribute.name }}</span>
+                    <v-tooltip bottom max-width="320" open-delay="200">
+                      <template #activator="{ on }">
+                        <v-icon small class="ml-1" color="grey lighten-1" v-on="on">
+                          mdi-information
+                        </v-icon>
+                      </template>
+                      <div class="attribute-info-tooltip">
+                        <div>
+                          <strong>Type:</strong> {{ attribute.datatype }}
+                        </div>
+                        <template v-if="attribute.values && attribute.values.length">
+                          <div class="mt-1">
+                            <strong>Predefined values:</strong>
+                          </div>
+                          <ul class="ma-0 pl-4">
+                            <li v-for="value in attribute.values" :key="`${attribute.key}_${value}`">
+                              {{ value }}
+                            </li>
+                          </ul>
+                        </template>
+                        <div v-else class="mt-1">
+                          <strong>Predefined values:</strong> None
+                        </div>
+                      </div>
+                    </v-tooltip>
+                  </div>
+                  <div class="attribute-value">
+                    {{ getDisplayString(attribute) }}
+                  </div>
+                </div>
+              </v-list-item-content>
+            </v-list-item>
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </v-expansion-panel-content>
+  </v-expansion-panel>
+</template>
+
+<style scoped>
+.wrap-text {
+  white-space: normal !important;
+  word-break: break-word;
+}
+
+.attribute-info-tooltip {
+  white-space: normal;
+}
+
+.attribute-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  column-gap: 12px;
+}
+
+.attribute-name {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.attribute-value {
+  flex: 0 0 auto;
+  text-align: right;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.attribute-sections {
+  padding: 0;
+  margin: 0;
+}
+
+.attribute-section-panel {
+  margin: 0;
+  padding: 0;
+}
+
+.attribute-section-header {
+  min-height: 36px;
+  padding: 0 8px;
+}
+:deep(.v-expansion-panel-content__wrap) {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+</style>

From 19b7ba3d379c82cdc52cda9bf36c556ab65989d3 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 20 Apr 2026 07:38:31 -0400
Subject: [PATCH 2/4] update tooltip

---
 .../components/DatasetInfoAttributes.vue         | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/dive-common/components/DatasetInfoAttributes.vue b/client/dive-common/components/DatasetInfoAttributes.vue
index 71b5e95..9597e5a 100644
--- a/client/dive-common/components/DatasetInfoAttributes.vue
+++ b/client/dive-common/components/DatasetInfoAttributes.vue
@@ -84,6 +84,11 @@ export default defineComponent({
       const value = getDisplayValue(attribute);
       return value === undefined ? 'N/A' : String(value);
     };
+    const shouldShowPredefinedValues = (attribute: Attribute) => (
+      attribute.datatype === 'text'
+      && !!attribute.values
+      && attribute.values.length > 0
+    );
     watch(
       detectionAttributes,
       (newAttributes) => {
@@ -103,6 +108,7 @@ export default defineComponent({
       stickyDetectionEnabled,
       getDisplayValue,
       getDisplayString,
+      shouldShowPredefinedValues,
     };
   },
 });
@@ -137,7 +143,7 @@ export default defineComponent({
                         <div>
                           <strong>Type:</strong> {{ attribute.datatype }}
                         </div>
-                        <template v-if="attribute.values && attribute.values.length">
+                        <template v-if="shouldShowPredefinedValues(attribute)">
                           <div class="mt-1">
                             <strong>Predefined values:</strong>
                           </div>
@@ -147,9 +153,6 @@ export default defineComponent({
                             </li>
                           </ul>
                         </template>
-                        <div v-else class="mt-1">
-                          <strong>Predefined values:</strong> None
-                        </div>
                       </div>
                     </v-tooltip>
                   </div>
@@ -234,7 +237,7 @@ export default defineComponent({
                         <div>
                           <strong>Type:</strong> {{ attribute.datatype }}
                         </div>
-                        <template v-if="attribute.values && attribute.values.length">
+                        <template v-if="shouldShowPredefinedValues(attribute)">
                           <div class="mt-1">
                             <strong>Predefined values:</strong>
                           </div>
@@ -244,9 +247,6 @@ export default defineComponent({
                             </li>
                           </ul>
                         </template>
-                        <div v-else class="mt-1">
-                          <strong>Predefined values:</strong> None
-                        </div>
                       </div>
                     </v-tooltip>
                   </div>

From e6c8750dca457630b5ffabeef5f0918d34c1d0e1 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 21 Apr 2026 08:21:01 -0400
Subject: [PATCH 3/4] docs, localstorage saving, and css tweaks

---
 client/dive-common/components/DatasetInfo.vue |   6 +-
 .../components/DatasetInfoAttributes.vue      | 118 ++++++++++++++----
 docs/UI-DatasetInfo.md                        |  21 ++++
 3 files changed, 120 insertions(+), 25 deletions(-)

diff --git a/client/dive-common/components/DatasetInfo.vue b/client/dive-common/components/DatasetInfo.vue
index 93b6fc0..05d57dc 100644
--- a/client/dive-common/components/DatasetInfo.vue
+++ b/client/dive-common/components/DatasetInfo.vue
@@ -196,7 +196,7 @@ export default defineComponent({
     <template #default>
       <v-container>
         <v-expansion-panels v-model="panels" multiple>
-          <v-expansion-panel v-if="datasetInfoLength">
+          <v-expansion-panel v-if="datasetInfoLength" class="border">
             <v-expansion-panel-header>Folder Info</v-expansion-panel-header>
             <v-expansion-panel-content>
               <v-simple-table dark>
@@ -255,6 +255,7 @@ export default defineComponent({
                 <v-expansion-panel
                   v-for="group in processedDatasetMetadata.defaultGroups"
                   :key="`datasetMetadata_default_group_${group.id}`"
+                  class="border"
                 >
                   <v-expansion-panel-header>
                     <span class="d-inline-flex align-center">
@@ -298,7 +299,7 @@ export default defineComponent({
                 </v-expansion-panel>
               </v-expansion-panels>
               <v-expansion-panels>
-                <v-expansion-panel>
+                <v-expansion-panel class="border">
                   <v-expansion-panel-header>Advanced</v-expansion-panel-header>
                   <v-expansion-panel-content class="pa-0">
                     <v-list-item v-for="item in processedDatasetMetadata.advanced" :key="`datasetMetadata_${item.name}`" two-line dense>
@@ -329,6 +330,7 @@ export default defineComponent({
                       <v-expansion-panel
                         v-for="group in processedDatasetMetadata.advancedGroups"
                         :key="`datasetMetadata_advanced_group_${group.id}`"
+                        class="border"
                       >
                         <v-expansion-panel-header>
                           <span class="d-inline-flex align-center">
diff --git a/client/dive-common/components/DatasetInfoAttributes.vue b/client/dive-common/components/DatasetInfoAttributes.vue
index 9597e5a..89ee174 100644
--- a/client/dive-common/components/DatasetInfoAttributes.vue
+++ b/client/dive-common/components/DatasetInfoAttributes.vue
@@ -9,6 +9,8 @@ import {
 import type { Attribute } from 'vue-media-annotator/use/AttributeTypes';
 import { StringKeyObject } from 'vue-media-annotator/BaseAnnotation';
 
+const STICKY_DETECTION_STORAGE_KEY = 'dive.datasetInfoAttributes.stickyDetectionEnabled';
+
 export default defineComponent({
   name: 'DatasetInfoAttributes',
   setup() {
@@ -19,6 +21,20 @@ export default defineComponent({
     const time = useTime();
     const stickyDetectionEnabled = ref(false);
     const hasInitializedStickyDetection = ref(false);
+    const getStoredStickyPreference = () => {
+      if (typeof window === 'undefined') {
+        return undefined;
+      }
+      try {
+        const storedValue = window.localStorage.getItem(STICKY_DETECTION_STORAGE_KEY);
+        if (storedValue === null) {
+          return undefined;
+        }
+        return storedValue === 'true';
+      } catch (error) {
+        return undefined;
+      }
+    };
     const detectionAttributes = computed(() => attributes.value.filter((attribute) => attribute.belongs === 'detection'));
     const trackAttributes = computed(() => attributes.value.filter((attribute) => attribute.belongs === 'track'));
     const hasAttributeInfo = computed(() => detectionAttributes.value.length > 0 || trackAttributes.value.length > 0);
@@ -39,10 +55,10 @@ export default defineComponent({
       }
       return source;
     };
-    const getDetectionValue = (attribute: Attribute, sticky = false) => {
+    const getDetectionValueInfo = (attribute: Attribute, sticky = false) => {
       const track = selectedTrack.value;
       if (!track) {
-        return undefined;
+        return { value: undefined, inherited: false };
       }
       const [feature] = track.getFeature(time.frame.value);
       let value: unknown;
@@ -50,7 +66,7 @@ export default defineComponent({
         value = getAttributeUserMap(feature.attributes, attribute)?.[attribute.name];
       }
       if (!sticky || (value !== undefined && value !== '')) {
-        return value;
+        return { value, inherited: false };
       }
       let previousFrame = time.frame.value;
       while (previousFrame >= 0) {
@@ -61,11 +77,11 @@ export default defineComponent({
         const [previousFeature] = track.getFeature(previousKeyframe);
         value = getAttributeUserMap(previousFeature?.attributes, attribute)?.[attribute.name];
         if (value !== undefined && value !== '') {
-          return value;
+          return { value, inherited: true };
         }
         previousFrame = previousKeyframe - 1;
       }
-      return undefined;
+      return { value: undefined, inherited: false };
     };
     const getTrackValue = (attribute: Attribute) => {
       const track = selectedTrack.value;
@@ -74,16 +90,23 @@ export default defineComponent({
       }
       return getAttributeUserMap(track.attributes, attribute)?.[attribute.name];
     };
-    const getDisplayValue = (attribute: Attribute) => {
+    const getDisplayInfo = (attribute: Attribute) => {
       if (attribute.belongs === 'detection') {
-        return getDetectionValue(attribute, stickyDetectionEnabled.value);
+        return getDetectionValueInfo(attribute, stickyDetectionEnabled.value);
       }
-      return getTrackValue(attribute);
+      return { value: getTrackValue(attribute), inherited: false };
     };
     const getDisplayString = (attribute: Attribute) => {
-      const value = getDisplayValue(attribute);
+      const { value } = getDisplayInfo(attribute);
       return value === undefined ? 'N/A' : String(value);
     };
+    const isDisplayValueInherited = (attribute: Attribute) => getDisplayInfo(attribute).inherited;
+    const getDisplayValueTooltip = (attribute: Attribute) => {
+      const value = getDisplayString(attribute);
+      return isDisplayValueInherited(attribute)
+        ? `${value} (inherited from previous keyframe)`
+        : value;
+    };
     const shouldShowPredefinedValues = (attribute: Attribute) => (
       attribute.datatype === 'text'
       && !!attribute.values
@@ -93,12 +116,30 @@ export default defineComponent({
       detectionAttributes,
       (newAttributes) => {
         if (!hasInitializedStickyDetection.value) {
-          stickyDetectionEnabled.value = newAttributes.some((attribute) => !!attribute.render?.sticky);
+          const storedStickyPreference = getStoredStickyPreference();
+          if (storedStickyPreference !== undefined) {
+            stickyDetectionEnabled.value = storedStickyPreference;
+          } else {
+            stickyDetectionEnabled.value = newAttributes.some((attribute) => !!attribute.render?.sticky);
+          }
           hasInitializedStickyDetection.value = true;
         }
       },
       { immediate: true },
     );
+    watch(
+      stickyDetectionEnabled,
+      (enabled) => {
+        if (!hasInitializedStickyDetection.value || typeof window === 'undefined') {
+          return;
+        }
+        try {
+          window.localStorage.setItem(STICKY_DETECTION_STORAGE_KEY, String(enabled));
+        } catch (error) {
+          // Ignore storage failures so UI behavior remains usable.
+        }
+      },
+    );
 
     return {
       hasAttributeInfo,
@@ -106,8 +147,9 @@ export default defineComponent({
       detectionAttributes,
       trackAttributes,
       stickyDetectionEnabled,
-      getDisplayValue,
       getDisplayString,
+      getDisplayValueTooltip,
+      isDisplayValueInherited,
       shouldShowPredefinedValues,
     };
   },
@@ -115,11 +157,14 @@ export default defineComponent({
 </script>
 
 <template>
-  <v-expansion-panel v-if="shouldShowAttributes">
+  <v-expansion-panel v-if="shouldShowAttributes" class="border">
     <v-expansion-panel-header>Attributes</v-expansion-panel-header>
     <v-expansion-panel-content class="pa-0">
       <v-expansion-panels multiple flat class="attribute-sections pa-0">
-        <v-expansion-panel class="attribute-section-panel">
+        <v-expansion-panel
+          v-if="trackAttributes.length"
+          class="attribute-section-panel border"
+        >
           <v-expansion-panel-header class="subtitle-2 py-2 attribute-section-header">
             Track Attributes
           </v-expansion-panel-header>
@@ -156,16 +201,26 @@ export default defineComponent({
                       </div>
                     </v-tooltip>
                   </div>
-                  <div class="attribute-value">
-                    {{ getDisplayString(attribute) }}
-                  </div>
+                  <v-tooltip bottom max-width="420" open-delay="200">
+                    <template #activator="{ on }">
+                      <div class="attribute-value d-inline-flex align-center" v-on="on">
+                        <span class="attribute-value-text">
+                          {{ getDisplayString(attribute) }}
+                        </span>
+                      </div>
+                    </template>
+                    <span>{{ getDisplayValueTooltip(attribute) }}</span>
+                  </v-tooltip>
                 </div>
               </v-list-item-content>
             </v-list-item>
           </v-expansion-panel-content>
         </v-expansion-panel>
 
-        <v-expansion-panel class="attribute-section-panel">
+        <v-expansion-panel
+          v-if="detectionAttributes.length"
+          class="attribute-section-panel border"
+        >
           <v-expansion-panel-header class="subtitle-2 py-2 attribute-section-header">
             <span>Detection Attributes</span>
             <v-menu left offset-y @click.stop>
@@ -176,6 +231,7 @@ export default defineComponent({
                   class="ml-2"
                   v-bind="attrs"
                   v-on="on"
+                  aria-label="Detection attribute settings"
                   @click.stop
                 >
                   <v-icon small>
@@ -194,6 +250,7 @@ export default defineComponent({
                             small
                             class="ml-1"
                             color="grey lighten-1"
+                            aria-label="Stickiness information"
                             v-on="infoOn"
                           >
                             mdi-information
@@ -250,9 +307,16 @@ export default defineComponent({
                       </div>
                     </v-tooltip>
                   </div>
-                  <div class="attribute-value">
-                    {{ getDisplayString(attribute) }}
-                  </div>
+                  <v-tooltip bottom max-width="420" open-delay="200">
+                    <template #activator="{ on }">
+                      <div class="attribute-value d-inline-flex align-center" v-on="on">
+                        <span class="attribute-value-text">
+                          {{ getDisplayString(attribute) }}
+                        </span>
+                      </div>
+                    </template>
+                    <span>{{ getDisplayValueTooltip(attribute) }}</span>
+                  </v-tooltip>
                 </div>
               </v-list-item-content>
             </v-list-item>
@@ -286,10 +350,18 @@ export default defineComponent({
 }
 
 .attribute-value {
-  flex: 0 0 auto;
+  flex: 0 1 46%;
   text-align: right;
-  white-space: normal;
-  word-break: break-word;
+  justify-content: flex-end;
+  min-width: 0;
+}
+
+.attribute-value-text {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
 }
 
 .attribute-sections {
diff --git a/docs/UI-DatasetInfo.md b/docs/UI-DatasetInfo.md
index 37359df..0033979 100644
--- a/docs/UI-DatasetInfo.md
+++ b/docs/UI-DatasetInfo.md
@@ -10,4 +10,25 @@ Utilizing the girder interface to add metadata or using the endpoint
 `PUT /folder/{girder_id}/metadata` 
 with the key of `datasetInfo` will allow for meatadat to be added to the folder which will then be displayed in the user interface.
 
+## Attributes Panel in Dataset Info
+
+When a track is selected and the dataset has attribute definitions, an **Attributes** panel appears in Dataset Info.
+
+- **Track Attributes** show values attached to the selected track.
+- **Detection Attributes** show frame-specific values for the selected track at the current frame.
+- Empty sections are hidden automatically. For example, if there are no detection attributes, the detection section and its settings menu are not shown.
+
+### Stickiness (Detection Attributes)
+
+Detection Attributes include a settings menu (`:material-cog:`) with a **Stickiness** toggle.
+
+- When disabled, only values set on the current frame are shown.
+- When enabled, empty current-frame values can reuse the most recent non-empty value from earlier keyframes.
+- Inherited values are indicated in the value tooltip text.
+
+### Value Display and Tooltips
+
+- Long values are truncated in-row for readability.
+- Hovering a value shows the full text in a tooltip.
+- Hovering attribute info (`:material-information:`) shows datatype and predefined values (for text attributes with value lists).
 

From af1cf9bbf528644a70f95276a12d2fb5eaf1e78e Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 21 Apr 2026 09:47:59 -0400
Subject: [PATCH 4/4] version increment

---
 client/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/package.json b/client/package.json
index 2afbccb..9fd1696 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dive-dsa",
-  "version": "1.11.24",
+  "version": "1.11.25",
   "author": {
     "name": "Kitware, Inc.",
     "email": "Bryon.Lewis@kitware.com"