@diagrammo/dgmo 0.7.1 → 0.7.3

package/src/gantt/renderer.ts

@@ -39,6 +39,120 @@ const MILESTONE_SIZE = 10;
 const MIN_LEFT_MARGIN = 120;
 const BOTTOM_MARGIN = 40;
 const RIGHT_MARGIN = 20;
+const CHAR_W = 6.5;          // estimated px per character for bar labels
+const LABEL_PAD = 8;         // inner padding to decide if label fits inside bar
+const LABEL_GAP = 5;         // gap between bar edge and external label
+
+// ── Bar label placement ─────────────────────────────────────
+
+type BarLabelPlacement = {
+  x: number;
+  anchor: 'start' | 'end';
+  fill: string;
+  text: string;
+};
+
+function computeBarLabel(
+  label: string,
+  x1: number,
+  barWidth: number,
+  innerWidth: number,
+  textColor: string,
+): BarLabelPlacement | null {
+  const textWidth = label.length * CHAR_W;
+  const x2 = x1 + barWidth;
+
+  // 1. Inside
+  if (textWidth < barWidth - LABEL_PAD) {
+    return { x: x1 + 6, anchor: 'start', fill: textColor, text: label };
+  }
+
+  // 2. After (right of bar)
+  if (x2 + LABEL_GAP + textWidth <= innerWidth) {
+    return { x: x2 + LABEL_GAP, anchor: 'start', fill: textColor, text: label };
+  }
+
+  // 3. Before (left of bar)
+  if (x1 - LABEL_GAP - textWidth >= 0) {
+    return { x: x1 - LABEL_GAP, anchor: 'end', fill: textColor, text: label };
+  }
+
+  // 4. Truncate to fit before the bar
+  const availWidth = x1 - LABEL_GAP;
+  if (availWidth > CHAR_W * 3) {
+    const maxChars = Math.floor(availWidth / CHAR_W) - 1;
+    return { x: x1 - LABEL_GAP, anchor: 'end', fill: textColor, text: label.slice(0, maxChars) + '\u2026' };
+  }
+
+  return null;
+}
+
+// ── Left-panel visual helpers ───────────────────────────────
+
+const BAND_ACCENT_W = 4;
+const BAND_RADIUS = 4;
+let bandClipCounter = 0;
+
+function renderLabelBand(
+  svg: d3Selection.Selection<SVGSVGElement, unknown, null, undefined>,
+  y: number,
+  leftMargin: number,
+  color: string,
+  palette: PaletteColors,
+  cssPrefix: 'group' | 'lane',
+  dataAttr?: { key: string; value: string },
+): void {
+  const bandX = 5;
+  const bandW = leftMargin - 7;
+  const bandY = y - BAR_H / 2;
+  const clipId = `gantt-band-clip-${bandClipCounter++}`;
+
+  // ClipPath matching the tint band shape
+  svg.append('clipPath').attr('id', clipId)
+    .append('rect')
+    .attr('x', bandX).attr('y', bandY)
+    .attr('width', bandW).attr('height', BAR_H)
+    .attr('rx', BAND_RADIUS);
+
+  // Tint band
+  const tint = svg.append('rect')
+    .attr('class', `gantt-${cssPrefix}-band-bg`)
+    .attr('x', bandX)
+    .attr('y', bandY)
+    .attr('width', bandW)
+    .attr('height', BAR_H)
+    .attr('rx', BAND_RADIUS)
+    .attr('fill', mix(color, palette.bg, 20))
+    .style('pointer-events', 'none');
+
+  // Accent strip inside the tint, clipped to the band's rounded shape
+  const accent = svg.append('rect')
+    .attr('class', `gantt-${cssPrefix}-band-accent`)
+    .attr('x', bandX)
+    .attr('y', bandY)
+    .attr('width', BAND_ACCENT_W)
+    .attr('height', BAR_H)
+    .attr('fill', color)
+    .attr('clip-path', `url(#${clipId})`)
+    .style('pointer-events', 'none');
+
+  if (dataAttr) {
+    tint.attr(dataAttr.key, dataAttr.value);
+    accent.attr(dataAttr.key, dataAttr.value);
+  }
+}
+
+function appendTaskIcon(
+  textEl: d3Selection.Selection<SVGTextElement, unknown, null, undefined>,
+  label: string,
+  isMilestone: boolean,
+  iconColor: string,
+  textColor: string,
+): void {
+  const icon = isMilestone ? '◆' : '●';
+  textEl.append('tspan').attr('fill', iconColor).text(icon);
+  textEl.append('tspan').attr('fill', textColor).text(' ' + label);
+}
 
 // ── Interactive Options ─────────────────────────────────────
 
@@ -67,6 +181,7 @@ export function renderGantt(
 ): void {
   // Clear previous content
   container.innerHTML = '';
+  bandClipCounter = 0;
 
   if (resolved.tasks.length === 0) return;
 
@@ -98,15 +213,18 @@ export function renderGantt(
   const rows = tagRows ?? buildRowList(resolved, collapsedGroups);
   const isTagMode = tagRows !== null;
 
-  // Compute left margin based on longest visible label
+  // Compute left margin based on longest visible label (include ● /◆  prefix for tasks)
   const allLabels = isTagMode
     ? [
         ...rows.filter((r): r is LaneHeaderRow => r.type === 'lane-header').map(r => r.laneName),
-        ...rows.filter((r): r is TaskRow => r.type === 'task').map(r => r.task.task.label),
+        ...rows.filter((r): r is TaskRow => r.type === 'task').map(r => '● ' + r.task.task.label),
       ]
     : [
-        ...resolved.tasks.map(t => t.task.label),
-        ...resolved.groups.map(g => '  '.repeat(g.depth) + g.name),
+        ...resolved.tasks.map(t => '● ' + t.task.label),
+        ...resolved.groups.map(g => {
+          const px = g.depth <= 2 ? g.depth * 14 : 2 * 14 + (g.depth - 2) * 8;
+          return ' '.repeat(Math.ceil(px / 7)) + g.name;
+        }),
       ];
   const maxLabelLen = Math.max(...allLabels.map(l => l.length), 10);
   const leftMargin = Math.max(MIN_LEFT_MARGIN, maxLabelLen * 7 + 30);
@@ -118,9 +236,11 @@ export function renderGantt(
   const titleHeight = title ? 50 : 20;
   const tagLegendReserve = resolved.tagGroups.length > 0 ? LEGEND_HEIGHT + 8 : 0;
   const topDateLabelReserve = 22; // tick (6) + gap (4) + label height (~12)
+  const hasOverheadLabels = resolved.markers.length > 0 || resolved.eras.length > 0;
+  const markerLabelReserve = hasOverheadLabels ? 18 : 0; // markers/eras extend above date labels
   const CONTENT_TOP_PAD = 16; // breathing room between scale labels and first row
 
-  const marginTop = titleHeight + tagLegendReserve + topDateLabelReserve;
+  const marginTop = titleHeight + tagLegendReserve + topDateLabelReserve + markerLabelReserve;
 
   // Content area
   const contentH = isTagMode
@@ -171,7 +291,7 @@ export function renderGantt(
       const legendY = titleHeight;
       renderTagLegend(
         svg, g, resolved.tagGroups, currentActiveGroup, leftMargin, innerWidth,
-        legendY, palette, isDark, hasCriticalPath, criticalPathActive,
+        legendY, palette, isDark, hasCriticalPath, criticalPathActive, resolved.options.optionLineNumbers,
         (groupName) => {
           // Toggle active group
           currentActiveGroup = currentActiveGroup?.toLowerCase() === groupName.toLowerCase()
@@ -230,7 +350,48 @@ export function renderGantt(
 
   renderWeekendBands(g, resolved, xScale, innerHeight, palette, isDark);
   renderHolidayBands(g, svg, resolved, xScale, innerHeight, palette, isDark, marginTop - 4, leftMargin, onClickItem);
-  renderErasAndMarkers(g, resolved, xScale, innerHeight, palette);
+  renderErasAndMarkers(g, svg, resolved, xScale, innerHeight, palette);
+
+  // ── Today marker (line rendered before rows so it paints behind task bars) ──
+
+  let todayDate: Date | null = null;
+  let todayX = -1;
+  const todayColor = palette.accent || '#e74c3c';
+  const todayMarkerLineNum = resolved.options.optionLineNumbers['today-marker'];
+  if (resolved.options.todayMarker !== 'off') {
+    if (resolved.options.todayMarker === 'on') {
+      todayDate = new Date();
+    } else {
+      todayDate = new Date(resolved.options.todayMarker + 'T00:00:00');
+    }
+    todayX = xScale(dateToFractionalYear(todayDate));
+    if (todayX >= 0 && todayX <= innerWidth) {
+      const todayLine = g.append('line')
+        .attr('class', 'gantt-today')
+        .attr('x1', todayX)
+        .attr('y1', 0)
+        .attr('x2', todayX)
+        .attr('y2', innerHeight + 10)
+        .attr('stroke', todayColor)
+        .attr('stroke-width', 2)
+        .attr('stroke-dasharray', '6 4')
+        .attr('opacity', 0.7)
+        .attr('pointer-events', 'none');
+      if (todayMarkerLineNum) todayLine.attr('data-line-number', String(todayMarkerLineNum));
+
+      const todayLabel = g.append('text')
+        .attr('class', 'gantt-today')
+        .attr('x', todayX)
+        .attr('y', innerHeight + 24)
+        .attr('text-anchor', 'middle')
+        .attr('font-size', '10px')
+        .attr('fill', todayColor)
+        .attr('opacity', 0.7)
+        .attr('pointer-events', 'none')
+        .text('Today');
+      if (todayMarkerLineNum) todayLabel.attr('data-line-number', String(todayMarkerLineNum));
+    }
+  }
 
   // ── Render rows ─────────────────────────────────────────
 
@@ -279,6 +440,7 @@ export function renderGantt(
 
       lanePositions.set(row.laneName, { x1: lx1, x2: lx1 + laneBarWidth, y: yOffset + BAR_H / 2 });
 
+      renderLabelBand(svg, marginTop + yOffset + BAR_H / 2, leftMargin, laneColor, palette, 'lane', { key: 'data-lane', value: row.laneName });
       const labelG = svg
         .append('g')
         .attr('class', 'gantt-lane-header')
@@ -346,7 +508,6 @@ export function renderGantt(
             .attr('y', yOffset)
             .attr('width', laneBarWidth * Math.min(row.aggregateProgress / 100, 1))
             .attr('height', BAR_H)
-            .attr('rx', 4)
             .attr('fill', laneColor)
             .attr('opacity', 0.5)
             .attr('pointer-events', 'none');
@@ -363,6 +524,7 @@ export function renderGantt(
       // Group label with toggle — resolve tag color from group metadata
       const tagColor = resolveTagColor(group.metadata, resolved.tagGroups, currentActiveGroup, true);
       const groupColor = (tagColor && tagColor !== '#999999') ? tagColor : (group.color || palette.textMuted);
+      renderLabelBand(svg, marginTop + yOffset + BAR_H / 2, leftMargin, groupColor, palette, 'group', { key: 'data-group', value: group.name });
       const labelG = svg
         .append('g')
         .attr('class', 'gantt-group-label')
@@ -381,7 +543,8 @@ export function renderGantt(
           hideGanttDateIndicators(g);
         });
 
-      const labelX = 10 + group.depth * 14;
+      const groupIndent = group.depth <= 2 ? group.depth * 14 : 2 * 14 + (group.depth - 2) * 8;
+      const labelX = 10 + groupIndent;
       labelG
         .append('text')
         .attr('x', labelX)
@@ -433,11 +596,27 @@ export function renderGantt(
               .attr('y', yOffset)
               .attr('width', barWidth * Math.min(group.progress / 100, 1))
               .attr('height', BAR_H)
-              .attr('rx', 4)
               .attr('fill', groupColor)
               .attr('opacity', 0.5);
           }
 
+          // Bar label (inside → after → before → truncate)
+          const summaryLabel = group.name + (group.progress !== null ? ` ${Math.round(group.progress)}%` : '');
+          const summaryPlacement = computeBarLabel(summaryLabel, gx1, barWidth, innerWidth, palette.text);
+          if (summaryPlacement) {
+            summaryG
+              .append('text')
+              .attr('x', summaryPlacement.x)
+              .attr('y', yOffset + BAR_H / 2)
+              .attr('dy', '0.35em')
+              .attr('font-size', '10px')
+              .attr('font-weight', 'bold')
+              .attr('text-anchor', summaryPlacement.anchor)
+              .attr('fill', summaryPlacement.fill)
+              .attr('pointer-events', 'none')
+              .text(summaryPlacement.text);
+          }
+
           // Track collapsed group position for dependency arrow redirection
           groupPositions.set(group.name, { x1: gx1, x2: gx1 + barWidth, y: yOffset + BAR_H / 2 });
         } else {
@@ -475,10 +654,26 @@ export function renderGantt(
               .attr('y', yOffset)
               .attr('width', groupBarWidth * Math.min(group.progress / 100, 1))
               .attr('height', BAR_H)
-              .attr('rx', 4)
               .attr('fill', groupColor)
               .attr('opacity', 0.5);
           }
+
+          // Bar label (inside → after → before → truncate)
+          const expandedLabel = group.name + (group.progress !== null ? ` ${Math.round(group.progress)}%` : '');
+          const expandedPlacement = computeBarLabel(expandedLabel, gx1, groupBarWidth, innerWidth, palette.text);
+          if (expandedPlacement) {
+            groupBarG
+              .append('text')
+              .attr('x', expandedPlacement.x)
+              .attr('y', yOffset + BAR_H / 2)
+              .attr('dy', '0.35em')
+              .attr('font-size', '10px')
+              .attr('font-weight', 'bold')
+              .attr('text-anchor', expandedPlacement.anchor)
+              .attr('fill', expandedPlacement.fill)
+              .attr('pointer-events', 'none')
+              .text(expandedPlacement.text);
+          }
         }
       }
 
@@ -487,8 +682,13 @@ export function renderGantt(
       const rt = row.task;
       const task = rt.task;
 
+      // Resolve bar color early so icon tspan can use it
+      const barColor = resolveTaskColor(rt, currentActiveGroup, resolved, seriesColors, palette);
+
       // Task label on the left (left-aligned with indent; flat in tag mode)
-      const taskLabelX = isTagMode ? 20 : 6 + rt.groupPath.length * 14;
+      const depth = rt.groupPath.length;
+      const indent = depth <= 2 ? depth * 14 : 2 * 14 + (depth - 2) * 8;
+      const taskLabelX = isTagMode ? 20 : 6 + indent;
       const topGroup = rt.groupPath.length > 0 ? rt.groupPath[0] : null;
       const taskLabel = svg
         .append('text')
@@ -503,7 +703,6 @@ export function renderGantt(
         .attr('data-task-id', task.id)
         .attr('data-group', topGroup)
         .style('cursor', onClickItem ? 'pointer' : 'default')
-        .text(task.label)
         .on('click', () => {
           if (onClickItem) onClickItem(task.lineNumber);
         })
@@ -518,6 +717,8 @@ export function renderGantt(
           resetHighlight(g, svg);
         });
 
+      appendTaskIcon(taskLabel, task.label, rt.isMilestone, barColor, palette.text);
+
       // Tag attributes on label for legend hover matching
       for (const [key, value] of Object.entries(rt.effectiveMetadata)) {
         taskLabel.attr(`data-tag-${key}`, value.toLowerCase());
@@ -526,9 +727,6 @@ export function renderGantt(
         taskLabel.attr('data-critical-path', 'true');
       }
 
-      // Determine color
-      let barColor = resolveTaskColor(rt, currentActiveGroup, resolved, seriesColors, palette);
-
       if (rt.isMilestone) {
         // Render diamond
         const mx = xScale(dateToFractionalYear(rt.startDate));
@@ -680,7 +878,6 @@ export function renderGantt(
             .attr('y', yOffset)
             .attr('width', progressWidth)
             .attr('height', BAR_H)
-            .attr('rx', 4)
             .attr('fill', progressFill)
             .attr('opacity', 0.5);
         }
@@ -691,18 +888,19 @@ export function renderGantt(
         }
 
 
-        // Label inside bar (if fits)
-        const textWidth = task.label.length * 6.5;
-        if (textWidth < barWidth - 8) {
+        // Bar label (inside → after → before → truncate)
+        const labelPlacement = computeBarLabel(task.label, x1, barWidth, innerWidth, palette.text);
+        if (labelPlacement) {
           taskG
             .append('text')
-            .attr('x', x1 + 6)
+            .attr('x', labelPlacement.x)
             .attr('y', yOffset + BAR_H / 2)
             .attr('dy', '0.35em')
             .attr('font-size', '10px')
-            .attr('fill', palette.text)
+            .attr('text-anchor', labelPlacement.anchor)
+            .attr('fill', labelPlacement.fill)
             .attr('pointer-events', 'none')
-            .text(task.label);
+            .text(labelPlacement.text);
         }
 
         // Track bar position for arrows
@@ -713,38 +911,42 @@ export function renderGantt(
     }
   }
 
-  // ── Today marker ────────────────────────────────────────
+  // ── Today hover overlay (rendered after rows so it receives pointer events) ──
 
-  if (resolved.options.todayMarker !== 'off') {
-    let todayDate: Date;
-    if (resolved.options.todayMarker === 'on') {
-      todayDate = new Date();
-    } else {
-      todayDate = new Date(resolved.options.todayMarker + 'T00:00:00');
-    }
-    const todayX = xScale(dateToFractionalYear(todayDate));
-    if (todayX >= 0 && todayX <= innerWidth) {
-      g.append('line')
-        .attr('class', 'gantt-today')
-        .attr('x1', todayX)
-        .attr('y1', 0)
-        .attr('x2', todayX)
-        .attr('y2', innerHeight + 10)
-        .attr('stroke', palette.accent || '#e74c3c')
-        .attr('stroke-width', 2)
-        .attr('stroke-dasharray', '6 4')
-        .attr('opacity', 0.7);
+  if (todayDate && todayX >= 0 && todayX <= innerWidth) {
+    const todayHoverG = g.append('g')
+      .attr('class', 'gantt-today-hover')
+      .style('cursor', 'pointer');
 
-      g.append('text')
-        .attr('class', 'gantt-today')
-        .attr('x', todayX + 4)
-        .attr('y', innerHeight + 24)
-        .attr('text-anchor', 'start')
-        .attr('font-size', '10px')
-        .attr('fill', palette.accent || '#e74c3c')
-        .attr('opacity', 0.7)
-        .text('Today');
-    }
+    // Invisible wide hit rect for easy hovering
+    todayHoverG.append('rect')
+      .attr('x', todayX - 10)
+      .attr('y', -6)
+      .attr('width', 20)
+      .attr('height', innerHeight + 16)
+      .attr('fill', 'transparent')
+      .attr('pointer-events', 'all');
+
+    const todayDateObj = todayDate;
+    todayHoverG
+      .on('mouseenter', () => {
+        // Fade everything
+        g.selectAll<SVGGElement, unknown>('.gantt-task').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-milestone').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-group-bar, .gantt-group-summary').attr('opacity', FADE_OPACITY);
+        svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', FADE_OPACITY);
+        svg.selectAll<SVGTextElement, unknown>('.gantt-task-label').attr('opacity', FADE_OPACITY);
+        svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-era-group').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', FADE_OPACITY);
+        showGanttDateIndicators(g, xScale, todayDateObj, null, innerHeight, todayColor);
+      })
+      .on('mouseleave', () => {
+        resetHighlight(g, svg);
+        hideGanttDateIndicators(g);
+      });
   }
 
   // ── Dependency arrows ───────────────────────────────────
@@ -1029,6 +1231,7 @@ function renderDependencyArrows(
         .attr('class', 'gantt-dep-arrow')
         .attr('data-dep-from', rt.task.id)
         .attr('data-dep-to', targetTask.task.id)
+        .attr('data-line-number', String(dep.lineNumber))
         .attr('data-critical-path', isCpArrow ? 'true' : null)
         .attr('d', path)
         .attr('fill', 'none')
@@ -1043,6 +1246,7 @@ function renderDependencyArrows(
         .attr('class', 'gantt-dep-arrowhead')
         .attr('data-dep-from', rt.task.id)
         .attr('data-dep-to', targetTask.task.id)
+        .attr('data-line-number', String(dep.lineNumber))
         .attr('data-critical-path', isCpArrow ? 'true' : null)
         .attr('points', arrowheadPoints(tx, ty, headSize, angle))
         .attr('fill', arrowColor)
@@ -1074,7 +1278,9 @@ function applyCriticalPathHighlight(
     el.attr('opacity', el.attr('data-critical-path') === 'true' ? 1 : FADE_OPACITY);
   });
   svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGElement, unknown>('.gantt-group-band-bg, .gantt-group-band-accent').attr('opacity', FADE_OPACITY);
   svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGElement, unknown>('.gantt-lane-band-bg, .gantt-lane-band-accent').attr('opacity', FADE_OPACITY);
   chartG.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent').attr('opacity', FADE_OPACITY);
   // Show critical path arrows at full opacity, fade others
   chartG.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').each(function () {
@@ -1091,7 +1297,9 @@ function resetHighlightAll(
   chartG.selectAll<SVGElement, unknown>('.gantt-group-bar, .gantt-group-summary').attr('opacity', 1);
   svg.selectAll<SVGTextElement, unknown>('.gantt-task-label').attr('opacity', 1);
   svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', 1);
+  svg.selectAll<SVGElement, unknown>('.gantt-group-band-bg, .gantt-group-band-accent').attr('opacity', 1);
   svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', 1);
+  svg.selectAll<SVGElement, unknown>('.gantt-lane-band-bg, .gantt-lane-band-accent').attr('opacity', 1);
   chartG.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent').attr('opacity', 1);
   chartG.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').attr('opacity', 0.5);
 }
@@ -1141,6 +1349,7 @@ function renderTagLegend(
   isDark: boolean,
   hasCriticalPath: boolean,
   criticalPathActive: boolean,
+  optionLineNumbers: Record<string, number>,
   onToggle?: (groupName: string) => void,
   onToggleCriticalPath?: () => void,
   currentSwimlaneGroup?: string | null,
@@ -1224,8 +1433,9 @@ function renderTagLegend(
     totalW += cpPillW;
   }
 
-  // Center over chart area (not full container)
-  const legendX = chartLeftMargin + (chartInnerWidth - totalW) / 2;
+  // Center over full container (matching title centering)
+  const containerWidth = chartLeftMargin + chartInnerWidth + RIGHT_MARGIN;
+  const legendX = (containerWidth - totalW) / 2;
 
   const legendRow = svg.append('g')
     .attr('class', 'gantt-tag-legend-container')
@@ -1247,6 +1457,7 @@ function renderTagLegend(
       .attr('transform', `translate(${cursorX}, 0)`)
       .attr('class', 'gantt-tag-legend-group')
       .attr('data-tag-group', group.name)
+      .attr('data-line-number', String(group.lineNumber))
       .style('cursor', 'pointer')
       .on('click', () => { if (onToggle) onToggle(group.name); });
 
@@ -1325,6 +1536,7 @@ function renderTagLegend(
         // Wrap dot + label in a <g> for hover targeting
         const entryG = gEl.append('g')
           .attr('class', 'gantt-legend-entry')
+          .attr('data-line-number', String(entry.lineNumber))
           .style('cursor', 'pointer');
 
         // Dot
@@ -1386,11 +1598,13 @@ function renderTagLegend(
 
   // Critical Path pill
   if (hasCriticalPath) {
+    const cpLineNum = optionLineNumbers['critical-path'];
     const cpG = legendRow.append('g')
       .attr('transform', `translate(${cursorX}, 0)`)
       .attr('class', 'gantt-legend-critical-path')
       .style('cursor', 'pointer')
       .on('click', () => { if (onToggleCriticalPath) onToggleCriticalPath(); });
+    if (cpLineNum) cpG.attr('data-line-number', String(cpLineNum));
 
     cpG.append('rect')
       .attr('width', cpPillW)
@@ -1440,6 +1654,7 @@ const ERA_COLORS = ['#5e81ac', '#a3be8c', '#ebcb8b', '#d08770', '#b48ead'];
 
 function renderErasAndMarkers(
   g: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
+  svg: d3Selection.Selection<SVGSVGElement, unknown, null, undefined>,
   resolved: ResolvedSchedule,
   xScale: d3Scale.ScaleLinear<number, number>,
   innerHeight: number,
@@ -1459,7 +1674,8 @@ function renderErasAndMarkers(
     const eraEndDate = parseDateStringToDate(era.endDate);
 
     const eraG = g.append('g')
-      .attr('class', 'gantt-era-group');
+      .attr('class', 'gantt-era-group')
+      .attr('data-line-number', String(era.lineNumber));
 
     const eraRect = eraG.append('rect')
       .attr('class', 'gantt-era')
@@ -1470,24 +1686,36 @@ function renderErasAndMarkers(
       .attr('fill', color)
       .attr('opacity', baseEraOpacity);
 
-    // Era label (inside chart at top)
+    // Era label (above date scale, same zone as markers)
     eraG.append('text')
       .attr('class', 'gantt-era-label')
       .attr('x', (sx + ex) / 2)
-      .attr('y', 12)
+      .attr('y', -24)
       .attr('text-anchor', 'middle')
       .attr('font-size', '10px')
       .attr('fill', color)
       .attr('opacity', 0.7)
-      .attr('pointer-events', 'none')
+      .style('cursor', 'pointer')
       .text(era.label);
 
     eraG
       .on('mouseenter', () => {
+        // Fade everything
+        g.selectAll<SVGGElement, unknown>('.gantt-task').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-milestone').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-group-bar, .gantt-group-summary').attr('opacity', FADE_OPACITY);
+        svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', FADE_OPACITY);
+        svg.selectAll<SVGTextElement, unknown>('.gantt-task-label').attr('opacity', FADE_OPACITY);
+        svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', FADE_OPACITY);
+        // Highlight this era
         eraRect.attr('opacity', hoverEraOpacity);
         showGanttDateIndicators(g, xScale, eraStartDate, eraEndDate, innerHeight, color);
       })
       .on('mouseleave', () => {
+        resetHighlight(g, svg);
         eraRect.attr('opacity', baseEraOpacity);
         hideGanttDateIndicators(g);
       });
@@ -1504,6 +1732,7 @@ function renderErasAndMarkers(
 
     const markerG = g.append('g')
       .attr('class', 'gantt-marker-group')
+      .attr('data-line-number', String(marker.lineNumber))
       .style('cursor', 'pointer');
 
     // Invisible hit rect for easier clicking/hovering
@@ -1544,20 +1773,31 @@ function renderErasAndMarkers(
       .attr('stroke-dasharray', '6 4')
       .attr('opacity', 0.5);
 
-    // Hide marker visuals on hover — showGanttDateIndicators replaces them
+    // Hide marker line/diamond on hover but keep label visible
     const markerLine = markerG.select('.gantt-marker');
-    const markerLabel = markerG.select('.gantt-marker-label');
     const markerDiamond = markerG.select('path');
     markerG
       .on('mouseenter', () => {
-        markerLine.attr('opacity', 0);
-        markerLabel.attr('opacity', 0);
+        // Fade everything
+        g.selectAll<SVGGElement, unknown>('.gantt-task').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-milestone').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-group-bar, .gantt-group-summary').attr('opacity', FADE_OPACITY);
+        svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', FADE_OPACITY);
+        svg.selectAll<SVGTextElement, unknown>('.gantt-task-label').attr('opacity', FADE_OPACITY);
+        svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').attr('opacity', FADE_OPACITY);
+        g.selectAll<SVGElement, unknown>('.gantt-era-group').attr('opacity', FADE_OPACITY);
+        // Fade other markers but keep this one highlighted
+        g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', FADE_OPACITY);
+        markerG.attr('opacity', 1);
+        markerLine.attr('opacity', 0.8);
         markerDiamond.attr('opacity', 0);
-        showGanttDateIndicators(g, xScale, markerDate, null, innerHeight, color);
+        showGanttDateIndicators(g, xScale, markerDate, null, innerHeight, color, { skipStartLine: true });
       })
       .on('mouseleave', () => {
+        resetHighlight(g, svg);
         markerLine.attr('opacity', 0.5);
-        markerLabel.attr('opacity', 1);
         markerDiamond.attr('opacity', 0.9);
         hideGanttDateIndicators(g);
       });
@@ -1581,11 +1821,7 @@ function parseDateStringToDate(s: string): Date {
  * Used for eras and markers which may have partial dates.
  */
 function parseDateToFractionalYear(s: string): number {
-  const parts = s.split('-').map(p => parseInt(p, 10));
-  const year = parts[0];
-  const month = parts.length >= 2 ? parts[1] : 1;
-  const day = parts.length >= 3 ? parts[2] : 1;
-  return year + (month - 1) / 12 + (day - 1) / 365;
+  return dateToFractionalYear(parseDateStringToDate(s));
 }
 
 // ── Dependency Hover Helpers ─────────────────────────────────
@@ -1641,6 +1877,8 @@ function highlightDeps(
     const isRelated = (from && related.has(from)) || (to && related.has(to));
     el.attr('opacity', isRelated ? 0.5 : FADE_OPACITY);
   });
+  // Fade markers
+  g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', FADE_OPACITY);
 }
 
 function highlightGroup(
@@ -1673,8 +1911,14 @@ function highlightGroup(
     const el = d3Selection.select(this);
     el.attr('opacity', el.attr('data-group') === groupName ? 1 : FADE_OPACITY);
   });
+  // Fade group bands not matching
+  svg.selectAll<SVGElement, unknown>('.gantt-group-band-bg, .gantt-group-band-accent').each(function () {
+    const el = d3Selection.select(this);
+    el.attr('opacity', el.attr('data-group') === groupName ? 1 : FADE_OPACITY);
+  });
   // Fade lane elements
   svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGElement, unknown>('.gantt-lane-band-bg, .gantt-lane-band-accent').attr('opacity', FADE_OPACITY);
   g.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent').attr('opacity', FADE_OPACITY);
   // Fade markers
   g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', FADE_OPACITY);
@@ -1714,9 +1958,15 @@ function highlightLane(
     const el = d3Selection.select(this);
     el.attr('opacity', el.attr('data-lane') === laneName ? 1 : FADE_OPACITY);
   });
+  // Fade lane bands not matching
+  svg.selectAll<SVGElement, unknown>('.gantt-lane-band-bg, .gantt-lane-band-accent').each(function () {
+    const el = d3Selection.select(this);
+    el.attr('opacity', el.attr('data-lane') === laneName ? 1 : FADE_OPACITY);
+  });
   // Fade group elements (not relevant in lane mode)
   g.selectAll<SVGElement, unknown>('.gantt-group-bar, .gantt-group-summary').attr('opacity', FADE_OPACITY);
   svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGElement, unknown>('.gantt-group-band-bg, .gantt-group-band-accent').attr('opacity', FADE_OPACITY);
   // Fade markers
   g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', FADE_OPACITY);
 }
@@ -1741,7 +1991,9 @@ function highlightTask(
   // Fade group/lane elements
   g.selectAll<SVGElement, unknown>('.gantt-group-bar, .gantt-group-summary').attr('opacity', FADE_OPACITY);
   svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGElement, unknown>('.gantt-group-band-bg, .gantt-group-band-accent').attr('opacity', FADE_OPACITY);
   svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGElement, unknown>('.gantt-lane-band-bg, .gantt-lane-band-accent').attr('opacity', FADE_OPACITY);
   g.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group').attr('opacity', FADE_OPACITY);
   g.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').attr('opacity', FADE_OPACITY);
   // Fade markers
@@ -1768,7 +2020,9 @@ function highlightMilestone(
   // Fade group/lane elements
   g.selectAll<SVGElement, unknown>('.gantt-group-bar, .gantt-group-summary').attr('opacity', FADE_OPACITY);
   svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGElement, unknown>('.gantt-group-band-bg, .gantt-group-band-accent').attr('opacity', FADE_OPACITY);
   svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', FADE_OPACITY);
+  svg.selectAll<SVGElement, unknown>('.gantt-lane-band-bg, .gantt-lane-band-accent').attr('opacity', FADE_OPACITY);
   g.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group').attr('opacity', FADE_OPACITY);
   g.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').attr('opacity', FADE_OPACITY);
   // Fade markers
@@ -1799,11 +2053,14 @@ function resetHighlight(
   g.selectAll<SVGGElement, unknown>('.gantt-task, .gantt-milestone').attr('opacity', 1);
   g.selectAll<SVGElement, unknown>('.gantt-group-bar, .gantt-group-summary').attr('opacity', 1);
   svg.selectAll<SVGGElement, unknown>('.gantt-group-label').attr('opacity', 1);
+  svg.selectAll<SVGElement, unknown>('.gantt-group-band-bg, .gantt-group-band-accent').attr('opacity', 1);
   svg.selectAll<SVGTextElement, unknown>('.gantt-task-label').attr('opacity', 1);
   svg.selectAll<SVGGElement, unknown>('.gantt-lane-header').attr('opacity', 1);
+  svg.selectAll<SVGElement, unknown>('.gantt-lane-band-bg, .gantt-lane-band-accent').attr('opacity', 1);
   g.selectAll<SVGElement, unknown>('.gantt-lane-band, .gantt-lane-accent, .gantt-lane-band-group').attr('opacity', 1);
   g.selectAll<SVGElement, unknown>('.gantt-dep-arrow, .gantt-dep-arrowhead').attr('opacity', 0.5);
   g.selectAll<SVGElement, unknown>('.gantt-marker-group').attr('opacity', 1);
+  g.selectAll<SVGElement, unknown>('.gantt-era-group').attr('opacity', 1);
 }
 
 // ── Row Building ────────────────────────────────────────────
@@ -2025,29 +2282,38 @@ function showGanttDateIndicators(
   endDate: Date | null,
   innerHeight: number,
   color: string,
+  options?: { skipStartLine?: boolean },
 ): void {
   // Fade existing scale ticks and today marker
   g.selectAll('.gantt-scale-tick').attr('opacity', 0.05);
   g.selectAll('.gantt-today').attr('opacity', 0.05);
 
+  // Wrap all hover indicators in a group that ignores pointer events,
+  // so they don't steal mouseleave from the element being hovered.
+  const hg = g.append('g')
+    .attr('class', 'gantt-hover-date')
+    .attr('pointer-events', 'none');
+
   const tickLen = 6;
   const startPos = xScale(dateToFractionalYear(startDate));
   const startLabel = formatGanttDate(startDate);
 
-  // Start date — dashed vertical line
-  g.append('line')
-    .attr('class', 'gantt-hover-date')
-    .attr('x1', startPos)
-    .attr('y1', -tickLen)
-    .attr('x2', startPos)
-    .attr('y2', innerHeight)
-    .attr('stroke', color)
-    .attr('stroke-width', 1.5)
-    .attr('stroke-dasharray', '4 4')
-    .attr('opacity', 0.6);
+  // Start date — dashed vertical line (skip when caller already shows its own line)
+  if (!options?.skipStartLine) {
+    hg.append('line')
+      .attr('class', 'gantt-hover-date')
+      .attr('x1', startPos)
+      .attr('y1', -tickLen)
+      .attr('x2', startPos)
+      .attr('y2', innerHeight)
+      .attr('stroke', color)
+      .attr('stroke-width', 1.5)
+      .attr('stroke-dasharray', '4 4')
+      .attr('opacity', 0.6);
+  }
 
   // Start date — top label
-  g.append('text')
+  hg.append('text')
     .attr('class', 'gantt-hover-date')
     .attr('x', startPos)
     .attr('y', -tickLen - 4)
@@ -2058,7 +2324,7 @@ function showGanttDateIndicators(
     .text(startLabel);
 
   // Start date — bottom label
-  g.append('text')
+  hg.append('text')
     .attr('class', 'gantt-hover-date')
     .attr('x', startPos)
     .attr('y', innerHeight + tickLen + 12)
@@ -2089,7 +2355,7 @@ function showGanttDateIndicators(
     }
 
     // End date — dashed vertical line
-    g.append('line')
+    hg.append('line')
       .attr('class', 'gantt-hover-date')
       .attr('x1', endPos)
       .attr('y1', -tickLen)
@@ -2101,7 +2367,7 @@ function showGanttDateIndicators(
       .attr('opacity', 0.6);
 
     // Reposition start labels to avoid overlap
-    g.selectAll<SVGTextElement, unknown>('text.gantt-hover-date').each(function () {
+    hg.selectAll<SVGTextElement, unknown>('text.gantt-hover-date').each(function () {
       const el = d3Selection.select(this);
       if (el.text() === startLabel) {
         el.attr('x', startLabelX).attr('text-anchor', startAnchor);
@@ -2109,7 +2375,7 @@ function showGanttDateIndicators(
     });
 
     // End date — top label
-    g.append('text')
+    hg.append('text')
       .attr('class', 'gantt-hover-date')
       .attr('x', endLabelX)
       .attr('y', -tickLen - 4)
@@ -2120,7 +2386,7 @@ function showGanttDateIndicators(
       .text(endLabel);
 
     // End date — bottom label
-    g.append('text')
+    hg.append('text')
       .attr('class', 'gantt-hover-date')
       .attr('x', endLabelX)
       .attr('y', innerHeight + tickLen + 12)