feat: Allow arbitrary key/value metadata on annotations, and display it in the into tooltip

Author: zachmullen

src/components/tools/AnnotationInfo.vue

@@ -6,7 +6,7 @@ import { OverlayInfo } from '@/src/composables/annotationTool';
 
 // These seem to work ¯\_(ツ)_/¯
 const TOOLTIP_PADDING_X = 30;
-const TOOLTIP_PADDING_Y = 20;
+const TOOLTIP_PADDING_Y = 10;
 
 const props = defineProps<{
   info: OverlayInfo;
@@ -17,6 +17,20 @@ const visible = computed(() => {
   return props.info.visible;
 });
 
+const metadata = computed(() => {
+  if (!props.info.visible) return [] as Array<{ key: string; value: string }>;
+  const meta = props.toolStore.toolByID[props.info.toolID].metadata ?? {};
+  const sortedMetadata = Object.entries(meta ?? {}).sort((a, b) =>
+    a[0].localeCompare(b[0])
+  );
+  return sortedMetadata.map(([key, value]) => {
+    return {
+      key,
+      value,
+    };
+  });
+});
+
 const label = computed(() => {
   if (!props.info.visible) return '';
   return props.toolStore.toolByID[props.info.toolID].labelName;
@@ -50,13 +64,25 @@ const offset = computed(() => {
     }"
     class="better-contrast"
   >
-    {{ label }}
+    <div class="tooltip-text font-weight-bold">{{ label }}</div>
+    <div v-if="metadata.length > 0">
+      <v-divider></v-divider>
+      <div v-for="item in metadata" :key="item.key" class="tooltip-text">
+        {{ item.key }}: {{ item.value }}
+      </div>
+    </div>
   </v-tooltip>
 </template>
 
 <style scoped>
 .better-contrast :deep(.v-overlay__content) {
   opacity: 1 !important;
   background: rgba(255, 255, 255, 0.9) !important;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.tooltip-text {
+  padding: 0 10px;
 }
 </style>

src/store/__tests__/rulers.spec.ts

@@ -8,7 +8,7 @@ import { ToolID } from '@/src/types/annotation-tool';
 
 function createRuler(): RequiredWithPartial<
   Ruler,
-  'id' | 'color' | 'strokeWidth' | 'label' | 'labelName' | 'hidden'
+  'id' | 'color' | 'strokeWidth' | 'label' | 'labelName' | 'hidden' | 'metadata'
 > {
   return {
     firstPoint: [1, 1, 1],

src/types/annotation-tool.ts

@@ -28,4 +28,9 @@ export type AnnotationTool = {
   name: string;
 
   hidden?: boolean;
+
+  /*
+   * Arbitrary key-value pairs associated with the annotation.
+   */
+  metadata?: Record<string, string>;
 };