@tanishqkancharla/diffmap 0.3.0 → 0.6.0

package/src/viewer/diagramLinks.ts

@@ -1,14 +1,21 @@
+import { colors } from "maui";
 import type { DiagramAnnotation } from "../diagramAnnotations.js";
 import { DiffmapAnnotationError } from "../errors.js";
 
+/**
+ * Arrowhead colors for edges that are not plain gray: changed in a diff,
+ * hovered, or selected. Later tones win when several apply.
+ */
+const markerTones = [
+  ["added", "[data-change='+']", colors.green[9]],
+  ["removed", "[data-change='-']", colors.red[9]],
+  ["hover", ".source-edge:hover", colors.blue[8]],
+  ["selected", ".source-edge[aria-pressed='true']", colors.blue[9]],
+] as const;
+
 export function linkDiagram(svg: string, links: DiagramAnnotation[]) {
   const document = new DOMParser().parseFromString(svg, "image/svg+xml");
-  for (const markerPart of document.querySelectorAll("marker *")) {
-    if (markerPart.getAttribute("fill") === "var(--_arrow)")
-      markerPart.setAttribute("fill", "context-stroke");
-    if (markerPart.getAttribute("stroke") === "var(--_arrow)")
-      markerPart.setAttribute("stroke", "context-stroke");
-  }
+  colorMarkers(document);
   const edges = [
     ...document.querySelectorAll<SVGElement>(
       ".edge, .message, .class-relationship, .er-relationship",
@@ -72,3 +79,44 @@ export function linkDiagram(svg: string, links: DiagramAnnotation[]) {
   }
   return document.documentElement.outerHTML;
 }
+
+/**
+ * A marker draws in its own colors, not its edge's, and `context-stroke`
+ * falls back to black where browsers lack it. So each marker gets one copy
+ * per tone, and a style rule swaps an edge to the copy its state needs.
+ */
+function colorMarkers(document: Document) {
+  const rules: string[] = [];
+  for (const marker of document.querySelectorAll("marker[id]")) {
+    const id = marker.id;
+    for (const [tone, , color] of markerTones) {
+      // SAFETY: cloning an element preserves its element type.
+      const copy = marker.cloneNode(true) as Element;
+      copy.id = `${id}--${tone}`;
+      paintArrow(copy, color);
+      marker.after(copy);
+    }
+    // Mermaid draws arrowheads in the accent color; match the gray line.
+    paintArrow(marker, "var(--_line)");
+    for (const end of ["start", "end"]) {
+      const uses = `[marker-${end}="url(#${id})"]`;
+      if (document.querySelector(uses) === null) continue;
+      for (const [tone, state] of markerTones)
+        rules.push(
+          `:is(${state}, ${state} *)${uses} { marker-${end}: url(#${id}--${tone}); }`,
+        );
+    }
+  }
+  if (rules.length === 0) return;
+  const style = document.createElementNS("http://www.w3.org/2000/svg", "style");
+  style.textContent = rules.join("\n");
+  document.documentElement.prepend(style);
+}
+
+/** Repaints a marker's mermaid arrow color. */
+function paintArrow(marker: Element, color: string) {
+  for (const part of [marker, ...marker.querySelectorAll("*")])
+    for (const paint of ["fill", "stroke"])
+      if (part.getAttribute(paint) === "var(--_arrow)")
+        part.setAttribute(paint, color);
+}

package/src/viewer/notes.tsx

@@ -0,0 +1,126 @@
+import type { ReactNode } from "react";
+import { Code, colors, focusRing, Tooltip } from "maui";
+import { style, useStyles } from "purse-styles";
+import type { SymbolMatch } from "../codeNotes.js";
+
+export type Token = {
+  content: string;
+  color?: string;
+  fontStyle?: number;
+  className?: string;
+};
+
+/** Splits tokens at symbol note boundaries and wraps each match in a tooltip. */
+export function NoteTokens(props: {
+  tokens: Token[];
+  matches: SymbolMatch[];
+  /** False inside a button, which cannot contain focusable elements. */
+  focusable?: boolean;
+}) {
+  const { tokens, matches } = props;
+  const symbolClassName = useStyles(symbolNoteClass);
+  const cuts = new Set(matches.flatMap((match) => [match.start, match.end]));
+  const pieces: { start: number; token: Token }[] = [];
+  let column = 0;
+  for (const token of tokens) {
+    let start = column;
+    for (let at = column + 1; at < column + token.content.length; at++) {
+      if (!cuts.has(at)) continue;
+      pieces.push({
+        start,
+        token: {
+          ...token,
+          content: token.content.slice(start - column, at - column),
+        },
+      });
+      start = at;
+    }
+    pieces.push({
+      start,
+      token: { ...token, content: token.content.slice(start - column) },
+    });
+    column += token.content.length;
+  }
+
+  const out: ReactNode[] = [];
+  let group: ReactNode[] = [];
+  for (const piece of pieces) {
+    const span = <TokenSpan key={piece.start} token={piece.token} />;
+    const match = matches.find(
+      (m) => piece.start >= m.start && piece.start < m.end,
+    );
+    if (match === undefined) {
+      out.push(span);
+      continue;
+    }
+    group.push(span);
+    if (piece.start + piece.token.content.length < match.end) continue;
+    out.push(
+      <Tooltip
+        key={`note-${match.start}`}
+        content={<NoteText text={match.note.text} />}
+      >
+        <span
+          className={symbolClassName}
+          tabIndex={props.focusable === false ? undefined : 0}
+        >
+          {group}
+        </span>
+      </Tooltip>,
+    );
+    group = [];
+  }
+  return <>{out}</>;
+}
+
+function TokenSpan(props: { token: Token }) {
+  const fontStyle = props.token.fontStyle ?? 0;
+  return (
+    <span
+      className={props.token.className}
+      style={{
+        color: props.token.color,
+        fontStyle: fontStyle & 1 ? "italic" : undefined,
+        fontWeight: fontStyle & 2 ? 500 : undefined,
+        textDecoration: fontStyle & 4 ? "underline" : undefined,
+      }}
+    >
+      {props.token.content}
+    </span>
+  );
+}
+
+/** Note text with `backtick` spans as inline code. */
+export function NoteText(props: { text: string }) {
+  return props.text
+    .split(/(`[^`]+`)/)
+    .map((part, index) =>
+      part.startsWith("`") && part.endsWith("`") && part.length > 1 ? (
+        <Code key={index}>{part.slice(1, -1)}</Code>
+      ) : (
+        part
+      ),
+    );
+}
+
+const symbolNoteClass = style(focusRing(), {
+  borderRadius: "3px",
+  cursor: "help",
+  textDecorationLine: "underline",
+  textDecorationStyle: "dotted",
+  textDecorationColor: colors.gray[9],
+  textUnderlineOffset: "3px",
+  "&:hover": { backgroundColor: colors.blueAlpha[5] },
+});
+
+/** A dot in the left gutter of the first row a line note covers. */
+export const lineNoteDot = {
+  content: '""',
+  position: "absolute",
+  left: "4px",
+  top: "calc(0.5lh - 2.5px)",
+  width: "5px",
+  height: "5px",
+  borderRadius: "50%",
+  backgroundColor: colors.blue[9],
+} as const;

package/src/viewer/pierre.ts

@@ -1,9 +1,18 @@
-import { colors, radius, shadow } from "maui";
+import {
+  backgroundColor,
+  border,
+  colors,
+  radius,
+  shadow,
+  spacing,
+  text,
+} from "maui";
 import { style } from "purse-styles";
 import { codeFontFamily } from "../codeFont.js";
 import { diffsTheme } from "./diffsTheme.ts";
 
-const pierreUnsafeCss = `:host { --diffs-font-family: ${codeFontFamily}; }`;
+// Pierre paints its own white; widgets use the element surface instead.
+const pierreUnsafeCss = `:host { --diffs-font-family: ${codeFontFamily}; --diffs-light-bg: ${backgroundColor.app}; --diffs-dark-bg: ${backgroundColor.app}; }`;
 
 export const sourceSelectionCss = `
 [data-selected-line] {
@@ -18,11 +27,20 @@ export const sourceSelectionCss = `
 }
 `;
 
+/** The card every widget sits in: a subtle ring on the page background. */
 export const pierreShell = style(radius.md, shadow.subtle, {
   overflow: "hidden",
   minWidth: 0,
 });
 
+/** The header row atop a card: a fence's `[Title]` or a diagram's caption. */
+export const fenceTitle = style(
+  text({ size: "xs", fontWeight: 500, color: "lowContrast" }),
+  spacing.padding({ x: 6, y: 4 }),
+  border(["bottom"], "border"),
+  { margin: 0, overflowWrap: "anywhere", backgroundColor: colors.gray[2] },
+);
+
 export function pierreDiffOptions(input: {
   themeType: "light" | "dark";
   disableFileHeader: boolean;

package/src/viewer/serviceLayout.ts

@@ -0,0 +1,200 @@
+import ELK, {
+  type ElkExtendedEdge,
+  type ElkNode,
+} from "elkjs/lib/elk.bundled.js";
+import {
+  flattenServices,
+  type Service,
+  type ServiceDiagram,
+  type ServiceEvent,
+  type Sign,
+} from "../services.js";
+
+export type Point = { x: number; y: number };
+export type Rect = { x: number; y: number; width: number; height: number };
+export type Size = { width: number; height: number };
+
+/**
+ * One connection per pair of services that ever talk, pointing from the one
+ * declared first. Requests and replies share it, so the graph has no cycles
+ * and ELK never routes a reply around the whole diagram.
+ */
+export type ServiceLink = {
+  id: string;
+  a: string;
+  b: string;
+  /** Some event goes a → b. */
+  forward: boolean;
+  /** Some event goes b → a. */
+  backward: boolean;
+  /** The longest label on the link. */
+  label: string | undefined;
+  /** In a diff, `+` or `-` when every event on the link has that sign. */
+  sign: Sign;
+};
+
+/** An event's label as its pill shows it, or "" when it has none. */
+export function pillText(event: ServiceEvent) {
+  if (event.label === "") return "";
+  const sign = { "+": "+ ", "-": "− ", " ": "" }[event.sign];
+  const link = event.annotation === undefined ? "" : " ↗";
+  return `${sign}${event.label}${link}`;
+}
+
+export type ServiceLayout = {
+  width: number;
+  height: number;
+  /** Each service's own header and state, measured before layout. */
+  sizes: Map<string, Size>;
+  boxes: Map<string, Rect>;
+  routes: Map<string, Point[]>;
+};
+
+export function serviceLinks(diagram: ServiceDiagram): ServiceLink[] {
+  const order = new Map(
+    flattenServices(diagram.services).map(({ service }, index) => [
+      service.name,
+      index,
+    ]),
+  );
+  const links = new Map<string, ServiceLink>();
+  for (const step of diagram.steps)
+    for (const event of step.events) {
+      const forward = order.get(event.from)! <= order.get(event.to)!;
+      const [a, b] = forward ? [event.from, event.to] : [event.to, event.from];
+      const id = linkId(a, b);
+      const link = links.get(id) ?? {
+        id,
+        a,
+        b,
+        forward: false,
+        backward: false,
+        label: undefined,
+        sign: event.sign,
+      };
+      if (forward) link.forward = true;
+      else link.backward = true;
+      if (link.sign !== event.sign) link.sign = " ";
+      // Measure the pill as drawn.
+      const shown = pillText(event);
+      if (shown.length > (link.label?.length ?? 0)) link.label = shown;
+      links.set(id, link);
+    }
+  return [...links.values()];
+}
+
+export function linkId(from: string, to: string) {
+  return from < to ? `${from}|${to}` : `${to}|${from}`;
+}
+
+const elk = new ELK();
+
+function contains(service: Service, name: string): boolean {
+  return service.children.some(
+    (child) => child.name === name || contains(child, name),
+  );
+}
+
+/**
+ * `sizes` are each service's own header and state; a parent grows around its
+ * children. `label` is the largest event label, which must fit between layers.
+ */
+export async function layoutServices(input: {
+  diagram: ServiceDiagram;
+  links: ServiceLink[];
+  sizes: Map<string, Size>;
+  label: Size;
+  direction: "RIGHT" | "DOWN";
+}): Promise<ServiceLayout> {
+  // Room for a label pill on the edge between two layers. Each parent lays out
+  // its own children, so parents need it too.
+  const betweenLayers = String(
+    input.direction === "RIGHT"
+      ? Math.max(40, input.label.width + 24)
+      : Math.max(40, input.label.height + 28),
+  );
+  const node = (service: Service): ElkNode => {
+    const own = input.sizes.get(service.name)!;
+    if (service.children.length === 0)
+      return { id: service.name, width: own.width, height: own.height };
+    // A parent that talks to its own children needs room for that route and
+    // its label between its header and the children.
+    const inner = input.links.some(
+      (link) => link.a === service.name && contains(service, link.b),
+    );
+    const room = (size: number) => (inner ? size + 24 : 0);
+    const top =
+      own.height +
+      4 +
+      (input.direction === "DOWN" ? room(input.label.height) : 0);
+    const left =
+      16 + (input.direction === "RIGHT" ? room(input.label.width) : 0);
+    return {
+      id: service.name,
+      layoutOptions: {
+        "elk.padding": `[top=${top},left=${left},bottom=16,right=16]`,
+        "elk.nodeSize.constraints": "MINIMUM_SIZE",
+        "elk.layered.spacing.nodeNodeBetweenLayers": betweenLayers,
+        // Wide enough for its own header. ELK applies this before rotating
+        // a top-to-bottom layout, so the axes swap.
+        "elk.nodeSize.minimum":
+          input.direction === "DOWN" ? `(0,${own.width})` : `(${own.width},0)`,
+      },
+      children: service.children.map(node),
+    };
+  };
+  const graph: ElkNode = {
+    id: "root",
+    layoutOptions: {
+      "elk.algorithm": "layered",
+      "elk.direction": input.direction,
+      "elk.edgeRouting": "ORTHOGONAL",
+      "elk.hierarchyHandling": "INCLUDE_CHILDREN",
+      "elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
+      "elk.json.edgeCoords": "ROOT",
+      "elk.json.shapeCoords": "ROOT",
+      "elk.padding": "[top=8,left=8,bottom=8,right=8]",
+      "elk.spacing.nodeNode": "32",
+      "elk.layered.spacing.nodeNodeBetweenLayers": betweenLayers,
+      "elk.spacing.edgeNode": "16",
+      "elk.spacing.edgeEdge": "12",
+    },
+    children: input.diagram.services.map(node),
+    edges: input.links.map((link): ElkExtendedEdge => ({
+      id: link.id,
+      sources: [link.a],
+      targets: [link.b],
+    })),
+  };
+  const result = await elk.layout(graph);
+
+  const boxes = new Map<string, Rect>();
+  const visit = (nodes: ElkNode[] | undefined) => {
+    for (const child of nodes ?? []) {
+      boxes.set(child.id, {
+        x: child.x!,
+        y: child.y!,
+        width: child.width!,
+        height: child.height!,
+      });
+      visit(child.children);
+    }
+  };
+  visit(result.children);
+  const routes = new Map(
+    (result.edges ?? []).map((edge) => {
+      const section = edge.sections![0]!;
+      return [
+        edge.id,
+        [section.startPoint, ...(section.bendPoints ?? []), section.endPoint],
+      ];
+    }),
+  );
+  return {
+    width: result.width!,
+    height: result.height!,
+    sizes: input.sizes,
+    boxes,
+    routes,
+  };
+}

package/vite.config.ts

@@ -26,6 +26,7 @@ export default defineConfig(({ command }) => {
         "purse-styles",
         "@pierre/diffs/react",
         "beautiful-mermaid",
+        "elkjs/lib/elk.bundled.js",
         "errore",
       ],
     },
@@ -37,6 +38,10 @@ export default defineConfig(({ command }) => {
     server: {
       port: 0,
       strictPort: false,
+      // Vite turns this on when it detects a coding agent, and its plugin
+      // changes the prebundle hash. Pin it so agent and terminal runs share
+      // one prebundle instead of rebuilding each other's.
+      forwardConsole: false,
     },
   };
 });

package/vite.gist.config.ts

@@ -22,6 +22,7 @@ export function gistAppConfig(): UserConfig {
         "purse-styles",
         "@pierre/diffs/react",
         "beautiful-mermaid",
+        "elkjs/lib/elk.bundled.js",
         "errore",
         "md4x/standalone",
       ],