diff --git a/app/src/pages/SystemMap.tsx b/app/src/pages/SystemMap.tsx index 3613a68..d748896 100644 --- a/app/src/pages/SystemMap.tsx +++ b/app/src/pages/SystemMap.tsx @@ -24,8 +24,8 @@ import { LayoutGrid, Loader2, Lock, + Maximize2, Minus, - MoreVertical, Package, Plus, RotateCw, @@ -119,7 +119,7 @@ function savePositions(p: PosMap): void { // realized from — a future click target for the program/info panel) and the main // deployment body. The right handle is a connection *source* (drag it to an // exposure target); the others exist only to anchor pre-built edges. -function MapNode({ id, data }: NodeProps) { +function MapNode({ data }: NodeProps) { const d = data as { label: string kind: string @@ -128,9 +128,9 @@ function MapNode({ id, data }: NodeProps) { exposable?: boolean program?: string | null reach?: string | null + launchUrl?: string focusDim?: boolean focused?: boolean - onMenu?: (x: number, y: number, name: string, kind: string) => void onProgram?: (program: string) => void } const color = KIND_COLOR[d.kind] ?? "#8b949e" @@ -145,17 +145,18 @@ function MapNode({ id, data }: NodeProps) { boxShadow: d.focused ? `0 0 0 2px ${color}` : undefined, }} > - + {d.launchUrl && ( + e.stopPropagation()} + > + + + )} {d.program ? ( - ) - })} - - - ) -} - function Legend() { const items = [ { c: PROTO_COLOR.http, label: "consumes — http" }, @@ -1363,6 +1322,7 @@ function Legend() { // (with protocol/external chips) and consumed-by, each removable/navigable. function InspectPanel({ info, + actions, onClose, onOpen, onUnlink, @@ -1372,11 +1332,13 @@ function InspectPanel({ kind: string remote: boolean node: string | null + launchUrl?: string provides: string[] capsConsumes: string[] consumes: Consume[] consumedBy: Dependent[] } + actions: MenuItem[] onClose: () => void onOpen: (name: string, kind: string, node: string | null) => void onUnlink: (ref: string) => void @@ -1395,14 +1357,48 @@ function InspectPanel({ {info.kind} -
+ {actions.length > 0 && ( + +
+ {actions.map((a) => { + const Icon = a.icon + return ( + + ) + })} +
+
+ )} {(info.provides.length > 0 || info.capsConsumes.length > 0) && ( {info.provides.map((t) => (