@diagrammo/dgmo 0.8.18 → 0.8.19

package/src/sequence/renderer.ts

@@ -21,6 +21,8 @@ import type {
   SequenceParticipant,
 } from './parser';
 import { isSequenceBlock, isSequenceSection, isSequenceNote } from './parser';
+import { applyCollapseProjection } from './collapse';
+import type { CollapsedView } from './collapse';
 import { resolveSequenceTags } from './tag-resolution';
 import type { ResolvedTagMap } from './tag-resolution';
 import { resolveActiveTagGroup } from '../utils/tag-groups';
@@ -533,6 +535,7 @@ export interface SectionMessageGroup {
 
 export interface SequenceRenderOptions {
   collapsedSections?: Set<number>; // keyed by section lineNumber
+  collapsedGroups?: Set<number>; // keyed by group lineNumber
   expandedNoteLines?: Set<number>; // keyed by note lineNumber; undefined = all expanded (CLI default)
   exportWidth?: number; // Explicit width for CLI/export rendering (bypasses getBoundingClientRect)
   activeTagGroup?: string | null; // Active tag group name for tag-driven recoloring; null = explicitly none
@@ -900,7 +903,37 @@ export function renderSequenceDiagram(
   // Clear previous content
   d3Selection.select(container).selectAll('*').remove();
 
-  const { title, messages, elements, groups, options: parsedOptions } = parsed;
+  const { title, options: parsedOptions } = parsed;
+
+  // Compute effective collapsed groups: union of syntax-declared and runtime-toggled
+  const effectiveCollapsedGroups = new Set<number>();
+  for (const group of parsed.groups) {
+    if (group.collapsed) effectiveCollapsedGroups.add(group.lineNumber);
+  }
+  if (options?.collapsedGroups) {
+    for (const ln of options.collapsedGroups) {
+      // Toggle: if already in the set (from syntax), remove it (user expanded);
+      // if not in the set, add it (user collapsed)
+      if (effectiveCollapsedGroups.has(ln)) {
+        effectiveCollapsedGroups.delete(ln);
+      } else {
+        effectiveCollapsedGroups.add(ln);
+      }
+    }
+  }
+
+  // Apply collapse projection before participant ordering
+  const collapsed: CollapsedView | null =
+    effectiveCollapsedGroups.size > 0
+      ? applyCollapseProjection(parsed, effectiveCollapsedGroups)
+      : null;
+
+  const messages = collapsed ? collapsed.messages : parsed.messages;
+  const elements = collapsed ? collapsed.elements : parsed.elements;
+  const groups = collapsed ? collapsed.groups : parsed.groups;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const collapsedGroupIds = collapsed?.collapsedGroupIds ?? new Map();
+
   const collapsedSections = options?.collapsedSections;
   const expandedNoteLines = options?.expandedNoteLines;
   const collapseNotesDisabled =
@@ -911,8 +944,12 @@ export function renderSequenceDiagram(
     expandedNoteLines === undefined ||
     collapseNotesDisabled ||
     expandedNoteLines.has(note.lineNumber);
+
+  const sourceParticipants = collapsed
+    ? collapsed.participants
+    : parsed.participants;
   const participants = applyPositionOverrides(
-    applyGroupOrdering(parsed.participants, groups, messages)
+    applyGroupOrdering(sourceParticipants, groups, messages)
   );
   if (participants.length === 0) return;
 
@@ -1158,6 +1195,15 @@ export function renderSequenceDiagram(
   const preSectionMsgIndices: number[] = [];
   const sectionRegions: SectionRegion[] = [];
   {
+    // Build lineNumber → message index lookup.  This is used instead of
+    // messages.indexOf() because collapse projection creates spread copies
+    // of messages, breaking reference equality.
+    const msgLineToIndex = new Map<number, number>();
+    messages.forEach((m, i) => msgLineToIndex.set(m.lineNumber, i));
+
+    const findMsgIndex = (child: SequenceElement): number =>
+      msgLineToIndex.get(child.lineNumber) ?? -1;
+
     const collectMsgIndicesFromBlock = (
       block: import('./parser').SequenceBlock
     ): number[] => {
@@ -1166,7 +1212,7 @@ export function renderSequenceDiagram(
         if (isSequenceBlock(child)) {
           indices.push(...collectMsgIndicesFromBlock(child));
         } else if (!isSequenceSection(child) && !isSequenceNote(child)) {
-          const idx = messages.indexOf(child as SequenceMessage);
+          const idx = findMsgIndex(child);
           if (idx >= 0) indices.push(idx);
         }
       }
@@ -1176,7 +1222,7 @@ export function renderSequenceDiagram(
             if (isSequenceBlock(child)) {
               indices.push(...collectMsgIndicesFromBlock(child));
             } else if (!isSequenceSection(child) && !isSequenceNote(child)) {
-              const idx = messages.indexOf(child as SequenceMessage);
+              const idx = findMsgIndex(child);
               if (idx >= 0) indices.push(idx);
             }
           }
@@ -1186,7 +1232,7 @@ export function renderSequenceDiagram(
         if (isSequenceBlock(child)) {
           indices.push(...collectMsgIndicesFromBlock(child));
         } else if (!isSequenceSection(child) && !isSequenceNote(child)) {
-          const idx = messages.indexOf(child as SequenceMessage);
+          const idx = findMsgIndex(child);
           if (idx >= 0) indices.push(idx);
         }
       }
@@ -1202,7 +1248,7 @@ export function renderSequenceDiagram(
       } else if (isSequenceBlock(el)) {
         currentTarget.push(...collectMsgIndicesFromBlock(el));
       } else {
-        const idx = messages.indexOf(el as SequenceMessage);
+        const idx = findMsgIndex(el);
         if (idx >= 0) currentTarget.push(idx);
       }
     }
@@ -1285,8 +1331,10 @@ export function renderSequenceDiagram(
   const LEGEND_FIXED_GAP = 8;
   const legendTopSpace =
     parsed.tagGroups.length > 0 ? LEGEND_HEIGHT + LEGEND_FIXED_GAP : 0;
+  // Use parsed.groups (not projected groups) to keep vertical space consistent
+  // even when all groups are collapsed into virtual participants
   const groupOffset =
-    groups.length > 0 ? GROUP_PADDING_TOP + GROUP_LABEL_SIZE : 0;
+    parsed.groups.length > 0 ? GROUP_PADDING_TOP + GROUP_LABEL_SIZE : 0;
   const participantStartY =
     TOP_MARGIN +
     titleOffset +
@@ -1618,7 +1666,23 @@ export function renderSequenceDiagram(
     );
   }
 
-  // Render group boxes (behind participant shapes)
+  // Build set of collapsed group names for drill-bar rendering
+  const collapsedGroupNames = new Set<string>();
+  const collapsedGroupMeta = new Map<
+    string,
+    { lineNumber: number; metadata?: Record<string, string> }
+  >();
+  for (const group of parsed.groups) {
+    if (effectiveCollapsedGroups.has(group.lineNumber)) {
+      collapsedGroupNames.add(group.name);
+      collapsedGroupMeta.set(group.name, {
+        lineNumber: group.lineNumber,
+        metadata: group.metadata,
+      });
+    }
+  }
+
+  // Render group boxes (behind participant shapes) — skip collapsed groups
   for (const group of groups) {
     if (group.participantIds.length === 0) continue;
 
@@ -1650,7 +1714,15 @@ export function renderSequenceDiagram(
         : palette.bg;
     const strokeColor = groupTagColor || palette.textMuted;
 
-    svg
+    const groupG = svg
+      .append('g')
+      .attr('class', 'group-box-wrapper')
+      .attr('data-group-toggle', '')
+      .attr('data-group-line', String(group.lineNumber))
+      .attr('cursor', 'pointer');
+    groupG.append('title').text('Click to collapse');
+
+    groupG
       .append('rect')
       .attr('x', minX)
       .attr('y', boxY)
@@ -1661,11 +1733,10 @@ export function renderSequenceDiagram(
       .attr('stroke', strokeColor)
       .attr('stroke-width', 1)
       .attr('stroke-opacity', 0.5)
-      .attr('class', 'group-box')
-      .attr('data-group-line', String(group.lineNumber));
+      .attr('class', 'group-box');
 
     // Group label
-    svg
+    groupG
       .append('text')
       .attr('x', minX + 8)
       .attr('y', boxY + GROUP_LABEL_SIZE + 4)
@@ -1674,7 +1745,6 @@ export function renderSequenceDiagram(
       .attr('font-weight', 'bold')
       .attr('opacity', 0.7)
       .attr('class', 'group-label')
-      .attr('data-group-line', String(group.lineNumber))
       .text(group.name);
   }
 
@@ -1690,6 +1760,16 @@ export function renderSequenceDiagram(
       tagKey && pTagValue
         ? { key: tagKey, value: pTagValue.toLowerCase() }
         : undefined;
+    // For collapsed group participants, resolve tag color from group metadata
+    const isCollapsedGroup = collapsedGroupNames.has(participant.id);
+    let effectiveTagColor = pTagColor;
+    if (isCollapsedGroup && !effectiveTagColor) {
+      const meta = collapsedGroupMeta.get(participant.id);
+      if (meta?.metadata && tagKey) {
+        effectiveTagColor = getTagColor(meta.metadata[tagKey]);
+      }
+    }
+
     renderParticipant(
       svg,
       participant,
@@ -1697,18 +1777,104 @@ export function renderSequenceDiagram(
       cy,
       palette,
       isDark,
-      pTagColor,
+      effectiveTagColor,
       pTagAttr
     );
 
-    // Render lifeline
+    // Collapsed group: re-render participant box at full group height + drill-bar
+    if (isCollapsedGroup) {
+      const meta = collapsedGroupMeta.get(participant.id)!;
+      const drillColor = effectiveTagColor || palette.textMuted;
+      const drillBarH = 6;
+      const boxW = PARTICIPANT_BOX_WIDTH;
+      // Match the group box dimensions
+      const fullH =
+        PARTICIPANT_BOX_HEIGHT + GROUP_PADDING_TOP + GROUP_PADDING_BOTTOM;
+      const clipId = `clip-drill-group-${participant.id.replace(/[^a-zA-Z0-9-]/g, '-')}`;
+
+      // Add toggle attributes to the participant <g> so any click on it
+      // (overlay rect, label, drill-bar) walks up and triggers the toggle
+      const participantG = svg.select<SVGGElement>(
+        `.participant[data-participant-id="${participant.id}"]`
+      );
+      participantG
+        .attr('data-group-toggle', '')
+        .attr('data-group-line', String(meta.lineNumber))
+        .attr('cursor', 'pointer');
+      participantG.append('title').text('Click to expand');
+
+      // Overlay a taller rect to replace the standard participant box
+      const pFill = effectiveTagColor
+        ? mix(
+            effectiveTagColor,
+            isDark ? palette.surface : palette.bg,
+            isDark ? 30 : 40
+          )
+        : isDark
+          ? mix(palette.overlay, palette.surface, 50)
+          : mix(palette.bg, palette.surface, 50);
+      const pStroke = effectiveTagColor || palette.border;
+
+      // Taller box inside the participant <g> (local coords, y=0 is participant cy)
+      participantG
+        .append('rect')
+        .attr('x', -boxW / 2)
+        .attr('y', -GROUP_PADDING_TOP)
+        .attr('width', boxW)
+        .attr('height', fullH)
+        .attr('rx', 6)
+        .attr('fill', pFill)
+        .attr('stroke', pStroke)
+        .attr('stroke-width', 1.5);
+
+      // Re-render label centered in the taller box (local coords)
+      participantG
+        .append('text')
+        .attr('x', 0)
+        .attr('y', -GROUP_PADDING_TOP + fullH / 2)
+        .attr('text-anchor', 'middle')
+        .attr('dominant-baseline', 'central')
+        .attr('fill', palette.text)
+        .attr('font-size', 13)
+        .attr('font-weight', 500)
+        .text(participant.label);
+
+      // Drill-bar at bottom (local coords)
+      participantG
+        .append('clipPath')
+        .attr('id', clipId)
+        .append('rect')
+        .attr('x', -boxW / 2)
+        .attr('y', -GROUP_PADDING_TOP)
+        .attr('width', boxW)
+        .attr('height', fullH)
+        .attr('rx', 6);
+
+      participantG
+        .append('rect')
+        .attr('class', 'sequence-drill-bar')
+        .attr('x', -boxW / 2)
+        .attr('y', -GROUP_PADDING_TOP + fullH - drillBarH)
+        .attr('width', boxW)
+        .attr('height', drillBarH)
+        .attr('fill', drillColor)
+        .attr('clip-path', `url(#${clipId})`);
+    }
+
+    // Render lifeline — collapsed groups start below the taller box
+    const llY = isCollapsedGroup
+      ? lifelineStartY + GROUP_PADDING_BOTTOM
+      : lifelineStartY;
+    const llColor = isCollapsedGroup
+      ? effectiveTagColor || palette.textMuted
+      : pTagColor || palette.textMuted;
     const lifelineEl = svg
       .append('line')
       .attr('x1', cx)
-      .attr('y1', lifelineStartY)
+      .attr('y1', llY)
       .attr('x2', cx)
       .attr('y2', lifelineStartY + lifelineLength)
-      .attr('stroke', pTagColor || palette.textMuted)
+      .attr('stroke', llColor)
       .attr('stroke-width', 1)
       .attr('stroke-dasharray', '6 4')
       .attr('class', 'lifeline')
@@ -2104,43 +2270,14 @@ export function renderSequenceDiagram(
       ? `${sec.label} (${msgCount} ${msgCount === 1 ? 'message' : 'messages'})`
       : sec.label;
 
-    // Collapsed sections use white text for contrast against the darker band
-    const labelColor = isCollapsed ? '#ffffff' : lineColor;
-
-    // Chevron indicator
-    const chevronSpace = 14;
-    const labelX = (sectionLineX1 + sectionLineX2) / 2;
-    const chevronX = labelX - (labelText.length * 3.5 + 8 + chevronSpace / 2);
-    const chevronY = secY;
-    if (isCollapsed) {
-      // Right-pointing triangle ▶
-      sectionG
-        .append('path')
-        .attr(
-          'd',
-          `M ${chevronX} ${chevronY - 4} L ${chevronX + 6} ${chevronY} L ${chevronX} ${chevronY + 4} Z`
-        )
-        .attr('fill', labelColor)
-        .attr('class', 'section-chevron');
-    } else {
-      // Down-pointing triangle ▼
-      sectionG
-        .append('path')
-        .attr(
-          'd',
-          `M ${chevronX - 1} ${chevronY - 3} L ${chevronX + 7} ${chevronY - 3} L ${chevronX + 3} ${chevronY + 3} Z`
-        )
-        .attr('fill', labelColor)
-        .attr('class', 'section-chevron');
-    }
-
     // Centered label text
+    const labelX = (sectionLineX1 + sectionLineX2) / 2;
     sectionG
       .append('text')
-      .attr('x', labelX + chevronSpace / 2)
+      .attr('x', labelX)
       .attr('y', secY + 4)
       .attr('text-anchor', 'middle')
-      .attr('fill', labelColor)
+      .attr('fill', lineColor)
       .attr('font-size', 11)
       .attr('font-weight', 'bold')
       .attr('class', 'section-label')

package/src/sharing.ts

@@ -6,24 +6,45 @@ import {
 const DEFAULT_BASE_URL = 'https://online.diagrammo.app';
 const COMPRESSED_SIZE_LIMIT = 8192; // 8 KB
 
-export interface DiagramViewState {
-  activeTagGroup?: string;
-  collapsedGroups?: string[];
-  swimlaneTagGroup?: string;
-  collapsedLanes?: string[];
-  palette?: string;
-  theme?: 'light' | 'dark';
+/**
+ * Compact view state schema (ADR-6).
+ * All fields optional. Only non-default values are encoded.
+ * `tag: null` means "user chose none"; absent `tag` means "use DSL default" (ADR-5).
+ */
+export interface CompactViewState {
+  tag?: string | null; // active tag override (null = "none")
+  cs?: number[]; // collapsed sections (sequence line numbers)
+  cg?: string[]; // collapsed groups/nodes (IDs or names)
+  swim?: string | null; // swimlane tag group
+  cl?: string[]; // collapsed lanes
+  cc?: string[]; // collapsed columns (kanban)
+  rm?: string; // render mode override
+  htv?: Record<string, string[]>; // hidden tag values
+  ha?: string[]; // hidden attributes
+  enl?: number[]; // expanded note lines (sequence)
+  sem?: boolean; // semantic colors (ER)
+  cm?: boolean; // compact meta (kanban)
+  c4l?: string; // C4 level
+  c4s?: string; // C4 system
+  c4c?: string; // C4 container
+  rps?: number; // RPS multiplier (infra)
+  spd?: number; // playback speed (infra)
+  io?: Record<string, number>; // instance overrides (infra)
 }
 
 export interface DecodedDiagramUrl {
   dsl: string;
-  viewState: DiagramViewState;
+  viewState: CompactViewState;
+  palette?: string;
+  theme?: 'light' | 'dark';
   filename?: string;
 }
 
 export interface EncodeDiagramUrlOptions {
   baseUrl?: string;
-  viewState?: DiagramViewState;
+  viewState?: CompactViewState;
+  palette?: string;
+  theme?: 'light' | 'dark';
   filename?: string;
 }
 
@@ -36,6 +57,34 @@ export type EncodeDiagramUrlResult =
       limit: number;
     };
 
+/**
+ * Encode a CompactViewState to a compressed string for URL embedding.
+ * Returns empty string if state has no keys (ADR-4).
+ */
+export function encodeViewState(state: CompactViewState): string {
+  const keys = Object.keys(state);
+  if (keys.length === 0) return '';
+  return compressToEncodedURIComponent(JSON.stringify(state));
+}
+
+/**
+ * Decode a compressed view state string back to CompactViewState.
+ * Returns empty object on failure (no crash).
+ */
+export function decodeViewState(encoded: string): CompactViewState {
+  if (!encoded) return {};
+  try {
+    const json = decompressFromEncodedURIComponent(encoded);
+    if (!json) return {};
+    const parsed = JSON.parse(json);
+    if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed))
+      return {};
+    return parsed as CompactViewState;
+  } catch {
+    return {};
+  }
+}
+
 /**
  * Compress a DGMO DSL string into a shareable URL.
  * Returns `{ url }` on success, or `{ error: 'too-large', compressedSize, limit }` if the
@@ -59,28 +108,21 @@ export function encodeDiagramUrl(
 
   let hash = `dgmo=${compressed}`;
 
-  if (options?.viewState?.activeTagGroup) {
-    hash += `&tag=${encodeURIComponent(options.viewState.activeTagGroup)}`;
-  }
-
-  if (options?.viewState?.collapsedGroups?.length) {
-    hash += `&cg=${encodeURIComponent(options.viewState.collapsedGroups.join(','))}`;
-  }
-
-  if (options?.viewState?.swimlaneTagGroup) {
-    hash += `&swim=${encodeURIComponent(options.viewState.swimlaneTagGroup)}`;
-  }
-
-  if (options?.viewState?.collapsedLanes?.length) {
-    hash += `&cl=${encodeURIComponent(options.viewState.collapsedLanes.join(','))}`;
+  // View state as single compressed blob (ADR-1)
+  if (options?.viewState) {
+    const vsEncoded = encodeViewState(options.viewState);
+    if (vsEncoded) {
+      hash += `&vs=${vsEncoded}`;
+    }
   }
 
-  if (options?.viewState?.palette && options.viewState.palette !== 'nord') {
-    hash += `&pal=${encodeURIComponent(options.viewState.palette)}`;
+  // Palette and theme are app-level, kept as separate params
+  if (options?.palette && options.palette !== 'nord') {
+    hash += `&pal=${encodeURIComponent(options.palette)}`;
   }
 
-  if (options?.viewState?.theme && options.viewState.theme !== 'dark') {
-    hash += `&th=${encodeURIComponent(options.viewState.theme)}`;
+  if (options?.theme && options.theme !== 'dark') {
+    hash += `&th=${encodeURIComponent(options.theme)}`;
   }
 
   if (options?.filename) {
@@ -95,8 +137,8 @@ export function encodeDiagramUrl(
 /**
  * Decode a DGMO DSL string and view state from a URL query string or hash.
  * Accepts any of:
- *   - `?dgmo=<payload>&tag=<name>`
- *   - `#dgmo=<payload>&tag=<name>` (backwards compat)
+ *   - `?dgmo=<payload>&vs=<state>`
+ *   - `#dgmo=<payload>&vs=<state>` (backwards compat)
  *   - `dgmo=<payload>`
  *   - `<bare payload>`
  *
@@ -105,6 +147,8 @@ export function encodeDiagramUrl(
 export function decodeDiagramUrl(hash: string): DecodedDiagramUrl {
   const empty: DecodedDiagramUrl = { dsl: '', viewState: {} };
   let filename: string | undefined;
+  let palette: string | undefined;
+  let theme: 'light' | 'dark' | undefined;
   if (!hash) return empty;
 
   let raw = hash;
@@ -120,29 +164,22 @@ export function decodeDiagramUrl(hash: string): DecodedDiagramUrl {
   const parts = raw.split('&');
   let payload = parts[0];
 
-  // Parse extra params (e.g. tag=Location)
-  const viewState: DiagramViewState = {};
+  // Parse extra params
+  let viewState: CompactViewState = {};
   for (let i = 1; i < parts.length; i++) {
     const eq = parts[i].indexOf('=');
     if (eq === -1) continue;
     const key = parts[i].slice(0, eq);
-    const val = decodeURIComponent(parts[i].slice(eq + 1));
-    if (key === 'tag' && val) {
-      viewState.activeTagGroup = val;
-    }
-    if (key === 'cg' && val) {
-      viewState.collapsedGroups = val.split(',').filter(Boolean);
-    }
-    if (key === 'swim' && val) {
-      viewState.swimlaneTagGroup = val;
+    const val = parts[i].slice(eq + 1);
+    if (key === 'vs' && val) {
+      viewState = decodeViewState(val);
     }
-    if (key === 'cl' && val) {
-      viewState.collapsedLanes = val.split(',').filter(Boolean);
+    if (key === 'pal' && val) palette = decodeURIComponent(val);
+    if (key === 'th') {
+      const decoded = decodeURIComponent(val);
+      if (decoded === 'light' || decoded === 'dark') theme = decoded;
     }
-    if (key === 'pal' && val) viewState.palette = val;
-    if (key === 'th' && (val === 'light' || val === 'dark'))
-      viewState.theme = val;
-    if (key === 'fn' && val) filename = val;
+    if (key === 'fn' && val) filename = decodeURIComponent(val);
   }
 
   // Strip 'dgmo=' prefix
@@ -150,12 +187,12 @@ export function decodeDiagramUrl(hash: string): DecodedDiagramUrl {
     payload = payload.slice(5);
   }
 
-  if (!payload) return { dsl: '', viewState, filename };
+  if (!payload) return { dsl: '', viewState, palette, theme, filename };
 
   try {
     const result = decompressFromEncodedURIComponent(payload);
-    return { dsl: result ?? '', viewState, filename };
+    return { dsl: result ?? '', viewState, palette, theme, filename };
   } catch {
-    return { dsl: '', viewState, filename };
+    return { dsl: '', viewState, palette, theme, filename };
   }
 }

package/src/utils/legend-constants.ts

@@ -54,3 +54,14 @@ export const EYE_OPEN_PATH =
   'M1 7s2.5-5 6-5 6 5 6 5-2.5 5-6 5-6-5-6-5z M7 9.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z';
 export const EYE_CLOSED_PATH =
   'M2.5 2.5l9 9 M1.5 7s2.2-4 5.5-4c1.2 0 2.2.5 3 1.1 M12.5 7s-2.2 4-5.5 4c-1.2 0-2.2-.5-3-1.1';
+
+// ── Controls group constants ────────────────────────────────
+// Gear/cog icon (14×14 viewBox) — 6 flat teeth with center hole
+// Computed from polar coordinates: outerR=5.5, innerR=3.5, holeR=2, center=(7,7)
+// Uses evenodd fill-rule for the center hole
+export const CONTROLS_ICON_PATH =
+  'M5.6 1.7L8.4 1.7L7.9 3.6L9.5 4.5L10.9 3.1L12.3 5.6L10.4 6.1L10.4 7.9L12.3 8.4L10.9 10.9L9.5 9.5L7.9 10.4L8.4 12.3L5.6 12.3L6.1 10.4L4.5 9.5L3.1 10.9L1.7 8.4L3.6 7.9L3.6 6.1L1.7 5.6L3.1 3.1L4.5 4.5L6.1 3.6Z' +
+  'M5 7a2 2 0 1 0 4 0a2 2 0 1 0-4 0Z';
+export const LEGEND_TOGGLE_DOT_R = LEGEND_DOT_R;
+export const LEGEND_TOGGLE_OFF_OPACITY = 0.4;
+export const LEGEND_GEAR_PILL_W = 14 + LEGEND_PILL_PAD; // gear icon (14) + padding