From 5fc7bbee34ef40e12d1292ab73abf95d359a17be Mon Sep 17 00:00:00 2001 From: stroblme Date: Mon, 17 Aug 2026 08:33:27 +0200 Subject: [PATCH] Home: widen the brain layout, fix its entrance, add a clear button to pinned charts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The force layout settled roughly square, so in a wide band the graph sat as a small island. Vertical centring now pulls nearly three times as hard as horizontal and the seed sits on an ellipse, which settles at about 2.2:1 without stretching the circles or the edges. The graph also slid in on load: the rebuild fit ran with a 300ms duration, so React Flow animated the pan from its default viewport to the content. The fit is instant now, and the canvas grows in from the centre with `scaleIn` once it has a layout. The pinned chart header said "Esc clears", which a phone cannot act on. It carries the same "× Clear" button as the list header instead; Escape still works. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_017MeiWk3Yq12n2pTvnQWYvt --- frontend/src/components/Flow/BrainView.tsx | 95 +++++++++++-------- .../src/components/Health/HealthActivity.tsx | 42 +++++--- 2 files changed, 86 insertions(+), 51 deletions(-) diff --git a/frontend/src/components/Flow/BrainView.tsx b/frontend/src/components/Flow/BrainView.tsx index 8f3d8c6..7250e9d 100644 --- a/frontend/src/components/Flow/BrainView.tsx +++ b/frontend/src/components/Flow/BrainView.tsx @@ -17,9 +17,11 @@ import { forceY, type SimulationNodeDatum, } from "d3-force" +import { motion } from "motion/react" import { useEffect, useMemo } from "react" import type { BrainGraph } from "@/client" +import { scaleIn } from "@/lib/motion" import { BrainEdge } from "./BrainEdge" import { BrainNode, type BrainNodeData } from "./BrainNode" import "./flow.css" @@ -46,8 +48,8 @@ type Placed = SimulationNodeDatum & { id: string; size: number; room: number } * * A live simulation would keep nudging nodes under the pointer while someone is * panning, and a graph that never stops moving is unreadable. Starting from a - * circle rather than d3's own random phyllotaxis also means the same flows lay - * out the same way twice. + * fixed ellipse rather than d3's own random phyllotaxis also means the same + * flows lay out the same way twice. * * `forceX`/`forceY` rather than `forceCenter`: centering only translates the * whole thing, so unconnected flows — which is most of them — would push each @@ -68,8 +70,12 @@ function build(graph: BrainGraph): { nodes: Node[]; edges: Edge[] } { id: node.id, size, room: size / 2 + LABEL_ROOM, - x: Math.cos(angle) * radius, - y: Math.sin(angle) * radius, + // An ellipse, not a circle: the band across Home is far wider than it is + // tall, so the layout is meant to come out that way too. Seeding the + // shape it should settle into beats making the forces below fight a + // circle into one. + x: Math.cos(angle) * radius * 1.8, + y: Math.sin(angle) * radius * 0.55, } }) const links = (graph.edges ?? []).map((edge) => ({ @@ -89,8 +95,13 @@ function build(graph: BrainGraph): { nodes: Node[]; edges: Edge[] } { "collide", forceCollide((node) => node.room), ) - .force("x", forceX(0).strength(0.06)) - .force("y", forceY(0).strength(0.06)) + // Centring pulls nearly three times as hard vertically as horizontally, so + // the graph compresses into a band roughly twice as wide as it is tall + // instead of the square an even pull settles into. Coming out of the + // simulation rather than out of a transform keeps the circles round and the + // edges the length the link force asked for. + .force("x", forceX(0).strength(0.05)) + .force("y", forceY(0).strength(0.14)) .stop() .tick(300) @@ -144,40 +155,50 @@ function BrainCanvas() { useEffect(() => { if (!shape) return // After the new nodes have been measured, or the fit is of the old ones. - const frame = requestAnimationFrame(() => - fitView({ ...FIT, duration: 300 }), - ) + // Instant, never animated: an animated fit travels from React Flow's + // default viewport to the content, which on first load is the whole graph + // visibly sliding in from the corner. + const frame = requestAnimationFrame(() => fitView(FIT)) return () => cancelAnimationFrame(frame) }, [shape, fitView]) return ( - { - const [flow] = (node.data as BrainNodeData).flows - if (flow) - navigate({ to: "/flows/$flowName", params: { flowName: flow } }) - }} - className="brain-flat h-full w-full" - /> + // Held back until there is a layout, so the graph grows in from the centre + // of the band it is already fitted to rather than appearing mid-pan. + + { + const [flow] = (node.data as BrainNodeData).flows + if (flow) + navigate({ to: "/flows/$flowName", params: { flowName: flow } }) + }} + className="brain-flat h-full w-full" + /> + ) } @@ -191,7 +212,7 @@ function BrainCanvas() { */ export function BrainView() { return ( -
+
diff --git a/frontend/src/components/Health/HealthActivity.tsx b/frontend/src/components/Health/HealthActivity.tsx index eb9f33d..695f2e5 100644 --- a/frontend/src/components/Health/HealthActivity.tsx +++ b/frontend/src/components/Health/HealthActivity.tsx @@ -59,6 +59,28 @@ function useMoment() { type Moment = ReturnType +/** + * The way out of a held moment, on both the chart that set it and the list it + * drives — the same control in both places, because it is the same action. + * + * A control rather than the Escape hint it replaces on the chart: a phone has + * no Escape key. The shortcut still works, it is just no longer the only way. + */ +function ClearPin({ moment }: { moment: Moment }) { + return ( + + ) +} + /** One chart, and the moment it hands to its list. */ function Chart({ title, @@ -81,9 +103,11 @@ function Chart({ >

{title}

- - {moment.pinned !== null ? "Esc clears" : "click to pin"} - + {moment.pinned !== null ? ( + + ) : ( + click to pin + )}
) : null} - {moment.pinned !== null ? ( - - ) : null} + {moment.pinned !== null ? : null}
) }