@vitessce/scatterplot-embedding 4.0.7 → 4.0.9

package/dist/{index-QPcBcBv4.js → index-DoXbfOn2.js}

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React__default, { useLayoutEffect, useEffect, cloneElement, createElement, forwardRef, useState, useRef, useMemo, useImperativeHandle, useContext, createContext, isValidElement, Children, PureComponent, useCallback, useDeferredValue } from "react";
-import { usePlotOptionsStyles, OptionsContainer, CellColorEncodingOption, OptionSelect, useVitessceContainer, useComponentHover, useComponentViewInfo, useLoaders, useCoordinationScopes, useSetComponentHover, useSetComponentViewInfo, useCoordination, useInitialCoordination, useDeckCanvasSize, useMultiObsLabels, useObsEmbeddingData, useObsSetsData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useExpandedFeatureLabelsMap, useSampleSetsData, useSampleEdgesData, useReady, useUrls, useGetObsInfo, useUint8FeatureSelection, useExpressionValueGetter, TitleInfo } from "@vitessce/vit-s";
+import { usePlotOptionsStyles, OptionsContainer, CellColorEncodingOption, OptionSelect, useVitessceContainer, useComponentHover, useComponentViewInfo, useLoaders, useViewMapping, useSetComponentHover, useSetComponentViewInfo, useAnnotationFrameCoordination, useCoordination, useInitialCoordination, useDeckCanvasSize, useAnnotationStoryData, useMultiObsLabels, useObsEmbeddingData, useObsSetsData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useExpandedFeatureLabelsMap, useSampleSetsData, useSampleEdgesData, useReady, useUrls, useGetObsInfo, useUint8FeatureSelection, useExpressionValueGetter, TitleInfo, useCoordinationScopes } from "@vitessce/vit-s";
 import { jsxs, jsx as jsx$1, Fragment } from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
 function _mergeNamespaces(n2, m2) {
@@ -2214,11 +2214,11 @@ function requireConcaveman() {
     while (node2) {
       for (var i2 = 0; i2 < node2.children.length; i2++) {
         var child = node2.children[i2];
-        var dist = node2.leaf ? sqSegDist(child, b, c2) : sqSegBoxDist(b, c2, child);
-        if (dist > maxDist) continue;
+        var dist2 = node2.leaf ? sqSegDist(child, b, c2) : sqSegBoxDist(b, c2, child);
+        if (dist2 > maxDist) continue;
         queue.push({
           node: child,
-          dist
+          dist: dist2
         });
       }
       while (queue.length && !queue.peek().node.children) {
@@ -7096,7 +7096,7 @@ const latestFileDefSchema = z.object({
   options: fileOptionsSchema.optional(),
   requestInit: requestInit.optional(),
   // New: file def can have coordinationValues.
-  coordinationValues: z.record(z.string()).optional()
+  coordinationValues: z.record(z.any()).optional()
 });
 const datasetsSchema1_0_13 = z.array(z.object({
   uid: z.string(),
@@ -7127,7 +7127,8 @@ const configSchema1_0_16 = configSchema1_0_13.extend({
     h: z.number().int().optional(),
     // Updates coordinationScopes and coordinationScopesBy
     coordinationScopes: componentCoordinationScopes.optional(),
-    coordinationScopesBy: componentCoordinationScopesBy.optional()
+    coordinationScopesBy: componentCoordinationScopesBy.optional(),
+    coordinationValues: z.record(z.any()).optional()
   }))
 });
 const configSchema1_0_17 = configSchema1_0_16.extend({
@@ -9633,7 +9634,9 @@ const ViewType$1 = {
   DUAL_SCATTERPLOT: "dualScatterplot",
   TREEMAP: "treemap",
   SAMPLE_SET_PAIR_MANAGER: "sampleSetPairManager",
-  FEATURE_STATS_TABLE: "featureStatsTable"
+  FEATURE_STATS_TABLE: "featureStatsTable",
+  SINGLE_OBS_SET_SELECTOR: "singleObsSetSelector",
+  ANNOTATION_CONTROLLER: "annotationController"
 };
 const DataType$2 = {
   OBS_LABELS: "obsLabels",
@@ -9654,7 +9657,8 @@ const DataType$2 = {
   COMPARISON_METADATA: "comparisonMetadata",
   FEATURE_STATS: "featureStats",
   FEATURE_SET_STATS: "featureSetStats",
-  OBS_SET_STATS: "obsSetStats"
+  OBS_SET_STATS: "obsSetStats",
+  ANNOTATION_STORY: "annotationStory"
 };
 const FileType$1 = {
   // Joint file types
@@ -9676,6 +9680,7 @@ const FileType$1 = {
   OBS_SETS_CSV: "obsSets.csv",
   OBS_SETS_JSON: "obsSets.json",
   SAMPLE_SETS_CSV: "sampleSets.csv",
+  ANNOTATION_STORY_JSON: "annotationStory.json",
   // OME-Zarr
   IMAGE_OME_ZARR: "image.ome-zarr",
   OBS_SEGMENTATIONS_OME_ZARR: "obsSegmentations.ome-zarr",
@@ -9960,7 +9965,15 @@ const CoordinationType$1 = {
   FEATURE_POINT_FOLD_CHANGE_THRESHOLD: "featurePointFoldChangeThreshold",
   FEATURE_LABEL_FOLD_CHANGE_THRESHOLD: "featureLabelFoldChangeThreshold",
   // Treemap
-  HIERARCHY_LEVELS: "hierarchyLevels"
+  HIERARCHY_LEVELS: "hierarchyLevels",
+  // Annotation frames
+  ANNOTATION_STORY: "annotationStory",
+  ANNOTATION_FRAME_INDEX: "annotationFrameIndex",
+  ANNOTATION_SHAPES: "annotationShapes",
+  ANNOTATION_OVERLAY_VISIBLE: "annotationOverlayVisible",
+  ANNOTATION_TRANSITION_DURATION: "annotationTransitionDuration",
+  ANNOTATION_SEMANTIC_ZOOM: "annotationSemanticZoom",
+  ANNOTATION_EDITABLE: "annotationEditable"
 };
 const ViewHelpMapping = {
   SCATTERPLOT: "The scatterplot displays two-dimensional (pre-computed) dimensionality reduction results (such as from t-SNE or UMAP). Each point on the scatterplot represents an observation (e.g., cell)."
@@ -9979,6 +9992,7 @@ const ViewHelpMapping = {
   [FileType$1.OBS_SEGMENTATIONS_JSON]: DataType$2.OBS_SEGMENTATIONS,
   [FileType$1.OBS_SETS_CSV]: DataType$2.OBS_SETS,
   [FileType$1.OBS_SETS_JSON]: DataType$2.OBS_SETS,
+  [FileType$1.ANNOTATION_STORY_JSON]: DataType$2.ANNOTATION_STORY,
   [FileType$1.IMAGE_OME_ZARR]: DataType$2.IMAGE,
   [FileType$1.OBS_SEGMENTATIONS_OME_ZARR]: DataType$2.OBS_SEGMENTATIONS,
   [FileType$1.OBS_FEATURE_MATRIX_ANNDATA_ZARR]: DataType$2.OBS_FEATURE_MATRIX,
@@ -10101,7 +10115,8 @@ const ViewHelpMapping = {
   [DataType$2.OBS_SET_STATS]: [
     CoordinationType$1.OBS_TYPE
     // TODO: should sampleType, obsSetSelection, and/or sampleSetSelection be used here?
-  ]
+  ],
+  [DataType$2.ANNOTATION_STORY]: []
 });
 ({
   // For AnnData:
@@ -10234,7 +10249,9 @@ const ViewHelpMapping = {
   CoordinationType$1.SPATIAL_TARGET_Z,
   CoordinationType$1.SPATIAL_AXIS_FIXED,
   CoordinationType$1.SPATIAL_ORBIT_AXIS,
-  CoordinationType$1.FEATURE_AGGREGATION_STRATEGY
+  CoordinationType$1.FEATURE_AGGREGATION_STRATEGY,
+  // Annotation shapes are specific to a view's coordinate system.
+  CoordinationType$1.ANNOTATION_SHAPES
 ];
 const COMPONENT_COORDINATION_TYPES = {
   [ViewType$1.NEUROGLANCER]: [
@@ -10326,7 +10343,14 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.EMBEDDING_CONTOURS_FILLED,
     CoordinationType$1.EMBEDDING_CONTOUR_PERCENTILES,
     CoordinationType$1.CONTOUR_COLOR_ENCODING,
-    CoordinationType$1.CONTOUR_COLOR
+    CoordinationType$1.CONTOUR_COLOR,
+    CoordinationType$1.ANNOTATION_STORY,
+    CoordinationType$1.ANNOTATION_SHAPES,
+    CoordinationType$1.ANNOTATION_FRAME_INDEX,
+    CoordinationType$1.ANNOTATION_OVERLAY_VISIBLE,
+    CoordinationType$1.ANNOTATION_TRANSITION_DURATION,
+    CoordinationType$1.ANNOTATION_EDITABLE,
+    CoordinationType$1.ANNOTATION_SEMANTIC_ZOOM
   ],
   [ViewType$1.DUAL_SCATTERPLOT]: [
     CoordinationType$1.DATASET,
@@ -10442,7 +10466,14 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.ADDITIONAL_OBS_SETS,
     CoordinationType$1.MOLECULE_HIGHLIGHT,
     CoordinationType$1.TOOLTIPS_VISIBLE,
-    CoordinationType$1.PHOTOMETRIC_INTERPRETATION
+    CoordinationType$1.PHOTOMETRIC_INTERPRETATION,
+    CoordinationType$1.ANNOTATION_STORY,
+    CoordinationType$1.ANNOTATION_SHAPES,
+    CoordinationType$1.ANNOTATION_FRAME_INDEX,
+    CoordinationType$1.ANNOTATION_OVERLAY_VISIBLE,
+    CoordinationType$1.ANNOTATION_TRANSITION_DURATION,
+    CoordinationType$1.ANNOTATION_EDITABLE,
+    CoordinationType$1.ANNOTATION_SEMANTIC_ZOOM
   ],
   [ViewType$1.SPATIAL_BETA]: [
     CoordinationType$1.META_COORDINATION_SCOPES,
@@ -10520,7 +10551,27 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.SPATIAL_CHANNEL_LABELS_ORIENTATION,
     CoordinationType$1.SPATIAL_CHANNEL_LABEL_SIZE,
     CoordinationType$1.SPATIAL_CHANNELS_SORT_ORDER,
-    CoordinationType$1.PHOTOMETRIC_INTERPRETATION
+    CoordinationType$1.PHOTOMETRIC_INTERPRETATION,
+    CoordinationType$1.ANNOTATION_STORY,
+    CoordinationType$1.ANNOTATION_SHAPES,
+    CoordinationType$1.ANNOTATION_FRAME_INDEX,
+    CoordinationType$1.ANNOTATION_OVERLAY_VISIBLE,
+    CoordinationType$1.ANNOTATION_TRANSITION_DURATION,
+    CoordinationType$1.ANNOTATION_EDITABLE,
+    CoordinationType$1.ANNOTATION_SEMANTIC_ZOOM
+  ],
+  [ViewType$1.ANNOTATION_CONTROLLER]: [
+    CoordinationType$1.DATASET,
+    CoordinationType$1.ANNOTATION_STORY,
+    CoordinationType$1.ANNOTATION_FRAME_INDEX,
+    CoordinationType$1.ANNOTATION_OVERLAY_VISIBLE,
+    CoordinationType$1.ANNOTATION_TRANSITION_DURATION,
+    CoordinationType$1.ANNOTATION_EDITABLE,
+    CoordinationType$1.ANNOTATION_SEMANTIC_ZOOM
+    // Note: the annotation controller also needs to read the coordination state
+    // of all other views/coordination types via the full config.
+    // Note: we get/set the CoordinationType.ANNOTATION_SHAPES from the full config,
+    // as this info is view-specific rather than global to the story.
   ],
   [ViewType$1.HEATMAP]: [
     CoordinationType$1.DATASET,
@@ -10830,6 +10881,11 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.FEATURE_POINT_FOLD_CHANGE_THRESHOLD,
     CoordinationType$1.FEATURE_LABEL_FOLD_CHANGE_THRESHOLD
   ],
+  [ViewType$1.SINGLE_OBS_SET_SELECTOR]: [
+    CoordinationType$1.OBS_TYPE,
+    CoordinationType$1.OBS_SET_COLOR,
+    CoordinationType$1.OBS_SET_SELECTION
+  ],
   [ViewType$1.OBS_SET_COMPOSITION_BAR_PLOT]: [
     CoordinationType$1.DATASET,
     CoordinationType$1.OBS_TYPE,
@@ -11533,6 +11589,124 @@ z.object({
   radius: z.number(),
   opacity: z.number()
 });
+const shapeBaseObj = z.object({
+  uid: z.string(),
+  text: z.string().optional(),
+  strokeColor: z.array(z.number()).length(3).optional(),
+  strokeWidth: z.number().optional(),
+  // SVG-style dash pattern, e.g. "10 5" or "10 20 30 10". "none" or omitted = solid.
+  strokeDashArray: z.string().optional(),
+  visible: z.boolean().optional()
+  // TODO: define unit modes for x and y axes
+  // ("pixels" vs "normalized" vs "physical" etc.)
+  // TODO: a coordinate system identifier (e.g., "DeckGL" for now,
+  // but a coordinate system from OME-NGFF/SpatialData eventually?)
+});
+const rectangleShapeObj = shapeBaseObj.extend({
+  type: z.literal("rectangle"),
+  // OME-XML field names verbatim (upper-left origin)
+  x: z.number(),
+  y: z.number(),
+  width: z.number(),
+  height: z.number(),
+  fillColor: z.array(z.number()).length(3).optional(),
+  fillOpacity: z.number().optional()
+});
+const lineShapeObj = shapeBaseObj.extend({
+  type: z.literal("line"),
+  // OME-XML field names verbatim
+  x1: z.number(),
+  y1: z.number(),
+  x2: z.number(),
+  y2: z.number(),
+  markerStart: z.enum(["Arrow", "Tick"]).nullable().optional(),
+  markerEnd: z.enum(["Arrow", "Tick"]).nullable().optional(),
+  textPosition: z.enum(["start", "middle", "end"]).optional(),
+  textBufferPx: z.number().optional()
+});
+const ellipseShapeObj = shapeBaseObj.extend({
+  type: z.literal("ellipse"),
+  // OME-XML field names verbatim (centre point + radii)
+  x1: z.number(),
+  y1: z.number(),
+  radiusX: z.number(),
+  radiusY: z.number(),
+  fillColor: z.array(z.number()).length(3).optional(),
+  fillOpacity: z.number().optional()
+});
+const polygonShapeObj = shapeBaseObj.extend({
+  type: z.literal("polygon"),
+  // OME-XML: array of [x, y] coordinate pairs, closed automatically
+  points: z.array(z.tuple([z.number(), z.number()])),
+  fillColor: z.array(z.number()).length(3).optional(),
+  fillOpacity: z.number().optional()
+});
+const polylineShapeObj = shapeBaseObj.extend({
+  type: z.literal("polyline"),
+  // OME-XML: array of [x, y] coordinate pairs, open (not closed)
+  points: z.array(z.tuple([z.number(), z.number()])),
+  markerStart: z.enum(["Arrow", "Tick"]).nullable().optional(),
+  markerEnd: z.enum(["Arrow", "Tick"]).nullable().optional()
+});
+const annotationShapeObj = z.discriminatedUnion("type", [
+  rectangleShapeObj,
+  lineShapeObj,
+  ellipseShapeObj,
+  polygonShapeObj,
+  polylineShapeObj
+]);
+z.array(annotationShapeObj);
+const annotationFrameObj = z.object({
+  uid: z.string(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  descriptionType: z.enum(["text", "markdown"]).optional(),
+  // A frame can define per-view: coordinationValues
+  // (if the view's state should not be coordinated with other views)
+  // or per-view coordinationScopes/coordinationScopesBy
+  // (if at this frame, the view should be coordinated with other views).
+  // We can also define a frame-level coordination space,
+  // which will be merged with the global coordination space.
+  // TODO: datasets
+  // TODO: coordinationSpace
+  layout: z.array(
+    // Note: for now, we will infer view objects which have a uid
+    // that is present in the global layout, and do NOT have x/y/w/h defined,
+    // to mean that in this frame, the layout and set of views is unchanged
+    // from the global layout.
+    // This will allow each frame to omit the full list of views from the layout,
+    // and only specify the views whose coordination state is changing in this frame.
+    // If a frame includes a view with a uid that is not present
+    // in the global layout, then that view will be added to the layout at this frame.
+    // This frame should also define x/y/w/h for all views,
+    // since it will otherwise be ambiguous how to layout the updated set of views
+    // for this frame.
+    z.object({
+      // The view UID. If this view uid is not present in the global layout,
+      // it will be added to the layout at this frame,
+      // and will need to have its coordination values initialized to their defaults
+      // for any that were not fully specified.
+      uid: z.string(),
+      coordinationValues: z.record(
+        z.string(),
+        // The coordination type name, e.g. "embeddingType"
+        z.any()
+      ).optional()
+      // TODO: support coordinationScopes/coordinationScopesBy for per-view coordination
+      // at this frame.
+      // TODO: view x/y/w/h once we support view layout changes per-frame.
+    })
+  ).optional()
+});
+z.object({
+  // TODO: schema version for the story schema?
+  // Same as current Vitessce schema version?
+  uid: z.string(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  descriptionType: z.enum(["text", "markdown"]).optional(),
+  frames: z.array(annotationFrameObj)
+});
 const SETS_DATATYPE_OBS = "obs";
 const HIERARCHICAL_SCHEMAS = {
   latestVersion: "0.1.3"
@@ -24586,8 +24760,8 @@ class Vector extends MathArray {
   distanceSquared(mathArray) {
     let length2 = 0;
     for (let i2 = 0; i2 < this.ELEMENTS; ++i2) {
-      const dist = this[i2] - mathArray[i2];
-      length2 += dist * dist;
+      const dist2 = this[i2] - mathArray[i2];
+      length2 += dist2 * dist2;
     }
     return checkNumber(length2);
   }
@@ -24908,6 +25082,12 @@ function multiply$3(out, a2, b) {
   out[2] = a2[2] * b[2];
   return out;
 }
+function distance$3(a2, b) {
+  var x = b[0] - a2[0];
+  var y = b[1] - a2[1];
+  var z2 = b[2] - a2[2];
+  return Math.hypot(x, y, z2);
+}
 function squaredLength$2(a2) {
   var x = a2[0];
   var y = a2[1];
@@ -25031,6 +25211,7 @@ function angle$2(a2, b) {
 }
 var sub = subtract;
 var mul = multiply$3;
+var dist = distance$3;
 var len = length$5;
 var sqrLen = squaredLength$2;
 (function() {
@@ -39501,7 +39682,7 @@ function noop$2() {
 const getCursor$1 = ({
   isDragging
 }) => isDragging ? "grabbing" : "grab";
-const defaultProps$O = {
+const defaultProps$P = {
   id: "",
   width: "100%",
   height: "100%",
@@ -39632,7 +39813,7 @@ class Deck {
       this._lastPointerDownInfo = pickedInfo.result[0] || pickedInfo.emptyInfo;
     });
     this.props = {
-      ...defaultProps$O,
+      ...defaultProps$P,
       ...props
     };
     props = this.props;
@@ -40134,7 +40315,7 @@ class Deck {
     metrics.gpuMemory = memoryStats.get("GPU Memory").count;
   }
 }
-_defineProperty(Deck, "defaultProps", defaultProps$O);
+_defineProperty(Deck, "defaultProps", defaultProps$P);
 _defineProperty(Deck, "VERSION", deckGlobal.VERSION);
 class ShaderAttribute {
   constructor(dataColumn, opts) {
@@ -42889,7 +43070,7 @@ const areViewportsEqual = memoize$3(({
   return oldViewport.equals(viewport);
 });
 let pickingColorCache = new Uint8ClampedArray(0);
-const defaultProps$N = {
+const defaultProps$O = {
   data: {
     type: "data",
     value: EMPTY_ARRAY$1,
@@ -43764,7 +43945,7 @@ class Layer extends Component {
     this.setNeedsUpdate();
   }
 }
-_defineProperty(Layer, "defaultProps", defaultProps$N);
+_defineProperty(Layer, "defaultProps", defaultProps$O);
 _defineProperty(Layer, "layerName", "Layer");
 const TRACE_RENDER_LAYERS = "compositeLayer.renderLayers";
 class CompositeLayer extends Layer {
@@ -44800,6 +44981,124 @@ const esm$5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   project32,
   shadow
 }, Symbol.toStringTag, { value: "Module" }));
+const dashShaders = {
+  inject: {
+    "vs:#decl": "\nattribute vec2 instanceDashArrays;\nattribute float instanceDashOffsets;\nvarying vec2 vDashArray;\nvarying float vDashOffset;\n",
+    "vs:#main-end": "\nvDashArray = instanceDashArrays;\nvDashOffset = instanceDashOffsets / width.x;\n",
+    "fs:#decl": "\nuniform float dashAlignMode;\nuniform float capType;\nuniform bool dashGapPickable;\nvarying vec2 vDashArray;\nvarying float vDashOffset;\n\nfloat round(float x) {\n  return floor(x + 0.5);\n}\n",
+    "fs:#main-start": "\n  float solidLength = vDashArray.x;\n  float gapLength = vDashArray.y;\n  float unitLength = solidLength + gapLength;\n\n  float offset;\n\n  if (unitLength > 0.0) {\n    if (dashAlignMode == 0.0) {\n      offset = vDashOffset;\n    } else {\n      unitLength = vPathLength / round(vPathLength / unitLength);\n      offset = solidLength / 2.0;\n    }\n\n    float unitOffset = mod(clamp(vPathPosition.y, 0.0, vPathLength) + offset, unitLength);\n\n    if (gapLength > 0.0 && unitOffset > solidLength) {\n      if (capType <= 0.5) {\n        if (!(dashGapPickable && picking_uActive)) {\n          discard;\n        }\n      } else {\n        // caps are rounded, test the distance to solid ends\n        float distToEnd = length(vec2(\n          min(unitOffset - solidLength, unitLength - unitOffset),\n          vPathPosition.x\n        ));\n        if (distToEnd > 1.0) {\n          if (!(dashGapPickable && picking_uActive)) {\n            discard;\n          }\n        }\n      }\n    }\n  }\n"
+  }
+};
+const offsetShaders = {
+  inject: {
+    "vs:#decl": "\nattribute float instanceOffsets;\n",
+    "vs:DECKGL_FILTER_SIZE": "\n  float offsetWidth = abs(instanceOffsets * 2.0) + 1.0;\n  size *= offsetWidth;\n",
+    "vCornerOffset = offsetVec;": "\n  float offsetWidth = abs(instanceOffsets * 2.0) + 1.0;\n  vec2 offsetCenter = -instanceOffsets * (isCap ? perp : miterVec * miterSize) * 2.0;\n  vCornerOffset = vCornerOffset * offsetWidth - offsetCenter;\n",
+    "fs:#main-start": "\n  float isInside;\n  isInside = step(-1.0, vPathPosition.x) * step(vPathPosition.x, 1.0);\n  if (isInside == 0.0) {\n    discard;\n  }\n"
+  }
+};
+const defaultProps$N = {
+  getDashArray: {
+    type: "accessor",
+    value: [0, 0]
+  },
+  getOffset: {
+    type: "accessor",
+    value: 0
+  },
+  dashJustified: false,
+  dashGapPickable: false
+};
+class PathStyleExtension extends LayerExtension {
+  constructor({
+    dash = false,
+    offset: offset2 = false,
+    highPrecisionDash = false
+  } = {}) {
+    super({
+      dash: dash || highPrecisionDash,
+      offset: offset2,
+      highPrecisionDash
+    });
+  }
+  isEnabled(layer) {
+    return "pathTesselator" in layer.state;
+  }
+  getShaders(extension) {
+    if (!extension.isEnabled(this)) {
+      return null;
+    }
+    let result = {};
+    if (extension.opts.dash) {
+      result = mergeShaders(result, dashShaders);
+    }
+    if (extension.opts.offset) {
+      result = mergeShaders(result, offsetShaders);
+    }
+    return result;
+  }
+  initializeState(context, extension) {
+    const attributeManager = this.getAttributeManager();
+    if (!attributeManager || !extension.isEnabled(this)) {
+      return;
+    }
+    if (extension.opts.dash) {
+      attributeManager.addInstanced({
+        instanceDashArrays: {
+          size: 2,
+          accessor: "getDashArray"
+        }
+      });
+    }
+    if (extension.opts.highPrecisionDash) {
+      attributeManager.addInstanced({
+        instanceDashOffsets: {
+          size: 1,
+          accessor: "getPath",
+          transform: extension.getDashOffsets.bind(this)
+        }
+      });
+    }
+    if (extension.opts.offset) {
+      attributeManager.addInstanced({
+        instanceOffsets: {
+          size: 1,
+          accessor: "getOffset"
+        }
+      });
+    }
+  }
+  updateState(params, extension) {
+    if (!extension.isEnabled(this)) {
+      return;
+    }
+    const uniforms = {};
+    if (extension.opts.dash) {
+      uniforms.dashAlignMode = this.props.dashJustified ? 1 : 0;
+      uniforms.dashGapPickable = Boolean(this.props.dashGapPickable);
+    }
+    this.state.model.setUniforms(uniforms);
+  }
+  getDashOffsets(path) {
+    const result = [0];
+    const positionSize = this.props.positionFormat === "XY" ? 2 : 3;
+    const isNested2 = Array.isArray(path[0]);
+    const geometrySize = isNested2 ? path.length : path.length / positionSize;
+    let p;
+    let prevP;
+    for (let i2 = 0; i2 < geometrySize - 1; i2++) {
+      p = isNested2 ? path[i2] : path.slice(i2 * positionSize, i2 * positionSize + positionSize);
+      p = this.projectPosition(p);
+      if (i2 > 0) {
+        result[i2] = result[i2 - 1] + dist(prevP, p);
+      }
+      prevP = p;
+    }
+    return result;
+  }
+}
+_defineProperty(PathStyleExtension, "defaultProps", defaultProps$N);
+_defineProperty(PathStyleExtension, "extensionName", "PathStyleExtension");
 const defaultProps$M = {
   clipBounds: [0, 0, 1, 1]
 };
@@ -100847,8 +101146,8 @@ function requireJs$b() {
     var DeltaPsi = Math.log(Math.tan(phi2 / 2 + Math.PI / 4) / Math.tan(phi12 / 2 + Math.PI / 4));
     var q = Math.abs(DeltaPsi) > 1e-11 ? DeltaPhi / DeltaPsi : Math.cos(phi12);
     var delta = Math.sqrt(DeltaPhi * DeltaPhi + q * q * DeltaLambda * DeltaLambda);
-    var dist = delta * R;
-    return dist;
+    var dist2 = delta * R;
+    return dist2;
   }
   js$a.default = rhumbDistance;
   return js$a;
@@ -101161,7 +101460,7 @@ function requireUtils$2() {
       var x;
       var y;
       var segmentIdx;
-      var dist;
+      var dist2;
       if (coords.length > 1 && pointCoords.length) {
         var lineCoordinates;
         var pointCoordinate;
@@ -101178,17 +101477,17 @@ function requireUtils$2() {
           if (lineCoordinates[n2][0] !== lineCoordinates[n2 - 1][0]) {
             var slope = (lineCoordinates[n2][1] - lineCoordinates[n2 - 1][1]) / (lineCoordinates[n2][0] - lineCoordinates[n2 - 1][0]);
             var inverseSlope = lineCoordinates[n2][1] - slope * lineCoordinates[n2][0];
-            dist = Math.abs(slope * pointCoordinate[0] + inverseSlope - pointCoordinate[1]) / Math.sqrt(slope * slope + 1);
-          } else dist = Math.abs(pointCoordinate[0] - lineCoordinates[n2][0]);
+            dist2 = Math.abs(slope * pointCoordinate[0] + inverseSlope - pointCoordinate[1]) / Math.sqrt(slope * slope + 1);
+          } else dist2 = Math.abs(pointCoordinate[0] - lineCoordinates[n2][0]);
           var rl2 = Math.pow(lineCoordinates[n2][1] - lineCoordinates[n2 - 1][1], 2) + Math.pow(lineCoordinates[n2][0] - lineCoordinates[n2 - 1][0], 2);
           var ln2 = Math.pow(lineCoordinates[n2][1] - pointCoordinate[1], 2) + Math.pow(lineCoordinates[n2][0] - pointCoordinate[0], 2);
           var lnm12 = Math.pow(lineCoordinates[n2 - 1][1] - pointCoordinate[1], 2) + Math.pow(lineCoordinates[n2 - 1][0] - pointCoordinate[0], 2);
-          var dist2 = Math.pow(dist, 2);
-          var calcrl2 = ln2 - dist2 + lnm12 - dist2;
+          var dist22 = Math.pow(dist2, 2);
+          var calcrl2 = ln2 - dist22 + lnm12 - dist22;
           if (calcrl2 > rl2) {
-            dist = Math.sqrt(Math.min(ln2, lnm12));
+            dist2 = Math.sqrt(Math.min(ln2, lnm12));
           }
-          if (minDist === null || minDist === void 0 || minDist > dist) {
+          if (minDist === null || minDist === void 0 || minDist > dist2) {
             if (calcrl2 > rl2) {
               if (lnm12 < ln2) {
                 to = 0;
@@ -101198,10 +101497,10 @@ function requireUtils$2() {
                 to = 1;
               }
             } else {
-              to = Math.sqrt(lnm12 - dist2) / Math.sqrt(rl2);
-              from2 = Math.sqrt(ln2 - dist2) / Math.sqrt(rl2);
+              to = Math.sqrt(lnm12 - dist22) / Math.sqrt(rl2);
+              from2 = Math.sqrt(ln2 - dist22) / Math.sqrt(rl2);
             }
-            minDist = dist;
+            minDist = dist2;
             segmentIdx = n2;
           }
         }
@@ -117532,22 +117831,22 @@ function addDecoder(cases, importFn) {
   }
   cases.forEach((c2) => registry$1.set(c2, importFn));
 }
-addDecoder([void 0, 1], () => import("./raw-gRNpvpQg.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-BdtUMX-Z.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-DWdrKuNt.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-qjsUiTV8.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-0GPV7wHB.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-aaOFaah9.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-XKIpoMsP.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-DfpY4ESw.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-CHWmGKzs.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-DpcvKlj_.js").then((m2) => m2.default));
 addDecoder(
   34887,
-  () => import("./lerc-b0eKtxKR.js").then(async (m2) => {
+  () => import("./lerc-zU6xDjk2.js").then(async (m2) => {
     await m2.zstd.init();
     return m2;
   }).then((m2) => m2.default)
 );
-addDecoder(50001, () => import("./webimage-CbAzpg9y.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-DP9dgaA0.js").then((m2) => m2.default));
 function decodeRowAcc(row, stride) {
   let length2 = row.length - stride;
   let offset2 = 0;
@@ -117962,8 +118261,8 @@ function TreeDesc(dyn_tree, stat_desc) {
   this.max_code = 0;
   this.stat_desc = stat_desc;
 }
-const d_code = (dist) => {
-  return dist < 256 ? _dist_code[dist] : _dist_code[256 + (dist >>> 7)];
+const d_code = (dist2) => {
+  return dist2 < 256 ? _dist_code[dist2] : _dist_code[256 + (dist2 >>> 7)];
 };
 const put_short = (s2, w2) => {
   s2.pending_buf[s2.pending++] = w2 & 255;
@@ -118097,7 +118396,7 @@ const tr_static_init = () => {
   let bits;
   let length2;
   let code;
-  let dist;
+  let dist2;
   const bl_count = new Array(MAX_BITS + 1);
   length2 = 0;
   for (code = 0; code < LENGTH_CODES - 1; code++) {
@@ -118107,18 +118406,18 @@ const tr_static_init = () => {
     }
   }
   _length_code[length2 - 1] = code;
-  dist = 0;
+  dist2 = 0;
   for (code = 0; code < 16; code++) {
-    base_dist[code] = dist;
+    base_dist[code] = dist2;
     for (n2 = 0; n2 < 1 << extra_dbits[code]; n2++) {
-      _dist_code[dist++] = code;
+      _dist_code[dist2++] = code;
     }
   }
-  dist >>= 7;
+  dist2 >>= 7;
   for (; code < D_CODES; code++) {
-    base_dist[code] = dist << 7;
+    base_dist[code] = dist2 << 7;
     for (n2 = 0; n2 < 1 << extra_dbits[code] - 7; n2++) {
-      _dist_code[256 + dist++] = code;
+      _dist_code[256 + dist2++] = code;
     }
   }
   for (bits = 0; bits <= MAX_BITS; bits++) {
@@ -118209,17 +118508,17 @@ const pqdownheap = (s2, tree, k) => {
   s2.heap[k] = v;
 };
 const compress_block = (s2, ltree, dtree) => {
-  let dist;
+  let dist2;
   let lc;
   let lx = 0;
   let code;
   let extra;
   if (s2.last_lit !== 0) {
     do {
-      dist = s2.pending_buf[s2.d_buf + lx * 2] << 8 | s2.pending_buf[s2.d_buf + lx * 2 + 1];
+      dist2 = s2.pending_buf[s2.d_buf + lx * 2] << 8 | s2.pending_buf[s2.d_buf + lx * 2 + 1];
       lc = s2.pending_buf[s2.l_buf + lx];
       lx++;
-      if (dist === 0) {
+      if (dist2 === 0) {
         send_code(s2, lc, ltree);
       } else {
         code = _length_code[lc];
@@ -118229,13 +118528,13 @@ const compress_block = (s2, ltree, dtree) => {
           lc -= base_length[code];
           send_bits(s2, lc, extra);
         }
-        dist--;
-        code = d_code(dist);
+        dist2--;
+        code = d_code(dist2);
         send_code(s2, code, dtree);
         extra = extra_dbits[code];
         if (extra !== 0) {
-          dist -= base_dist[code];
-          send_bits(s2, dist, extra);
+          dist2 -= base_dist[code];
+          send_bits(s2, dist2, extra);
         }
       }
     } while (lx < s2.last_lit);
@@ -118506,18 +118805,18 @@ const _tr_flush_block = (s2, buf, stored_len, last) => {
     bi_windup(s2);
   }
 };
-const _tr_tally = (s2, dist, lc) => {
-  s2.pending_buf[s2.d_buf + s2.last_lit * 2] = dist >>> 8 & 255;
-  s2.pending_buf[s2.d_buf + s2.last_lit * 2 + 1] = dist & 255;
+const _tr_tally = (s2, dist2, lc) => {
+  s2.pending_buf[s2.d_buf + s2.last_lit * 2] = dist2 >>> 8 & 255;
+  s2.pending_buf[s2.d_buf + s2.last_lit * 2 + 1] = dist2 & 255;
   s2.pending_buf[s2.l_buf + s2.last_lit] = lc & 255;
   s2.last_lit++;
-  if (dist === 0) {
+  if (dist2 === 0) {
     s2.dyn_ltree[lc * 2]++;
   } else {
     s2.matches++;
-    dist--;
+    dist2--;
     s2.dyn_ltree[(_length_code[lc] + LITERALS + 1) * 2]++;
-    s2.dyn_dtree[d_code(dist) * 2]++;
+    s2.dyn_dtree[d_code(dist2) * 2]++;
   }
   return s2.last_lit === s2.lit_bufsize - 1;
 };
@@ -120022,7 +120321,7 @@ var inffast = function inflate_fast(strm, start) {
   let here;
   let op;
   let len2;
-  let dist;
+  let dist2;
   let from2;
   let from_source;
   let input, output;
@@ -120088,7 +120387,7 @@ var inffast = function inflate_fast(strm, start) {
                 bits -= op;
                 op = here >>> 16 & 255;
                 if (op & 16) {
-                  dist = here & 65535;
+                  dist2 = here & 65535;
                   op &= 15;
                   if (bits < op) {
                     hold += input[_in++] << bits;
@@ -120098,8 +120397,8 @@ var inffast = function inflate_fast(strm, start) {
                       bits += 8;
                     }
                   }
-                  dist += hold & (1 << op) - 1;
-                  if (dist > dmax) {
+                  dist2 += hold & (1 << op) - 1;
+                  if (dist2 > dmax) {
                     strm.msg = "invalid distance too far back";
                     state.mode = BAD;
                     break top;
@@ -120107,8 +120406,8 @@ var inffast = function inflate_fast(strm, start) {
                   hold >>>= op;
                   bits -= op;
                   op = _out - beg;
-                  if (dist > op) {
-                    op = dist - op;
+                  if (dist2 > op) {
+                    op = dist2 - op;
                     if (op > whave) {
                       if (state.sane) {
                         strm.msg = "invalid distance too far back";
@@ -120125,7 +120424,7 @@ var inffast = function inflate_fast(strm, start) {
                         do {
                           output[_out++] = s_window[from2++];
                         } while (--op);
-                        from2 = _out - dist;
+                        from2 = _out - dist2;
                         from_source = output;
                       }
                     } else if (wnext < op) {
@@ -120143,7 +120442,7 @@ var inffast = function inflate_fast(strm, start) {
                           do {
                             output[_out++] = s_window[from2++];
                           } while (--op);
-                          from2 = _out - dist;
+                          from2 = _out - dist2;
                           from_source = output;
                         }
                       }
@@ -120154,7 +120453,7 @@ var inffast = function inflate_fast(strm, start) {
                         do {
                           output[_out++] = s_window[from2++];
                         } while (--op);
-                        from2 = _out - dist;
+                        from2 = _out - dist2;
                         from_source = output;
                       }
                     }
@@ -120171,7 +120470,7 @@ var inffast = function inflate_fast(strm, start) {
                       }
                     }
                   } else {
-                    from2 = _out - dist;
+                    from2 = _out - dist2;
                     do {
                       output[_out++] = output[from2++];
                       output[_out++] = output[from2++];
@@ -120729,7 +121028,7 @@ const fixedtables = (state) => {
   state.distbits = 5;
 };
 const updatewindow = (strm, src, end, copy2) => {
-  let dist;
+  let dist2;
   const state = strm.state;
   if (state.window === null) {
     state.wsize = 1 << state.wbits;
@@ -120742,23 +121041,23 @@ const updatewindow = (strm, src, end, copy2) => {
     state.wnext = 0;
     state.whave = state.wsize;
   } else {
-    dist = state.wsize - state.wnext;
-    if (dist > copy2) {
-      dist = copy2;
+    dist2 = state.wsize - state.wnext;
+    if (dist2 > copy2) {
+      dist2 = copy2;
     }
-    state.window.set(src.subarray(end - copy2, end - copy2 + dist), state.wnext);
-    copy2 -= dist;
+    state.window.set(src.subarray(end - copy2, end - copy2 + dist2), state.wnext);
+    copy2 -= dist2;
     if (copy2) {
       state.window.set(src.subarray(end - copy2, end), 0);
       state.wnext = copy2;
       state.whave = state.wsize;
     } else {
-      state.wnext += dist;
+      state.wnext += dist2;
       if (state.wnext === state.wsize) {
         state.wnext = 0;
       }
       if (state.whave < state.wsize) {
-        state.whave += dist;
+        state.whave += dist2;
       }
     }
   }
@@ -124637,14 +124936,14 @@ vec4 colormap(float intensity) {
     }
   };
 }
-const defaultProps$4$1 = {
+const defaultProps$4$2 = {
   colormap: { type: "string", value: "viridis", compare: true },
   opacity: { type: "number", value: 1, compare: true },
   useTransparentColor: { type: "boolean", value: false, compare: true }
 };
 const AdditiveColormapExtension = class extends LayerExtension {
   getShaders() {
-    const name2 = this?.props?.colormap || defaultProps$4$1.colormap.value;
+    const name2 = this?.props?.colormap || defaultProps$4$2.colormap.value;
     const apply_cmap = cmaps[name2];
     if (!apply_cmap) {
       throw Error(`No colormap named ${name2} found in registry`);
@@ -124663,8 +124962,8 @@ const AdditiveColormapExtension = class extends LayerExtension {
   }
   draw() {
     const {
-      useTransparentColor = defaultProps$4$1.useTransparentColor.value,
-      opacity = defaultProps$4$1.opacity.value
+      useTransparentColor = defaultProps$4$2.useTransparentColor.value,
+      opacity = defaultProps$4$2.opacity.value
     } = this.props;
     const uniforms = {
       opacity,
@@ -124674,7 +124973,7 @@ const AdditiveColormapExtension = class extends LayerExtension {
   }
 };
 AdditiveColormapExtension.extensionName = "AdditiveColormapExtension";
-AdditiveColormapExtension.defaultProps = defaultProps$4$1;
+AdditiveColormapExtension.defaultProps = defaultProps$4$2;
 const fs$1$2 = `uniform vec3 transparentColor;
 uniform bool useTransparentColor;
 uniform float opacity;
@@ -125967,7 +126266,7 @@ const ImageLayer = class extends CompositeLayer {
 };
 ImageLayer.layerName = "ImageLayer";
 ImageLayer.defaultProps = defaultProps$5;
-const defaultProps$4 = {
+const defaultProps$4$1 = {
   pickable: { type: "boolean", value: true, compare: true },
   onHover: { type: "function", value: null, compare: false },
   contrastLimits: { type: "array", value: [], compare: true },
@@ -126079,7 +126378,7 @@ const MultiscaleImageLayer = class extends CompositeLayer {
   }
 };
 MultiscaleImageLayer.layerName = "MultiscaleImageLayer";
-MultiscaleImageLayer.defaultProps = defaultProps$4;
+MultiscaleImageLayer.defaultProps = defaultProps$4$1;
 const defaultProps$3$1 = {
   pickable: { type: "boolean", value: true, compare: true },
   loader: {
@@ -127155,7 +127454,7 @@ function padWithDefault$1(arr, defaultValue2, padWidth) {
   }
   return newArr;
 }
-const defaultProps$3 = {
+const defaultProps$4 = {
   hoveredCell: { type: "number", value: null, compare: true },
   // We do not want to deep-compare cellColorData,
   // as it is potentially a TypedArray with millions of elements.
@@ -127272,7 +127571,7 @@ let BitmaskLayer$1 = class BitmaskLayer extends XRLayer {
   }
 };
 BitmaskLayer$1.layerName = "BitmaskLayer";
-BitmaskLayer$1.defaultProps = defaultProps$3;
+BitmaskLayer$1.defaultProps = defaultProps$4;
 const vs = `
 #define SHADER_NAME bitmask-layer-vertex-shader
 
@@ -127614,7 +127913,7 @@ function isEqualShallow(prevArr, nextArr) {
   }
   return prevArr === nextArr;
 }
-const defaultProps$2 = {
+const defaultProps$3 = {
   channelStrokeWidths: { type: "array", value: null, compare: true },
   channelsFilled: { type: "array", value: null, compare: true },
   channelOpacities: { type: "array", value: null, compare: true },
@@ -127878,7 +128177,7 @@ class BitmaskLayer2 extends XRLayer {
   }
 }
 BitmaskLayer2.layerName = "BitmaskLayer";
-BitmaskLayer2.defaultProps = defaultProps$2;
+BitmaskLayer2.defaultProps = defaultProps$3;
 var isNumeric$1 = /^-?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i, mathceil = Math.ceil, mathfloor = Math.floor, bignumberError = "[BigNumber Error] ", tooManyDigits = bignumberError + "Number primitive has more than 15 significant digits: ", BASE = 1e14, LOG_BASE = 14, MAX_SAFE_INTEGER = 9007199254740991, POWS_TEN = [1, 10, 100, 1e3, 1e4, 1e5, 1e6, 1e7, 1e8, 1e9, 1e10, 1e11, 1e12, 1e13], SQRT_BASE = 1e7, MAX = 1e9;
 function clone(configObject) {
   var div, convertBase, parseNumeric, P = BigNumber2.prototype = { constructor: BigNumber2, toString: null, valueOf: null }, ONE = new BigNumber2(1), DECIMAL_PLACES = 20, ROUNDING_MODE = 4, TO_EXP_NEG = -7, TO_EXP_POS = 21, MIN_EXP = -1e7, MAX_EXP = 1e7, CRYPTO = false, MODULO_MODE = 1, POW_PRECISION = 0, FORMAT = {
@@ -130821,7 +131120,7 @@ function ringArea(coords) {
   return total * FACTOR;
 }
 const DEFAULT_THRESHOLD = 1;
-const defaultProps$1 = {
+const defaultProps$2 = {
   // for text
   obsSetPath: { type: "object" },
   sampleSetPath: { type: "object" },
@@ -130916,9 +131215,9 @@ class ContourLayerWithText extends ContourLayer {
         const circlePoint = point(circleCoord);
         polygonVertices.forEach((polyCoord) => {
           const polyPoint = point(polyCoord);
-          const dist = distance$1(circlePoint, polyPoint);
-          if (dist < minDist) {
-            minDist = dist;
+          const dist2 = distance$1(circlePoint, polyPoint);
+          if (dist2 < minDist) {
+            minDist = dist2;
             minCirclePoint = circleCoord;
             minCirclePointI = circlePointI;
             minPolygonPoint = polyCoord;
@@ -130995,7 +131294,1077 @@ class ContourLayerWithText extends ContourLayer {
   }
 }
 ContourLayerWithText.layerName = "ContourLayerWithText";
-ContourLayerWithText.defaultProps = defaultProps$1;
+ContourLayerWithText.defaultProps = defaultProps$2;
+const ARROW_SCREEN_PX = 14;
+const LABEL_FONT_FAMILY$1 = '"Roboto", "Helvetica", "Arial", sans-serif';
+const LABEL_FONT_WEIGHT = "bold";
+const LABEL_FONT_SIZE = 14;
+const RATIO_CLUSTER = 0.1;
+const RATIO_DOT = 0.3;
+const RATIO_GEO_FADE = 0.55;
+const RATIO_TIPS = 0.7;
+const RATIO_LABEL = 0.55;
+const RATIO_LABEL_FULL = 0.75;
+function textBgColor(strokeColor) {
+  const [r2, g2, b] = strokeColor;
+  const lum = (0.299 * r2 + 0.587 * g2 + 0.114 * b) / 255;
+  return lum > 0.45 ? [20, 20, 20, 210] : [245, 245, 245, 210];
+}
+function parseDashArray(strokeDashArray) {
+  if (!strokeDashArray || strokeDashArray === "none")
+    return null;
+  const nums = strokeDashArray.trim().split(/\s+/).map(Number).filter((n2) => !Number.isNaN(n2) && n2 >= 0);
+  return nums.length >= 2 ? [nums[0], nums[1]] : null;
+}
+function computeEllipsePolygon(cx, cy, rx, ry, numSegments = 64) {
+  const pts = [];
+  for (let i2 = 0; i2 < numSegments; i2++) {
+    const angle2 = 2 * Math.PI * i2 / numSegments;
+    pts.push([cx + rx * Math.cos(angle2), cy + ry * Math.sin(angle2)]);
+  }
+  return pts;
+}
+function createPreviewLayer(inProgress, hoverCoord, strokeColor = [255, 255, 0]) {
+  if (!inProgress || inProgress.vertices.length === 0)
+    return null;
+  const { type, vertices } = inProgress;
+  const base = { coordinateSystem: COORDINATE_SYSTEM.CARTESIAN };
+  const previewColor = [...strokeColor, 160];
+  const cursor2 = hoverCoord ?? vertices[vertices.length - 1];
+  if (type === "rectangle" && vertices.length === 1) {
+    const [ax, ay] = vertices[0];
+    const [bx, by] = cursor2;
+    const path = [[ax, ay], [bx, ay], [bx, by], [ax, by], [ax, ay]];
+    return new PathLayer({
+      ...base,
+      id: "annotation-preview-rectangle",
+      data: [{ path }],
+      getPath: (d) => d.path,
+      getColor: previewColor,
+      getWidth: 1,
+      widthUnits: "pixels",
+      extensions: [new PathStyleExtension({ dash: true })],
+      getDashArray: [8, 4]
+    });
+  }
+  if (type === "line" && vertices.length === 1) {
+    const path = [vertices[0], cursor2];
+    return new PathLayer({
+      ...base,
+      id: "annotation-preview-line",
+      data: [{ path }],
+      getPath: (d) => d.path,
+      getColor: previewColor,
+      getWidth: 1,
+      widthUnits: "pixels",
+      extensions: [new PathStyleExtension({ dash: true })],
+      getDashArray: [8, 4]
+    });
+  }
+  if (type === "ellipse" && vertices.length === 1) {
+    const [cx, cy] = vertices[0];
+    const [ex, ey] = cursor2;
+    const rx = Math.abs(ex - cx);
+    const ry = Math.abs(ey - cy);
+    if (rx < 1 && ry < 1)
+      return null;
+    const pts = computeEllipsePolygon(cx, cy, Math.max(rx, 1), Math.max(ry, 1));
+    const path = [...pts, pts[0]];
+    return new PathLayer({
+      ...base,
+      id: "annotation-preview-ellipse",
+      data: [{ path }],
+      getPath: (d) => d.path,
+      getColor: previewColor,
+      getWidth: 1,
+      widthUnits: "pixels",
+      extensions: [new PathStyleExtension({ dash: true })],
+      getDashArray: [8, 4]
+    });
+  }
+  if ((type === "polygon" || type === "polyline") && vertices.length >= 1) {
+    const path = [...vertices, cursor2];
+    if (type === "polygon" && vertices.length >= 2)
+      path.push(vertices[0]);
+    return new PathLayer({
+      ...base,
+      id: `annotation-preview-${type}`,
+      data: [{ path }],
+      getPath: (d) => d.path,
+      getColor: previewColor,
+      getWidth: 1,
+      widthUnits: "pixels",
+      jointRounded: true,
+      capRounded: true,
+      extensions: [new PathStyleExtension({ dash: true })],
+      getDashArray: [8, 4]
+    });
+  }
+  return null;
+}
+function computeTickCap(tipX, tipY, dirX, dirY, dataSize) {
+  const len2 = Math.sqrt(dirX * dirX + dirY * dirY);
+  if (len2 === 0)
+    return null;
+  const ux = dirX / len2;
+  const uy = dirY / len2;
+  const px = -uy;
+  const py = ux;
+  const half = dataSize * 0.55;
+  return [
+    [tipX + px * half, tipY + py * half],
+    [tipX - px * half, tipY - py * half]
+  ];
+}
+function computeArrowhead(tipX, tipY, dirX, dirY, dataSize) {
+  const len2 = Math.sqrt(dirX * dirX + dirY * dirY);
+  if (len2 === 0)
+    return null;
+  const ux = dirX / len2;
+  const uy = dirY / len2;
+  const px = -uy;
+  const py = ux;
+  const halfBase = dataSize * 0.4;
+  const bx = tipX - ux * dataSize;
+  const by = tipY - uy * dataSize;
+  return [
+    [tipX, tipY],
+    [bx + px * halfBase, by + py * halfBase],
+    [bx - px * halfBase, by - py * halfBase]
+  ];
+}
+function fmtCommas(n2) {
+  return Math.round(n2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+function getMeasurementLabel(shape2, physicalPixelSize, viewType = ViewType$1.SPATIAL) {
+  const pps = physicalPixelSize;
+  const px = pps?.x ?? 1;
+  const py = pps?.y ?? 1;
+  const unit2 = pps ? pps.unit ?? "" : null;
+  const hasPhys = !!pps;
+  const isEmbedding = viewType === ViewType$1.SCATTERPLOT;
+  const fmtDist = (d) => {
+    if (hasPhys)
+      return `${d.toFixed(2)} ${unit2}`;
+    if (isEmbedding)
+      return d.toFixed(2);
+    return `${fmtCommas(d)} px`;
+  };
+  const fmtArea = (a2) => {
+    if (hasPhys)
+      return `${a2.toFixed(2)} ${unit2}²`;
+    if (isEmbedding)
+      return a2.toFixed(2);
+    return `${fmtCommas(a2)} px²`;
+  };
+  if (shape2.type === "line") {
+    const dx = (shape2.x2 ?? 0) - (shape2.x1 ?? 0);
+    const dy = (shape2.y2 ?? 0) - (shape2.y1 ?? 0);
+    const dist2 = hasPhys ? Math.sqrt((dx * px) ** 2 + (dy * py) ** 2) : Math.sqrt(dx * dx + dy * dy);
+    return fmtDist(dist2);
+  }
+  if (shape2.type === "rectangle") {
+    return fmtArea(hasPhys ? Math.abs(shape2.width ?? 0) * px * Math.abs(shape2.height ?? 0) * py : Math.abs((shape2.width ?? 0) * (shape2.height ?? 0)));
+  }
+  if (shape2.type === "ellipse") {
+    const rx = Math.abs(shape2.radiusX ?? 0);
+    const ry = Math.abs(shape2.radiusY ?? 0);
+    return fmtArea(hasPhys ? Math.PI * rx * px * ry * py : Math.PI * rx * ry);
+  }
+  if (shape2.type === "polygon" && shape2.points?.length >= 3) {
+    const pts = shape2.points;
+    let shoelace = 0;
+    for (let i2 = 0; i2 < pts.length; i2++) {
+      const [ax, ay] = pts[i2];
+      const [bx, by] = pts[(i2 + 1) % pts.length];
+      shoelace += (hasPhys ? ax * px : ax) * (hasPhys ? by * py : by) - (hasPhys ? bx * px : bx) * (hasPhys ? ay * py : ay);
+    }
+    return fmtArea(Math.abs(shoelace / 2));
+  }
+  if (shape2.type === "polyline" && shape2.points?.length >= 2) {
+    let total = 0;
+    for (let i2 = 0; i2 < shape2.points.length - 1; i2++) {
+      const [ax, ay] = shape2.points[i2];
+      const [bx, by] = shape2.points[i2 + 1];
+      total += hasPhys ? Math.sqrt(((bx - ax) * px) ** 2 + ((by - ay) * py) ** 2) : Math.sqrt((bx - ax) ** 2 + (by - ay) ** 2);
+    }
+    return fmtDist(total);
+  }
+  return null;
+}
+function pickBelowPerp(ux, uy) {
+  const rp = [uy, -ux];
+  const lp = [-uy, ux];
+  return rp[1] > lp[1] || rp[1] === lp[1] && rp[0] > lp[0] ? rp : lp;
+}
+function readableAngle(deg) {
+  let a2 = deg;
+  if (a2 > 90)
+    a2 -= 180;
+  if (a2 < -90)
+    a2 += 180;
+  return a2;
+}
+function getShapeCentroid(shape2) {
+  if (shape2.type === "rectangle") {
+    return [(shape2.x ?? 0) + (shape2.width ?? 0) / 2, (shape2.y ?? 0) + (shape2.height ?? 0) / 2];
+  }
+  if (shape2.type === "line") {
+    return [((shape2.x1 ?? 0) + (shape2.x2 ?? 0)) / 2, ((shape2.y1 ?? 0) + (shape2.y2 ?? 0)) / 2];
+  }
+  if (shape2.type === "ellipse") {
+    return [shape2.x1 ?? 0, shape2.y1 ?? 0];
+  }
+  if ((shape2.type === "polygon" || shape2.type === "polyline") && shape2.points?.length >= 1) {
+    const mx = shape2.points.reduce((s2, p) => s2 + p[0], 0) / shape2.points.length;
+    const my = shape2.points.reduce((s2, p) => s2 + p[1], 0) / shape2.points.length;
+    return [mx, my];
+  }
+  return [0, 0];
+}
+function computeClusters(shapeList, zoom, cellPx = 50) {
+  const cellSize = cellPx / 2 ** Math.floor(zoom);
+  const cells = /* @__PURE__ */ new Map();
+  shapeList.forEach(({ shape: shape2 }) => {
+    const [cx, cy] = getShapeCentroid(shape2);
+    const key = `${Math.floor(cx / cellSize)},${Math.floor(cy / cellSize)}`;
+    if (!cells.has(key)) {
+      cells.set(key, { sumX: 0, sumY: 0, count: 0, color: shape2.strokeColor ?? [255, 255, 255] });
+    }
+    const c2 = cells.get(key);
+    c2.sumX += cx;
+    c2.sumY += cy;
+    c2.count++;
+  });
+  return Array.from(cells.values()).map((c2) => ({
+    position: [c2.sumX / c2.count, c2.sumY / c2.count, 0],
+    count: c2.count,
+    color: c2.color
+  }));
+}
+function createAnnotationLayers(shapes = [], zoom = 0, selectedShapeUid = null, physicalPixelSize = null, authoredZoom = null, semanticZoom = true, viewType = ViewType$1.SPATIAL) {
+  const selectionLayers = [];
+  if (selectedShapeUid) {
+    const sel = shapes.find((s2) => s2.uid === selectedShapeUid);
+    if (sel) {
+      const { uid: sUid, type: sType, strokeWidth: sStrokeWidth = 3 } = sel;
+      const haloColor = [255, 220, 50, 70];
+      const haloWidth = Math.max(sStrokeWidth + 8, 10);
+      const base = { coordinateSystem: COORDINATE_SYSTEM.CARTESIAN };
+      if (sType === "rectangle") {
+        const { x, y, width: width2, height: height2 } = sel;
+        selectionLayers.push(new PathLayer({
+          ...base,
+          id: `annotation-select-${sUid}`,
+          data: [{
+            path: [
+              [x, y],
+              [x + width2, y],
+              [x + width2, y + height2],
+              [x, y + height2],
+              [x, y]
+            ]
+          }],
+          getPath: (d) => d.path,
+          getColor: haloColor,
+          getWidth: haloWidth,
+          widthUnits: "pixels",
+          jointRounded: true,
+          capRounded: true
+        }));
+      }
+      if (sType === "line") {
+        const { x1: x12, y1: y12, x2, y2 } = sel;
+        selectionLayers.push(new PathLayer({
+          ...base,
+          id: `annotation-select-${sUid}`,
+          data: [{ path: [[x12, y12], [x2, y2]] }],
+          getPath: (d) => d.path,
+          getColor: haloColor,
+          getWidth: haloWidth,
+          widthUnits: "pixels",
+          capRounded: true
+        }));
+      }
+      if (sType === "ellipse") {
+        const polygon2 = computeEllipsePolygon(sel.x1, sel.y1, sel.radiusX, sel.radiusY);
+        selectionLayers.push(new PathLayer({
+          ...base,
+          id: `annotation-select-${sUid}`,
+          data: [{ path: [...polygon2, polygon2[0]] }],
+          getPath: (d) => d.path,
+          getColor: haloColor,
+          getWidth: haloWidth,
+          widthUnits: "pixels",
+          jointRounded: true
+        }));
+      }
+      if (sType === "polygon" && sel.points?.length >= 3) {
+        selectionLayers.push(new PathLayer({
+          ...base,
+          id: `annotation-select-${sUid}`,
+          data: [{ path: [...sel.points, sel.points[0]] }],
+          getPath: (d) => d.path,
+          getColor: haloColor,
+          getWidth: haloWidth,
+          widthUnits: "pixels",
+          jointRounded: true
+        }));
+      }
+      if (sType === "polyline" && sel.points?.length >= 2) {
+        selectionLayers.push(new PathLayer({
+          ...base,
+          id: `annotation-select-${sUid}`,
+          data: [{ path: sel.points }],
+          getPath: (d) => d.path,
+          getColor: haloColor,
+          getWidth: haloWidth,
+          widthUnits: "pixels",
+          jointRounded: true,
+          capRounded: true
+        }));
+      }
+    }
+  }
+  const layers = [];
+  const dotShapes = [];
+  const clusterDotShapes = [];
+  shapes.forEach((shape2, i2) => {
+    const { uid: uid2, type, strokeColor = [255, 255, 255], strokeWidth = 3, strokeDashArray } = shape2;
+    const isSelected = uid2 === selectedShapeUid;
+    let shapeOpacity = 1;
+    let tipsOpacity = 1;
+    let labelOpacity = 0;
+    if (isSelected || !semanticZoom || authoredZoom === null) {
+      tipsOpacity = 1;
+      labelOpacity = 1;
+    } else {
+      const zoomRatio = 2 ** (zoom - authoredZoom);
+      if (zoomRatio < RATIO_CLUSTER) {
+        clusterDotShapes.push({ shape: shape2 });
+        return;
+      }
+      if (zoomRatio < RATIO_DOT) {
+        dotShapes.push({ shape: shape2, alpha: 200 });
+        return;
+      }
+      if (zoomRatio < RATIO_GEO_FADE) {
+        const t = (zoomRatio - RATIO_DOT) / (RATIO_GEO_FADE - RATIO_DOT);
+        shapeOpacity = t;
+        dotShapes.push({ shape: shape2, alpha: Math.round((1 - t) * 200) });
+      }
+      tipsOpacity = zoomRatio >= RATIO_TIPS ? shapeOpacity : Math.max(0, (zoomRatio - RATIO_GEO_FADE) / (RATIO_TIPS - RATIO_GEO_FADE) * shapeOpacity);
+      if (zoomRatio >= RATIO_LABEL_FULL) {
+        labelOpacity = shapeOpacity;
+      } else if (zoomRatio >= RATIO_LABEL) {
+        labelOpacity = (zoomRatio - RATIO_LABEL) / (RATIO_LABEL_FULL - RATIO_LABEL) * shapeOpacity;
+      }
+    }
+    const arrowDataSize = Math.max(ARROW_SCREEN_PX, strokeWidth * 4) / 2 ** zoom;
+    const base = { coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, opacity: shapeOpacity };
+    const tipsBase = { coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, opacity: tipsOpacity };
+    const labelBase = { coordinateSystem: COORDINATE_SYSTEM.CARTESIAN, opacity: labelOpacity };
+    const labelBgProps = shape2.labelBackground ? {
+      background: true,
+      getBackgroundColor: textBgColor(strokeColor),
+      backgroundPadding: [3, 1, 3, 2]
+    } : {};
+    const labelProps = { ...labelBgProps };
+    const dashArray = parseDashArray(strokeDashArray);
+    const dashExt = [new PathStyleExtension({ dash: true })];
+    const getDash = dashArray ?? [0, 0];
+    if (type === "rectangle") {
+      const { x, y, width: width2, height: height2, fillColor = strokeColor, fillOpacity = 0 } = shape2;
+      const filled = fillOpacity > 0;
+      const rectPolygon = [[x, y], [x + width2, y], [x + width2, y + height2], [x, y + height2]];
+      layers.push(new PolygonLayer({
+        ...base,
+        id: `annotation-rect-${uid2}-${i2}`,
+        data: [{ polygon: rectPolygon }],
+        getPolygon: (d) => d.polygon,
+        filled,
+        stroked: true,
+        getFillColor: filled ? [...fillColor, Math.round(fillOpacity * 255)] : [0, 0, 0, 0],
+        getLineColor: strokeColor,
+        getLineWidth: strokeWidth,
+        lineWidthUnits: "pixels",
+        ...dashArray ? {
+          extensions: [new PathStyleExtension({ dash: true })],
+          getDashArray: dashArray
+        } : {}
+      }));
+      if (shape2.text && labelOpacity > 0) {
+        layers.push(new TextLayer({
+          ...labelBase,
+          ...labelProps,
+          id: `annotation-rect-text-${uid2}-${i2}`,
+          data: [{ position: [x, y], text: shape2.text }],
+          getPosition: (d) => d.position,
+          getText: (d) => d.text,
+          getColor: strokeColor,
+          getSize: LABEL_FONT_SIZE,
+          sizeUnits: "pixels",
+          fontFamily: LABEL_FONT_FAMILY$1,
+          fontWeight: LABEL_FONT_WEIGHT,
+          getPixelOffset: [3, -7],
+          getTextAnchor: "start",
+          getAlignmentBaseline: "bottom"
+        }));
+      }
+    }
+    if (type === "line") {
+      const { x1: x12, y1: y12, x2, y2, markerStart, markerEnd } = shape2;
+      const dx = x2 - x12;
+      const dy = y2 - y12;
+      const len2 = Math.sqrt(dx * dx + dy * dy);
+      const ux = len2 > 0 ? dx / len2 : 0;
+      const uy = len2 > 0 ? dy / len2 : 0;
+      const srcX = markerStart === "Arrow" ? x12 + ux * arrowDataSize : x12;
+      const srcY = markerStart === "Arrow" ? y12 + uy * arrowDataSize : y12;
+      const tgtX = markerEnd === "Arrow" ? x2 - ux * arrowDataSize : x2;
+      const tgtY = markerEnd === "Arrow" ? y2 - uy * arrowDataSize : y2;
+      layers.push(new PathLayer({
+        ...base,
+        id: `annotation-line-${uid2}-${i2}`,
+        extensions: [new PathStyleExtension({ dash: true })],
+        getDashArray: dashArray ?? [0, 0],
+        data: [{ path: [[srcX, srcY], [tgtX, tgtY]] }],
+        getPath: (d) => d.path,
+        getColor: strokeColor,
+        getWidth: strokeWidth,
+        widthUnits: "pixels",
+        capRounded: true
+      }));
+      if (markerEnd === "Arrow" && tipsOpacity > 0) {
+        const head = computeArrowhead(x2, y2, x2 - x12, y2 - y12, arrowDataSize);
+        if (head) {
+          layers.push(new PolygonLayer({
+            ...tipsBase,
+            id: `annotation-end-arrow-${uid2}-${i2}`,
+            data: [{ polygon: head }],
+            getPolygon: (d) => d.polygon,
+            filled: true,
+            stroked: false,
+            getFillColor: strokeColor
+          }));
+        }
+      }
+      if (markerStart === "Arrow" && tipsOpacity > 0) {
+        const head = computeArrowhead(x12, y12, x12 - x2, y12 - y2, arrowDataSize);
+        if (head) {
+          layers.push(new PolygonLayer({
+            ...tipsBase,
+            id: `annotation-start-arrow-${uid2}-${i2}`,
+            data: [{ polygon: head }],
+            getPolygon: (d) => d.polygon,
+            filled: true,
+            stroked: false,
+            getFillColor: strokeColor
+          }));
+        }
+      }
+      if (markerEnd === "Tick" && tipsOpacity > 0) {
+        const tick = computeTickCap(x2, y2, x2 - x12, y2 - y12, arrowDataSize);
+        if (tick) {
+          layers.push(new PathLayer({
+            ...tipsBase,
+            id: `annotation-end-tick-${uid2}-${i2}`,
+            data: [{ path: tick }],
+            getPath: (d) => d.path,
+            getColor: strokeColor,
+            getWidth: strokeWidth,
+            widthUnits: "pixels",
+            capRounded: true
+          }));
+        }
+      }
+      if (markerStart === "Tick" && tipsOpacity > 0) {
+        const tick = computeTickCap(x12, y12, x12 - x2, y12 - y2, arrowDataSize);
+        if (tick) {
+          layers.push(new PathLayer({
+            ...tipsBase,
+            id: `annotation-start-tick-${uid2}-${i2}`,
+            data: [{ path: tick }],
+            getPath: (d) => d.path,
+            getColor: strokeColor,
+            getWidth: strokeWidth,
+            widthUnits: "pixels",
+            capRounded: true
+          }));
+        }
+      }
+      if (shape2.text) {
+        const pos = shape2.textPosition ?? "start";
+        let textX;
+        let textY;
+        if (pos === "start") {
+          textX = x12;
+          textY = y12;
+        } else if (pos === "end") {
+          textX = x2;
+          textY = y2;
+        } else {
+          textX = (x12 + x2) / 2;
+          textY = (y12 + y2) / 2;
+        }
+        let pixelOffset = [0, 0];
+        let textAnchor = "middle";
+        let alignmentBaseline = "center";
+        if (pos !== "middle") {
+          const dxT = x2 - x12;
+          const dyT = y2 - y12;
+          const lenT = Math.sqrt(dxT * dxT + dyT * dyT);
+          if (lenT > 0) {
+            const uxT = dxT / lenT;
+            const uyT = dyT / lenT;
+            const sign2 = pos === "start" ? -1 : 1;
+            const bufferPx = shape2.textBufferPx ?? 8;
+            const offsetX = sign2 * uxT * bufferPx;
+            const offsetY = sign2 * uyT * bufferPx;
+            pixelOffset = [offsetX, offsetY];
+            const absX = Math.abs(offsetX);
+            const absY = Math.abs(offsetY);
+            if (absX >= absY) {
+              textAnchor = offsetX > 0 ? "start" : "end";
+            }
+            if (absY >= absX) {
+              alignmentBaseline = offsetY > 0 ? "top" : "bottom";
+            }
+          }
+        } else if (len2 > 0) {
+          const belowPerp = pickBelowPerp(ux, uy);
+          const bufferPx = shape2.textBufferPx ?? 14;
+          pixelOffset = [-belowPerp[0] * bufferPx, -belowPerp[1] * bufferPx];
+          textAnchor = "middle";
+          alignmentBaseline = "center";
+        }
+        const middleAngle = pos === "middle" && len2 > 0 ? -readableAngle(Math.atan2(dy, dx) * 180 / Math.PI) : null;
+        if (labelOpacity <= 0)
+          return;
+        layers.push(new TextLayer({
+          ...labelBase,
+          ...labelProps,
+          id: `annotation-line-text-${uid2}-${i2}`,
+          data: [{ position: [textX, textY], text: shape2.text }],
+          getPosition: (d) => d.position,
+          getText: (d) => d.text,
+          getColor: strokeColor,
+          getSize: LABEL_FONT_SIZE,
+          sizeUnits: "pixels",
+          fontFamily: LABEL_FONT_FAMILY$1,
+          fontWeight: LABEL_FONT_WEIGHT,
+          getPixelOffset: pixelOffset,
+          getTextAnchor: textAnchor,
+          getAlignmentBaseline: alignmentBaseline,
+          ...middleAngle !== null && { getAngle: middleAngle }
+        }));
+      }
+    }
+    if (type === "ellipse") {
+      const { x1: x12, y1: y12, radiusX, radiusY, fillColor = strokeColor, fillOpacity = 0 } = shape2;
+      const polygon2 = computeEllipsePolygon(x12, y12, radiusX, radiusY);
+      const filled = fillOpacity > 0;
+      layers.push(new PolygonLayer({
+        ...base,
+        id: `annotation-ellipse-${uid2}-${i2}`,
+        data: [{ polygon: polygon2 }],
+        getPolygon: (d) => d.polygon,
+        filled,
+        stroked: true,
+        getFillColor: filled ? [...fillColor, Math.round(fillOpacity * 255)] : [0, 0, 0, 0],
+        getLineColor: strokeColor,
+        getLineWidth: strokeWidth,
+        lineWidthUnits: "pixels",
+        ...dashArray ? {
+          extensions: [new PathStyleExtension({ dash: true })],
+          getDashArray: dashArray
+        } : {}
+      }));
+      if (shape2.text && labelOpacity > 0) {
+        layers.push(new TextLayer({
+          ...labelBase,
+          ...labelProps,
+          id: `annotation-ellipse-text-${uid2}-${i2}`,
+          data: [{ position: [x12, y12 - radiusY], text: shape2.text }],
+          getPosition: (d) => d.position,
+          getText: (d) => d.text,
+          getColor: strokeColor,
+          getSize: LABEL_FONT_SIZE,
+          sizeUnits: "pixels",
+          fontFamily: LABEL_FONT_FAMILY$1,
+          fontWeight: LABEL_FONT_WEIGHT,
+          getPixelOffset: [0, -4],
+          getTextAnchor: "middle",
+          getAlignmentBaseline: "bottom"
+        }));
+      }
+    }
+    if (type === "polygon") {
+      const { points, fillColor = strokeColor, fillOpacity = 0 } = shape2;
+      if (!points || points.length < 3)
+        return;
+      const closedPath = [...points, points[0]];
+      if (fillOpacity > 0) {
+        layers.push(new PolygonLayer({
+          ...base,
+          id: `annotation-polygon-fill-${uid2}-${i2}`,
+          data: [{ polygon: points }],
+          getPolygon: (d) => d.polygon,
+          stroked: false,
+          filled: true,
+          getFillColor: [...fillColor, Math.round(fillOpacity * 255)]
+        }));
+      }
+      layers.push(new PathLayer({
+        ...base,
+        id: `annotation-polygon-${uid2}-${i2}`,
+        extensions: dashExt,
+        getDashArray: getDash,
+        data: [{ path: closedPath }],
+        getPath: (d) => d.path,
+        getColor: strokeColor,
+        getWidth: strokeWidth,
+        widthUnits: "pixels",
+        jointRounded: true
+      }));
+      if (shape2.text && labelOpacity > 0) {
+        const minX = Math.min(...points.map((p) => p[0]));
+        const maxX = Math.max(...points.map((p) => p[0]));
+        const minY = Math.min(...points.map((p) => p[1]));
+        const topCenterX = (minX + maxX) / 2;
+        layers.push(new TextLayer({
+          ...labelBase,
+          ...labelProps,
+          id: `annotation-polygon-text-${uid2}-${i2}`,
+          data: [{ position: [topCenterX, minY], text: shape2.text }],
+          getPosition: (d) => d.position,
+          getText: (d) => d.text,
+          getColor: strokeColor,
+          getSize: LABEL_FONT_SIZE,
+          sizeUnits: "pixels",
+          fontFamily: LABEL_FONT_FAMILY$1,
+          fontWeight: LABEL_FONT_WEIGHT,
+          getPixelOffset: [0, -4],
+          getTextAnchor: "middle",
+          getAlignmentBaseline: "bottom"
+        }));
+      }
+    }
+    if (type === "polyline") {
+      const { points, markerStart, markerEnd } = shape2;
+      if (!points || points.length < 2)
+        return;
+      let pathPoints = points;
+      if (markerStart === "Arrow") {
+        const [x02, y02] = points[0];
+        const [x12, y12] = points[1];
+        const dx = x02 - x12;
+        const dy = y02 - y12;
+        const len2 = Math.sqrt(dx * dx + dy * dy);
+        if (len2 > 0) {
+          const ux = dx / len2;
+          const uy = dy / len2;
+          pathPoints = [[x02 - ux * arrowDataSize, y02 - uy * arrowDataSize], ...pathPoints.slice(1)];
+        }
+      }
+      if (markerEnd === "Arrow") {
+        const last = pathPoints[pathPoints.length - 1];
+        const prev2 = pathPoints[pathPoints.length - 2];
+        const dx = last[0] - prev2[0];
+        const dy = last[1] - prev2[1];
+        const len2 = Math.sqrt(dx * dx + dy * dy);
+        if (len2 > 0) {
+          const ux = dx / len2;
+          const uy = dy / len2;
+          const shortened = [last[0] - ux * arrowDataSize, last[1] - uy * arrowDataSize];
+          pathPoints = [...pathPoints.slice(0, -1), shortened];
+        }
+      }
+      layers.push(new PathLayer({
+        ...base,
+        id: `annotation-polyline-${uid2}-${i2}`,
+        extensions: dashExt,
+        getDashArray: getDash,
+        data: [{ path: pathPoints }],
+        getPath: (d) => d.path,
+        getColor: strokeColor,
+        getWidth: strokeWidth,
+        widthUnits: "pixels",
+        jointRounded: true,
+        capRounded: true
+      }));
+      if (markerStart === "Arrow" && tipsOpacity > 0) {
+        const [x02, y02] = points[0];
+        const [x12, y12] = points[1];
+        const head = computeArrowhead(x02, y02, x02 - x12, y02 - y12, arrowDataSize);
+        if (head) {
+          layers.push(new PolygonLayer({
+            ...tipsBase,
+            id: `annotation-polyline-start-arrow-${uid2}-${i2}`,
+            data: [{ polygon: head }],
+            getPolygon: (d) => d.polygon,
+            filled: true,
+            stroked: false,
+            getFillColor: strokeColor
+          }));
+        }
+      }
+      if (markerEnd === "Arrow" && tipsOpacity > 0) {
+        const last = points[points.length - 1];
+        const prev2 = points[points.length - 2];
+        const dxArrow = last[0] - prev2[0];
+        const dyArrow = last[1] - prev2[1];
+        const head = computeArrowhead(last[0], last[1], dxArrow, dyArrow, arrowDataSize);
+        if (head) {
+          layers.push(new PolygonLayer({
+            ...tipsBase,
+            id: `annotation-polyline-end-arrow-${uid2}-${i2}`,
+            data: [{ polygon: head }],
+            getPolygon: (d) => d.polygon,
+            filled: true,
+            stroked: false,
+            getFillColor: strokeColor
+          }));
+        }
+      }
+      if (markerStart === "Tick" && tipsOpacity > 0) {
+        const [x02, y02] = points[0];
+        const [x12, y12] = points[1];
+        const tick = computeTickCap(x02, y02, x02 - x12, y02 - y12, arrowDataSize);
+        if (tick) {
+          layers.push(new PathLayer({
+            ...tipsBase,
+            id: `annotation-polyline-start-tick-${uid2}-${i2}`,
+            data: [{ path: tick }],
+            getPath: (d) => d.path,
+            getColor: strokeColor,
+            getWidth: strokeWidth,
+            widthUnits: "pixels",
+            capRounded: true
+          }));
+        }
+      }
+      if (markerEnd === "Tick" && tipsOpacity > 0) {
+        const last = points[points.length - 1];
+        const prev2 = points[points.length - 2];
+        const dxTick = last[0] - prev2[0];
+        const dyTick = last[1] - prev2[1];
+        const tick = computeTickCap(last[0], last[1], dxTick, dyTick, arrowDataSize);
+        if (tick) {
+          layers.push(new PathLayer({
+            ...tipsBase,
+            id: `annotation-polyline-end-tick-${uid2}-${i2}`,
+            data: [{ path: tick }],
+            getPath: (d) => d.path,
+            getColor: strokeColor,
+            getWidth: strokeWidth,
+            widthUnits: "pixels",
+            capRounded: true
+          }));
+        }
+      }
+      if (shape2.text) {
+        const pos = shape2.textPosition ?? "start";
+        const bufferPx = shape2.textBufferPx ?? 8;
+        let textPt;
+        let dirX;
+        let dirY;
+        if (pos === "end") {
+          const last = points[points.length - 1];
+          const prev2 = points[points.length - 2];
+          textPt = last;
+          dirX = last[0] - prev2[0];
+          dirY = last[1] - prev2[1];
+        } else if (pos === "middle") {
+          const mx = points.reduce((s2, p) => s2 + p[0], 0) / points.length;
+          const my = points.reduce((s2, p) => s2 + p[1], 0) / points.length;
+          textPt = [mx, my];
+          dirX = 0;
+          dirY = 0;
+        } else {
+          [textPt] = points;
+          dirX = points[0][0] - points[1][0];
+          dirY = points[0][1] - points[1][1];
+        }
+        const [textX, textY] = textPt;
+        const lenT = Math.sqrt(dirX * dirX + dirY * dirY);
+        let polylinePixelOffset = [0, 0];
+        let polylineTextAnchor = "middle";
+        let polylineAlignmentBaseline = pos === "middle" ? "center" : "bottom";
+        if (lenT > 0) {
+          const uxT = dirX / lenT;
+          const uyT = dirY / lenT;
+          const offX = uxT * bufferPx;
+          const offY = uyT * bufferPx;
+          polylinePixelOffset = [offX, offY];
+          if (Math.abs(offX) >= Math.abs(offY)) {
+            polylineTextAnchor = offX > 0 ? "start" : "end";
+          }
+          if (Math.abs(offY) >= Math.abs(offX)) {
+            polylineAlignmentBaseline = offY > 0 ? "top" : "bottom";
+          }
+        }
+        if (labelOpacity <= 0)
+          return;
+        layers.push(new TextLayer({
+          ...labelBase,
+          ...labelProps,
+          id: `annotation-polyline-text-${uid2}-${i2}`,
+          data: [{ position: [textX, textY], text: shape2.text }],
+          getPosition: (d) => d.position,
+          getText: (d) => d.text,
+          getColor: strokeColor,
+          getSize: LABEL_FONT_SIZE,
+          sizeUnits: "pixels",
+          fontFamily: LABEL_FONT_FAMILY$1,
+          fontWeight: LABEL_FONT_WEIGHT,
+          getPixelOffset: polylinePixelOffset,
+          getTextAnchor: polylineTextAnchor,
+          getAlignmentBaseline: polylineAlignmentBaseline
+        }));
+      }
+    }
+  });
+  if (dotShapes.length > 0) {
+    layers.push(new ScatterplotLayer({
+      coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+      id: "annotation-dots",
+      data: dotShapes.map(({ shape: s2, alpha: alpha2 }) => ({
+        position: getShapeCentroid(s2),
+        color: [...s2.strokeColor ?? [255, 255, 255], alpha2]
+      })),
+      getPosition: (d) => d.position,
+      getFillColor: (d) => d.color,
+      getRadius: 4,
+      radiusUnits: "pixels",
+      filled: true,
+      stroked: false
+    }));
+  }
+  if (clusterDotShapes.length > 0) {
+    const clusters = computeClusters(clusterDotShapes, zoom);
+    layers.push(new ScatterplotLayer({
+      coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+      id: "annotation-clusters",
+      data: clusters,
+      getPosition: (d) => d.position,
+      getFillColor: (d) => [...d.color, 180],
+      getRadius: (d) => Math.max(6, 4 + Math.sqrt(d.count) * 2),
+      radiusUnits: "pixels",
+      filled: true,
+      stroked: true,
+      getLineColor: (d) => [...d.color, 220],
+      lineWidthMinPixels: 1.5
+    }));
+    const multiClusters = clusters.filter((c2) => c2.count > 1);
+    if (multiClusters.length > 0) {
+      layers.push(new TextLayer({
+        coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+        id: "annotation-cluster-counts",
+        data: multiClusters,
+        getPosition: (d) => d.position,
+        getText: (d) => String(d.count),
+        getColor: [255, 255, 255],
+        getSize: 10,
+        sizeUnits: "pixels",
+        fontWeight: "bold",
+        getTextAnchor: "middle",
+        getAlignmentBaseline: "center"
+      }));
+    }
+  }
+  const measureLayers = [];
+  shapes.forEach((shape2) => {
+    if (!shape2.showMeasure)
+      return;
+    const mIsSelected = shape2.uid === selectedShapeUid;
+    const label = getMeasurementLabel(shape2, physicalPixelSize, viewType);
+    if (!label)
+      return;
+    const color2 = shape2.strokeColor ?? [255, 255, 255];
+    let mShapeOpacity = 1;
+    let mLabelFactor = 0;
+    if (mIsSelected || !semanticZoom || authoredZoom === null) {
+      mLabelFactor = 1;
+    } else {
+      const mZoomRatio = 2 ** (zoom - authoredZoom);
+      if (mZoomRatio < RATIO_DOT)
+        return;
+      if (mZoomRatio < RATIO_GEO_FADE) {
+        mShapeOpacity = (mZoomRatio - RATIO_DOT) / (RATIO_GEO_FADE - RATIO_DOT);
+      }
+      if (mZoomRatio >= RATIO_LABEL_FULL) {
+        mLabelFactor = 1;
+      } else if (mZoomRatio >= RATIO_LABEL) {
+        mLabelFactor = (mZoomRatio - RATIO_LABEL) / (RATIO_LABEL_FULL - RATIO_LABEL);
+      }
+    }
+    const measureOpacity = mShapeOpacity * mLabelFactor;
+    if (measureOpacity <= 0)
+      return;
+    const base = {
+      coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+      opacity: measureOpacity,
+      getText: (d) => d.text,
+      getPosition: (d) => d.position,
+      getColor: color2,
+      getSize: 13,
+      sizeUnits: "pixels",
+      fontFamily: LABEL_FONT_FAMILY$1,
+      fontWeight: "bold",
+      // 'auto' builds the font atlas from the actual rendered characters (e.g. µ, ²)
+      // instead of deck.gl's default ASCII-only atlas.
+      characterSet: "auto",
+      ...shape2.measureBackground ? {
+        background: true,
+        getBackgroundColor: textBgColor(color2),
+        backgroundPadding: [3, 1, 3, 2]
+      } : {}
+    };
+    if (shape2.type === "line") {
+      const mx = ((shape2.x1 ?? 0) + (shape2.x2 ?? 0)) / 2;
+      const my = ((shape2.y1 ?? 0) + (shape2.y2 ?? 0)) / 2;
+      const dx = (shape2.x2 ?? 0) - (shape2.x1 ?? 0);
+      const dy = (shape2.y2 ?? 0) - (shape2.y1 ?? 0);
+      const len2 = Math.sqrt(dx * dx + dy * dy);
+      if (len2 === 0)
+        return;
+      const perp = pickBelowPerp(dx / len2, dy / len2);
+      const angle2 = readableAngle(Math.atan2(dy, dx) * 180 / Math.PI);
+      measureLayers.push(new TextLayer({
+        ...base,
+        id: `annotation-measure-${shape2.uid}`,
+        data: [{ position: [mx, my], text: label }],
+        getAngle: -angle2,
+        getTextAnchor: "middle",
+        getAlignmentBaseline: "center",
+        getPixelOffset: [perp[0] * 16, perp[1] * 16]
+      }));
+    } else if (shape2.type === "polyline" && shape2.points?.length >= 2) {
+      const pts = shape2.points;
+      const mi = Math.floor((pts.length - 1) / 2);
+      const [ax, ay] = pts[mi];
+      const [bx, by] = pts[mi + 1];
+      const dx = bx - ax;
+      const dy = by - ay;
+      const len2 = Math.sqrt(dx * dx + dy * dy);
+      if (len2 === 0)
+        return;
+      const perp = pickBelowPerp(dx / len2, dy / len2);
+      const angle2 = readableAngle(Math.atan2(dy, dx) * 180 / Math.PI);
+      measureLayers.push(new TextLayer({
+        ...base,
+        id: `annotation-measure-${shape2.uid}`,
+        data: [{ position: [(ax + bx) / 2, (ay + by) / 2], text: label }],
+        getAngle: -angle2,
+        getTextAnchor: "middle",
+        getAlignmentBaseline: "center",
+        getPixelOffset: [perp[0] * 16, perp[1] * 16]
+      }));
+    } else if (shape2.type === "rectangle") {
+      const x02 = shape2.x ?? 0;
+      const y02 = shape2.y ?? 0;
+      const w2 = shape2.width ?? 0;
+      const h = shape2.height ?? 0;
+      const rx = x02 + (w2 >= 0 ? w2 : 0);
+      const ry = y02 + (h >= 0 ? h : 0);
+      measureLayers.push(new TextLayer({
+        ...base,
+        id: `annotation-measure-${shape2.uid}`,
+        data: [{ position: [rx, ry], text: label }],
+        getTextAnchor: "end",
+        getAlignmentBaseline: "bottom",
+        getPixelOffset: [-6, -6]
+      }));
+    } else if (shape2.type === "ellipse") {
+      const cx = shape2.x1 ?? 0;
+      const cy = shape2.y1 ?? 0;
+      const ry = Math.abs(shape2.radiusY ?? 0);
+      measureLayers.push(new TextLayer({
+        ...base,
+        id: `annotation-measure-${shape2.uid}`,
+        data: [{ position: [cx, cy + ry], text: label }],
+        getTextAnchor: "middle",
+        getAlignmentBaseline: "top",
+        getPixelOffset: [0, 8]
+      }));
+    } else if (shape2.type === "polygon" && shape2.points?.length >= 3) {
+      const xs = shape2.points.map((p) => p[0]);
+      const ys = shape2.points.map((p) => p[1]);
+      const cx = (Math.min(...xs) + Math.max(...xs)) / 2;
+      const maxY = Math.max(...ys);
+      measureLayers.push(new TextLayer({
+        ...base,
+        id: `annotation-measure-${shape2.uid}`,
+        data: [{ position: [cx, maxY], text: label }],
+        getTextAnchor: "middle",
+        getAlignmentBaseline: "top",
+        getPixelOffset: [0, 8]
+      }));
+    }
+  });
+  return [...selectionLayers, ...layers, ...measureLayers];
+}
+const defaultProps$1 = {
+  // Array of annotation shape objects (see annotationShapeObj in @vitessce/schemas).
+  data: { type: "object", value: [], compare: true },
+  // UID of the shape to highlight with a selection halo.
+  selectedShapeUid: { type: "string", value: null },
+  // { x, y, unit } used to format measurement labels in physical units.
+  physicalPixelSize: { type: "object", value: null, compare: true },
+  // The zoom level at which the shapes were authored (reference for semantic zoom).
+  authoredZoom: { type: "number", value: null },
+  // Whether to apply semantic zoom (level-of-detail) based on authoredZoom.
+  semanticZoom: { type: "boolean", value: true },
+  // The view type in which the layer is rendered (affects measurement label formatting).
+  viewType: { type: "string", value: ViewType$1.SPATIAL },
+  // In-progress shape being drawn, as { type, vertices }.
+  inProgressShape: { type: "object", value: null, compare: true },
+  // Current mouse position (in data coordinates) while drawing.
+  hoverCoord: { type: "array", value: null, compare: true },
+  // Stroke color [r, g, b] of the in-progress shape preview.
+  previewStrokeColor: { type: "color", value: [255, 255, 0] }
+};
+class AnnotationLayer extends CompositeLayer {
+  // The semantic zoom and arrowhead sizes depend on the current zoom level,
+  // so the sublayers must also be re-rendered when the viewport changes.
+  // eslint-disable-next-line class-methods-use-this
+  shouldUpdateState({ changeFlags }) {
+    return changeFlags.propsOrDataChanged || changeFlags.viewportChanged;
+  }
+  /**
+   * Prefix the sublayer ID with this layer's ID (so that multiple
+   * AnnotationLayers can co-exist), and combine this layer's
+   * opacity with the per-shape opacity of the sublayer.
+   * Note: we avoid getSubLayerProps here, since it would
+   * overwrite the sublayer extensions (e.g., PathStyleExtension)
+   * and opacity values.
+   * @param {object} layer A DeckGL layer instance.
+   * @returns {object} The cloned layer instance.
+   */
+  wrapSubLayer(layer) {
+    const { id, opacity, pickable, visible } = this.props;
+    return layer.clone({
+      id: `${id}-${layer.id}`,
+      opacity: layer.props.opacity * opacity,
+      pickable,
+      visible
+    });
+  }
+  renderLayers() {
+    const { data, selectedShapeUid, physicalPixelSize, authoredZoom, semanticZoom, viewType, inProgressShape, hoverCoord, previewStrokeColor } = this.props;
+    const zoom = this.context.viewport?.zoom ?? 0;
+    const visibleShapes = (data ?? []).filter((shape2) => shape2.visible !== false);
+    const annotationLayers = createAnnotationLayers(visibleShapes, zoom, selectedShapeUid, physicalPixelSize, authoredZoom, semanticZoom, viewType);
+    const previewLayer = createPreviewLayer(inProgressShape, hoverCoord, previewStrokeColor.slice(0, 3));
+    return [
+      ...annotationLayers,
+      ...previewLayer ? [previewLayer] : []
+    ].map((layer) => this.wrapSubLayer(layer));
+  }
+}
+AnnotationLayer.layerName = "AnnotationLayer";
+AnnotationLayer.defaultProps = defaultProps$1;
 function r$1(e3) {
   var t, f2, n2 = "";
   if ("string" == typeof e3 || "number" == typeof e3) n2 += e3;
@@ -145636,11 +147005,13 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
     this.cellSetsLabelPrevZoom = null;
     this.cellSetsLayers = [];
     this.contourLayers = [];
+    this.annotationLayer = null;
     this.onUpdateCellsData();
     this.onUpdateCellsLayer();
     this.onUpdateCellSetsLayers();
     this.onUpdateStratifiedData();
     this.onUpdateContourLayers();
+    this.onUpdateAnnotationLayer();
   }
   // Want to support multiple types of contour layers
   // - One layer for all data points (no filtering)
@@ -145704,6 +147075,21 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
     }));
     return layers;
   }
+  createAnnotationLayer() {
+    const { annotationShapes, annotationOverlayVisible, annotationSemanticZoom, annotationShapeSelection } = this.props;
+    return new AnnotationLayer({
+      data: annotationShapes,
+      visible: annotationOverlayVisible,
+      semanticZoom: annotationSemanticZoom,
+      selectedShapeUid: annotationShapeSelection,
+      viewType: ViewType$1.SCATTERPLOT
+      // TODO: is this needed?
+      // TODO: these are view-level properties, rather than layer-level.
+      // annotationTransitionDuration,
+      // annotationEditable,
+      // Other coordination types related to editing...
+    });
+  }
   createCellsLayer() {
     const {
       obsEmbeddingIndex: obsIndex,
@@ -145837,12 +147223,13 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
     ], flipYTooltip, this.props.onSelectionBusy);
   }
   getLayers() {
-    const { cellsLayer, cellSetsLayers, contourLayers } = this;
+    const { cellsLayer, cellSetsLayers, contourLayers, annotationLayer } = this;
     return [
       cellsLayer,
       ...contourLayers,
       ...cellSetsLayers,
-      this.createSelectionLayer()
+      this.createSelectionLayer(),
+      annotationLayer
     ];
   }
   /**
@@ -145879,6 +147266,14 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
       this.cellsLayer = null;
     }
   }
+  onUpdateAnnotationLayer() {
+    const { annotationShapes } = this.props;
+    if (annotationShapes) {
+      this.annotationLayer = this.createAnnotationLayer();
+    } else {
+      this.annotationLayer = null;
+    }
+  }
   onUpdateStratifiedData() {
     const { stratifiedData } = this.props;
     if (stratifiedData) {
@@ -145994,6 +147389,16 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
       this.onUpdateCellSetsLayers(true);
       forceUpdate = true;
     }
+    if ([
+      "annotationShapes",
+      "annotationOverlayVisible",
+      "annotationSemanticZoom",
+      "annotationTransitionDuration",
+      "annotationEditable"
+    ].some(shallowDiff)) {
+      this.onUpdateAnnotationLayer();
+      forceUpdate = true;
+    }
     if (forceUpdate) {
       this.forceUpdate();
     }
@@ -148795,7 +150200,6 @@ const DEFAULT_FEATURE_AGGREGATION_STRATEGY = "first";
 function EmbeddingScatterplotSubscriber(props) {
   const {
     uuid,
-    coordinationScopes: coordinationScopesRaw,
     closeButtonVisible,
     downloadButtonVisible,
     removeGridComponent,
@@ -148811,9 +150215,15 @@ function EmbeddingScatterplotSubscriber(props) {
     circleScaleFactor = 0.8
   } = props;
   const loaders = useLoaders();
-  const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
+  const [
+    // eslint-disable-next-line no-unused-vars
+    coordinationScopes,
+    _coordinationScopesBy,
+    coordinationValues
+  ] = useViewMapping(uuid);
   const setComponentHover = useSetComponentHover();
   const setComponentViewInfo = useSetComponentViewInfo(uuid);
+  useAnnotationFrameCoordination(uuid, coordinationScopes, coordinationValues);
   const [{
     dataset,
     obsType,
@@ -148850,7 +150260,13 @@ function EmbeddingScatterplotSubscriber(props) {
     embeddingContourPercentiles: contourPercentiles,
     contourColorEncoding,
     contourColor,
-    featureAggregationStrategy
+    featureAggregationStrategy,
+    annotationStory,
+    annotationShapes,
+    annotationOverlayVisible,
+    annotationSemanticZoom,
+    annotationTransitionDuration,
+    annotationEditable
   }, {
     setEmbeddingZoom: setZoom,
     setEmbeddingTargetX: setTargetX,
@@ -148877,21 +150293,41 @@ function EmbeddingScatterplotSubscriber(props) {
     setEmbeddingContoursFilled,
     setEmbeddingContourPercentiles: setContourPercentiles,
     setContourColorEncoding,
-    setFeatureAggregationStrategy
-  }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SCATTERPLOT], coordinationScopes);
+    setFeatureAggregationStrategy,
+    setAnnotationStory
+  }] = useCoordination(
+    COMPONENT_COORDINATION_TYPES[ViewType$1.SCATTERPLOT],
+    coordinationScopes,
+    coordinationValues,
+    uuid
+  );
   const {
     embeddingZoom: initialZoom,
     embeddingTargetX: initialTargetX,
     embeddingTargetY: initialTargetY
   } = useInitialCoordination(
     COMPONENT_COORDINATION_TYPES[ViewType$1.SCATTERPLOT],
-    coordinationScopes
+    coordinationScopes,
+    coordinationValues
   );
   const observationsLabel = observationsLabelOverride || obsType;
   const sampleSetSelection = sampleSetSelectionFromProps || sampleSetSelectionFromCoordination;
   const featureAggregationStrategyToUse = featureAggregationStrategy ?? DEFAULT_FEATURE_AGGREGATION_STRATEGY;
   const [width2, height2, deckRef] = useDeckCanvasSize();
   const title = titleOverride || `Scatterplot (${mapping})`;
+  const [
+    ,
+    annotationStoryStatus,
+    annotationStoryUrls,
+    annotationStoryError
+  ] = useAnnotationStoryData(
+    loaders,
+    dataset,
+    false,
+    { setAnnotationStory },
+    { annotationStory },
+    {}
+  );
   const [
     // eslint-disable-next-line no-unused-vars
     obsLabelsTypes,
@@ -148998,11 +150434,13 @@ function EmbeddingScatterplotSubscriber(props) {
     matrixIndicesError,
     featureLabelsError,
     sampleSetsError,
-    sampleEdgesError
+    sampleEdgesError,
+    annotationStoryError
   ];
   const isReady = useReady([
     obsEmbeddingStatus,
     obsSetsStatus,
+    annotationStoryStatus,
     featureSelectionStatus,
     featureLabelsStatus,
     expandedFeatureLabelsStatus,
@@ -149016,7 +150454,8 @@ function EmbeddingScatterplotSubscriber(props) {
     matrixIndicesUrls,
     featureLabelsUrls,
     sampleSetsUrl,
-    sampleEdgesUrl
+    sampleEdgesUrl,
+    annotationStoryUrls
   ]);
   const [dynamicCellRadius, setDynamicCellRadius] = useState(cellRadiusFixed);
   const [isSelectionPending, setIsSelectionPending] = useState(false);
@@ -149392,7 +150831,12 @@ function EmbeddingScatterplotSubscriber(props) {
         embeddingPointsVisible,
         embeddingContoursVisible,
         circleInfo,
-        featureSelection: geneSelection
+        featureSelection: geneSelection,
+        annotationShapes,
+        annotationOverlayVisible,
+        annotationSemanticZoom,
+        annotationTransitionDuration,
+        annotationEditable
       }
     ),
     tooltipsVisible && width2 && height2 ? /* @__PURE__ */ React__default.createElement(