@medicine-wheel/app 0.17.6 → 0.17.7

package/components/episode-lineage-web.tsx

@@ -4,18 +4,16 @@
  * The chronicle as a lineage: every episode on a spine read left to right, in
  * its direction's band, with the relations between episodes drawn as arcs.
  *
- * Miadi's chronicle opens on this picture (`LineageWeb`), and it answers what a
- * list cannot: which episodes carry a thread forward, which stand alone, where
- * the work keeps returning. The wheel already holds every relation it draws.
- *
- * Tap an episode to see its relations and the words that say why each holds;
- * tap it again, or its name, to open it. Touch first — a phone has no hover.
- * Ref jgwill/medicine-wheel#156.
+ * The web itself is `LineageWeb` from `@medicine-wheel/graph-viz`, the one the
+ * Miadi chronicle draws too (#162). This file adapts the wheel's edges to it
+ * and shows, under it, the selected episode's relations and the words that say
+ * why each holds. A tap selects, a second tap opens. Ref jgwill/medicine-wheel#156.
  */
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { LineageWeb, type LineageWebEdge, type LineageWebLayoutConfig } from "@medicine-wheel/graph-viz";
 import { isContinuation, relationsOf, type LineageEdge } from "@/lib/episode-lineage";
 
 export interface LineageEpisode {
@@ -26,19 +24,14 @@ export interface LineageEpisode {
   date?: string;
 }
 
-const BANDS = ["east", "south", "west", "north"] as const;
-const BAND_ICON: Record<string, string> = { east: "🌅", south: "🔥", west: "🌊", north: "❄️" };
-const BAND_H = 64;
-const TOP = 28;
-const AXIS = 26;
-const STEP = 15;
-const MARGIN_L = 72;
-const MARGIN_R = 24;
-const H = TOP + BAND_H * BANDS.length + AXIS;
+const BAND_LABELS = { east: "🌅 east", south: "🔥 south", west: "🌊 west", north: "❄️ north" };
+// The wheel's page is narrower than the chronicle's: closer bands, less room for arcs.
+const LAYOUT: Partial<LineageWebLayoutConfig> = { headroom: 90, bandGap: 84, footroom: 84, minStep: 15, minWidth: 360 };
 
-function bandOf(direction?: string): number {
-  const at = BANDS.indexOf((direction ?? "") as (typeof BANDS)[number]);
-  return at === -1 ? 1.5 : at;
+/** `E044` from a `chronicle:<date>-episode-044-…` id; the dot's chip shows the name under it. */
+function markOf(id: string): string {
+  const n = /episode-(\d+)/i.exec(id)?.[1];
+  return n ? `E${n.padStart(3, "0")}` : "·";
 }
 
 export function EpisodeLineageWeb({
@@ -50,58 +43,27 @@ export function EpisodeLineageWeb({
   episodes: LineageEpisode[];
   /** Episode↔episode relations only. */
   edges: LineageEdge[];
-  /** When a filter is typed: the episodes it matches. The rest fade. */
+  /** When a filter is typed: the episodes it matches. Their relatives stay, as rings. */
   matches?: Set<string> | null;
 }) {
   const router = useRouter();
-  const scroller = useRef<HTMLDivElement>(null);
   const [selected, setSelected] = useState<string | null>(null);
-  const [hovered, setHovered] = useState<string | null>(null);
-
-  const layout = useMemo(() => {
-    const position = new Map<string, { x: number; y: number }>();
-    episodes.forEach((episode, i) => {
-      const x = MARGIN_L + i * STEP;
-      // A small stagger so neighbours in one band do not sit on one line.
-      const y = TOP + (bandOf(episode.direction) + 0.5) * BAND_H + ((i % 3) - 1) * 13;
-      position.set(episode.id, { x, y });
-    });
-    const width = Math.max(MARGIN_L + (episodes.length - 1) * STEP + MARGIN_R, 360);
-
-    const months: Array<{ x: number; label: string }> = [];
-    let last = "";
-    episodes.forEach((episode, i) => {
-      const month = episode.date?.slice(0, 7) ?? "";
-      if (month && month !== last) {
-        months.push({ x: MARGIN_L + i * STEP, label: month });
-        last = month;
-      }
-    });
-
-    const degree = new Map<string, number>();
-    for (const edge of edges) {
-      degree.set(edge.from_id, (degree.get(edge.from_id) ?? 0) + 1);
-      degree.set(edge.to_id, (degree.get(edge.to_id) ?? 0) + 1);
-    }
-    return { position, width, months, degree };
-  }, [episodes, edges]);
 
-  // The newest episodes are where the work is: open scrolled to the right.
-  useEffect(() => {
-    const el = scroller.current;
-    if (el) el.scrollLeft = el.scrollWidth;
-  }, [layout.width]);
-
-  const focus = hovered ?? selected;
-  const near = useMemo(() => {
-    if (!focus) return null;
-    const set = new Set([focus]);
-    for (const edge of edges) {
-      if (edge.from_id === focus) set.add(edge.to_id);
-      if (edge.to_id === focus) set.add(edge.from_id);
-    }
-    return set;
-  }, [focus, edges]);
+  const webEpisodes = useMemo(
+    () => episodes.map((e) => ({ id: e.id, label: markOf(e.id), title: e.name, direction: e.direction, date: e.date })),
+    [episodes],
+  );
+  const webEdges = useMemo<LineageWebEdge[]>(
+    () =>
+      edges.map((edge) => ({
+        id: edge.id,
+        from: edge.from_id,
+        to: edge.to_id,
+        kind: isContinuation(edge) ? "continuation" : "relation",
+        words: edge.description,
+      })),
+    [edges],
+  );
 
   const byId = useMemo(() => new Map(episodes.map((e) => [e.id, e])), [episodes]);
   const chosen = selected ? byId.get(selected) : undefined;
@@ -110,103 +72,20 @@ export function EpisodeLineageWeb({
     [selected, edges],
   );
 
-  function open(id: string) {
-    router.push(`/episodes/${encodeURIComponent(id)}`);
-  }
-
-  function tap(id: string) {
-    if (selected === id) open(id);
-    else setSelected(id);
-  }
-
-  const faded = (id: string) =>
-    (near !== null && !near.has(id)) || (matches != null && !matches.has(id));
-
   return (
     <div className="space-y-3">
-      <div ref={scroller} className="overflow-x-auto border rounded-lg bg-card">
-        <svg
-          width={layout.width}
-          height={H}
-          viewBox={`0 0 ${layout.width} ${H}`}
-          role="img"
-          aria-label={`${episodes.length} episodes in chronicle order, with ${edges.length} relations between them`}
-          onClick={(event) => {
-            if (event.target === event.currentTarget) setSelected(null);
-          }}
-        >
-          {BANDS.map((band, i) => (
-            <g key={band}>
-              <line
-                x1={0}
-                x2={layout.width}
-                y1={TOP + (i + 1) * BAND_H}
-                y2={TOP + (i + 1) * BAND_H}
-                stroke="var(--mw-border)"
-                strokeWidth={1}
-                opacity={0.5}
-              />
-              <text x={8} y={TOP + i * BAND_H + 16} fontSize={11} fill="var(--mw-muted)">
-                {BAND_ICON[band]} {band}
-              </text>
-            </g>
-          ))}
-
-          {layout.months.map((m) => (
-            <text key={m.label} x={m.x} y={H - 8} fontSize={10} fill="var(--mw-muted)">
-              {m.label}
-            </text>
-          ))}
-
-          {edges.map((edge) => {
-            const a = layout.position.get(edge.from_id);
-            const b = layout.position.get(edge.to_id);
-            if (!a || !b) return null;
-            const lit = focus !== null && (edge.from_id === focus || edge.to_id === focus);
-            const lift = Math.min(110, Math.abs(b.x - a.x) * 0.3) + 18;
-            const top = Math.max(6, Math.min(a.y, b.y) - lift);
-            const continuation = isContinuation(edge);
-            return (
-              <path
-                key={edge.id}
-                d={`M ${a.x} ${a.y} Q ${(a.x + b.x) / 2} ${top} ${b.x} ${b.y}`}
-                fill="none"
-                stroke={lit ? "var(--mw-primary)" : "var(--mw-muted)"}
-                strokeWidth={lit ? 2 : 1}
-                strokeDasharray={continuation ? undefined : "3 3"}
-                opacity={lit ? 1 : focus ? 0.12 : continuation ? 0.55 : 0.3}
-              />
-            );
-          })}
-
-          {episodes.map((episode) => {
-            const p = layout.position.get(episode.id)!;
-            const related = (layout.degree.get(episode.id) ?? 0) > 0;
-            const isSelected = episode.id === selected;
-            return (
-              <g
-                key={episode.id}
-                onClick={() => tap(episode.id)}
-                onMouseEnter={() => setHovered(episode.id)}
-                onMouseLeave={() => setHovered(null)}
-                style={{ cursor: "pointer" }}
-                opacity={faded(episode.id) ? 0.2 : 1}
-              >
-                <title>{episode.name}</title>
-                {/* A target a finger can hit, larger than the dot it holds. */}
-                <circle cx={p.x} cy={p.y} r={9} fill="transparent" />
-                <circle
-                  cx={p.x}
-                  cy={p.y}
-                  r={related ? 4.5 : 3}
-                  fill={`var(--mw-${episode.direction ?? "west"}-ink, var(--mw-muted))`}
-                  stroke={isSelected ? "var(--mw-primary)" : "none"}
-                  strokeWidth={isSelected ? 2.5 : 0}
-                />
-              </g>
-            );
-          })}
-        </svg>
+      <div className="border rounded-lg bg-card p-2">
+        <LineageWeb
+          episodes={webEpisodes}
+          edges={webEdges}
+          selected={selected}
+          onSelect={setSelected}
+          onOpen={(id) => router.push(`/episodes/${encodeURIComponent(id)}`)}
+          matches={matches}
+          layout={LAYOUT}
+          bandLabels={BAND_LABELS}
+          startAt="end"
+        />
       </div>
 
       {chosen ? (
@@ -237,9 +116,10 @@ export function EpisodeLineageWeb({
         </div>
       ) : (
         <p className="text-xs text-muted-foreground">
-          Each dot is an episode, oldest on the left, in its direction&apos;s band. Solid arcs carry
-          a thread forward (continues from); dashed arcs relate two episodes. Tap a dot to see why
-          they are related; tap it again to open it.
+          Each dot is an episode, oldest on the left, in its direction&apos;s band. Solid arcs above carry
+          a thread forward (continues from); dashed arcs below relate two episodes. Tap a dot to see why
+          they are related; tap it again to open it. A filter keeps what it found and, as rings, the
+          episodes related to it.
         </p>
       )}
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medicine-wheel/app",
-  "version": "0.17.6",
+  "version": "0.17.7",
   "description": "Medicine Wheel — Interactive visual layer for Indigenous relational research with Four Directions, ceremonies, and narrative arcs",
   "bin": {
     "mw": "dist/cli/mw.js",
@@ -91,32 +91,32 @@
     "release:major": "npm run version:major && npm run publish:all && npm run release:commit"
   },
   "dependencies": {
-    "@medicine-wheel/ceremonial-diary": "^0.17.6",
-    "@medicine-wheel/ceremony-protocol": "^0.17.6",
-    "@medicine-wheel/community-identity": "^0.17.6",
-    "@medicine-wheel/community-review": "^0.17.6",
-    "@medicine-wheel/consent-lifecycle": "^0.17.6",
-    "@medicine-wheel/creative-orientation": "^0.17.6",
-    "@medicine-wheel/data-store": "^0.17.6",
-    "@medicine-wheel/data-store-postgres": "^0.17.6",
-    "@medicine-wheel/fire-keeper": "^0.17.6",
-    "@medicine-wheel/github-ceremony": "^0.17.6",
-    "@medicine-wheel/graph-viz": "^0.17.6",
-    "@medicine-wheel/honcho": "^0.17.6",
-    "@medicine-wheel/importance-unit": "^0.17.6",
-    "@medicine-wheel/mcp": "^4.17.6",
-    "@medicine-wheel/memory": "^0.17.6",
-    "@medicine-wheel/narrative-cluster": "^0.17.6",
-    "@medicine-wheel/narrative-engine": "^0.17.6",
-    "@medicine-wheel/ontology-core": "^0.17.6",
-    "@medicine-wheel/perception-layer": "^0.17.6",
-    "@medicine-wheel/prompt-decomposition": "^0.17.6",
-    "@medicine-wheel/relational-index": "^0.17.6",
-    "@medicine-wheel/relational-query": "^0.17.6",
-    "@medicine-wheel/session-reader": "^0.17.6",
-    "@medicine-wheel/storage-provider": "^0.17.6",
-    "@medicine-wheel/transformation-tracker": "^0.17.6",
-    "@medicine-wheel/ui-components": "^0.17.6",
+    "@medicine-wheel/ceremonial-diary": "^0.17.7",
+    "@medicine-wheel/ceremony-protocol": "^0.17.7",
+    "@medicine-wheel/community-identity": "^0.17.7",
+    "@medicine-wheel/community-review": "^0.17.7",
+    "@medicine-wheel/consent-lifecycle": "^0.17.7",
+    "@medicine-wheel/creative-orientation": "^0.17.7",
+    "@medicine-wheel/data-store": "^0.17.7",
+    "@medicine-wheel/data-store-postgres": "^0.17.7",
+    "@medicine-wheel/fire-keeper": "^0.17.7",
+    "@medicine-wheel/github-ceremony": "^0.17.7",
+    "@medicine-wheel/graph-viz": "^0.17.7",
+    "@medicine-wheel/honcho": "^0.17.7",
+    "@medicine-wheel/importance-unit": "^0.17.7",
+    "@medicine-wheel/mcp": "^4.17.7",
+    "@medicine-wheel/memory": "^0.17.7",
+    "@medicine-wheel/narrative-cluster": "^0.17.7",
+    "@medicine-wheel/narrative-engine": "^0.17.7",
+    "@medicine-wheel/ontology-core": "^0.17.7",
+    "@medicine-wheel/perception-layer": "^0.17.7",
+    "@medicine-wheel/prompt-decomposition": "^0.17.7",
+    "@medicine-wheel/relational-index": "^0.17.7",
+    "@medicine-wheel/relational-query": "^0.17.7",
+    "@medicine-wheel/session-reader": "^0.17.7",
+    "@medicine-wheel/storage-provider": "^0.17.7",
+    "@medicine-wheel/transformation-tracker": "^0.17.7",
+    "@medicine-wheel/ui-components": "^0.17.7",
     "@miadi/episode-vessel": "^0.2.1",
     "@neondatabase/serverless": "^0.10.0",
     "@xyflow/react": "^12.3.0",