Feat: skeleton ux improvement

src/chunk_manager/frontend.ts

@@ -332,7 +332,11 @@ export class ChunkQueueManager extends SharedObject {
 }
 
 function updateChunk(rpc: RPC, x: any) {
-  const source: ChunkSource = rpc.get(x.source);
+  const source = rpc.get(x.source) as ChunkSource | undefined;
+  if (source === undefined) {
+    // Source was removed while chunk update was in flight.
+    return;
+  }
   if (DEBUG_CHUNK_UPDATES) {
     console.log(
       `${Date.now()} Chunk.update received: ` +

src/data_panel_layout.ts

@@ -101,6 +101,7 @@ export interface ViewerUIState
   crossSectionBackgroundColor: TrackableRGB;
   perspectiveViewBackgroundColor: TrackableRGB;
   hideCrossSectionBackground3D: TrackableBoolean;
+  showPickingIndicator: TrackableBoolean;
   pickRadius: TrackableValue<number>;
 }
 
@@ -184,6 +185,7 @@ export function getCommonViewerState(viewer: ViewerUIState) {
     visibility: viewer.visibility,
     scaleBarOptions: viewer.scaleBarOptions,
     hideCrossSectionBackground3D: viewer.hideCrossSectionBackground3D,
+    showPickingIndicator: viewer.showPickingIndicator,
     pickRadius: viewer.pickRadius,
   };
 }

src/datasource/catmaid/frontend.ts

@@ -476,6 +476,9 @@ export class CatmaidDataSourceProvider implements DataSourceProvider {
         id: "skeletons-chunked",
         default: true,
         subsource: { mesh: multiscaleSource },
+        layerRuntimeStateDisposal: {
+          kind: "spatiallyIndexedSkeleton",
+        },
       },
       {
         id: "skeletons",

src/datasource/catmaid/spatial_skeleton_commands.ts

@@ -52,20 +52,18 @@ import {
   addSegmentToVisibleSets,
   removeSegmentFromVisibleSets,
 } from "#src/segmentation_display_state/base.js";
-import {
-  SpatialSkeletonActions,
-  type SpatialSkeletonAction,
-} from "#src/skeleton/actions.js";
 import type {
   SpatiallyIndexedSkeletonNode,
   SpatialSkeletonSourceState,
   SpatialSkeletonVector,
 } from "#src/skeleton/api.js";
 import type { SpatialSkeletonEditCommandFactory } from "#src/skeleton/command_factories.js";
-import type {
-  SpatialSkeletonCommand,
-  SpatialSkeletonCommandContext,
-} from "#src/skeleton/command_history.js";
+import {
+  SpatialSkeletonActions,
+  type SpatialSkeletonAction,
+  type SpatialSkeletonCommand,
+  type SpatialSkeletonCommandContext,
+} from "#src/skeleton/command_protocol.js";
 import type { SpatiallyIndexedSkeletonLayer } from "#src/skeleton/frontend.js";
 import {
   findSpatiallyIndexedSkeletonNode,

src/datasource/index.ts

@@ -153,6 +153,10 @@ export interface CompleteUrlOptions extends CompleteUrlOptionsBase {
   signal: AbortSignal;
 }
 
+export interface LayerRuntimeStateDisposalRequest {
+  kind: string;
+}
+
 export interface DataSubsourceEntry {
   /**
    * Unique identifier (within the group) for this subsource.  Stored in the JSON state
@@ -182,6 +186,12 @@ export interface DataSubsourceEntry {
    * Specifies whether this associated data source is enabled by default.
    */
   default: boolean;
+
+  /**
+   * Optional layer-owned runtime cleanup requested when this active subsource's
+   * datasource is replaced or cleared.
+   */
+  layerRuntimeStateDisposal?: LayerRuntimeStateDisposalRequest;
 }
 
 export interface ChannelMetadata {

src/help/input_event_bindings.ts

@@ -32,6 +32,7 @@ import {
   type EventActionMap,
 } from "#src/util/event_action_map.js";
 import { emptyToUndefined } from "#src/util/json.js";
+import { isMacPlatform } from "#src/util/platform.js";
 
 declare let NEUROGLANCER_BUILD_INFO:
   | { tag: string; url?: string; timestamp?: string }
@@ -51,8 +52,16 @@ export function formatKeyName(name: string) {
 }
 
 export function formatKeyStroke(stroke: string) {
-  const parts = stroke.split("+");
-  return parts.map(formatKeyName).join("+");
+  const mac = isMacPlatform();
+  return stroke
+    .split("+")
+    .map((part) => {
+      if (mac && part === "control") return "⌘";
+      if (mac && part === "alt") return "⌥";
+      if (mac && part === "shift") return "⇧";
+      return formatKeyName(part);
+    })
+    .join("+");
 }
 
 const DEFAULT_HELP_PANEL_LOCATION: SidePanelLocation = {

src/layer/index.ts

@@ -38,7 +38,10 @@ import type {
 } from "#src/datasource/index.js";
 import { makeEmptyDataSourceSpecification } from "#src/datasource/index.js";
 import type { DisplayContext, RenderedPanel } from "#src/display_context.js";
-import type { LoadedDataSubsource } from "#src/layer/layer_data_source.js";
+import type {
+  LayerDataSourceChangeRuntimeDisposalContext,
+  LoadedDataSubsource,
+} from "#src/layer/layer_data_source.js";
 import {
   LayerDataSource,
   layerDataSourceSpecificationFromJson,
@@ -429,6 +432,14 @@ export class UserLayer extends RefCounted {
     subsources;
   }
 
+  // Derived classes may override to clear layer-owned runtime state for active
+  // datasources that explicitly request cleanup on source change.
+  disposeLayerRuntimeStateForDataSourceChange(
+    _context: LayerDataSourceChangeRuntimeDisposalContext,
+  ) {
+    return false;
+  }
+
   updateDataSubsourceActivations() {
     function* getDataSubsources(
       this: UserLayer,

src/layer/layer_data_source.ts

@@ -31,6 +31,7 @@ import type {
   DataSourceWithRedirectInfo,
   DataSubsourceEntry,
   DataSubsourceSpecification,
+  LayerRuntimeStateDisposalRequest,
 } from "#src/datasource/index.js";
 import { makeEmptyDataSourceSpecification } from "#src/datasource/index.js";
 import type { UserLayer } from "#src/layer/index.js";
@@ -148,6 +149,7 @@ export class LoadedDataSubsource {
   enabled: boolean;
   activated: RefCounted | undefined = undefined;
   guardValues: any[] = [];
+  renderLayers = new Set<RenderLayer>();
   messages = new MessageList();
   isActiveChanged = new NullarySignal();
   constructor(
@@ -212,9 +214,13 @@ export class LoadedDataSubsource {
 
   addRenderLayer(renderLayer: Owned<RenderLayer>) {
     const activated = this.activated!;
-    activated.registerDisposer(
-      this.loadedDataSource.layer.addRenderLayer(renderLayer),
-    );
+    const removeRenderLayer =
+      this.loadedDataSource.layer.addRenderLayer(renderLayer);
+    this.renderLayers.add(renderLayer);
+    activated.registerDisposer(() => {
+      this.renderLayers.delete(renderLayer);
+      removeRenderLayer();
+    });
     activated.registerDisposer(this.messages.addChild(renderLayer.messages));
   }
 
@@ -301,6 +307,16 @@ export class LoadedLayerDataSource extends RefCounted {
   }
 }
 
+export type LayerDataSourceChangeReason = "replace" | "clear";
+
+export interface LayerDataSourceChangeRuntimeDisposalContext {
+  request: LayerRuntimeStateDisposalRequest;
+  reason: LayerDataSourceChangeReason;
+  layerDataSource: LayerDataSource;
+  loadedDataSource: LoadedLayerDataSource;
+  loadedSubsource: LoadedDataSubsource;
+}
+
 export type LayerDataSourceLoadState =
   | {
       error: Error;
@@ -368,10 +384,36 @@ export class LayerDataSource extends RefCounted {
     return this.loadState_;
   }
 
+  private disposeRuntimeStateForDataSourceChange(
+    reason: LayerDataSourceChangeReason,
+  ) {
+    const { loadState } = this;
+    if (loadState === undefined || loadState.error !== undefined) return false;
+    const handledRequestKinds = new Set<string>();
+    let changed = false;
+    for (const loadedSubsource of loadState.subsources) {
+      if (loadedSubsource.activated === undefined) continue;
+      const request = loadedSubsource.subsourceEntry.layerRuntimeStateDisposal;
+      if (request === undefined) continue;
+      if (handledRequestKinds.has(request.kind)) continue;
+      handledRequestKinds.add(request.kind);
+      changed =
+        this.layer.disposeLayerRuntimeStateForDataSourceChange({
+          request,
+          reason,
+          layerDataSource: this,
+          loadedDataSource: loadState,
+          loadedSubsource,
+        }) || changed;
+    }
+    return changed;
+  }
+
   set spec(spec: DataSourceSpecification) {
     const { layer } = this;
     this.messages.clearMessages();
     if (spec.url.length === 0) {
+      this.disposeRuntimeStateForDataSourceChange("clear");
       if (layer.dataSources.length !== 1) {
         const index = layer.dataSources.indexOf(this);
         if (index !== -1) {
@@ -395,6 +437,7 @@ export class LayerDataSource extends RefCounted {
       disposableOnce(layer.markLoading()),
     );
     if (this.refCounted_ !== undefined) {
+      this.disposeRuntimeStateForDataSourceChange("replace");
       this.refCounted_.dispose();
       this.loadState_ = undefined;
     }

src/layer/segmentation/index.spec.ts

@@ -17,7 +17,7 @@
 import { describe, expect, it, vi } from "vitest";
 
 import type { RenderLayerTransform } from "#src/render_coordinate_transform.js";
-import { SpatialSkeletonActions } from "#src/skeleton/actions.js";
+import { SpatialSkeletonActions } from "#src/skeleton/command_protocol.js";
 import { WatchableValue } from "#src/trackable_value.js";
 
 if (!("WebGL2RenderingContext" in globalThis)) {