From 4ad2a181f455b7186bbd7ea5babdb9b0e5bd5936 Mon Sep 17 00:00:00 2001
From: Forrest Collman <forrest.collman@gmail.com>
Date: Fri, 23 Feb 2024 21:57:00 -0800
Subject: [PATCH] feat(annotation): add annotation ID and make properties
 selectable (#530)

---
 src/ui/annotations.css |  1 +
 src/ui/annotations.ts  | 17 +++++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/src/ui/annotations.css b/src/ui/annotations.css
index 6eb829594..39b3b41bf 100644
--- a/src/ui/annotations.css
+++ b/src/ui/annotations.css
@@ -250,6 +250,7 @@ div.neuroglancer-annotation-details-description {
   flex-direction: row;
   font-family: sans-serif;
   font-size: small;
+  user-select: text;
 }
 
 .neuroglancer-annotation-property-label {
diff --git a/src/ui/annotations.ts b/src/ui/annotations.ts
index 022b80247..c799c90be 100644
--- a/src/ui/annotations.ts
+++ b/src/ui/annotations.ts
@@ -1851,6 +1851,23 @@ export function UserLayerWithAnnotationsMixin<
                 const { relationships, properties } = annotationLayer.source;
                 const sourceReadonly = annotationLayer.source.readonly;
 
+                // Add the ID to the annotation details.
+                const label = document.createElement("label");
+                label.classList.add("neuroglancer-annotation-property");
+                const idElement = document.createElement("span");
+                idElement.classList.add(
+                  "neuroglancer-annotation-property-label",
+                );
+                idElement.textContent = "ID";
+                label.appendChild(idElement);
+                const valueElement = document.createElement("span");
+                valueElement.classList.add(
+                  "neuroglancer-annotation-property-value",
+                );
+                valueElement.textContent = reference.id;
+                label.appendChild(valueElement);
+                parent.appendChild(label);
+
                 for (let i = 0, count = properties.length; i < count; ++i) {
                   const property = properties[i];
                   const label = document.createElement("label");