beadcyte 0.4.0

package/src/web/components/BeadSubGraph.vue

@@ -0,0 +1,326 @@
+<script setup lang="ts">
+// BeadSubGraph.vue — mini-DAG for the drawer. Two pictures, one renderer:
+//
+// - "neighbourhood" (default): the focal bead's transitive blockers
+//   (leftward, up to N hops) and dependents (rightward), one column per
+//   hop, the focal bead in the middle.
+// - "children": every child of an epic, one column per dependency depth
+//   within that set, chains stacked as bands, isolated children listed
+//   below them (bp-67g.59).
+//
+// The layouts live in ../subgraph.ts so they can be tested without a DOM;
+// this file paints nodes — id, truncated title, status, priority, coloured
+// by status — and cubic-bezier edges between them. Clicking a node switches
+// the drawer to that bead; hovering one floats the same BeadTooltip the Gantt
+// uses (bp-67g.42), so an id on a node can be read as a title, status and
+// assignee without leaving the picture.
+
+import { ArrowRight } from "@lucide/vue";
+import { computed, ref, watch } from "vue";
+import type { Bead } from "../store";
+import { useBeadTooltip } from "../composables/useBeadTooltip";
+import BeadTooltip from "./BeadTooltip.vue";
+import {
+  DEFAULT_MAX_HOPS,
+  GEOMETRY,
+  layoutChildren,
+  layoutNeighbourhood,
+} from "../subgraph";
+import type { GraphEdge, GraphNode } from "../subgraph";
+
+const props = defineProps<{
+  rootBead: Bead;
+  beads: Bead[];
+  maxHops?: number;
+  /** Which picture to draw; see the header comment. */
+  mode?: "neighbourhood" | "children";
+  /** Children mode: isolated children per row. See ChildrenLayoutOptions. */
+  isolatedColumns?: number;
+  /** Children mode: the child to draw as the focal (root-styled) node. */
+  focalId?: string;
+}>();
+
+const emit = defineEmits<{
+  select: [id: string];
+}>();
+
+const NODE_W = GEOMETRY.nodeW;
+const NODE_H = GEOMETRY.nodeH;
+// The hit area runs this far past the node box on every side: the marks are
+// small, so the target is bigger than the mark. Half the row gap, so two
+// stacked nodes' hit areas meet without overlapping.
+const HIT_PAD = GEOMETRY.rowGap / 2;
+
+// ── node hover (bp-67g.42) ───────────────────────────────────────────────
+// The same hover machine as the Gantt's bars. This host sits in a column
+// that scrolls — the drawer body, or this element's own overflow — so a
+// scroll dismisses the panel rather than leaving it fixed over nothing, and
+// the panel is kept inside this element's horizontal extent.
+const rootEl = ref<HTMLElement | null>(null);
+const {
+  props: tipProps,
+  enter: tipEnter,
+  cancelLeave: tipStay,
+  scheduleLeave: tipLeave,
+  dismiss: tipDismiss,
+  toggleWatch: tipWatch,
+} = useBeadTooltip({
+  dismissOnScroll: true,
+  bounds: () => {
+    const r = rootEl.value?.getBoundingClientRect();
+    return r ? { left: r.left, right: r.right } : null;
+  },
+});
+
+function onNodeEnter(n: GraphNode, e: MouseEvent) {
+  // The band is the node box, not the padded hit area, so the panel sits
+  // just under the mark.
+  const box = (e.currentTarget as Element | null)?.querySelector(".node-box") ?? null;
+  tipEnter(n.id, e, box);
+}
+
+function onNodeClick(id: string) {
+  tipDismiss();
+  emit("select", id);
+}
+
+// Details on the panel does what clicking the node does: the drawer moves.
+function onDetails(id: string) {
+  tipDismiss();
+  emit("select", id);
+}
+
+const maxHops = computed(() => props.maxHops ?? DEFAULT_MAX_HOPS);
+
+const graph = computed(() =>
+  props.mode === "children"
+    ? layoutChildren(props.rootBead, props.beads, {
+        isolatedColumns: props.isolatedColumns ?? 1,
+        focalId: props.focalId,
+      })
+    : layoutNeighbourhood(props.rootBead, props.beads, maxHops.value),
+);
+
+// A new picture under the pointer — a node click moved the drawer — has no
+// node to leave, so mouseleave never fires; close the panel explicitly.
+watch(graph, () => tipDismiss());
+
+// A neighbourhood always contains its root, so one node means no edges. A
+// children graph with one node is a real, if lonely, child and is drawn.
+const isEmpty = computed(() =>
+  props.mode === "children"
+    ? graph.value.nodes.length === 0
+    : graph.value.nodes.length <= 1,
+);
+const emptyText = computed(() =>
+  props.mode === "children"
+    ? "No children."
+    : `No dependencies within ${maxHops.value} hops.`,
+);
+
+function edgePath(e: GraphEdge): string {
+  const dx = e.x2 - e.x1;
+  const cx1 = e.x1 + Math.max(20, dx * 0.4);
+  const cx2 = e.x2 - Math.max(20, dx * 0.4);
+  return `M ${e.x1} ${e.y1} C ${cx1} ${e.y1}, ${cx2} ${e.y2}, ${e.x2} ${e.y2}`;
+}
+
+/**
+ * The curve's last control point shares the endpoint's y, so it always
+ * arrives horizontally — the terminal icon needs no rotation here.
+ */
+function edgeTerminal(e: GraphEdge) {
+  return { x: e.x2, y: e.y2 };
+}
+
+function nodeClass(n: GraphNode): string {
+  return `status-${n.bead.status} is-${n.role}`;
+}
+
+function truncate(s: string, n: number): string {
+  if (!s) return "";
+  return s.length > n ? s.slice(0, n - 1) + "…" : s;
+}
+</script>
+
+<template>
+  <div ref="rootEl" class="bead-subgraph">
+    <div v-if="isEmpty" class="empty">{{ emptyText }}</div>
+    <!-- The canvas is padded by the hit pad on every side: an outer <svg>
+         clips to its own bounds, so without it the nodes along the edges
+         would lose the part of their hit area that hangs past the graph. -->
+    <svg
+      v-else
+      class="subgraph-svg"
+      :viewBox="`${-HIT_PAD} ${-HIT_PAD} ${graph.width + 2 * HIT_PAD} ${graph.height + 2 * HIT_PAD}`"
+      :width="graph.width + 2 * HIT_PAD"
+      :height="graph.height + 2 * HIT_PAD"
+    >
+      <g class="edges">
+        <template v-for="e in graph.edges" :key="`term-${e.fromId}-${e.toId}`">
+          <!-- Terminal icon instead of a <marker>: currentColor inside a
+               marker resolves against <defs>, not the referencing path, so
+               a marker can't take the edge's colour. -->
+          <ArrowRight
+            class="edge-terminal-icon"
+            :x="edgeTerminal(e).x - 15"
+            :y="edgeTerminal(e).y - 6.5"
+          />
+        </template>
+        <path
+          v-for="e in graph.edges"
+          :key="`${e.fromId}->${e.toId}`"
+          class="edge"
+          :d="edgePath(e)"
+        />
+      </g>
+
+      <g class="nodes">
+        <g
+          v-for="n in graph.nodes"
+          :key="n.id"
+          class="node"
+          :class="nodeClass(n)"
+          :transform="`translate(${n.x} ${n.y})`"
+          @click="onNodeClick(n.id)"
+          @mouseenter="onNodeEnter(n, $event)"
+          @mouseleave="tipLeave"
+        >
+          <!-- Hit area first, so the box and its text paint over it. -->
+          <rect
+            class="node-hit"
+            :x="-HIT_PAD"
+            :y="-HIT_PAD"
+            :width="NODE_W + 2 * HIT_PAD"
+            :height="NODE_H + 2 * HIT_PAD"
+          />
+          <rect
+            class="node-box"
+            :width="NODE_W"
+            :height="NODE_H"
+            rx="3"
+          />
+          <text class="node-id" x="8" y="14">{{ n.bead.id }}</text>
+          <text class="node-title" x="8" y="28">
+            {{ truncate(n.bead.title, 18) }}
+          </text>
+          <text class="node-status" :x="NODE_W - 8" y="14" text-anchor="end">
+            {{ n.bead.status.replace(/_/g, " ") }}
+          </text>
+          <text class="node-pri" :x="NODE_W - 8" y="28" text-anchor="end">
+            P{{ n.bead.priority ?? 4 }}
+          </text>
+        </g>
+      </g>
+    </svg>
+    <BeadTooltip
+      v-bind="tipProps"
+      @details="onDetails"
+      @watch="tipWatch"
+      @tooltip-enter="tipStay"
+      @tooltip-leave="tipLeave"
+    />
+  </div>
+</template>
+
+<style>
+.bead-subgraph {
+  overflow: auto;
+  padding: 8px 0;
+}
+
+.bead-subgraph .empty {
+  color: var(--c-dim);
+  font-style: italic;
+  font-size: 12px;
+  padding: 12px 0;
+}
+
+.subgraph-svg {
+  display: block;
+}
+
+/* One colour for the whole edge layer: the path paints with `stroke`, the
+   terminal icon with currentColor, so both are set here. The glyph is a step
+   brighter than the hairline it terminates — a stroked arrow at this size
+   needs more contrast than the filled triangle it replaced. */
+.bead-subgraph .edges {
+  color: var(--c-dim);
+}
+
+.bead-subgraph .edge {
+  fill: none;
+  stroke: var(--c-border);
+  stroke-width: 1.5;
+  stroke-opacity: 0.7;
+}
+
+.bead-subgraph .edge-terminal-icon {
+  width: 13px;
+  height: 13px;
+  stroke-width: 2.5;
+  pointer-events: none;
+}
+
+.bead-subgraph .node {
+  cursor: pointer;
+}
+
+/* Invisible, but a target: a transparent fill still counts as painted for
+   pointer-events, so the pointer is caught this far outside the box. */
+.bead-subgraph .node .node-hit {
+  fill: transparent;
+  stroke: none;
+  pointer-events: all;
+}
+
+.bead-subgraph .node .node-box {
+  fill: var(--c-panel);
+  stroke: var(--c-border);
+  stroke-width: 1;
+}
+
+.bead-subgraph .node.is-root .node-box {
+  fill: var(--c-accent-wash-strong);
+  stroke: var(--c-accent);
+  stroke-width: 1.5;
+}
+
+.bead-subgraph .node.status-closed .node-box {
+  stroke: var(--c-shipped);
+}
+.bead-subgraph .node.status-in_progress .node-box {
+  stroke: var(--c-in-progress);
+}
+.bead-subgraph .node.status-deferred .node-box {
+  stroke: var(--c-closed-noship);
+  fill-opacity: 0.6;
+}
+
+.bead-subgraph .node:hover .node-box {
+  fill: var(--c-accent-wash);
+  stroke: var(--c-accent);
+}
+
+.bead-subgraph .node-id {
+  fill: var(--c-accent);
+  font-family: ui-monospace, monospace;
+  font-size: 10px;
+}
+
+.bead-subgraph .node-title {
+  fill: var(--c-text);
+  font-size: 11px;
+}
+
+.bead-subgraph .node-status {
+  fill: var(--c-dim);
+  font-size: 9px;
+  text-transform: lowercase;
+}
+
+.bead-subgraph .node-pri {
+  fill: var(--c-dim);
+  font-size: 9px;
+}
+</style>

package/src/web/components/BeadSubGraphOverlay.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+// BeadSubGraphOverlay.vue — an epic's children graph at full viewport.
+//
+// The drawer is a narrow column, and an epic with a few dozen children has
+// more graph than fits in it. This is the same picture the drawer's
+// Subgraph section draws — BeadSubGraph in children mode, beads inside the
+// epic only — given the whole window. Clicking a node does what it does in
+// the drawer: the drawer moves to that bead, and this closes.
+//
+// Escape is taken in the capture phase and stopped there, ahead of App.vue's
+// document handler, so one press closes this and not the drawer under it.
+
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { X } from "@lucide/vue";
+import type { Bead } from "../store";
+import { GEOMETRY } from "../subgraph";
+import BeadSubGraph from "./BeadSubGraph.vue";
+
+const props = defineProps<{
+  epic: Bead;
+  beads: Bead[];
+  childCount: number;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  select: [id: string];
+}>();
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key !== "Escape") return;
+  e.preventDefault();
+  e.stopImmediatePropagation();
+  emit("close");
+}
+
+// How many isolated children fit side by side in the room we have. The
+// drawer lists them in one column because it scrolls vertically for free;
+// here the width is the whole window, and forty unconnected children as a
+// forty-row column would leave most of it empty.
+const bodyEl = ref<HTMLElement | null>(null);
+const bodyWidth = ref(0);
+let observer: ResizeObserver | null = null;
+const isolatedColumns = computed(() =>
+  Math.max(
+    1,
+    Math.floor(
+      (bodyWidth.value + GEOMETRY.colGap) / (GEOMETRY.nodeW + GEOMETRY.colGap),
+    ),
+  ),
+);
+
+onMounted(() => {
+  document.addEventListener("keydown", onKeydown, true);
+  if (bodyEl.value) {
+    bodyWidth.value = bodyEl.value.clientWidth;
+    observer = new ResizeObserver((entries) => {
+      bodyWidth.value = entries[0]?.contentRect.width ?? 0;
+    });
+    observer.observe(bodyEl.value);
+  }
+});
+onUnmounted(() => {
+  document.removeEventListener("keydown", onKeydown, true);
+  observer?.disconnect();
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      class="subgraph-overlay"
+      role="dialog"
+      aria-modal="true"
+      :aria-label="`${props.epic.id} — all children`"
+      @click.self="emit('close')"
+    >
+      <div class="subgraph-overlay-panel">
+        <header class="subgraph-overlay-head">
+          <code class="id">{{ props.epic.id }}</code>
+          <span class="title">{{ props.epic.title }}</span>
+          <span class="hint">
+            all {{ props.childCount }} children · blocks edges between them
+          </span>
+          <button
+            class="close"
+            type="button"
+            title="Close (Esc)"
+            aria-label="Close"
+            @click="emit('close')"
+          >
+            <X class="icon" />
+          </button>
+        </header>
+        <div ref="bodyEl" class="subgraph-overlay-body">
+          <BeadSubGraph
+            :root-bead="props.epic"
+            :beads="props.beads"
+            mode="children"
+            :isolated-columns="isolatedColumns"
+            @select="(id) => emit('select', id)"
+          />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style>
+/* Above the drawer (500), below the search palette (1000): the palette is
+   summoned from anywhere and should still land on top. */
+.subgraph-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 900;
+  background: var(--c-scrim);
+  padding: 24px;
+  display: flex;
+}
+
+.subgraph-overlay-panel {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--c-panel);
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-pop);
+  color: var(--c-text);
+  font-size: 12px;
+  overflow: hidden;
+}
+
+.subgraph-overlay-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--c-border);
+}
+
+.subgraph-overlay-head .id {
+  color: var(--c-accent);
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.subgraph-overlay-head .title {
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.subgraph-overlay-head .hint {
+  color: var(--c-dim);
+  white-space: nowrap;
+}
+
+.subgraph-overlay-head .close {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  padding: 4px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--c-dim);
+  cursor: pointer;
+}
+
+.subgraph-overlay-head .close:hover {
+  background: var(--c-dim-wash);
+  color: var(--c-text);
+}
+
+.subgraph-overlay-head .close .icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* The graph scrolls inside the panel; the panel itself never does. Padding
+   sits on the scroller so the edges of a wide graph are not flush with the
+   border when scrolled to either end. */
+.subgraph-overlay-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 8px 14px;
+}
+</style>