@diagrammo/dgmo 0.8.22 → 0.8.23

package/src/journey-map/renderer.ts

@@ -101,8 +101,14 @@ export function renderJourneyMap(
     .select(container)
     .append('svg')
     .attr('xmlns', 'http://www.w3.org/2000/svg')
-    .attr('width', useContainerFit ? containerW : layout.totalWidth)
-    .attr('height', useContainerFit ? containerH : layout.totalHeight)
+    .attr(
+      'width',
+      useContainerFit ? containerW : (exportDims?.width ?? layout.totalWidth)
+    )
+    .attr(
+      'height',
+      useContainerFit ? containerH : (exportDims?.height ?? layout.totalHeight)
+    )
     .attr('viewBox', `0 0 ${layout.totalWidth} ${layout.totalHeight}`)
     .attr('preserveAspectRatio', 'xMidYMin meet')
     .attr('font-family', FONT_FAMILY);
@@ -293,7 +299,7 @@ export function renderJourneyMap(
       .attr('transform', `translate(${legendX},${legendY})`);
 
     const legendConfig: LegendConfig = {
-      groups: allLegendGroups,
+      groups: parsed.tagGroups,
       position: {
         placement: 'top-center',
         titleRelation: 'inline-with-title',
@@ -409,7 +415,10 @@ export function renderJourneyMap(
 
     // Score label — emotion face icon
     const SCORE_LABEL_R = 8;
-    const labelG = curveG.append('g').attr('class', 'journey-score-label');
+    const labelG = curveG
+      .append('g')
+      .attr('class', 'journey-score-label')
+      .attr('data-score', String(score));
     renderScoreFace(
       labelG,
       PADDING - SCORE_LABEL_R - 2,
@@ -419,42 +428,9 @@ export function renderJourneyMap(
       SCORE_LABEL_R
     );
 
-    // Interactive hover: highlight faces + cards matching this score
+    // Score label interactivity is wired up in the click-to-lock section below
     if (!exportDims) {
-      const scoreStr = String(score);
       labelG.style('cursor', 'pointer');
-      labelG.on('mouseenter', () => {
-        svg.selectAll<SVGGElement, unknown>('.journey-step').each(function () {
-          const hit = this.getAttribute('data-score') === scoreStr;
-          d3.select(this).style('opacity', hit ? '1' : String(DIM_HOVER));
-        });
-        svg.selectAll<SVGGElement, unknown>('.journey-face').each(function () {
-          const hit = this.getAttribute('data-score') === scoreStr;
-          const sel = d3.select(this);
-          sel.style('opacity', hit ? '1' : String(DIM_HOVER));
-          if (hit) {
-            const fcx = parseFloat(sel.attr('data-cx') ?? '0');
-            const fcy = parseFloat(sel.attr('data-cy') ?? '0');
-            sel.attr(
-              'transform',
-              `translate(${fcx},${fcy}) scale(1.3) translate(${-fcx},${-fcy})`
-            );
-          } else {
-            sel.attr('transform', null);
-          }
-        });
-        svg
-          .selectAll<SVGGElement, unknown>('.journey-thought')
-          .style('opacity', String(DIM_HOVER));
-      });
-      labelG.on('mouseleave', () => {
-        svg.selectAll('.journey-step').style('opacity', null);
-        svg
-          .selectAll('.journey-face')
-          .style('opacity', null)
-          .attr('transform', null);
-        svg.selectAll('.journey-thought').style('opacity', null);
-      });
     }
   }
 
@@ -772,6 +748,52 @@ export function renderJourneyMap(
   if (!exportDims) {
     const DIM_OPACITY = 0.35;
     let lockedLine: number | null = null;
+    let lockedScore: number | null = null;
+
+    // Helper: dim everything except elements matching a score value
+    const applyScoreDimming = (activeScore: number) => {
+      const scoreStr = String(activeScore);
+      svg.selectAll<SVGGElement, unknown>('.journey-step').each(function () {
+        const hit = this.getAttribute('data-score') === scoreStr;
+        d3.select(this).style('opacity', hit ? '1' : String(DIM_HOVER));
+      });
+      svg.selectAll<SVGGElement, unknown>('.journey-face').each(function () {
+        const hit = this.getAttribute('data-score') === scoreStr;
+        const sel = d3.select(this);
+        sel.style('opacity', hit ? '1' : String(DIM_HOVER));
+        if (hit) {
+          const fcx = parseFloat(sel.attr('data-cx') ?? '0');
+          const fcy = parseFloat(sel.attr('data-cy') ?? '0');
+          sel.attr(
+            'transform',
+            `translate(${fcx},${fcy}) scale(1.3) translate(${-fcx},${-fcy})`
+          );
+        } else {
+          sel.attr('transform', null);
+        }
+      });
+      svg
+        .selectAll<SVGGElement, unknown>('.journey-thought')
+        .style('opacity', String(DIM_HOVER));
+      // Highlight the active y-axis score label, dim the rest
+      svg
+        .selectAll<SVGGElement, unknown>('.journey-score-label')
+        .each(function () {
+          const sel = d3.select(this);
+          const s = sel.attr('data-score');
+          sel.style('opacity', s === scoreStr ? '1' : String(DIM_HOVER));
+        });
+    };
+
+    const clearScoreDimming = () => {
+      svg.selectAll('.journey-step').style('opacity', null);
+      svg
+        .selectAll('.journey-face')
+        .style('opacity', null)
+        .attr('transform', null);
+      svg.selectAll('.journey-thought').style('opacity', null);
+      svg.selectAll('.journey-score-label').style('opacity', null);
+    };
 
     // Helper: dim everything except elements matching a line number
     const applyDimming = (activeLine: number) => {
@@ -841,7 +863,7 @@ export function renderJourneyMap(
       const lines = wrapText(thoughtText, THOUGHT_MAX_W, THOUGHT_FONT);
       const textW = Math.min(
         THOUGHT_MAX_W,
-        Math.max(...lines.map((l) => l.length * 4.8))
+        Math.max(...lines.map((l) => l.length * THOUGHT_FONT * 0.6))
       );
       const bw = textW + THOUGHT_PAD_X * 2;
       const bh = lines.length * THOUGHT_LINE_H + THOUGHT_PAD_Y * 2;
@@ -896,10 +918,13 @@ export function renderJourneyMap(
       if (
         !target.closest('.journey-face') &&
         !target.closest('.journey-step') &&
-        !target.closest('.journey-phase')
+        !target.closest('.journey-phase') &&
+        !target.closest('.journey-score-label')
       ) {
         lockedLine = null;
+        lockedScore = null;
         clearDimming();
+        clearScoreDimming();
       }
     });
 
@@ -919,7 +944,7 @@ export function renderJourneyMap(
     svg.selectAll<SVGGElement, unknown>('.journey-face').each(function () {
       const el = d3.select<SVGGElement, unknown>(this);
       el.on('mouseenter', () => {
-        if (lockedLine !== null) return;
+        if (lockedLine !== null || lockedScore !== null) return;
         const ln = parseInt(el.attr('data-line-number') ?? '0', 10);
         if (ln) {
           applyDimming(ln);
@@ -927,11 +952,16 @@ export function renderJourneyMap(
         }
       })
         .on('mouseleave', () => {
-          if (lockedLine !== null) return;
+          if (lockedLine !== null || lockedScore !== null) return;
           clearDimming();
         })
         .on('click', (event: MouseEvent) => {
           event.stopPropagation();
+          if (lockedScore !== null) {
+            lockedScore = null;
+            clearScoreDimming();
+            return;
+          }
           const ln = parseInt(el.attr('data-line-number') ?? '0', 10);
           if (lockedLine === ln) {
             lockedLine = null;
@@ -949,7 +979,7 @@ export function renderJourneyMap(
     svg.selectAll('.journey-step').each(function () {
       const el = d3.select(this);
       el.on('mouseenter', () => {
-        if (lockedLine !== null) return;
+        if (lockedLine !== null || lockedScore !== null) return;
         const ln = parseInt(el.attr('data-line-number') ?? '0', 10);
         if (ln) {
           applyDimming(ln);
@@ -957,11 +987,16 @@ export function renderJourneyMap(
         }
       })
         .on('mouseleave', () => {
-          if (lockedLine !== null) return;
+          if (lockedLine !== null || lockedScore !== null) return;
           clearDimming();
         })
         .on('click', (event: MouseEvent) => {
           event.stopPropagation();
+          if (lockedScore !== null) {
+            lockedScore = null;
+            clearScoreDimming();
+            return;
+          }
           const ln = parseInt(el.attr('data-line-number') ?? '0', 10);
           if (lockedLine === ln) {
             lockedLine = null;
@@ -974,6 +1009,36 @@ export function renderJourneyMap(
           }
         });
     });
+
+    // Hover + click on y-axis score labels
+    svg
+      .selectAll<SVGGElement, unknown>('.journey-score-label')
+      .each(function () {
+        const el = d3.select<SVGGElement, unknown>(this);
+        const score = parseInt(el.attr('data-score') ?? '0', 10);
+        el.on('mouseenter', () => {
+          if (lockedLine !== null || lockedScore !== null) return;
+          applyScoreDimming(score);
+        })
+          .on('mouseleave', () => {
+            if (lockedLine !== null || lockedScore !== null) return;
+            clearScoreDimming();
+          })
+          .on('click', (event: MouseEvent) => {
+            event.stopPropagation();
+            if (lockedLine !== null) {
+              lockedLine = null;
+              clearDimming();
+            }
+            if (lockedScore === score) {
+              lockedScore = null;
+              clearScoreDimming();
+            } else {
+              lockedScore = score;
+              applyScoreDimming(score);
+            }
+          });
+      });
   }
 }
 
@@ -1326,8 +1391,8 @@ function renderScoreFace(
   return g;
 }
 
-function wrapText(text: string, maxWidth: number, _fontSize: number): string[] {
-  const charWidth = 4.8;
+function wrapText(text: string, maxWidth: number, fontSize: number): string[] {
+  const charWidth = fontSize * 0.6;
   const maxChars = Math.floor(maxWidth / charWidth);
   if (maxChars <= 0) return [text];
 
@@ -1349,7 +1414,7 @@ function wrapText(text: string, maxWidth: number, _fontSize: number): string[] {
 }
 
 function truncateText(text: string, maxWidth: number): string {
-  const maxChars = Math.floor(maxWidth / 4.8);
+  const maxChars = Math.floor(maxWidth / 6.6);
   if (text.length <= maxChars) return text;
   return text.substring(0, maxChars - 1) + '\u2026';
 }

package/src/org/collapse.ts

@@ -15,6 +15,22 @@ export interface CollapsedOrgResult {
   hiddenCounts: Map<string, number>;
 }
 
+export interface AncestorInfo {
+  id: string;
+  label: string;
+  lineNumber: number;
+  color?: string;
+  metadata: Record<string, string>;
+  isContainer: boolean;
+}
+
+export interface FocusOrgResult {
+  /** ParsedOrg with only the focused subtree as the single root */
+  parsed: ParsedOrg;
+  /** Ancestor path from original root → parent of focused node (top-down order) */
+  ancestorPath: AncestorInfo[];
+}
+
 // ============================================================
 // Helpers
 // ============================================================
@@ -99,3 +115,68 @@ export function collapseOrgTree(
     hiddenCounts,
   };
 }
+
+// ============================================================
+// Focus (subtree drill-down)
+// ============================================================
+
+/** Find a node by ID and collect the ancestor path leading to it. */
+function findNodeWithPath(
+  nodes: OrgNode[],
+  targetId: string,
+  path: AncestorInfo[]
+): { node: OrgNode; path: AncestorInfo[] } | null {
+  for (const node of nodes) {
+    if (node.id === targetId) {
+      return { node, path };
+    }
+    const result = findNodeWithPath(node.children, targetId, [
+      ...path,
+      {
+        id: node.id,
+        label: node.label,
+        lineNumber: node.lineNumber,
+        color: node.color,
+        metadata: { ...node.metadata },
+        isContainer: node.isContainer,
+      },
+    ]);
+    if (result) return result;
+  }
+  return null;
+}
+
+/**
+ * Extract a subtree rooted at `focusNodeId`, returning the focused tree
+ * and the ancestor breadcrumb path. Returns null if the node is not found.
+ */
+export function focusOrgTree(
+  original: ParsedOrg,
+  focusNodeId: string
+): FocusOrgResult | null {
+  const found = findNodeWithPath(original.roots, focusNodeId, []);
+  if (!found) return null;
+
+  // If it's already a root, return as-is with empty ancestor path
+  const isRoot = original.roots.some((r) => r.id === focusNodeId);
+  if (isRoot) {
+    return {
+      parsed: {
+        ...original,
+        roots: [cloneNode(found.node)],
+      },
+      ancestorPath: [],
+    };
+  }
+
+  const cloned = cloneNode(found.node);
+  cloned.parentId = null;
+
+  return {
+    parsed: {
+      ...original,
+      roots: [cloned],
+    },
+    ancestorPath: found.path,
+  };
+}

package/src/org/renderer.ts

@@ -10,8 +10,10 @@ import {
 } from '../utils/export-container';
 import type { PaletteColors } from '../palettes';
 import { mix } from '../palettes/color-utils';
+import { resolveTagColor } from '../utils/tag-groups';
 import type { ParsedOrg } from './parser';
 import type { OrgLayoutResult } from './layout';
+import type { AncestorInfo } from './collapse';
 import { parseOrg } from './parser';
 import { layoutOrg } from './layout';
 import {
@@ -51,6 +53,12 @@ const CONTAINER_HEADER_HEIGHT = 28;
 const COLLAPSE_BAR_HEIGHT = 6;
 const COLLAPSE_BAR_INSET = 0;
 
+// Ancestor breadcrumb trail (focus mode)
+const ANCESTOR_DOT_R = 4;
+const ANCESTOR_LABEL_FONT_SIZE = 11;
+const ANCESTOR_ROW_HEIGHT = 22;
+const ANCESTOR_TRAIL_BOTTOM_GAP = 16;
+
 const LEGEND_FIXED_GAP = 8; // gap between fixed legend and scaled diagram — local, not shared
 
 // ============================================================
@@ -100,7 +108,8 @@ export function renderOrg(
   onClickItem?: (lineNumber: number) => void,
   exportDims?: { width?: number; height?: number },
   activeTagGroup?: string | null,
-  hiddenAttributes?: Set<string>
+  hiddenAttributes?: Set<string>,
+  ancestorPath?: AncestorInfo[]
 ): void {
   // Clear existing content
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
@@ -128,9 +137,15 @@ export function renderOrg(
   const fixedTitle = !exportDims && !!parsed.title;
   const titleReserve = fixedTitle ? TITLE_HEIGHT : 0;
 
+  // Ancestor breadcrumb trail (focus mode) — rendered inside the scaled group
+  const hasAncestorTrail = !exportDims && ancestorPath && ancestorPath.length > 0;
+  const ancestorTrailHeight = hasAncestorTrail
+    ? ancestorPath.length * ANCESTOR_ROW_HEIGHT + ANCESTOR_TRAIL_BOTTOM_GAP
+    : 0;
+
   // Compute scale to fit diagram in viewport
   const diagramW = layout.width;
-  let diagramH = layout.height + (fixedTitle ? 0 : titleOffset);
+  let diagramH = layout.height + (fixedTitle ? 0 : titleOffset) + ancestorTrailHeight;
   if (fixedLegend) {
     // Remove the legend space from diagram height — legend is rendered separately
     diagramH -= layoutLegendShift;
@@ -200,10 +215,11 @@ export function renderOrg(
     }
   }
 
-  // Content group (offset by title — only when title is inside the scaled group)
+  // Content group (offset by title + ancestor trail height)
+  const contentYShift = (fixedTitle ? 0 : titleOffset) + ancestorTrailHeight;
   const contentG = mainG
     .append('g')
-    .attr('transform', `translate(0, ${fixedTitle ? 0 : titleOffset})`);
+    .attr('transform', `translate(0, ${contentYShift})`);
 
   // Build display name map from tag groups (lowercase key → original casing)
   const displayNames = new Map<string, string>();
@@ -211,6 +227,9 @@ export function renderOrg(
     displayNames.set(group.name.toLowerCase(), group.name);
   }
 
+  // Root node IDs — focus icon is suppressed on these (already the tree root)
+  const rootNodeIds = new Set(parsed.roots.map((r) => r.id));
+
   // Render container backgrounds (bottom layer)
   const colorOff = parsed.options?.color === 'off';
   for (const c of layout.containers) {
@@ -322,6 +341,45 @@ export function renderOrg(
         .attr('clip-path', `url(#${clipId})`)
         .attr('class', 'org-collapse-bar');
     }
+
+    // Focus icon (hover-reveal, interactive only) — for non-root containers with children
+    if (!exportDims && c.hasChildren && !rootNodeIds.has(c.nodeId)) {
+      const iconSize = 14;
+      const iconPad = 5;
+      const iconX = c.width - iconSize - iconPad;
+      const iconY = iconPad;
+
+      const focusG = cG
+        .append('g')
+        .attr('class', 'org-focus-icon')
+        .attr('data-focus-node', c.nodeId)
+        .attr('transform', `translate(${iconX}, ${iconY})`);
+
+      focusG
+        .append('rect')
+        .attr('x', -3)
+        .attr('y', -3)
+        .attr('width', iconSize + 6)
+        .attr('height', iconSize + 6)
+        .attr('fill', 'transparent');
+
+      const cx = iconSize / 2;
+      const cy = iconSize / 2;
+      focusG
+        .append('circle')
+        .attr('cx', cx)
+        .attr('cy', cy)
+        .attr('r', iconSize / 2 - 1)
+        .attr('fill', 'none')
+        .attr('stroke', palette.textMuted)
+        .attr('stroke-width', 1.5);
+      focusG
+        .append('circle')
+        .attr('cx', cx)
+        .attr('cy', cy)
+        .attr('r', 2)
+        .attr('fill', palette.textMuted);
+    }
   }
 
   // Render edges
@@ -479,6 +537,156 @@ export function renderOrg(
         .attr('clip-path', `url(#${clipId})`)
         .attr('class', 'org-collapse-bar');
     }
+
+    // Focus icon (hover-reveal, interactive only) — for non-root nodes with children
+    if (!exportDims && node.hasChildren && !rootNodeIds.has(node.id)) {
+      const iconSize = 14;
+      const iconPad = 5;
+      const iconX = node.width - iconSize - iconPad;
+      const iconY = iconPad;
+
+      const focusG = nodeG
+        .append('g')
+        .attr('class', 'org-focus-icon')
+        .attr('data-focus-node', node.id)
+        .attr('transform', `translate(${iconX}, ${iconY})`);
+
+      // Hit area
+      focusG
+        .append('rect')
+        .attr('x', -3)
+        .attr('y', -3)
+        .attr('width', iconSize + 6)
+        .attr('height', iconSize + 6)
+        .attr('fill', 'transparent');
+
+      // Scope/target icon: outer circle + inner dot
+      const cx = iconSize / 2;
+      const cy = iconSize / 2;
+      focusG
+        .append('circle')
+        .attr('cx', cx)
+        .attr('cy', cy)
+        .attr('r', iconSize / 2 - 1)
+        .attr('fill', 'none')
+        .attr('stroke', palette.textMuted)
+        .attr('stroke-width', 1.5);
+      focusG
+        .append('circle')
+        .attr('cx', cx)
+        .attr('cy', cy)
+        .attr('r', 2)
+        .attr('fill', palette.textMuted);
+    }
+  }
+
+  // Render ancestor breadcrumb trail (focus mode) — inside scaled group,
+  // centered on and connected to the root node
+  if (hasAncestorTrail) {
+    // Find the root node/container position in the layout
+    const rootNode = layout.nodes.find((n) => rootNodeIds.has(n.id));
+    const rootContainer = !rootNode
+      ? layout.containers.find((c) => rootNodeIds.has(c.nodeId))
+      : null;
+    // Nodes: x is center. Containers: x is left edge, so center = x + width/2
+    const rootCenterX = rootNode
+      ? rootNode.x
+      : rootContainer
+        ? rootContainer.x + rootContainer.width / 2
+        : null;
+    const rootTopY = rootNode ? rootNode.y : rootContainer ? rootContainer.y : null;
+    if (rootCenterX !== null && rootTopY !== null) {
+      // Trail connects directly to the top edge of the root node.
+      // The last ancestor dot sits ANCESTOR_TRAIL_BOTTOM_GAP above the root.
+      const trailBottomY = rootTopY - ANCESTOR_TRAIL_BOTTOM_GAP;
+
+      const trailG = contentG
+        .append('g')
+        .attr('class', 'org-ancestor-trail');
+
+      const count = ancestorPath!.length;
+
+      // Compute dot positions (top-down order, topmost ancestor highest)
+      const dotPositions: number[] = [];
+      for (let i = 0; i < count; i++) {
+        const fromBottom = count - 1 - i;
+        dotPositions.push(trailBottomY - fromBottom * ANCESTOR_ROW_HEIGHT);
+      }
+
+      // Single continuous line from topmost dot to root node top edge
+      const lineTopY = dotPositions[0];
+      trailG
+        .append('line')
+        .attr('x1', rootCenterX)
+        .attr('y1', lineTopY)
+        .attr('x2', rootCenterX)
+        .attr('y2', rootTopY)
+        .attr('stroke', palette.textMuted)
+        .attr('stroke-width', 1.5)
+        .attr('stroke-opacity', 0.4);
+
+      // Dots and labels on top of the line
+      for (let i = 0; i < count; i++) {
+        const ancestor = ancestorPath![i];
+        const dotY = dotPositions[i];
+
+        // Resolve color from tag groups (same logic as node cards)
+        const resolvedColor = ancestor.color
+          ?? resolveTagColor(
+               ancestor.metadata,
+               parsed.tagGroups,
+               activeTagGroup ?? null,
+               ancestor.isContainer
+             );
+        const dotColor = resolvedColor ?? palette.textMuted;
+
+        const rowG = trailG
+          .append('g')
+          .attr('class', 'org-ancestor-node')
+          .attr('data-focus-ancestor', ancestor.id)
+          .style('cursor', 'pointer')
+          .attr('transform', `translate(${rootCenterX}, ${dotY})`);
+
+        // Hit area
+        rowG
+          .append('rect')
+          .attr('x', -ANCESTOR_DOT_R - 2)
+          .attr('y', -ANCESTOR_DOT_R - 2)
+          .attr('width', 120)
+          .attr('height', ANCESTOR_DOT_R * 2 + 4)
+          .attr('fill', 'transparent');
+
+        // Dot — colored by tag group value
+        rowG
+          .append('circle')
+          .attr('cx', 0)
+          .attr('cy', 0)
+          .attr('r', ANCESTOR_DOT_R)
+          .attr('fill', dotColor);
+
+        // Label
+        rowG
+          .append('text')
+          .attr('x', ANCESTOR_DOT_R + 6)
+          .attr('y', ANCESTOR_LABEL_FONT_SIZE * 0.35)
+          .attr('fill', palette.textMuted)
+          .attr('font-size', ANCESTOR_LABEL_FONT_SIZE)
+          .text(ancestor.label);
+
+        // Hover effect
+        rowG
+          .on('mouseenter', function () {
+            d3Selection.select(this).select('circle')
+              .attr('r', ANCESTOR_DOT_R + 1);
+            d3Selection.select(this).select('text').attr('fill', palette.text);
+          })
+          .on('mouseleave', function () {
+            d3Selection.select(this).select('circle')
+              .attr('r', ANCESTOR_DOT_R);
+            d3Selection.select(this).select('text').attr('fill', palette.textMuted);
+          });
+      }
+    }
   }
 
   // Render legend — capsule pills.