@diagrammo/dgmo 0.8.17 → 0.8.19

package/src/gantt/types.ts

@@ -7,8 +7,17 @@ import type { TagGroup } from '../utils/tag-groups';
 
 // ── Duration ────────────────────────────────────────────────
 
-/** Calendar units: d (days), w (weeks), m (months), q (quarters), y (years), h (hours), min (minutes). bd = business days. */
-export type DurationUnit = 'd' | 'bd' | 'w' | 'm' | 'q' | 'y' | 'h' | 'min';
+/** Calendar units: d (days), w (weeks), m (months), q (quarters), y (years), h (hours), min (minutes). bd = business days. s = sprints. */
+export type DurationUnit =
+  | 'd'
+  | 'bd'
+  | 'w'
+  | 'm'
+  | 'q'
+  | 'y'
+  | 'h'
+  | 'min'
+  | 's';
 
 export interface Duration {
   amount: number;
@@ -119,6 +128,11 @@ export interface GanttOptions {
   /** Line numbers for option/block keywords — maps key to source line */
   optionLineNumbers: Record<string, number>;
   holidaysLineNumber: number | null;
+  // ── Sprint options ─────────────────────────────────────────
+  sprintLength: Duration | null; // default { amount: 2, unit: 'w' } when sprint mode active
+  sprintNumber: number | null; // which sprint the chart starts at (default 1)
+  sprintStart: string | null; // YYYY-MM-DD — date that sprintNumber begins
+  sprintMode: 'auto' | 'explicit' | null; // auto = activated by `s` unit, explicit = sprint-* option present
 }
 
 // ── Parsed Result ───────────────────────────────────────────
@@ -158,6 +172,12 @@ export interface ResolvedGroup {
   depth: number;
 }
 
+export interface ResolvedSprint {
+  number: number;
+  startDate: Date;
+  endDate: Date;
+}
+
 export interface ResolvedSchedule {
   tasks: ResolvedTask[];
   groups: ResolvedGroup[];
@@ -167,6 +187,7 @@ export interface ResolvedSchedule {
   tagGroups: TagGroup[];
   eras: GanttEra[];
   markers: GanttMarker[];
+  sprints: ResolvedSprint[];
   options: GanttOptions;
   diagnostics: DgmoError[];
   error: string | null;

package/src/index.ts

@@ -410,6 +410,9 @@ export type {
   SequenceRenderOptions,
 } from './sequence/renderer';
 
+export { applyCollapseProjection } from './sequence/collapse';
+export type { CollapsedView } from './sequence/collapse';
+
 // ============================================================
 // Colors & Palettes
 // ============================================================
@@ -461,11 +464,16 @@ export type { PaletteConfig, PaletteColors } from './palettes';
 // Sharing (URL encoding/decoding)
 // ============================================================
 
-export { encodeDiagramUrl, decodeDiagramUrl } from './sharing';
+export {
+  encodeDiagramUrl,
+  decodeDiagramUrl,
+  encodeViewState,
+  decodeViewState,
+} from './sharing';
 export type {
   EncodeDiagramUrlOptions,
   EncodeDiagramUrlResult,
-  DiagramViewState,
+  CompactViewState,
   DecodedDiagramUrl,
 } from './sharing';
 

package/src/sequence/collapse.ts

@@ -0,0 +1,169 @@
+// ============================================================
+// Collapse Projection for Sequence Diagram Groups
+// ============================================================
+//
+// Pure projection function that transforms a parsed sequence diagram
+// by collapsing specified groups into single virtual participants.
+// The parsed AST (ParsedSequenceDgmo) stays immutable.
+
+import type {
+  ParsedSequenceDgmo,
+  SequenceElement,
+  SequenceGroup,
+  SequenceMessage,
+  SequenceParticipant,
+} from './parser';
+import { isSequenceBlock, isSequenceNote, isSequenceSection } from './parser';
+
+export interface CollapsedView {
+  participants: SequenceParticipant[];
+  messages: SequenceMessage[];
+  elements: SequenceElement[];
+  groups: SequenceGroup[];
+  /** Maps member participant ID → collapsed group name */
+  collapsedGroupIds: Map<string, string>;
+}
+
+/**
+ * Project a parsed sequence diagram into a collapsed view.
+ *
+ * @param parsed - The immutable parsed sequence diagram
+ * @param collapsedGroups - Set of group lineNumbers that should be collapsed
+ * @returns A new CollapsedView with remapped participants, messages, elements, and groups
+ */
+export function applyCollapseProjection(
+  parsed: ParsedSequenceDgmo,
+  collapsedGroups: Set<number>
+): CollapsedView {
+  if (collapsedGroups.size === 0) {
+    return {
+      participants: parsed.participants,
+      messages: parsed.messages,
+      elements: parsed.elements,
+      groups: parsed.groups,
+      collapsedGroupIds: new Map(),
+    };
+  }
+
+  // Build memberToGroup map: participantId → group name
+  const memberToGroup = new Map<string, string>();
+  const collapsedGroupNames = new Set<string>();
+  for (const group of parsed.groups) {
+    if (collapsedGroups.has(group.lineNumber)) {
+      collapsedGroupNames.add(group.name);
+      for (const memberId of group.participantIds) {
+        memberToGroup.set(memberId, group.name);
+      }
+    }
+  }
+
+  // Participants: remove members of collapsed groups, insert virtual participant per group
+  // Skip non-member participants that collide with a collapsed group name
+  const participants: SequenceParticipant[] = [];
+  const insertedGroups = new Set<string>();
+
+  for (const p of parsed.participants) {
+    const groupName = memberToGroup.get(p.id);
+    if (groupName) {
+      // Replace first occurrence with virtual group participant
+      if (!insertedGroups.has(groupName)) {
+        insertedGroups.add(groupName);
+        const group = parsed.groups.find(
+          (g) => g.name === groupName && collapsedGroups.has(g.lineNumber)
+        )!;
+        participants.push({
+          id: groupName,
+          label: groupName,
+          type: 'default',
+          lineNumber: group.lineNumber,
+        });
+      }
+      // Skip member — it's absorbed into the group
+    } else if (collapsedGroupNames.has(p.id)) {
+      // Skip — participant name collides with a collapsed group name;
+      // the virtual group participant takes precedence
+    } else {
+      participants.push(p);
+    }
+  }
+
+  // Remap helper
+  const remap = (id: string): string => memberToGroup.get(id) ?? id;
+
+  // Messages: remap from/to, preserving order
+  const messages: SequenceMessage[] = parsed.messages.map((msg) => ({
+    ...msg,
+    from: remap(msg.from),
+    to: remap(msg.to),
+  }));
+
+  // Elements: deep clone with remapping and internal return suppression
+  const elements = remapElements(parsed.elements, memberToGroup);
+
+  // Groups: remove collapsed groups (they're now virtual participants)
+  const groups = parsed.groups.filter(
+    (g) => !collapsedGroups.has(g.lineNumber)
+  );
+
+  return {
+    participants,
+    messages,
+    elements,
+    groups,
+    collapsedGroupIds: memberToGroup,
+  };
+}
+
+/**
+ * Deep clone and remap elements, suppressing internal returns within collapsed groups.
+ */
+function remapElements(
+  elements: SequenceElement[],
+  memberToGroup: Map<string, string>
+): SequenceElement[] {
+  const remap = (id: string): string => memberToGroup.get(id) ?? id;
+  const result: SequenceElement[] = [];
+
+  for (const el of elements) {
+    if (isSequenceSection(el)) {
+      // Sections have no participant references — pass through unchanged
+      result.push(el);
+    } else if (isSequenceNote(el)) {
+      // Remap note participant
+      result.push({
+        ...el,
+        participantId: remap(el.participantId),
+      });
+    } else if (isSequenceBlock(el)) {
+      // Recurse into block children
+      result.push({
+        ...el,
+        children: remapElements(el.children, memberToGroup),
+        elseChildren: remapElements(el.elseChildren, memberToGroup),
+        ...(el.elseIfBranches
+          ? {
+              elseIfBranches: el.elseIfBranches.map((branch) => ({
+                ...branch,
+                children: remapElements(branch.children, memberToGroup),
+              })),
+            }
+          : {}),
+      });
+    } else {
+      // Message element
+      const msg = el as SequenceMessage;
+      const from = remap(msg.from);
+      const to = remap(msg.to);
+
+      // Suppress internal return: both endpoints in same collapsed group
+      // and this is a return message (unlabeled response)
+      if (from === to && from !== msg.from && !msg.label) {
+        continue; // internal return suppressed
+      }
+
+      result.push({ ...msg, from, to });
+    }
+  }
+
+  return result;
+}

package/src/sequence/parser.ts

@@ -154,6 +154,8 @@ export interface SequenceGroup {
   lineNumber: number;
   /** Pipe-delimited tag metadata (e.g. `[Backend | t: Product]`) */
   metadata?: Record<string, string>;
+  /** Whether this group is collapsed by default */
+  collapsed?: boolean;
 }
 
 /**
@@ -502,8 +504,17 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
       const groupColor = groupMatch[2]?.trim();
       let groupMeta: Record<string, string> | undefined;
 
-      // Parse pipe metadata AFTER the closing bracket
-      const afterBracket = groupMatch[3]?.trim() || '';
+      // Parse collapse keyword and pipe metadata AFTER the closing bracket
+      let afterBracket = groupMatch[3]?.trim() || '';
+      let isCollapsed = false;
+
+      // Extract `collapse` keyword (before any pipe metadata)
+      const collapseMatch = afterBracket.match(/^collapse\b/i);
+      if (collapseMatch) {
+        isCollapsed = true;
+        afterBracket = afterBracket.slice(collapseMatch[0].length).trim();
+      }
+
       if (afterBracket.startsWith('|')) {
         const segments = afterBracket.split('|');
         const meta = parsePipeMetadata(segments, aliasMap, () =>
@@ -524,6 +535,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
         participantIds: [],
         lineNumber,
         ...(groupMeta ? { metadata: groupMeta } : {}),
+        ...(isCollapsed ? { collapsed: true } : {}),
       };
       result.groups.push(activeGroup);
       continue;

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')