From a0f7cfb58cd32c24644a413c750f5a3deb0d773f Mon Sep 17 00:00:00 2001
From: Chris Jordan <jordanchriss@gmail.com>
Date: Wed, 17 Aug 2022 14:38:08 -0400
Subject: [PATCH 1/2] getting starred segments working on their own

---
 .../datasource/graphene/frontend.ts           |  89 ++++++----
 .../datasource/nggraph/frontend.ts            |   5 +-
 .../segmentation_display_state/backend.ts     |   1 +
 .../segmentation_display_state/base.ts        |   1 +
 .../segmentation_display_state/frontend.ts    |  29 +++-
 src/neuroglancer/segmentation_graph/local.ts  |   7 +-
 src/neuroglancer/segmentation_user_layer.css  |  28 ++++
 src/neuroglancer/segmentation_user_layer.ts   |  52 +++++-
 src/neuroglancer/ui/annotations.css           |   4 -
 src/neuroglancer/ui/segment_list.css          |  15 +-
 src/neuroglancer/ui/segment_list.ts           | 158 +++++++++++++-----
 src/neuroglancer/ui/segment_select_tools.ts   |   5 +-
 src/neuroglancer/widget/icon.css              |   8 +
 src/neuroglancer/widget/icon.ts               |  13 ++
 src/neuroglancer/widget/star_button.ts        |  24 +++
 src/neuroglancer/widget/virtual_list.ts       |   2 +-
 16 files changed, 330 insertions(+), 111 deletions(-)
 create mode 100644 src/neuroglancer/widget/star_button.ts

diff --git a/src/neuroglancer/datasource/graphene/frontend.ts b/src/neuroglancer/datasource/graphene/frontend.ts
index 16ee5a8309..01117d6add 100644
--- a/src/neuroglancer/datasource/graphene/frontend.ts
+++ b/src/neuroglancer/datasource/graphene/frontend.ts
@@ -647,6 +647,13 @@ class GraphConnection extends SegmentationGraphSourceConnection {
       public state: GrapheneState) {
     super(graph, layer.displayState.segmentationGroupState.value);
     const segmentsState = layer.displayState.segmentationGroupState.value;
+    segmentsState.selectedSegments.changed.add((segmentIds: Uint64[]|Uint64|null, add: boolean) => {
+      if (segmentIds !== null) {
+        segmentIds = Array<Uint64>().concat(segmentIds);
+      }
+      this.selectedSegmentsChanged(segmentIds, add);
+    });
+
     segmentsState.visibleSegments.changed.add((segmentIds: Uint64[]|Uint64|null, add: boolean) => {
       if (segmentIds !== null) {
         segmentIds = Array<Uint64>().concat(segmentIds);
@@ -681,44 +688,35 @@ class GraphConnection extends SegmentationGraphSourceConnection {
 
   private visibleSegmentsChanged(segments: Uint64[]|null, added: boolean) {
     const {segmentsState} = this;
-
+    const {focusSegment: {value: focusSegment}} = this.graph.state.multicutState;
+    if (focusSegment && !segmentsState.visibleSegments.has(focusSegment)) {
+      if (segmentsState.selectedSegments.has(focusSegment)) {
+        StatusMessage.showTemporaryMessage(`Can't hide active multicut segment.`, 3000);
+      } else {
+        StatusMessage.showTemporaryMessage(`Can't deselect active multicut segment.`, 3000);
+      }
+      segmentsState.selectedSegments.add(focusSegment);
+      segmentsState.visibleSegments.add(focusSegment);
+      if (segments) {
+        segments = segments.filter(segment => !Uint64.equal(segment, focusSegment));
+      }
+    }
     if (segments === null) {
-      const leafSegmentCount = this.segmentsState.visibleSegments.size;
+      const leafSegmentCount = this.segmentsState.selectedSegments.size;
       this.segmentsState.segmentEquivalences.clear();
-      StatusMessage.showTemporaryMessage(`Deselected all ${leafSegmentCount} segments.`, 3000);
+      StatusMessage.showTemporaryMessage(`Hid all ${leafSegmentCount} segments.`, 3000);
       return;
     }
-
     for (const segmentId of segments) {
-      const isBaseSegment = isBaseSegmentId(segmentId, this.graph.info.graph.nBitsForLayerId);
-
-      const segmentConst = segmentId.clone();
-
-      if (added) {
-        if (isBaseSegment) {
-          this.graph.getRoot(segmentConst).then(rootId => {
-            segmentsState.visibleSegments.delete(segmentConst);
-            segmentsState.visibleSegments.add(rootId);
-          });
-        }
-      } else if (!isBaseSegment) {
-        const {focusSegment: {value: focusSegment}} = this.graph.state.multicutState;
-        if (focusSegment && Uint64.equal(segmentId, focusSegment)) {
-          segmentsState.visibleSegments.add(segmentId);
-          StatusMessage.showTemporaryMessage(`Can't deselect active multicut segment.`, 3000);
-          return;
-        }
-
+      if (!added) {
         const segmentCount = [...segmentsState.segmentEquivalences.setElements(segmentId)].length; // Approximation
-
         segmentsState.segmentEquivalences.deleteSet(segmentId);
-
         if (this.lastDeselectionMessage && this.lastDeselectionMessageExists) {
           this.lastDeselectionMessage.dispose();
           this.lastDeselectionMessageExists = false;
         }
         this.lastDeselectionMessage =
-            StatusMessage.showMessage(`Deselected ${segmentCount} segments.`);
+            StatusMessage.showMessage(`Hid ${segmentCount} segments.`);
         this.lastDeselectionMessageExists = true;
         setTimeout(() => {
           if (this.lastDeselectionMessageExists) {
@@ -729,6 +727,30 @@ class GraphConnection extends SegmentationGraphSourceConnection {
       }
     }
   }
+
+  private selectedSegmentsChanged(segments: Uint64[]|null, added: boolean) {
+    const {segmentsState} = this;
+    if (segments === null) {
+      const leafSegmentCount = this.segmentsState.selectedSegments.size;
+      StatusMessage.showTemporaryMessage(`Deselected all ${leafSegmentCount} segments.`, 3000);
+      return;
+    }
+    for (const segmentId of segments) {
+      const isBaseSegment = isBaseSegmentId(segmentId, this.graph.info.graph.nBitsForLayerId);
+      const segmentConst = segmentId.clone();
+      if (added) {
+        if (isBaseSegment) {
+          this.graph.getRoot(segmentConst).then(rootId => {
+            if (segmentsState.visibleSegments.has(segmentConst)) {
+              segmentsState.visibleSegments.add(rootId);
+            }
+            segmentsState.selectedSegments.delete(segmentConst);
+            segmentsState.selectedSegments.add(rootId);
+          });
+        }
+      }
+    }
+  }
     
   computeSplit(include: Uint64, exclude: Uint64): ComputedSplit|undefined {
     include;
@@ -751,7 +773,11 @@ class GraphConnection extends SegmentationGraphSourceConnection {
         const focusSegment = multicutState.focusSegment.value!;
         multicutState.reset(); // need to clear the focus segment before deleting the multicut segment
         const {segmentsState} = this;
-        segmentsState.visibleSegments.delete(focusSegment);
+        segmentsState.selectedSegments.delete(focusSegment);
+        for (const segment of [...sinks, ...sources]) {
+          segmentsState.selectedSegments.delete(segment.rootId);
+        }
+        segmentsState.selectedSegments.add(splitRoots);
         segmentsState.visibleSegments.add(splitRoots);
         return true;
       }
@@ -1261,7 +1287,7 @@ class MulticutSegmentsTool extends Tool<SegmentationUserLayer> {
 
     activation.bindAction('set-anchor', event => {
       event.stopPropagation();
-      const currentSegmentSelection = maybeGetSelection(this, segmentationGroupState.visibleSegments);
+      const currentSegmentSelection = maybeGetSelection(this, segmentationGroupState.visibleSegments); // or visible segments?
       if (!currentSegmentSelection) return;
       const {rootId, segmentId} = currentSegmentSelection;
       const {focusSegment, segments} = multicutState;
@@ -1397,9 +1423,10 @@ class MergeSegmentsTool extends Tool<SegmentationUserLayer> {
             const loadedSubsource = getGraphLoadedSubsource(this.layer)!;
             const annotationToNanometers = loadedSubsource.loadedDataSource.transform.inputSpace.value.scales.map(x => x / 1e-9);
             const mergedRoot = await graph.graphServer.mergeSegments(lastSegmentSelection, selection, annotationToNanometers);
-            const {visibleSegments} = segmentationGroupState;
-            visibleSegments.delete(lastSegmentSelection.rootId);
-            visibleSegments.delete(selection.rootId);
+            const {selectedSegments, visibleSegments} = segmentationGroupState;
+            selectedSegments.delete(lastSegmentSelection.rootId);
+            selectedSegments.delete(selection.rootId);
+            selectedSegments.add(mergedRoot);
             visibleSegments.add(mergedRoot);
             this.lastAnchorSelection.value = undefined;
             activation.cancel();
diff --git a/src/neuroglancer/datasource/nggraph/frontend.ts b/src/neuroglancer/datasource/nggraph/frontend.ts
index e62eb2df08..4e120e3a77 100644
--- a/src/neuroglancer/datasource/nggraph/frontend.ts
+++ b/src/neuroglancer/datasource/nggraph/frontend.ts
@@ -218,9 +218,12 @@ class GraphConnection extends SegmentationGraphSourceConnection {
       try {
         this.ignoreVisibleSegmentsChanged = true;
         if (this.segmentsState.visibleSegments.has(oldId)) {
-          this.segmentsState.visibleSegments.delete(oldId);
           this.segmentsState.visibleSegments.add(newId);
         }
+        if (this.segmentsState.selectedSegments.has(oldId)) {
+          this.segmentsState.selectedSegments.delete(oldId);
+          this.segmentsState.selectedSegments.add(newId);
+        }
         if (this.segmentsState.temporaryVisibleSegments.has(oldId)) {
           this.segmentsState.temporaryVisibleSegments.delete(oldId);
           this.segmentsState.temporaryVisibleSegments.add(newId);
diff --git a/src/neuroglancer/segmentation_display_state/backend.ts b/src/neuroglancer/segmentation_display_state/backend.ts
index 08277090a2..223635ca8a 100644
--- a/src/neuroglancer/segmentation_display_state/backend.ts
+++ b/src/neuroglancer/segmentation_display_state/backend.ts
@@ -43,6 +43,7 @@ export const withSegmentationLayerBackendState =
     <TBase extends AnyConstructor<ChunkRequester>>(Base: TBase) =>
         class SegmentationLayerState extends Base implements VisibleSegmentsState {
   visibleSegments: Uint64Set;
+  selectedSegments: Uint64Set;
   segmentEquivalences: SharedDisjointUint64Sets;
   temporaryVisibleSegments: Uint64Set;
   temporarySegmentEquivalences: SharedDisjointUint64Sets;
diff --git a/src/neuroglancer/segmentation_display_state/base.ts b/src/neuroglancer/segmentation_display_state/base.ts
index 282358276d..033ffb4d11 100644
--- a/src/neuroglancer/segmentation_display_state/base.ts
+++ b/src/neuroglancer/segmentation_display_state/base.ts
@@ -23,6 +23,7 @@ import {VisibleSegmentEquivalencePolicy} from 'neuroglancer/segmentation_graph/s
 
 export interface VisibleSegmentsState {
   visibleSegments: Uint64Set;
+  selectedSegments: Uint64Set;
   segmentEquivalences: SharedDisjointUint64Sets;
 
   // Specifies a temporary/alternative set of segments/equivalences to use for display purposes,
diff --git a/src/neuroglancer/segmentation_display_state/frontend.ts b/src/neuroglancer/segmentation_display_state/frontend.ts
index a3b36b43d0..024fa8611b 100644
--- a/src/neuroglancer/segmentation_display_state/frontend.ts
+++ b/src/neuroglancer/segmentation_display_state/frontend.ts
@@ -40,6 +40,7 @@ import {Uint64} from 'neuroglancer/util/uint64';
 import {withSharedVisibility} from 'neuroglancer/visibility_priority/frontend';
 import {makeCopyButton} from 'neuroglancer/widget/copy_button';
 import {makeFilterButton} from 'neuroglancer/widget/filter_button';
+import {makeStarButton} from 'neuroglancer/widget/star_button';
 
 export class Uint64MapEntry {
   constructor(public key: Uint64, public value?: Uint64, public label?: string|undefined) {}
@@ -270,6 +271,13 @@ const segmentWidgetTemplate = (() => {
   idElement.classList.add('neuroglancer-segment-list-entry-id');
   const idIndex = idContainer.childElementCount;
   idContainer.appendChild(idElement);
+  const starButton = makeStarButton({
+    title: `Star segment`,
+  });
+  starButton.classList.add('neuroglancer-segment-list-entry-star');
+  const starIndex = stickyContainer.childElementCount;
+  stickyContainer.appendChild(starButton);
+
   const nameElement = document.createElement('span');
   nameElement.classList.add('neuroglancer-segment-list-entry-name');
   const labelIndex = template.childElementCount;
@@ -289,6 +297,7 @@ const segmentWidgetTemplate = (() => {
     idIndex,
     labelIndex,
     filterIndex,
+    starIndex,
     unmappedIdIndex: -1,
     unmappedCopyIndex: -1
   };
@@ -381,8 +390,12 @@ function makeRegisterSegmentWidgetEventHandlers(displayState: SegmentationDispla
     const idString = entryElement.dataset.id!;
     const id = tempStatedColor;
     id.tryParseString(idString);
-    const {visibleSegments} = displayState.segmentationGroupState.value;
-    visibleSegments.set(id, !visibleSegments.has(id));
+    const {selectedSegments, visibleSegments} = displayState.segmentationGroupState.value;
+    const shouldBeVisible = !visibleSegments.has(id);
+    if (shouldBeVisible) {
+      selectedSegments.add(id);
+    }
+    visibleSegments.set(id, shouldBeVisible);
     event.stopPropagation();
   };
 
@@ -421,6 +434,16 @@ function makeRegisterSegmentWidgetEventHandlers(displayState: SegmentationDispla
     stickyChildren[template.visibleIndex].addEventListener('click', visibleCheckboxHandler);
     children[template.filterIndex].addEventListener('click', filterHandler);
     element.addEventListener('action:select-position', selectHandler);
+
+    const starButton = stickyChildren[template.starIndex] as HTMLElement;
+    starButton.addEventListener('click', (event: MouseEvent) => {
+      const entryElement = getEntryElement(event);
+      const idString = entryElement.dataset.id!;
+      const id = tempStatedColor
+      id.tryParseString(idString);
+      const {selectedSegments} = displayState.segmentationGroupState.value;
+      selectedSegments.set(id, !selectedSegments.has(id));
+    });
   };
 }
 
@@ -511,6 +534,8 @@ export class SegmentWidgetFactory<Template extends SegmentWidgetTemplate> {
     container.dataset.selected = (segmentSelectionState.hasSelectedSegment &&
                                   Uint64.equal(segmentSelectionState.selectedSegment, mapped))
                                      .toString();
+    const {selectedSegments} = displayState!.segmentationGroupState.value;
+    container.dataset.selectedSegment = selectedSegments.has(mapped) ? 'true' : 'false';
     const idContainer = stickyChildren[template.idContainerIndex] as HTMLElement;
     setSegmentIdElementStyle(
         (idContainer.children[template.idIndex] as HTMLElement),
diff --git a/src/neuroglancer/segmentation_graph/local.ts b/src/neuroglancer/segmentation_graph/local.ts
index fd5be27de7..1cf32086f9 100644
--- a/src/neuroglancer/segmentation_graph/local.ts
+++ b/src/neuroglancer/segmentation_graph/local.ts
@@ -179,9 +179,10 @@ export class LocalSegmentationGraphSource extends SegmentationGraphSource {
     removeSplitEdges(includeBaseSegments, includeRoot);
     removeSplitEdges(excludeBaseSegments, excludeRoot);
     for (const connection of this.connections) {
-      const {visibleSegments} = connection.segmentsState;
-      if (visibleSegments.has(excludeRepresentative)) {
-        visibleSegments.delete(excludeRepresentative);
+      const {selectedSegments, visibleSegments} = connection.segmentsState;
+      if (selectedSegments.has(excludeRepresentative)) {
+        selectedSegments.delete(excludeRepresentative);
+        selectedSegments.add(includeRepresentative);
         visibleSegments.add(includeRepresentative);
       }
     }
diff --git a/src/neuroglancer/segmentation_user_layer.css b/src/neuroglancer/segmentation_user_layer.css
index 2378026036..924660f5dd 100644
--- a/src/neuroglancer/segmentation_user_layer.css
+++ b/src/neuroglancer/segmentation_user_layer.css
@@ -55,6 +55,34 @@
   background-color: #222;
 }
 
+.neuroglancer-segment-list-entry:not([data-selected-segment="true"]) .neuroglancer-icon-hover:hover svg:first-child {
+  display: inherit;
+}
+
+.neuroglancer-segment-list-entry:not([data-selected-segment="true"]) .neuroglancer-icon-hover:hover svg:last-child {
+  display: none;
+}
+
+.neuroglancer-segment-list-entry[data-selected-segment="true"] .neuroglancer-segment-list-entry-star:not(:hover) svg {
+  fill: white;
+}
+
+.neuroglancer-segment-list-status-star:not(:hover).unstar svg {
+  fill: white;
+}
+
+.neuroglancer-segment-list-status-star:not(.unstar) svg:first-child {
+  display: inherit;
+}
+
+.neuroglancer-segment-list-status-star:not(.unstar) svg:last-child {
+  display: none;
+}
+
+.neuroglancer-segment-list-entry[data-selected-segment="true"] .neuroglancer-segment-list-entry-star:hover svg {
+  fill: inherit;
+}
+
 .neuroglancer-segment-list-entry-copy-container {
   display: flex;
   flex-direction: column;
diff --git a/src/neuroglancer/segmentation_user_layer.ts b/src/neuroglancer/segmentation_user_layer.ts
index cc0d2fabdd..f123c62cda 100644
--- a/src/neuroglancer/segmentation_user_layer.ts
+++ b/src/neuroglancer/segmentation_user_layer.ts
@@ -70,7 +70,8 @@ const BASE_SEGMENT_COLORING_JSON_KEY = 'baseSegmentColoring';
 const IGNORE_NULL_VISIBLE_SET_JSON_KEY = 'ignoreNullVisibleSet';
 const MESH_JSON_KEY = 'mesh';
 const SKELETONS_JSON_KEY = 'skeletons';
-const SEGMENTS_JSON_KEY = 'segments';
+const SELECTED_SEGMENTS_JSON_KEY = 'segments';
+const VISIBLE_SEGMENTS_JSON_KEY = 'visibleSegments';
 const EQUIVALENCES_JSON_KEY = 'equivalences';
 const COLOR_SEED_JSON_KEY = 'colorSeed';
 const SEGMENT_STATED_COLORS_JSON_KEY = 'segmentColors';
@@ -92,9 +93,21 @@ export class SegmentationUserLayerGroupState extends RefCounted implements Segme
   constructor(public layer: SegmentationUserLayer) {
     super();
     const {specificationChanged} = this;
-    this.visibleSegments.changed.add(specificationChanged.dispatch);
     this.hideSegmentZero.changed.add(specificationChanged.dispatch);
     this.segmentQuery.changed.add(specificationChanged.dispatch);
+
+    const {visibleSegments, selectedSegments} = this;
+    visibleSegments.changed.add(specificationChanged.dispatch);
+    selectedSegments.changed.add(specificationChanged.dispatch);
+    selectedSegments.changed.add((x, add) => {
+      if (!add) {
+        if (x) {
+          visibleSegments.delete(x);
+        } else {
+          visibleSegments.clear();
+        }
+      }
+    });
   }
 
   restoreState(specification: unknown) {
@@ -105,23 +118,39 @@ export class SegmentationUserLayerGroupState extends RefCounted implements Segme
       this.localGraph.restoreState(value);
     });
 
-    verifyOptionalObjectProperty(specification, SEGMENTS_JSON_KEY, segmentsValue => {
+    verifyOptionalObjectProperty(specification, SELECTED_SEGMENTS_JSON_KEY, segmentsValue => {
+      const {segmentEquivalences, selectedSegments} = this;
+      // backwards compatibility, assume all selected are visible
+      const missingVisible = !Object.prototype.hasOwnProperty.call(specification, VISIBLE_SEGMENTS_JSON_KEY);
+      parseArray(segmentsValue, value => {
+        let id = Uint64.parseString(String(value), 10);
+        selectedSegments.add(segmentEquivalences.get(id));
+        if (missingVisible) {
+          this.visibleSegments.add(segmentEquivalences.get(id));
+        }
+      });
+    });
+    verifyOptionalObjectProperty(specification, VISIBLE_SEGMENTS_JSON_KEY, segmentsValue => {
       const {segmentEquivalences, visibleSegments} = this;
       parseArray(segmentsValue, value => {
         let id = Uint64.parseString(String(value), 10);
         visibleSegments.add(segmentEquivalences.get(id));
       });
     });
-    verifyOptionalObjectProperty(
-        specification, SEGMENT_QUERY_JSON_KEY, value => this.segmentQuery.restoreState(value));
   }
 
   toJSON() {
     const x: any = {};
     x[HIDE_SEGMENT_ZERO_JSON_KEY] = this.hideSegmentZero.toJSON();
+    let {selectedSegments} = this;
+    if (selectedSegments.size > 0) {
+      x[SELECTED_SEGMENTS_JSON_KEY] = this.selectedSegments.toJSON();
+    }
     let {visibleSegments} = this;
     if (visibleSegments.size > 0) {
-      x[SEGMENTS_JSON_KEY] = visibleSegments.toJSON();
+      x[VISIBLE_SEGMENTS_JSON_KEY] = this.visibleSegments.toJSON();
+    } else {
+      x[VISIBLE_SEGMENTS_JSON_KEY] = [];
     }
     let {segmentEquivalences} = this;
     if (this.localSegmentEquivalences && segmentEquivalences.size > 0) {
@@ -134,12 +163,14 @@ export class SegmentationUserLayerGroupState extends RefCounted implements Segme
   assignFrom(other: SegmentationUserLayerGroupState) {
     this.maxIdLength.value = other.maxIdLength.value;
     this.hideSegmentZero.value = other.hideSegmentZero.value;
+    this.selectedSegments.assignFrom(other.selectedSegments);
     this.visibleSegments.assignFrom(other.visibleSegments);
     this.segmentEquivalences.assignFrom(other.segmentEquivalences);
   }
 
   localGraph = new LocalSegmentationGraphSource();
   visibleSegments = this.registerDisposer(Uint64Set.makeWithCounterpart(this.layer.manager.rpc));
+  selectedSegments = this.registerDisposer(Uint64Set.makeWithCounterpart(this.layer.manager.rpc));
   segmentPropertyMap = new WatchableValue<PreprocessedSegmentPropertyMap|undefined>(undefined);
   graph = new WatchableValue<SegmentationGraphSource|undefined>(undefined);
   segmentEquivalences = this.registerDisposer(SharedDisjointUint64Sets.makeWithCounterpart(
@@ -687,14 +718,17 @@ export class SegmentationUserLayer extends Base {
         const {segmentSelectionState} = this.displayState;
         if (segmentSelectionState.hasSelectedSegment) {
           const segment = segmentSelectionState.selectedSegment;
-          const {visibleSegments} = this.displayState.segmentationGroupState.value;
-          const newVisible = !visibleSegments.has(segment);
+          const {selectedSegments, visibleSegments} = this.displayState.segmentationGroupState.value;
+          const newVisible = !selectedSegments.has(segment);
           if (newVisible || context.segmentationToggleSegmentState === undefined) {
             context.segmentationToggleSegmentState = newVisible;
           }
           context.defer(() => {
             if (context.segmentationToggleSegmentState === newVisible) {
-              visibleSegments.set(segment, newVisible);
+              selectedSegments.set(segment, newVisible);
+              if (newVisible) { // because selectedSegments already handles visible deletion
+                visibleSegments.set(segment, newVisible);
+              }
             }
           });
         }
diff --git a/src/neuroglancer/ui/annotations.css b/src/neuroglancer/ui/annotations.css
index e9596e34f0..aafd34558d 100644
--- a/src/neuroglancer/ui/annotations.css
+++ b/src/neuroglancer/ui/annotations.css
@@ -277,10 +277,6 @@ input.neuroglancer-segment-list-entry-id {
   visibility: hidden;
 }
 
-.neuroglancer-segment-list-entry-delete {
-  order: 0;
-}
-
 .neuroglancer-selection-annotation-status {
   font-family: sans-serif;
   font-size: small;
diff --git a/src/neuroglancer/ui/segment_list.css b/src/neuroglancer/ui/segment_list.css
index ea3e1a19e1..cfc2b3bf78 100644
--- a/src/neuroglancer/ui/segment_list.css
+++ b/src/neuroglancer/ui/segment_list.css
@@ -95,20 +95,7 @@
 }
 
 .neuroglancer-segment-list-entry-visible-checkbox {
-  order: -1;
-}
-
-.neuroglancer-segment-list-entry[data-visible-list] .neuroglancer-segment-list-entry-sticky::before {
-  order: -1000;
-  content: " ";
-  display: inline-block;
-  width: 2px;
-  /* prevent collapsing if name is too long */
-  flex-shrink: 0;
-  margin-right: -2px;
-  align-self: stretch;
-  margin-bottom: 2px;
-  background-color: #999;
+  order: 1;
 }
 
 .neuroglancer-segment-list-entry-filter {
diff --git a/src/neuroglancer/ui/segment_list.ts b/src/neuroglancer/ui/segment_list.ts
index 1026ce5b11..6fc1a1dbb3 100644
--- a/src/neuroglancer/ui/segment_list.ts
+++ b/src/neuroglancer/ui/segment_list.ts
@@ -41,7 +41,8 @@ import {clampToInterval, computeInvlerp, dataTypeCompare, DataTypeInterval, data
 import {CdfController, getUpdatedRangeAndWindowParameters, RangeAndWindowIntervals} from 'neuroglancer/widget/invlerp';
 import {makeToolButton} from 'neuroglancer/ui/tool';
 import {ANNOTATE_MERGE_SEGMENTS_TOOL_ID, ANNOTATE_SPLIT_SEGMENTS_TOOL_ID} from 'neuroglancer/ui/segment_split_merge_tools';
-import { SELECT_SEGMENTS_TOOLS_ID } from 'neuroglancer/ui/segment_select_tools';
+import {SELECT_SEGMENTS_TOOLS_ID} from 'neuroglancer/ui/segment_select_tools';
+import {makeStarButton} from 'neuroglancer/widget/star_button';
 
 const tempUint64 = new Uint64();
 
@@ -56,6 +57,7 @@ class SegmentListSource extends RefCounted implements VirtualListSource {
   explicitSegments: Uint64[]|undefined;
   explicitSegmentsVisible: boolean = false;
   visibleSegmentsGeneration = -1;
+  selectedSegmentsGeneration = -1;
   prevQuery: string|undefined;
   queryResult = new WatchableValue<QueryResult|undefined>(undefined);
   statusText = new WatchableValue<string>('');
@@ -67,6 +69,7 @@ class SegmentListSource extends RefCounted implements VirtualListSource {
   }
 
   private update() {
+    console.log('listsource update');
     const query = this.query.value;
 
     const {segmentPropertyMap} = this;
@@ -82,16 +85,20 @@ class SegmentListSource extends RefCounted implements VirtualListSource {
     const splices: ArraySpliceOp[] = [];
     let changed = false;
     let matchStatusTextPrefix = '';
-    const {visibleSegments} = this.segmentationDisplayState.segmentationGroupState.value;
+    const {selectedSegments, visibleSegments} = this.segmentationDisplayState.segmentationGroupState.value;
     const visibleSegmentsGeneration = visibleSegments.changed.count;
+    const selectedSegmentsGeneration = selectedSegments.changed.count;
     const prevVisibleSegmentsGeneration = this.visibleSegmentsGeneration;
+    const prevSelectedSegmentsGeneration = this.selectedSegmentsGeneration;
+    const segmentsChanged = prevVisibleSegmentsGeneration !== visibleSegmentsGeneration ||
+      prevSelectedSegmentsGeneration !== selectedSegmentsGeneration
     const unconstrained = isQueryUnconstrained(queryResult.query);
     if (unconstrained) {
       // Full list of visible segments is shown only if no query is specified.
-      if (prevVisibleSegmentsGeneration !== visibleSegmentsGeneration ||
+      if (segmentsChanged ||
           this.explicitSegments === undefined || !this.explicitSegmentsVisible) {
         this.visibleSegmentsGeneration = visibleSegmentsGeneration;
-        const newSortedVisibleSegments = Array.from(visibleSegments, x => x.clone());
+        const newSortedVisibleSegments = Array.from(selectedSegments, x => x.clone());
         newSortedVisibleSegments.sort(Uint64.compare);
         const {explicitSegments} = this;
         if (explicitSegments === undefined) {
@@ -105,11 +112,13 @@ class SegmentListSource extends RefCounted implements VirtualListSource {
         this.explicitSegments = newSortedVisibleSegments;
         changed = true;
       } else {
+        console.log('not a new generation', prevVisibleSegmentsGeneration === visibleSegmentsGeneration);
         splices.push({retainCount: this.explicitSegments.length, deleteCount: 0, insertCount: 0});
       }
       this.explicitSegmentsVisible = true;
     } else {
       this.visibleSegmentsGeneration = visibleSegmentsGeneration;
+      this.selectedSegmentsGeneration = selectedSegmentsGeneration;
       if (this.explicitSegments !== undefined && this.explicitSegmentsVisible) {
         splices.push({deleteCount: this.explicitSegments.length, retainCount: 0, insertCount: 0});
         this.explicitSegments = undefined;
@@ -144,15 +153,15 @@ class SegmentListSource extends RefCounted implements VirtualListSource {
     }
 
     if (prevQueryResult !== queryResult ||
-        visibleSegmentsGeneration !== prevVisibleSegmentsGeneration) {
+        segmentsChanged) {
       let statusText = matchStatusTextPrefix;
       let selectedMatches = 0;
-      if (segmentPropertyMap !== undefined && queryResult.count > 0) {
+      // if (segmentPropertyMap !== undefined && queryResult.count > 0) { // TODO: this code seems useful without a segmentPropertyMap
         // Recompute selectedMatches.
         selectedMatches =
             findQueryResultIntersectionSize(segmentPropertyMap, queryResult, visibleSegments);
         statusText += ` (${selectedMatches} visible)`;
-      }
+      // }
       this.selectedMatches = selectedMatches;
       this.statusText.value = statusText;
     }
@@ -174,6 +183,9 @@ class SegmentListSource extends RefCounted implements VirtualListSource {
     super();
     this.update();
 
+    this.registerDisposer(
+        segmentationDisplayState.segmentationGroupState.value.selectedSegments.changed.add(
+            this.debouncedUpdate));
     this.registerDisposer(
         segmentationDisplayState.segmentationGroupState.value.visibleSegments.changed.add(
             this.debouncedUpdate));
@@ -224,7 +236,7 @@ const keyMap = EventActionMap.fromObject({
   'escape': {action: 'cancel'},
 });
 
-const selectSegmentConfirmationThreshold = 100;
+const selectSegmentConfirmationThreshold = 200;
 
 interface NumericalBoundElements {
   container: HTMLElement;
@@ -862,27 +874,69 @@ export class SegmentDisplayTab extends Tab {
                   queryStatisticsContainer.classList.add(
                       'neuroglancer-segment-query-result-statistics');
                   const selectionStatusContainer = document.createElement('span');
-                  const selectionClearButton = document.createElement('input');
-                  selectionClearButton.type = 'checkbox';
-                  selectionClearButton.checked = true;
-                  selectionClearButton.title = 'Deselect all segment IDs';
-                  selectionClearButton.addEventListener('change', () => {
-                    group.visibleSegments.clear();
+                  const visibilityToggleAllButton = document.createElement('input');
+                  visibilityToggleAllButton.type = 'checkbox';
+                  visibilityToggleAllButton.checked = true;
+                  visibilityToggleAllButton.title = 'Deselect all segment IDs';
+                  visibilityToggleAllButton.addEventListener('change', () => {
+                    const adding = visibilityToggleAllButton.checked;
+                    debouncedUpdateQueryModel();
+                    debouncedUpdateQueryModel.flush();
+                    listSource.debouncedUpdate.flush();
+                    const queryResult = listSource.queryResult.value;
+                    const {selectedSegments, visibleSegments} = group;
+                    if (listSource.numMatches === 0) { // TODO, how should I check for this?
+                      for (const segment of selectedSegments) {
+                        visibleSegments.set(segment, adding);
+                      }
+                    } else {
+                      forEachQueryResultSegmentId(segmentPropertyMap, queryResult, (id) => {
+                        if (adding) {
+                          group.selectedSegments.add(id);
+                          group.visibleSegments.add(id);
+                        } else {
+                          group.visibleSegments.delete(id);
+                        }
+                      });
+                    }
                   });
                   const selectionCopyButton = makeCopyButton({
-                    title: 'Copy visible segment IDs',
+                    title: 'Copy segment IDs',
+                    onClick: () => {
+                      const ids: Uint64[] = [];
+                      const queryResult = listSource.queryResult.value;
+                      if (queryResult === undefined) return;
+                      forEachQueryResultSegmentId(segmentPropertyMap, queryResult, (id) => {
+                        ids.push(id);
+                      });
+                      ids.sort(Uint64.compare);
+                      setClipboard(ids.join(', '));
+                    },
+                  });
+                  const starAllButton = makeStarButton({
+                    title: 'Toggle star status',
                     onClick: () => {
-                      const visibleSegments = Array.from(group.visibleSegments, x => x.clone());
-                      visibleSegments.sort(Uint64.compare);
-                      setClipboard(visibleSegments.join(', '));
+                      const unstar = starAllButton.classList.contains('unstar');
+                      const queryResult = listSource.queryResult.value;
+                      if (listSource.numMatches === 0) {
+                        const {selectedSegments} = group;
+                        selectedSegments.clear();
+                      } else {
+                        console.log('unstar', unstar);
+                        const {selectedSegments} = group;
+                        forEachQueryResultSegmentId(segmentPropertyMap, queryResult, (id) => {
+                          selectedSegments.set(id, !unstar);
+                        });
+                      }
                     },
                   });
+                  starAllButton.classList.add('neuroglancer-segment-list-status-star');
                   const selectionStatusMessage = document.createElement('span');
                   selectionStatusContainer.appendChild(selectionCopyButton);
-                  selectionStatusContainer.appendChild(selectionClearButton);
+                  selectionStatusContainer.appendChild(starAllButton);
+                  selectionStatusContainer.appendChild(visibilityToggleAllButton);
                   selectionStatusContainer.appendChild(selectionStatusMessage);
                   const matchStatusContainer = document.createElement('span');
-                  const matchCheckbox = document.createElement('input');
                   const matchCopyButton = makeCopyButton({
                     onClick: () => {
                       debouncedUpdateQueryModel();
@@ -897,14 +951,13 @@ export class SegmentDisplayTab extends Tab {
                       setClipboard(segmentStrings.join(', '));
                     },
                   });
-                  matchCheckbox.type = 'checkbox';
                   const toggleMatches = () => {
                     debouncedUpdateQueryModel();
                     debouncedUpdateQueryModel.flush();
                     listSource.debouncedUpdate.flush();
                     const queryResult = listSource.queryResult.value;
                     if (queryResult === undefined) return;
-                    const {visibleSegments} = group;
+                    const {selectedSegments, visibleSegments} = group;
                     const {selectedMatches} = listSource;
                     const shouldSelect = (selectedMatches !== queryResult.count);
                     if (shouldSelect &&
@@ -918,17 +971,15 @@ export class SegmentDisplayTab extends Tab {
                       hasConfirmed = false;
                       updateStatus();
                     }
+
                     forEachQueryResultSegmentId(segmentPropertyMap, queryResult, id => {
+                      selectedSegments.set(id, shouldSelect);
                       visibleSegments.set(id, shouldSelect);
                     });
                     return true;
                   };
-                  matchCheckbox.addEventListener('click', event => {
-                    if (!toggleMatches()) event.preventDefault();
-                  });
                   const matchStatusMessage = document.createElement('span');
                   matchStatusContainer.appendChild(matchCopyButton);
-                  matchStatusContainer.appendChild(matchCheckbox);
                   matchStatusContainer.appendChild(matchStatusMessage);
                   selectionStatusContainer.classList.add('neuroglancer-segment-list-status');
                   matchStatusContainer.classList.add('neuroglancer-segment-list-status');
@@ -939,38 +990,54 @@ export class SegmentDisplayTab extends Tab {
                   parent.appendChild(queryStatisticsSeparator);
                   parent.appendChild(matchStatusContainer);
                   parent.appendChild(selectionStatusContainer);
-                  let prevNumSelected = -1;
+                  let prevNumDisplayed = -1;
                   const updateStatus = () => {
-                    const numSelected = group.visibleSegments.size;
-                    if (prevNumSelected !== numSelected) {
-                      prevNumSelected = numSelected;
-                      selectionStatusMessage.textContent = `${numSelected} visible in total`;
-                      selectionClearButton.checked = numSelected > 0;
-                      selectionClearButton.style.visibility = numSelected ? 'visible' : 'hidden';
-                      selectionCopyButton.style.visibility = numSelected ? 'visible' : 'hidden';
+                    const {visibleSegments, selectedSegments} = group;
+                    let queryVisibleCount = 0;
+                    let querySelectedCount = 0;
+                    if (listSource.numMatches) {
+                      forEachQueryResultSegmentId(segmentPropertyMap, listSource.queryResult.value, id => {
+                        if (selectedSegments.has(id)) {
+                          querySelectedCount++;
+                        }
+                        if (visibleSegments.has(id)) {
+                          queryVisibleCount++;
+                        }
+                      });
+                    }
+                    const nonSelectedQueryCount = listSource.numMatches - querySelectedCount;
+                    const selectedCount = selectedSegments.size;
+                    const visibleCount = visibleSegments.size;
+                    const totalCount = nonSelectedQueryCount + selectedCount;
+                    const visibleDisplayedCount = listSource.numMatches ? queryVisibleCount : visibleCount;
+                    const visibleSelectedCount = listSource.numMatches ? querySelectedCount : selectedCount;
+                    const totalDisplayed = listSource.numMatches || selectedCount;
+                    starAllButton.classList.toggle('unstar', visibleSelectedCount > 0);
+                    selectionStatusMessage.textContent = `${visibleCount}/${totalCount} visible`;
+                    if (prevNumDisplayed !== totalDisplayed) {
+                      prevNumDisplayed = totalDisplayed;
+                      selectionCopyButton.style.visibility = totalDisplayed ? 'visible' : 'hidden';
+                      starAllButton.style.visibility = totalDisplayed ? 'visible' : 'hidden';
+                      visibilityToggleAllButton.style.visibility = totalDisplayed ? 'visible' : 'hidden';
                     }
                     matchStatusMessage.textContent = listSource.statusText.value;
                     const {numMatches, selectedMatches} = listSource;
                     matchCopyButton.style.visibility = numMatches ? 'visible' : 'hidden';
                     matchCopyButton.title = `Copy ${numMatches} segment ID(s)`;
-                    matchCheckbox.style.visibility = numMatches ? 'visible' : 'hidden';
                     if (selectedMatches === 0) {
-                      matchCheckbox.checked = false;
-                      matchCheckbox.indeterminate = false;
-                      matchCheckbox.title = `Show ${numMatches} segment ID(s)`;
+                      visibilityToggleAllButton.title = `Show ${numMatches} segment ID(s)`;
                     } else if (selectedMatches === numMatches) {
-                      matchCheckbox.checked = true;
-                      matchCheckbox.indeterminate = false;
-                      matchCheckbox.title = `Hide ${selectedMatches} segment ID(s)`;
+                      visibilityToggleAllButton.title = `Hide ${selectedMatches} segment ID(s)`;
                     } else {
-                      matchCheckbox.checked = true;
-                      matchCheckbox.indeterminate = true;
-                      matchCheckbox.title = `Show ${numMatches - selectedMatches} segment ID(s)`;
+                      visibilityToggleAllButton.title = `Hide ${selectedMatches} segment ID(s)`;
                     }
+                    visibilityToggleAllButton.checked = visibleDisplayedCount > 0;
                   };
                   updateStatus();
                   listSource.statusText.changed.add(updateStatus);
                   context.registerDisposer(group.visibleSegments.changed.add(updateStatus));
+                  context.registerDisposer(group.selectedSegments.changed.add(updateStatus));
+
                   let hasConfirmed = false;
                   context.registerEventListener(queryElement, 'input', () => {
                     debouncedUpdateQueryModel();
@@ -1018,6 +1085,7 @@ export class SegmentDisplayTab extends Tab {
                   const {displayState} = this.layer;
                   context.registerDisposer(
                       displayState.segmentSelectionState.changed.add(updateListItems));
+                  context.registerDisposer(group.selectedSegments.changed.add(updateListItems));
                   context.registerDisposer(group.visibleSegments.changed.add(updateListItems));
                   context.registerDisposer(
                       displayState.segmentColorHash.changed.add(updateListItems));
@@ -1050,10 +1118,12 @@ export class SegmentDisplayTab extends Tab {
                     }
                   };
                   observeWatchable((queryResult: QueryResult|undefined) => {
+                    console.log('observeWatchable');
                     listSource.segmentWidgetFactory = new SegmentWidgetWithExtraColumnsFactory(
                         listSource.segmentationDisplayState, listSource.parentElement,
                         property => queryIncludesColumn(queryResult?.query, property.id));
                     list.scrollToTop();
+                    console.log('scrolling to top!');
                     removeChildren(list.header);
                     if (segmentPropertyMap !== undefined) {
                       const header = listSource.segmentWidgetFactory.getHeader();
diff --git a/src/neuroglancer/ui/segment_select_tools.ts b/src/neuroglancer/ui/segment_select_tools.ts
index 184461e139..227b815298 100644
--- a/src/neuroglancer/ui/segment_select_tools.ts
+++ b/src/neuroglancer/ui/segment_select_tools.ts
@@ -90,13 +90,14 @@ export class SelectSegmentsTool extends Tool<SegmentationUserLayer> {
       const {segmentSelectionState} = layer.displayState;
       if (segmentSelectionState.hasSelectedSegment) {
         const segment = segmentSelectionState.selectedSegment;
-        const {visibleSegments} = layer.displayState.segmentationGroupState.value;
+        const {selectedSegments, visibleSegments} = layer.displayState.segmentationGroupState.value;
         switch (currentState) {
           case ToolState.SELECT:
+            selectedSegments.add(segment);
             visibleSegments.add(segment);
             break;
           case ToolState.DESELECT:
-            visibleSegments.delete(segment);
+            selectedSegments.delete(segment);
             break;
         }
       }
diff --git a/src/neuroglancer/widget/icon.css b/src/neuroglancer/widget/icon.css
index 8ccb4d6824..7f34221449 100644
--- a/src/neuroglancer/widget/icon.css
+++ b/src/neuroglancer/widget/icon.css
@@ -46,3 +46,11 @@
 .neuroglancer-icon:hover {
   background-color: #db4437;
 }
+
+.neuroglancer-icon-hover:not(:hover) svg:last-child {
+  display: none;
+}
+
+.neuroglancer-icon-hover:hover svg:first-child {
+  display: none;
+}
diff --git a/src/neuroglancer/widget/icon.ts b/src/neuroglancer/widget/icon.ts
index 460a2a58ca..01f16a6a80 100644
--- a/src/neuroglancer/widget/icon.ts
+++ b/src/neuroglancer/widget/icon.ts
@@ -24,6 +24,19 @@ export interface MakeIconOptions {
   href?: string;
 }
 
+export interface MakeHoverIconOptions extends MakeIconOptions {
+  svgHover?: string
+}
+
+export function makeHoverIcon(options: MakeHoverIconOptions): HTMLElement {
+  const element = makeIcon(options);
+  if (options.svgHover) {
+    element.classList.add('neuroglancer-icon-hover');
+    element.innerHTML += options.svgHover;
+  }
+  return element;
+}
+
 export function makeIcon(options: MakeIconOptions): HTMLElement {
   const {title, onClick, href} = options;
   let element: HTMLDivElement|HTMLAnchorElement;
diff --git a/src/neuroglancer/widget/star_button.ts b/src/neuroglancer/widget/star_button.ts
new file mode 100644
index 0000000000..a0a3b3b23d
--- /dev/null
+++ b/src/neuroglancer/widget/star_button.ts
@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2019 Google Inc.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import svg_bin from 'ikonate/icons/star.svg';
+import svg_close from 'ikonate/icons/close.svg';
+import {makeHoverIcon, MakeIconOptions} from 'neuroglancer/widget/icon';
+
+export function makeStarButton(options: MakeIconOptions = {}) {
+  const icon = makeHoverIcon({svg: svg_bin, svgHover: svg_close, ...options});
+  return icon;
+}
diff --git a/src/neuroglancer/widget/virtual_list.ts b/src/neuroglancer/widget/virtual_list.ts
index 6a407b8118..3877184063 100644
--- a/src/neuroglancer/widget/virtual_list.ts
+++ b/src/neuroglancer/widget/virtual_list.ts
@@ -387,7 +387,7 @@ export class VirtualList extends RefCounted {
     state.anchorIndex = renderParams.anchorIndex;
     state.anchorClientOffset = renderParams.anchorOffset - renderParams.scrollOffset;
     const topSize = sizes.getRangeSize(renderParams.startIndex, renderParams.anchorIndex);
-    const totalHeight = sizes.getEstimatedTotalSize();
+    const totalHeight = sizes.getEstimatedTotalSize() || 0;
     body.style.height = `${totalHeight}px`;
     topItems.style.top = `${renderParams.anchorOffset - topSize}px`;
     bottomItems.style.top = `${renderParams.anchorOffset}px`;

From 9e4406061f1c8915d9f1d39384c2f46165f2c185 Mon Sep 17 00:00:00 2001
From: Chris Jordan <jordanchriss@gmail.com>
Date: Wed, 16 Nov 2022 14:40:28 -0500
Subject: [PATCH 2/2] added timesetamp tool

---
 .../datasource/graphene/frontend.ts           | 105 ++++++++++++++++--
 .../register_credentials_provider.ts          |   2 +-
 src/neuroglancer/ui/tool.ts                   |   9 +-
 src/neuroglancer/widget/datetime_input.ts     |  75 +++++++++++++
 src/neuroglancer/widget/layer_control.ts      |  13 ++-
 5 files changed, 190 insertions(+), 14 deletions(-)
 create mode 100644 src/neuroglancer/widget/datetime_input.ts

diff --git a/src/neuroglancer/datasource/graphene/frontend.ts b/src/neuroglancer/datasource/graphene/frontend.ts
index 01117d6add..691fd90e6e 100644
--- a/src/neuroglancer/datasource/graphene/frontend.ts
+++ b/src/neuroglancer/datasource/graphene/frontend.ts
@@ -64,6 +64,8 @@ import { makeIcon } from 'neuroglancer/widget/icon';
 import { EventActionMap } from 'neuroglancer/util/event_action_map';
 import { packColor } from 'neuroglancer/util/color';
 import { Uint64Set } from 'neuroglancer/uint64_set';
+import { addLayerControlToOptionsTab, LayerControlFactory, registerLayerControl } from 'neuroglancer/widget/layer_control';
+import { DateTimeInputWidget } from 'neuroglancer/widget/datetime_input';
 
 function vec4FromVec3(vec: vec3, alpha = 0) {
   const res = vec4.clone([...vec]);
@@ -506,24 +508,32 @@ const SEGMENT_ID_JSON_KEY = "segmentId";
 const ROOT_ID_JSON_KEY = "rootId";
 const POSITION_JSON_KEY = "position";
 
+const TIMESTAMP_JSON_KEY = "timestamp";
+
 class GrapheneState implements Trackable {
   changed = new NullarySignal();
 
   public multicutState = new MulticutState();
+  public timestamp: TrackableValue<number> = new TrackableValue(0, x => x);
 
   constructor() {
     this.multicutState.changed.add(() => {
       this.changed.dispatch();
     });
+    this.timestamp.changed.add(() => {
+      this.changed.dispatch();
+    });
   }
 
   reset() {
     this.multicutState.reset();
+    this.timestamp.reset();
   }
 
   toJSON() {
     return {
       [MULTICUT_JSON_KEY]: this.multicutState.toJSON(),
+      [TIMESTAMP_JSON_KEY]: this.timestamp.toJSON(),
     }
   }
 
@@ -531,6 +541,9 @@ class GrapheneState implements Trackable {
     verifyOptionalObjectProperty(x, MULTICUT_JSON_KEY, value => {
       this.multicutState.restoreState(value);
     });
+    verifyOptionalObjectProperty(x, TIMESTAMP_JSON_KEY, value => {
+      this.timestamp.restoreState(value);
+    });
   }
 }
 
@@ -819,11 +832,18 @@ export const GRAPH_SERVER_NOT_SPECIFIED = Symbol('Graph Server Not Specified.');
 class GrapheneGraphServerInterface {
   constructor(private url: string, private credentialsProvider: SpecialProtocolCredentialsProvider) {}
 
-  async getRoot(segment: Uint64, timestamp = '') {
-    const timestampEpoch = (new Date(timestamp)).valueOf() / 1000;
+  async getTimestampLimit() {
+    const response = await cancellableFetchSpecialOk(
+      this.credentialsProvider, `${this.url}/oldest_timestamp`, {}, responseJson);
+    const isoString = verifyObjectProperty(response, 'iso', verifyString);
+    return new Date(isoString).valueOf();
+  }
+
+  async getRoot(segment: Uint64, timestamp = 0) {
+    const timestampEpoch = timestamp / 1000;
 
     const url = `${this.url}/node/${String(segment)}/root?int64_as_str=1${
-      Number.isNaN(timestampEpoch) ? '' : `&timestamp=${timestampEpoch}`}`
+      timestamp > 0 ? `&timestamp=${timestampEpoch}` : ''}`
 
     const promise = cancellableFetchSpecialOk(
       this.credentialsProvider,
@@ -890,6 +910,7 @@ class GrapheneGraphServerInterface {
 class GrapheneGraphSource extends SegmentationGraphSource {
   private connections = new Set<GraphConnection>();
   public graphServer: GrapheneGraphServerInterface;
+  public timestampLimit: TrackableValue<number> = new TrackableValue(0, x => x);
 
   constructor(public info: GrapheneMultiscaleVolumeInfo,
               credentialsProvider: SpecialProtocolCredentialsProvider,
@@ -897,6 +918,9 @@ class GrapheneGraphSource extends SegmentationGraphSource {
               public state: GrapheneState) {
     super();
     this.graphServer = new GrapheneGraphServerInterface(info.app!.segmentationUrl, credentialsProvider);
+    this.graphServer.getTimestampLimit().then(limit => {
+      this.timestampLimit.value = limit;
+    });
   }
 
   connect(layer: SegmentationUserLayer): Owned<SegmentationGraphSourceConnection> {
@@ -916,12 +940,13 @@ class GrapheneGraphSource extends SegmentationGraphSource {
   }
 
   getRoot(segment: Uint64) {
-    return this.graphServer.getRoot(segment);
+    return this.graphServer.getRoot(segment, this.state.timestamp.value);
   }
 
   tabContents(layer: SegmentationUserLayer, context: DependentViewContext, tab: SegmentationGraphSourceTab) {
     const parent = document.createElement('div');
     parent.style.display = 'contents';
+    parent.appendChild(addLayerControlToOptionsTab(tab, layer, tab.visibility, timeControl));
     const toolbox = document.createElement('div');
     toolbox.className = 'neuroglancer-segmentation-toolbox';
     toolbox.appendChild(makeToolButton(context, layer, {
@@ -1287,7 +1312,7 @@ class MulticutSegmentsTool extends Tool<SegmentationUserLayer> {
 
     activation.bindAction('set-anchor', event => {
       event.stopPropagation();
-      const currentSegmentSelection = maybeGetSelection(this, segmentationGroupState.visibleSegments); // or visible segments?
+      const currentSegmentSelection = maybeGetSelection(this, segmentationGroupState.visibleSegments, graphConnection.graph);
       if (!currentSegmentSelection) return;
       const {rootId, segmentId} = currentSegmentSelection;
       const {focusSegment, segments} = multicutState;
@@ -1321,7 +1346,11 @@ class MulticutSegmentsTool extends Tool<SegmentationUserLayer> {
   }
 }
 
-const maybeGetSelection = (tool: Tool<SegmentationUserLayer>, visibleSegments: Uint64Set): SegmentSelection|undefined => {
+const maybeGetSelection = (tool: Tool<SegmentationUserLayer>, visibleSegments: Uint64Set, graph: GrapheneGraphSource): SegmentSelection|undefined => {
+  if (graph.state.timestamp.value !== 0) {
+    StatusMessage.showTemporaryMessage('Editing can not be performed with a segmentation at an older state.');
+    return;
+  }
   const {layer, mouseState} = tool;
   const {segmentSelectionState: {value, baseValue}} = layer.displayState;
   if (!baseValue || !value) return;
@@ -1410,13 +1439,13 @@ class MergeSegmentsTool extends Tool<SegmentationUserLayer> {
       (async () => {
         const lastSegmentSelection = this.lastAnchorSelection.value;
         if (!lastSegmentSelection) { // first selection
-          const selection = maybeGetSelection(this, segmentationGroupState.visibleSegments);
+          const selection = maybeGetSelection(this, segmentationGroupState.visibleSegments, graph);
           if (selection) {
             this.lastAnchorSelection.value = selection;
             setSink(selection.rootId);
           }
         } else if (!activeSubmission) {
-          const selection = maybeGetSelection(this, segmentationGroupState.visibleSegments);
+          const selection = maybeGetSelection(this, segmentationGroupState.visibleSegments, graph);
           if (selection) {
             activeSubmission = true;
             setSource(selection.rootId);
@@ -1452,3 +1481,63 @@ registerLayerTool(SegmentationUserLayer, GRAPHENE_MULTICUT_SEGMENTS_TOOL_ID, lay
 registerLayerTool(SegmentationUserLayer, GRAPHENE_MERGE_SEGMENTS_TOOL_ID, layer => {
   return new MergeSegmentsTool(layer, true);
 });
+
+const GRAPHENE_TIME_JSON_KEY = 'grapheneTime';
+
+const timeControl = {
+  label: 'Time',
+  title: 'View segmentation at earlier point of time',
+  toolJson: GRAPHENE_TIME_JSON_KEY,
+  hideStatus: true,
+  foo: true,
+  ...timeLayerControl(),
+};
+
+registerLayerControl(SegmentationUserLayer, timeControl);
+
+function timeLayerControl(): LayerControlFactory<SegmentationUserLayer> {
+  return {
+    makeControl: (layer, context) => {
+      const segmentationGroupState = layer.displayState.segmentationGroupState.value;
+      const {graph: {value: graph}} = segmentationGroupState;
+      const timestamp = graph instanceof GrapheneGraphSource ? graph.state.timestamp : new TrackableValue<number>(0, x => x);
+      const timestampLimit = graph instanceof GrapheneGraphSource ? graph.timestampLimit : new TrackableValue<number>(0, x => x);
+      const controlElement = document.createElement('div');
+      controlElement.classList.add('neuroglancer-time-control');
+      const intermediateTimestamp = new TrackableValue<number>(timestamp.value, x => x);
+      intermediateTimestamp.changed.add(() => {
+        if (intermediateTimestamp.value === timestamp.value) {
+          return;
+        }
+        if (confirm('Changing timestamp will clear all selected segments')) {
+          if (graph instanceof GrapheneGraphSource) {
+            graph.state.multicutState.reset();
+          }
+          timestamp.value = intermediateTimestamp.value;
+        } else {
+          intermediateTimestamp.value = timestamp.value;
+        }
+      });
+      const widget =
+          context.registerDisposer(new DateTimeInputWidget(intermediateTimestamp, new Date(timestampLimit.value), new Date()));
+      timestampLimit.changed.add(() => {
+        widget.setMin(new Date(timestampLimit.value));
+      });
+      timestamp.changed.add(() => {
+        segmentationGroupState.selectedSegments.clear();
+        segmentationGroupState.temporaryVisibleSegments.clear(); // TODO, do we care about this? maybe we need to force close/clear multicut
+        if (timestamp.value !== intermediateTimestamp.value) {
+          intermediateTimestamp.value = timestamp.value;
+        }
+      });
+      controlElement.appendChild(widget.element);
+      return {controlElement, control: widget};
+    },
+    activateTool: (_activation, control: DateTimeInputWidget) => {
+      if ('showPicker' in HTMLInputElement.prototype) {
+        // esbuild complaining, maybe update
+        (control.element as any).showPicker();
+      }
+    },
+  };
+}
diff --git a/src/neuroglancer/datasource/middleauth/register_credentials_provider.ts b/src/neuroglancer/datasource/middleauth/register_credentials_provider.ts
index 788609f05e..054e286ed7 100644
--- a/src/neuroglancer/datasource/middleauth/register_credentials_provider.ts
+++ b/src/neuroglancer/datasource/middleauth/register_credentials_provider.ts
@@ -16,7 +16,7 @@
 
 import {defaultCredentialsManager} from 'neuroglancer/credentials_provider/default_manager';
 import {MiddleAuthCredentialsProvider, MiddleAuthAppCredentialsProvider} from 'neuroglancer/datasource/middleauth/credentials_provider';
-import { CredentialsManager } from 'src/neuroglancer/credentials_provider';
+import { CredentialsManager } from 'neuroglancer/credentials_provider';
 
 defaultCredentialsManager.register('middleauth', serverUrl => new MiddleAuthCredentialsProvider(serverUrl));
 
diff --git a/src/neuroglancer/ui/tool.ts b/src/neuroglancer/ui/tool.ts
index cef77500a5..7acbf2388f 100644
--- a/src/neuroglancer/ui/tool.ts
+++ b/src/neuroglancer/ui/tool.ts
@@ -55,7 +55,7 @@ export class ToolActivation<ToolType extends Tool = Tool> extends RefCounted {
 export abstract class Tool<LayerType extends UserLayer = UserLayer> extends RefCounted {
   changed = new Signal();
   keyBinding: string|undefined = undefined;
-  constructor(public layer: LayerType, public toggle: boolean = false) {
+  constructor(public layer: LayerType, public toggle: boolean = false, public basicActivation = false) {
     super();
   }
   get mouseState() {
@@ -266,6 +266,13 @@ export class ToolBinder extends RefCounted {
       this.deactivate_();
       return;
     }
+
+    if (tool.basicActivation) {
+      const activation = new ToolActivation(tool, this.inputEventMapBinder);
+      tool.activate(activation);
+      return tool;
+    }
+
     this.debounceDeactivate.cancel();
     this.debounceReactivate.cancel();
     const activeTool = this.activeTool_;
diff --git a/src/neuroglancer/widget/datetime_input.ts b/src/neuroglancer/widget/datetime_input.ts
new file mode 100644
index 0000000000..e6ab47d727
--- /dev/null
+++ b/src/neuroglancer/widget/datetime_input.ts
@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright 2020 Google Inc.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {TrackableValueInterface} from 'neuroglancer/trackable_value';
+import {RefCounted} from 'neuroglancer/util/disposable';
+import {removeFromParent} from 'neuroglancer/util/dom';
+
+function toDateTimeLocalString(date: Date) {
+  return date.toISOString().slice(0, -8);
+}
+
+export class DateTimeInputWidget extends RefCounted {
+  element = document.createElement('input');
+  constructor(public model: TrackableValueInterface<number>, minDate?: Date, maxDate?: Date) {
+    super();
+    this.registerDisposer(model.changed.add(() => this.updateView()));
+    const {element} = this;
+    element.type = 'datetime-local';
+    if (minDate) {
+      this.setMin(minDate);
+    }
+    if (maxDate) {
+      this.setMax(maxDate);
+    }
+    this.registerEventListener(element, 'change', () => this.updateModel());
+    this.updateView();
+  }
+
+  setMin(date: Date) {
+    const {element} = this;
+    element.min = toDateTimeLocalString(date);
+  }
+
+  setMax(date: Date) {
+    const {element} = this;
+    element.max = toDateTimeLocalString(date);
+  }
+
+  disposed() {
+    removeFromParent(this.element);
+  }
+
+  private updateView() {
+    if (this.model.value) {
+      this.element.value = toDateTimeLocalString(new Date(this.model.value));
+    } else {
+      this.element.value = '';
+    }
+  }
+
+  private updateModel() {
+    try {
+      if (this.element.value) {
+        this.model.restoreState(new Date(this.element.value).valueOf());
+      } else {
+        this.model.restoreState(0);
+      }
+    } catch {
+    }
+    this.updateView();
+  }
+}
diff --git a/src/neuroglancer/widget/layer_control.ts b/src/neuroglancer/widget/layer_control.ts
index 157a39566b..1fe45bbdbe 100644
--- a/src/neuroglancer/widget/layer_control.ts
+++ b/src/neuroglancer/widget/layer_control.ts
@@ -30,6 +30,9 @@ export interface LayerControlLabelOptions<LayerType extends UserLayer = UserLaye
   toolDescription?: string;
   toolJson: any;
   isValid?: (layer: LayerType) => WatchableValueInterface<boolean>;
+  hideStatus?: boolean;
+  toggle?: boolean;
+  basicActivation?: boolean;
 }
 
 export interface LayerControlFactory<LayerType extends UserLayer, ControlType = unknown> {
@@ -77,19 +80,21 @@ function makeControl<LayerType extends UserLayer>(
 
 export class LayerControlTool<LayerType extends UserLayer = UserLayer> extends Tool<LayerType> {
   constructor(layer: LayerType, public options: LayerControlDefinition<LayerType>) {
-    super(layer);
+    super(layer, options.toggle, options.basicActivation);
   }
   activate(activation: ToolActivation<this>) {
     const {options} = this;
     const {layer} = this;
     const {isValid} = options;
     if (isValid !== undefined && !isValid(layer).value) return;
-    const {header, body} = makeToolActivationStatusMessageWithHeader(activation);
     const {controlContainer, control, labelContainer} = makeControl(
         activation, layer, options,
         new WatchableVisibilityPriority(WatchableVisibilityPriority.VISIBLE));
-    header.appendChild(labelContainer);
-    body.appendChild(controlContainer);
+    if (!options.hideStatus) {
+      const {header, body} = makeToolActivationStatusMessageWithHeader(activation);
+      header.appendChild(labelContainer);
+      body.appendChild(controlContainer);
+    }
     options.activateTool(activation, control);
   }
   get description() {