@shortlink-org/portolan 0.1.0

package/src/graph/FocusedEventGraph.tsx

@@ -0,0 +1,211 @@
+import { useCallback, useMemo } from "react";
+import {
+  Background,
+  Panel,
+  ReactFlow,
+  ReactFlowProvider,
+  useStore,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import type { Event } from "../catalog";
+import { index } from "../data";
+import { DiagramSkeleton } from "../components/DiagramSkeleton";
+import { nodeTypes } from "./nodes";
+import { useElkFlow } from "./useElkFlow";
+import type { FlowSpec } from "./useElkFlow";
+import { ViewportSeg } from "./GraphToolbar";
+import { EVENT_W, NODE_H } from "./theme";
+import { useSelectionStore } from "../selection/store";
+
+/** Air above and below the picture. Anything more is a canvas with a hole in it. */
+const PAD = 28;
+/** elk's own gap between two nodes in the same layer. */
+const ROW_GAP = 34;
+
+/** producer -> event -> consumers, computed at runtime from the catalog. */
+export function FocusedEventGraph({
+  event,
+  height,
+}: {
+  event: Event;
+  /** Overrides the height the picture asks for. Nothing does, so far. */
+  height?: number;
+}) {
+  const selectionId = useSelectionStore((s) => s.selection?.id ?? null);
+  const select = useSelectionStore((s) => s.select);
+  const clear = useSelectionStore((s) => s.clear);
+
+  const owner = index.eventOwner.get(event.id);
+  const producerId = owner?.service.id ?? "unknown-producer";
+  const producerContext = owner
+    ? (index.serviceContext.get(owner.service.id)?.id ?? null)
+    : null;
+
+  const spec: FlowSpec = useMemo(() => {
+    const eventNodeId = `event:${event.id}`;
+    return {
+      nodes: [
+        {
+          id: producerId,
+          data: {
+            label: producerId,
+            context: producerContext,
+            ghost: !owner,
+            kind: "producer" as const,
+            role: "publisher",
+          },
+        },
+        {
+          id: eventNodeId,
+          width: EVENT_W,
+          data: {
+            label: event.name,
+            context: null,
+            ghost: false,
+            kind: "event" as const,
+            role: "event",
+          },
+        },
+        ...event.consumers.map((consumer) => ({
+          id: consumer.service,
+          data: {
+            label: consumer.service,
+            context: index.serviceContext.get(consumer.service)?.id ?? null,
+            ghost: !index.serviceById.has(consumer.service),
+            kind: "service" as const,
+            role: "consumer",
+          },
+        })),
+      ],
+      edges: [
+        {
+          id: `publishes:${event.id}`,
+          source: producerId,
+          target: eventNodeId,
+          label: "publishes",
+          status: "verified" as const,
+        },
+        ...event.consumers.map((consumer) => ({
+          id: `consumes:${consumer.service}`,
+          source: eventNodeId,
+          target: consumer.service,
+          // A verified consumer is the ordinary case, and labelling every
+          // ordinary line "verified" leaves nothing for the two lines that
+          // are not. Those keep their word; the rest say what they do.
+          label: consumer.status === "verified" ? "consumes" : consumer.status,
+          status: consumer.status,
+          eventId: event.id,
+        })),
+      ],
+      direction: "RIGHT" as const,
+      layerSpacing: 96,
+    };
+  }, [event, owner, producerContext, producerId]);
+
+  const { nodes, edges, ready } = useElkFlow(spec);
+
+  /**
+   * The canvas is as tall as the picture in it.
+   *
+   * It was 230px whatever it held, so three nodes in a row sat in the middle
+   * of a field four times their height - and fitView could not take up the
+   * slack, because it stops at 1:1 rather than blowing the boxes up. Once elk
+   * has run the answer is exact; before that it is elk's own row pitch, which
+   * is what the answer will turn out to be.
+   */
+  const measured = useMemo(() => {
+    if (nodes.length === 0) return null;
+    const top = Math.min(...nodes.map((n) => n.position.y));
+    const bottom = Math.max(
+      ...nodes.map((n) => n.position.y + (n.height ?? NODE_H)),
+    );
+    return Math.round(bottom - top);
+  }, [nodes]);
+  const rows = Math.max(1, event.consumers.length);
+  const content = measured ?? rows * NODE_H + (rows - 1) * ROW_GAP;
+  const canvasHeight = height ?? Math.min(420, content + PAD * 2);
+
+  // The middle node stands for the event itself; the others are services. Both
+  // are catalog ids, so a click here reads the same as a click anywhere else.
+  const onNodeClick = useCallback(
+    (_: React.MouseEvent, node: { id: string }) =>
+      select(
+        node.id.startsWith("event:") ? node.id.slice(6) : node.id,
+        "diagram",
+      ),
+    [select],
+  );
+
+  /**
+   * Whether the whole picture is on screen at 1:1.
+   *
+   * fitView stops at maxZoom 1, so a graph that fits lands on exactly 1 and
+   * one that does not lands below it. That one number decides whether this is
+   * a canvas or a picture: a picture needs no zoom controls - they would have
+   * nothing to reveal, and on a canvas 104px tall they overlap the only row
+   * in it - and it should not swallow the page's scroll on the way past.
+   */
+  const zoom = useStore((s) => s.transform[2]);
+  const fits = zoom >= 0.999;
+
+  const shownNodes = useMemo(
+    () =>
+      nodes.map((node) => ({
+        ...node,
+        selected:
+          node.id === selectionId || node.id === `event:${selectionId ?? ""}`,
+      })),
+    [nodes, selectionId],
+  );
+
+  return (
+    <div
+      style={{ height: canvasHeight }}
+      className="relative w-full overflow-hidden rounded-card border border-line shadow-xs"
+    >
+      {ready ? null : <DiagramSkeleton />}
+      <ReactFlow
+        nodes={shownNodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        onNodeClick={onNodeClick}
+        onPaneClick={() => clear("diagram")}
+        nodesDraggable={false}
+        nodesConnectable={false}
+        elementsSelectable={false}
+        panOnDrag={!fits}
+        zoomOnScroll={!fits}
+        zoomOnPinch={!fits}
+        zoomOnDoubleClick={!fits}
+        preventScrolling={!fits}
+        proOptions={{ hideAttribution: true }}
+        fitView
+        // 1 rather than 1.5: the boxes are drawn at the size they are meant to
+        // be read at, and a graph of three nodes has no reason to be enlarged
+        // past it.
+        fitViewOptions={{ padding: 0.12, maxZoom: 1 }}
+        minZoom={0.2}
+        maxZoom={1.5}
+        key={ready ? `fit-${event.id}-${nodes.length}` : "pending"}
+      >
+        <Background gap={20} size={2} />
+        {fits ? null : (
+          <Panel position="top-right">
+            <ViewportSeg />
+          </Panel>
+        )}
+      </ReactFlow>
+    </div>
+  );
+}
+
+export function FocusedEventGraphPane(props: {
+  event: Event;
+  height?: number;
+}) {
+  return (
+    <ReactFlowProvider>
+      <FocusedEventGraph {...props} />
+    </ReactFlowProvider>
+  );
+}

package/src/graph/GraphToolbar.tsx

@@ -0,0 +1,187 @@
+// The canvas's own controls, floating over its top-left corner.
+//
+// They are here rather than in the page header because they act on the
+// viewport, and a viewport control that sits outside the viewport it moves is
+// a control the reader has to remember belongs to it.
+
+import { useRef, useState } from "react";
+import { Panel, useReactFlow } from "@xyflow/react";
+import {
+  Crosshair,
+  FileCode2,
+  ImageDown,
+  Maximize2,
+  Minus,
+  Plus,
+} from "lucide-react";
+import { useToastStore } from "../app/toast";
+import { saveCanvasImage, viewportOf } from "../lib/export-canvas";
+import type { ImageKind } from "../lib/export-canvas";
+import type { GraphMode } from "./dependency-layout";
+
+export const FIT_OPTIONS = { padding: 0.15, maxZoom: 1.25 } as const;
+
+export function GraphToolbar({
+  mode,
+  onMode,
+  focusing,
+  onFocusing,
+  focused,
+}: {
+  mode: GraphMode;
+  onMode: (mode: GraphMode) => void;
+  /** Focus mode is armed: the next service clicked becomes the subject. */
+  focusing: boolean;
+  onFocusing: (on: boolean) => void;
+  /** The service currently focused, or null. */
+  focused: string | null;
+}) {
+  return (
+    <Panel position="top-left" className="flex flex-wrap items-center gap-2">
+      <div className="seg seg-float" role="group" aria-label="Graph mode">
+        <button
+          type="button"
+          onClick={() => onMode("bipartite")}
+          aria-pressed={mode === "bipartite"}
+          className={mode === "bipartite" ? "is-on" : undefined}
+          title="Events as nodes"
+        >
+          events
+        </button>
+        <button
+          type="button"
+          onClick={() => onMode("compact")}
+          aria-pressed={mode === "compact"}
+          className={mode === "compact" ? "is-on" : undefined}
+          title="Services only, one bundled edge per pair"
+        >
+          compact
+        </button>
+      </div>
+
+      <ViewportSeg />
+
+      <div className="seg seg-float">
+        <button
+          type="button"
+          onClick={() => onFocusing(!focusing)}
+          aria-pressed={focusing}
+          className={focusing ? "is-on" : undefined}
+          title="Click a service to dim everything more than one hop away (Esc clears)"
+        >
+          <Crosshair size={13} aria-hidden />
+          <span className="ml-1.5">
+            {focused && focusing ? focusedLabel(focused) : "focus"}
+          </span>
+        </button>
+      </div>
+
+      <ExportSeg name={`dependency-graph-${mode}`} />
+    </Panel>
+  );
+}
+
+/**
+ * The canvas as a picture: png for a slide, svg for a wiki.
+ *
+ * It finds its own viewport by walking up to the canvas it is floating over,
+ * so it needs no ref from the page and sits in any React Flow toolbar the
+ * same way. The file is named after the drawing and the catalog revision,
+ * like every other export.
+ */
+export function ExportSeg({ name }: { name: string }) {
+  const say = useToastStore((s) => s.say);
+  const self = useRef<HTMLDivElement | null>(null);
+  const [saving, setSaving] = useState(false);
+
+  const save = async (kind: ImageKind): Promise<void> => {
+    const viewport = viewportOf(self.current?.closest(".react-flow"));
+    if (!viewport) {
+      say("the canvas is not on screen");
+      return;
+    }
+    setSaving(true);
+    try {
+      const file = await saveCanvasImage(viewport, name, kind);
+      say(`${kind.toUpperCase()} downloaded — ${file}`);
+    } catch (cause) {
+      say(
+        `could not export ${kind.toUpperCase()}: ${cause instanceof Error ? cause.message : String(cause)}`,
+      );
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div ref={self} className="seg seg-float" role="group" aria-label="Export">
+      <button
+        type="button"
+        onClick={() => void save("png")}
+        disabled={saving}
+        title="Save the canvas as a PNG"
+        className="flex items-center gap-1.5"
+      >
+        <ImageDown size={13} aria-hidden />
+        {saving ? "saving…" : "png"}
+      </button>
+      <button
+        type="button"
+        onClick={() => void save("svg")}
+        disabled={saving}
+        title="Save the canvas as an SVG"
+        className="flex items-center gap-1.5"
+      >
+        <FileCode2 size={13} aria-hidden />
+        svg
+      </button>
+    </div>
+  );
+}
+
+/**
+ * Fit, out, in - the three viewport controls, as one segment.
+ *
+ * It lives apart from the toolbar because it is the only part of it that is
+ * about the canvas rather than about the graph, and every canvas has a
+ * viewport: the focused event graph wears this on its own, with none of the
+ * mode switches around it.
+ */
+export function ViewportSeg() {
+  const flow = useReactFlow();
+
+  return (
+    <div className="seg seg-float" role="group" aria-label="Viewport">
+      <button
+        type="button"
+        onClick={() => void flow.fitView(FIT_OPTIONS)}
+        title="Fit to view"
+        aria-label="Fit to view"
+      >
+        <Maximize2 size={13} aria-hidden />
+      </button>
+      <button
+        type="button"
+        onClick={() => void flow.zoomOut()}
+        title="Zoom out"
+        aria-label="Zoom out"
+      >
+        <Minus size={13} aria-hidden />
+      </button>
+      <button
+        type="button"
+        onClick={() => void flow.zoomIn()}
+        title="Zoom in"
+        aria-label="Zoom in"
+      >
+        <Plus size={13} aria-hidden />
+      </button>
+    </div>
+  );
+}
+
+/** The last segment of a service id: the toolbar has no room for the context. */
+function focusedLabel(serviceId: string): string {
+  const at = serviceId.lastIndexOf(".");
+  return at < 0 ? serviceId : serviceId.slice(at + 1);
+}

package/src/graph/RoutedEdge.tsx

@@ -0,0 +1,80 @@
+// An edge that draws the route elk computed for it.
+//
+// React Flow's own edge types - bezier, smoothstep, straight - all take two
+// endpoints and invent everything between them. That is fine on a graph laid
+// out by hand and wrong on one laid out by elk: elk already decided where the
+// line should go, around which boxes and through which gaps, and throwing that
+// away to draw a curve between the same two points is how a line ends up
+// crossing the node it was routed around.
+//
+// So the points come in through `data` and the path is drawn from them.
+
+import { BaseEdge } from "@xyflow/react";
+import type { Edge, EdgeProps } from "@xyflow/react";
+import { useSelectionStore } from "../selection/store";
+import { EdgeLabel } from "./EdgeLabel";
+import { midpoint, roundedPath } from "./elk";
+import type { Point } from "./elk";
+
+export interface RoutedEdgeData {
+  points: Point[];
+  /** Text for the chip at the midpoint - a bundle's event count, and nothing else. */
+  chip?: string;
+  chipTitle?: string;
+  /**
+   * Where the chip goes. Chosen at layout time, where the boxes are known: the
+   * middle of a route that loops around the graph is over the middle of the
+   * graph, which is the one place a number must not be.
+   */
+  chipAt?: Point;
+  /** What clicking the chip selects. The line itself is handled by the canvas. */
+  selectId?: string;
+  [key: string]: unknown;
+}
+
+export type RoutedEdgeType = Edge<RoutedEdgeData, "routed">;
+
+export function RoutedEdge({
+  id,
+  data,
+  style,
+  markerEnd,
+  interactionWidth,
+}: EdgeProps<RoutedEdgeType>) {
+  const select = useSelectionStore((s) => s.select);
+  const points = data?.points ?? [];
+  if (points.length < 2) return null;
+
+  const path = roundedPath(points);
+  const opacity = Number(style?.opacity ?? 1);
+  const selectId = data?.selectId;
+
+  return (
+    <>
+      <BaseEdge
+        id={id}
+        path={path}
+        style={style}
+        markerEnd={markerEnd}
+        interactionWidth={interactionWidth ?? 14}
+      />
+      {/* The count on a bundled edge. It is the only thing on the line a
+          reader can point at, so it takes the pointer even though the line
+          under it does too. */}
+      {data?.chip ? (
+        <EdgeLabel
+          at={data.chipAt ?? midpoint(points)}
+          opacity={opacity}
+          title={data.chipTitle}
+          onClick={() => {
+            if (selectId) select(selectId, "diagram");
+          }}
+        >
+          {data.chip}
+        </EdgeLabel>
+      ) : null}
+    </>
+  );
+}
+
+export const dependencyEdgeTypes = { routed: RoutedEdge };