From 75c26ef00098ea10967c10eea4ef5adf4b4d08e2 Mon Sep 17 00:00:00 2001 From: stroblme Date: Sun, 16 Aug 2026 15:51:54 +0200 Subject: [PATCH] Say what caused a value, and draw what is not a node MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Moving a dashboard slider lit up an edge between two nodes that had done nothing. The canvas pulsed on the message's timestamp alone, and a message has no idea who published it — so it credited whichever node happened to be drawn as a producer. That was never only about dashboards. Two nodes producing one message pulsed both their edges whichever fired, and a message produced in another flow changed with nothing on screen to account for it at all. Values now carry their cause: a node, a dashboard widget, another flow, an agent or an API caller. An edge pulses only for the producer that actually published, and the edge inspector says where a value came from when it did not come from a node. What is not a node in this flow is now drawn as one — a label rather than a card, because a dashboard with twenty tiles would otherwise bury the logic the canvas exists to show. That covers cross-flow wiring too, which is the link in/out affordance that has been missing. They are never part of the document. They join at render, after everything that reads or writes the canvas nodes, so an autosave, an undo or a delete cannot reach them — with a Playwright test that drags a node and asserts the stored flow still holds exactly what it did. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_011LF61rxW1FG5YCD2J9YqjY --- NOTEPAD.md | 19 +- ROADMAP.md | 4 + backend/app/api/routes/flows.py | 59 +++++++ backend/app/api/routes/messages.py | 17 +- backend/app/flow/controller.py | 40 ++++- backend/app/flow/dashboards.py | 38 ++++ backend/app/flow/pipeline.py | 38 +++- backend/app/main.py | 1 + backend/tests/flow/test_provenance.py | 154 ++++++++++++++++ frontend/scripts/verify-endpoints.mjs | 82 +++++++++ frontend/src/client/schemas.gen.ts | 75 ++++++++ frontend/src/client/types.gen.ts | 22 +++ .../components/Dashboard/DashboardEditor.tsx | 3 +- .../components/Dashboard/DashboardView.tsx | 6 +- frontend/src/components/Dashboard/queries.ts | 35 +++- frontend/src/components/Dashboard/widgets.tsx | 45 +++-- .../src/components/Flow/EdgeInspector.tsx | 9 + frontend/src/components/Flow/EndpointNode.tsx | 66 +++++++ frontend/src/components/Flow/FlowEditor.tsx | 67 ++++++- frontend/src/components/Flow/LiveEdge.tsx | 12 +- frontend/src/components/Flow/deriveEdges.ts | 8 +- frontend/src/components/Flow/endpoints.ts | 164 ++++++++++++++++++ frontend/src/components/Flow/liveStore.ts | 13 +- frontend/src/components/Flow/useFlowSocket.ts | 11 +- frontend/tests/endpoints.spec.ts | 126 ++++++++++++++ 25 files changed, 1072 insertions(+), 42 deletions(-) create mode 100644 backend/tests/flow/test_provenance.py create mode 100644 frontend/scripts/verify-endpoints.mjs create mode 100644 frontend/src/components/Flow/EndpointNode.tsx create mode 100644 frontend/src/components/Flow/endpoints.ts create mode 100644 frontend/tests/endpoints.spec.ts diff --git a/NOTEPAD.md b/NOTEPAD.md index 15f5794..f925d5c 100644 --- a/NOTEPAD.md +++ b/NOTEPAD.md @@ -8,9 +8,19 @@ Deferring because out of scope is fine, but don't mention deferring than. ## Open +- FEAT/UX: unify the layout between dashboard and flows: 1) In the flows: adapt the "overview" from the dashboard; clicking flows in the sidebar leads to a searchable overview of flows like in the dashboard. Then the "flowbar" get's merged into the bottom toolbar (status and edit button; add flow button goes in the overview) with the name of the current flow still being displayed at the top for reference. 2) adopt the floating bottom toolbar from the flow viewport and the click widget to edit behavior (make sure inputs like sliders and buttons stay interactable). Also adapt the new flow-title (sync UI) and the new edit button in the toolbar to trigger a panel for renaming the flow (and more later). The same floating right panel as in the flows should also be the way to go to edit a widget. Then in the toolbar should be a "View" button which opens the dashboard in a new browser tab (renders without the sidebar or any edit option) with a link to be used in a wallpanel later +- FEAT/UI: allow resizing of dashboard widgets by dragging edges and add the same dotted background we see in the flows viewport (again, sync UI (see above)) +- FEAT/UI: add a graph widget to the dashboard +- BUG/UI: strictly type a dashboard widget; i.e. wiring a boolean switch to a float message (or wiring no publish/consume at all) should flag the node as error -> reuse error indicator from the flows +- FEAt/UX: allow setting a grid size for the dashboard to adjust to different wallpanel sizes (goes into the new dashboard panel setting; see above) +- FEAT/UX: allow copy-pasting of nodes (also between flows) +- FEAT/UX: introduce general keyboard shortcut system. As a first test: when hitting ctrl-s we should catch this keyboard shortcut to a) publish a flow b) save (and apply) code changes when in the code editor +- FEAT/UX: in delay and schedule nodes: help creating cron schedules by providing a legend; Also: if interval is entered, this should automatically create a cron according to the interval set +- FEAT/UX: python function should automatically update according to what the node consumes or produces +- BUG/UI: there are two places to rename a flow; we should only go for the one in the top of the panel name (so that the UX is identical to the ones from the nodes). The actual rename should happen with dedicated "confirm" button (same for the nodes) - BUG/UI: when the edges pulse on message, they change their color (go from slightly darker back to normal) at the end again. Double check that after the animation they end up with the same color as before to not have this double-pulse effect -- BUG/UI: enlarge the icon in the sidebar slightly - BUG/UI: clicking outside the panel does not discard the flow edit panel +- FEAT/UX: for the same type of node show suggestions in the setting fields based on other nodes; I.e. if I create an mqtt node and I already configured one in another flow, allow selecting the values of the exiting mqtt node as a drop-down option (identical to consumables) when clicking inside the corresponding field in the new node (same for all other nodes) - BUG/UI: the graph showed in the node edit panel should also be shown for a specific edge inside the pop-up panel when clicking the edge - FEAT/FLOW: single-stepping a paused flow. The work queue it needed now exists: pausing parks claimed items per flow and resuming drains them, so a step button is a matter of @@ -96,6 +106,13 @@ Deferring because out of scope is fine, but don't mention deferring than. mode bits hold a value outside the known set. Faithful to the reference decoder, but "off" would read better. +- FEAT/UI: an endpoint's edge routes straight across the graph, so it can pass behind a + node that sits between the lane and the node it wires to. Readable, but a routed edge + would be tidier. +- FEAT/UI: endpoints are always shown. A flow read by a twenty-tile wall panel gets twenty + labels, and only the input ones affect the graph — dimming or collapsing consumers is + the obvious next move if it turns out busy. + ## Blocked - FEAT/UI: a "Bug" icon on the node error bubble opening the logs panel at that node's diff --git a/ROADMAP.md b/ROADMAP.md index ff8bb02..d549fee 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -135,6 +135,10 @@ React + Vite, primarily desktop but usable on mobile. See `docs/architecture/str - [x] Tab-style view of atomic flows, with a floating dock - [x] Embedded code editor (Monaco) for node source - [x] Live values on the edges, with the last payload and its time on click +- [x] Provenance: every value says what caused it, so an edge pulses for the producer + that actually published rather than every producer of that message. A dashboard + control, another flow or an API caller is drawn as a label on the canvas instead + of being invisible — which also gives cross-flow wiring the link in/out it lacked - [x] Validation shown on the node it belongs to, and summarised in the dock - [x] Publish control and draft markers in the flow bar, discard in the flow panel, and a conflict dialog when another client got there first diff --git a/backend/app/api/routes/flows.py b/backend/app/api/routes/flows.py index 0fba903..e17fb34 100644 --- a/backend/app/api/routes/flows.py +++ b/backend/app/api/routes/flows.py @@ -17,6 +17,7 @@ from sqlmodel import Session from app.api.deps import FlowControllerDep, get_current_user, user_from_token from app.core.db import engine from app.flow.controller import FlowController +from app.flow.dashboards import DashboardStore from app.flow.events import event_bus from app.flow.messages import qualify from app.flow.pipeline import ValidationIssue @@ -52,6 +53,27 @@ router = APIRouter( ws_router = APIRouter(prefix="/flows", tags=["flows"]) +class Endpoint(BaseModel): + """Something wired into this flow that is not a node in it. + + A dashboard control setting one of its messages, a tile showing one, or a + node in another flow on the far side of a dotted name. The canvas draws + these so a value never appears to come from nowhere — or worse, appears to + come from whichever node happens to be drawn as a producer. + """ + + #: dashboard or flow. + kind: str + #: Stable within its kind, and used as the canvas node id. + id: str + label: str + #: What sort of widget, or the node type in the other flow. + detail: str = "" + #: Messages of this flow it publishes, and ones it reads. + provides: list[str] = [] + requires: list[str] = [] + + class FlowDetail(BaseModel): """A flow plus how it is currently doing. @@ -66,6 +88,8 @@ class FlowDetail(BaseModel): has_draft: bool = False enabled: bool = True paused: bool = False + #: Dashboards and other flows wired into this one. + endpoints: list[Endpoint] = [] class ValidationResult(BaseModel): @@ -92,12 +116,45 @@ class TriggerRequest(BaseModel): values: dict[str, Any] = {} +def _endpoints(controller: FlowController, flow: str) -> list[Endpoint]: + """Everything wired into ``flow`` from outside it.""" + found: list[Endpoint] = [] + + dashboards: DashboardStore | None = getattr(controller, "dashboards", None) + if dashboards is not None: + for binding in dashboards.bindings_for(flow): + found.append( + Endpoint( + kind="dashboard", + id=f"dashboard:{binding['dashboard']}:{binding['widget']}", + label=binding["title"], + detail=binding["type"], + provides=[binding["provides"]] if binding["provides"] else [], + requires=binding["requires"], + ) + ) + + for other, node_id, provides, requires in controller.cross_flow_nodes(flow): + found.append( + Endpoint( + kind="flow", + id=f"flow:{other}.{node_id}", + label=f"{other}.{node_id}", + detail="flow", + provides=provides, + requires=requires, + ) + ) + return found + + def _detail(controller: FlowController, definition: FlowDef) -> FlowDetail: name = definition.name running = { "enabled": controller.is_enabled(name), "paused": controller.is_paused(name), } + endpoints = _endpoints(controller, name) if controller.store.has_draft(name): # Report the draft the editor is showing, not the version running # underneath it — otherwise a node the author just broke looks fine. @@ -107,12 +164,14 @@ def _detail(controller: FlowController, definition: FlowDef) -> FlowDetail: nodes=preview.nodes, issues=preview.issues, has_draft=True, + endpoints=endpoints, **running, ) return FlowDetail( definition=definition, nodes=controller.node_statuses(name), issues=controller.flow_issues(name), + endpoints=endpoints, **running, ) diff --git a/backend/app/api/routes/messages.py b/backend/app/api/routes/messages.py index a506631..b9a6ba2 100644 --- a/backend/app/api/routes/messages.py +++ b/backend/app/api/routes/messages.py @@ -14,6 +14,7 @@ from pydantic import BaseModel from app.api.deps import FlowControllerDep, get_current_user from app.flow.messages import flow_of +from app.flow.pipeline import ValueSource from app.flow.state import as_number router = APIRouter( @@ -43,6 +44,12 @@ class MessagesPublic(BaseModel): class PublishRequest(BaseModel): value: Any + #: Where this came from, so the canvas can show it arriving from outside + #: rather than crediting whichever node is drawn as a producer. + source_kind: str = "api" + source_id: str = "" + source_label: str = "" + source_detail: str = "" class MessageValue(BaseModel): @@ -73,8 +80,16 @@ async def publish_message( Only a message some flow declares can be published to: flows own the namespace, and a dashboard is a client of it rather than a second author. """ + source = ValueSource( + kind=body.source_kind, + id=body.source_id, + label=body.source_label or body.source_id or "API", + detail=body.source_detail, + ) try: - await run_in_threadpool(controller.publish_message, name, body.value) + await run_in_threadpool( + controller.publish_message, name, body.value, source + ) except KeyError: raise HTTPException( status_code=404, detail=f"No flow declares a message named '{name}'" diff --git a/backend/app/flow/controller.py b/backend/app/flow/controller.py index e513b6e..4c162b7 100644 --- a/backend/app/flow/controller.py +++ b/backend/app/flow/controller.py @@ -43,7 +43,7 @@ from app.flow.nodes import ( SwitchNode, TriggerNode, ) -from app.flow.pipeline import Pipeline, ValidationIssue +from app.flow.pipeline import Pipeline, ValidationIssue, ValueSource from app.flow.schemas import ( FlowDef, Health, @@ -276,6 +276,9 @@ class FlowController: # Without one, every trigger runs inline where it was raised. self.execution = execution self.alerts = alerts + # Set by the lifespan once the store exists; the canvas asks the + # controller which dashboards are wired into a flow. + self.dashboards: Any = None self.pipeline: Pipeline | None = None self.loaded: dict[str, LoadedNode] = {} @@ -648,7 +651,38 @@ class FlowController: ) return infos - def publish_message(self, name: str, value: Any) -> None: + def cross_flow_nodes( + self, flow: str + ) -> list[tuple[str, str, list[str], list[str]]]: + """Nodes in other flows on the far side of a dotted message name. + + Returns ``(flow, node id, messages of `flow` it provides, ones it + requires)``. This is what link-in and link-out mean: the wiring is + already real — the canvas simply had no way to draw the other end. + """ + prefix = f"{flow}." + found = [] + for other in self.store.read_all(): + if other.name == flow: + continue + for node in other.nodes: + provides = sorted( + qualify(other.name, spec.name) + for spec in _bound(node.provides) + if qualify(other.name, spec.name).startswith(prefix) + ) + requires = sorted( + qualify(other.name, spec.name) + for spec in _bound(node.requires) + if qualify(other.name, spec.name).startswith(prefix) + ) + if provides or requires: + found.append((other.name, node.id, provides, requires)) + return found + + def publish_message( + self, name: str, value: Any, source: ValueSource | None = None + ) -> None: """Put a value into the graph from outside. Blocking. Refuses a name no flow declares: the flows own the namespace, and a @@ -672,7 +706,7 @@ class FlowController: # The same check a node's output gets; a dashboard is not looser. spec.check(value) - self.pipeline.publish({name: value}) + self.pipeline.publish({name: value}, source) def queue_stats(self) -> dict[str, Any]: return self.execution.stats() if self.execution is not None else {} diff --git a/backend/app/flow/dashboards.py b/backend/app/flow/dashboards.py index cdd3af9..0d5595b 100644 --- a/backend/app/flow/dashboards.py +++ b/backend/app/flow/dashboards.py @@ -28,6 +28,10 @@ DASHBOARD_DIR = "_dashboards" #: A chart cannot ask for an unbounded series; this is the ceiling. HISTORY_CAP = 5000 +#: Resolved out here on purpose: the store has a ``list`` method, which +#: shadows the builtin for any annotation written inside the class. +Bindings = list[dict[str, Any]] + WidgetType = Literal[ # Display "stat", @@ -263,6 +267,40 @@ class DashboardStore: self.flows._commit(f"Rename dashboard '{name}' to '{new_name}'") return renamed + def bindings_for(self, flow: str) -> Bindings: + """Every widget bound to a message of ``flow``. + + What the canvas draws as an endpoint: a control that sets one of this + flow's messages, or a tile that shows one. Without this a dashboard is + an invisible participant — a value changes and nothing on the canvas + accounts for it. + """ + prefix = f"{flow}." + found: Bindings = [] + for path in sorted(self.root.glob("*/dashboard.json")): + try: + defn = DashboardDef.model_validate_json(path.read_text()) + except Exception: + continue + for widget in defn.widgets: + # A control produces the message; a tile consumes it. + produces = widget.target if widget.target.startswith(prefix) else "" + consumes = [m for m in widget.messages if m.startswith(prefix)] + if not produces and not consumes: + continue + found.append( + { + "dashboard": defn.name, + "dashboard_title": defn.title or defn.name, + "widget": widget.id, + "title": widget.title or widget.id, + "type": widget.type, + "provides": produces, + "requires": consumes, + } + ) + return found + def history_requirements(self) -> dict[str, int]: """How many points to keep per message, so charts have a past to draw. diff --git a/backend/app/flow/pipeline.py b/backend/app/flow/pipeline.py index 545258b..5460c3a 100644 --- a/backend/app/flow/pipeline.py +++ b/backend/app/flow/pipeline.py @@ -46,6 +46,29 @@ class ValidationIssue(BaseModel): message_name: str | None = None +class ValueSource(BaseModel): + """Who caused a message to take its current value. + + The canvas draws an edge per producer, so without this it pulses every one + of them and claims a node published something it did not. It is also what + lets a value arriving from outside the flow — a dashboard control, another + flow, an agent — be shown at all, since none of those is a node here. + """ + + #: node, dashboard, flow, agent or api. + kind: str = "node" + #: Node id, dashboard name, or whatever identifies the caller. + id: str = "" + #: What to call it on screen. + label: str = "" + #: The widget, for a dashboard. + detail: str = "" + + +def node_source(node: Node) -> ValueSource: + return ValueSource(kind="node", id=node.id, label=node.local_id) + + class Pipeline: """Directed graph of nodes with automatic dependency resolution.""" @@ -495,6 +518,7 @@ class Pipeline: # Append-only, so it needs no lock of its own. state.append_history(result, ts, self.history_limits) self._increment_message_versions(result) + origin = node_source(node) for name, value in result.items(): self._publish( { @@ -503,6 +527,7 @@ class Pipeline: "name": name, "value": value, "ts": ts, + "source": origin.model_dump(), } ) @@ -685,6 +710,7 @@ class Pipeline: state.update({self._timestamp_key(name): ts for name in outputs}) state.append_history(outputs, ts, self.history_limits) self._increment_message_versions(outputs) + origin = node_source(node) for name, value in outputs.items(): self._publish( { @@ -693,6 +719,7 @@ class Pipeline: "name": name, "value": value, "ts": ts, + "source": origin.model_dump(), } ) # An injecting node — an MQTT subscriber, a webhook — publishes @@ -760,16 +787,24 @@ class Pipeline: self.apply_outputs(node, outputs) return self.run_downstream(node) - def publish(self, values: dict[str, Any]) -> None: + def publish( + self, values: dict[str, Any], source: ValueSource | None = None + ) -> None: """Put values into the graph without a node having produced them. This is what a dashboard control does: the value is real, it just came from a person rather than a sensor. Everything consuming those names runs, the same as if a node had published them. + + ``source`` says what did, so the canvas can show the value arriving + from outside instead of blaming whichever node happens to be drawn as + a producer of that message. """ if not values: return + origin = source or ValueSource(kind="api", label="API") + ts = time.time() with self._state.lock(): self._state.update(values) @@ -784,6 +819,7 @@ class Pipeline: "name": name, "value": value, "ts": ts, + "source": origin.model_dump(), } ) diff --git a/backend/app/main.py b/backend/app/main.py index 1c48c19..c34b479 100644 --- a/backend/app/main.py +++ b/backend/app/main.py @@ -86,6 +86,7 @@ async def lifespan(app: FastAPI) -> AsyncIterator[None]: app.state.flow_controller = controller dashboards = DashboardStore(controller.store) app.state.dashboard_store = dashboards + controller.dashboards = dashboards # Charts need a deeper series than the default; tell the engine # before it starts recording. controller.set_history_limits(dashboards.history_requirements()) diff --git a/backend/tests/flow/test_provenance.py b/backend/tests/flow/test_provenance.py new file mode 100644 index 0000000..de22412 --- /dev/null +++ b/backend/tests/flow/test_provenance.py @@ -0,0 +1,154 @@ +"""Who caused a value. + +The canvas draws an edge per producer of a message. Without knowing which one +actually published, it pulses all of them — and when the cause is a dashboard +control or another flow, it pulses a node that did nothing at all. +""" + +from app.flow.dashboards import ( + DashboardDef, + DashboardStore, + PageDef, + SectionDef, + WidgetDef, +) +from app.flow.events import EventBus +from app.flow.messages import DType, MessageSpec +from app.flow.nodes import Node +from app.flow.pipeline import Pipeline, ValueSource +from app.flow.state import MemoryState +from app.flow.store import FlowStore + + +def collect(bus: EventBus) -> list[dict]: + events: list[dict] = [] + bus.publish = events.append # type: ignore[method-assign] + return events + + +def temp_node() -> Node: + node = Node( + f=lambda params: {"temp": 21.0}, + provides=[MessageSpec(name="temp", port="temp", dtype=DType.FLOAT)], + name="sensor", + ) + node.assign_flow("house", "sensor") + return node + + +def test_a_value_a_node_produced_names_that_node(): + bus = EventBus() + events = collect(bus) + node = temp_node() + pipeline = Pipeline(nodes=[node], state=MemoryState(), events=bus) + + pipeline.run() + + published = [e for e in events if e["type"] == "message_value"] + assert published[0]["source"] == { + "kind": "node", + "id": "house.sensor", + "label": "sensor", + "detail": "", + } + + +def test_a_value_a_node_injected_names_that_node(): + """An MQTT message or a webhook arrives this way rather than by executing.""" + bus = EventBus() + events = collect(bus) + node = temp_node() + pipeline = Pipeline(nodes=[node], state=MemoryState(), events=bus) + + pipeline.apply_outputs(node, {"house.temp": 19.0}) + + published = [e for e in events if e["type"] == "message_value"] + assert published[0]["source"]["id"] == "house.sensor" + + +def test_a_value_from_a_dashboard_says_so_rather_than_blaming_a_node(): + """The bug this exists for: a slider must not light up a node's edge.""" + bus = EventBus() + events = collect(bus) + pipeline = Pipeline(nodes=[temp_node()], state=MemoryState(), events=bus) + + pipeline.publish( + {"house.temp": 25.0}, + ValueSource( + kind="dashboard", id="panel", label="Setpoint", detail="slider" + ), + ) + + published = [e for e in events if e["type"] == "message_value"] + assert published[0]["source"]["kind"] == "dashboard" + assert published[0]["source"]["label"] == "Setpoint" + + +def test_a_value_from_nowhere_in_particular_is_still_attributed(): + bus = EventBus() + events = collect(bus) + pipeline = Pipeline(nodes=[temp_node()], state=MemoryState(), events=bus) + + pipeline.publish({"house.temp": 25.0}) + + published = [e for e in events if e["type"] == "message_value"] + assert published[0]["source"]["kind"] == "api" + + +# --------------------------------------------------------------------------- +# What the canvas draws for it +# --------------------------------------------------------------------------- + + +def test_the_widgets_wired_into_a_flow_are_reported(tmp_path): + store = DashboardStore(FlowStore(tmp_path / "flows")) + store.write( + DashboardDef( + name="panel", + title="Panel", + pages=[ + PageDef( + id="main", + sections=[ + SectionDef( + id="main", + widgets=[ + WidgetDef( + id="setpoint", + type="slider", + title="Setpoint", + config={"target": "house.setpoint"}, + ), + WidgetDef( + id="reading", + type="stat", + title="Reading", + config={"message": "house.temp"}, + ), + # Another flow's message: not this flow's business. + WidgetDef( + id="elsewhere", + type="stat", + config={"message": "garage.temp"}, + ), + ], + ) + ], + ) + ], + ) + ) + + bindings = store.bindings_for("house") + + assert [b["widget"] for b in bindings] == ["setpoint", "reading"] + setpoint = bindings[0] + assert setpoint["provides"] == "house.setpoint" + assert setpoint["requires"] == [] + assert bindings[1]["requires"] == ["house.temp"] + + +def test_a_flow_nothing_points_at_has_no_endpoints(tmp_path): + store = DashboardStore(FlowStore(tmp_path / "flows")) + + assert store.bindings_for("house") == [] diff --git a/frontend/scripts/verify-endpoints.mjs b/frontend/scripts/verify-endpoints.mjs new file mode 100644 index 0000000..7e260de --- /dev/null +++ b/frontend/scripts/verify-endpoints.mjs @@ -0,0 +1,82 @@ +/** The reported bug, end to end: move the real slider, watch the canvas. */ +import { mkdir } from "node:fs/promises" +import { chromium } from "@playwright/test" + +const APP_URL = process.env.APP_URL || "http://app.localhost" +const OUT = process.env.SCREENSHOT_DIR || "screenshots" +const browser = await chromium.launch() + +async function login(page) { + await page.goto(`${APP_URL}/login`, { waitUntil: "networkidle" }) + await page.getByTestId("email-input").fill(process.env.FIRST_SUPERUSER) + await page + .getByTestId("password-input") + .fill(process.env.FIRST_SUPERUSER_PASSWORD) + await page.getByRole("button", { name: /log in/i }).click() + await page.waitForURL(`${APP_URL}/`, { timeout: 15000 }) +} + +for (const theme of ["light", "dark"]) { + const dir = `${OUT}/${theme}` + await mkdir(dir, { recursive: true }) + const context = await browser.newContext({ + viewport: { width: 1440, height: 900 }, + colorScheme: theme, + }) + await context.addInitScript((t) => { + localStorage.setItem("fluksio-ui-theme", t) + }, theme) + const page = await context.newPage() + await login(page) + + await page.goto(`${APP_URL}/flows/probe`, { waitUntil: "networkidle" }) + await page.keyboard.press("Escape") + await page.waitForTimeout(2000) + await page.screenshot({ path: `${dir}/endpoints-canvas.png` }) + + if (theme === "light") { + // Watch the canvas while a second tab moves the real slider. + const watch = page.evaluate(async () => { + const seen = new Set() + const scan = () => { + for (const el of document.querySelectorAll(".edge-live")) { + const holder = el.closest("[data-id]") + if (holder) seen.add(holder.getAttribute("data-id")) + } + } + const observer = new MutationObserver(scan) + observer.observe(document.body, { + attributes: true, + subtree: true, + attributeFilter: ["class"], + }) + await new Promise((r) => setTimeout(r, 6000)) + observer.disconnect() + return [...seen] + }) + + const other = await context.newPage() + await other.goto(`${APP_URL}/dashboards/probe`, { + waitUntil: "networkidle", + }) + await other.waitForTimeout(1200) + const slider = other.locator('input[type="range"]').first() + await slider.click() + for (let i = 0; i < 3; i++) { + await slider.press("ArrowRight") + await other.waitForTimeout(700) + } + const pulsed = await watch + console.log( + " edges that pulsed while the slider moved:", + JSON.stringify(pulsed), + ) + await other.close() + await page.waitForTimeout(500) + await page.screenshot({ path: `${dir}/endpoints-after-slider.png` }) + } + + console.log(` ${theme}: done`) + await context.close() +} +await browser.close() diff --git a/frontend/src/client/schemas.gen.ts b/frontend/src/client/schemas.gen.ts index c3da4ee..5a71f31 100644 --- a/frontend/src/client/schemas.gen.ts +++ b/frontend/src/client/schemas.gen.ts @@ -307,6 +307,53 @@ export const DashboardsPublicSchema = { title: 'DashboardsPublic' } as const; +export const EndpointSchema = { + properties: { + kind: { + type: 'string', + title: 'Kind' + }, + id: { + type: 'string', + title: 'Id' + }, + label: { + type: 'string', + title: 'Label' + }, + detail: { + type: 'string', + title: 'Detail', + default: '' + }, + provides: { + items: { + type: 'string' + }, + type: 'array', + title: 'Provides', + default: [] + }, + requires: { + items: { + type: 'string' + }, + type: 'array', + title: 'Requires', + default: [] + } + }, + type: 'object', + required: ['kind', 'id', 'label'], + title: 'Endpoint', + description: `Something wired into this flow that is not a node in it. + +A dashboard control setting one of its messages, a tile showing one, or a +node in another flow on the far side of a dotted name. The canvas draws +these so a value never appears to come from nowhere — or worse, appears to +come from whichever node happens to be drawn as a producer.` +} as const; + export const FlowDef_InputSchema = { properties: { name: { @@ -416,6 +463,14 @@ export const FlowDetailSchema = { type: 'boolean', title: 'Paused', default: false + }, + endpoints: { + items: { + '$ref': '#/components/schemas/Endpoint' + }, + type: 'array', + title: 'Endpoints', + default: [] } }, type: 'object', @@ -1950,6 +2005,26 @@ export const app__api__routes__messages__PublishRequestSchema = { properties: { value: { title: 'Value' + }, + source_kind: { + type: 'string', + title: 'Source Kind', + default: 'api' + }, + source_id: { + type: 'string', + title: 'Source Id', + default: '' + }, + source_label: { + type: 'string', + title: 'Source Label', + default: '' + }, + source_detail: { + type: 'string', + title: 'Source Detail', + default: '' } }, type: 'object', diff --git a/frontend/src/client/types.gen.ts b/frontend/src/client/types.gen.ts index 294493c..db5655e 100644 --- a/frontend/src/client/types.gen.ts +++ b/frontend/src/client/types.gen.ts @@ -29,6 +29,10 @@ export type app__api__routes__messages__MessageValue = { export type app__api__routes__messages__PublishRequest = { value: unknown; + source_kind?: string; + source_id?: string; + source_label?: string; + source_detail?: string; }; /** @@ -115,6 +119,23 @@ export type DashboardSummary = { */ export type DType = 'float' | 'int' | 'str' | 'bool' | 'json'; +/** + * Something wired into this flow that is not a node in it. + * + * A dashboard control setting one of its messages, a tile showing one, or a + * node in another flow on the far side of a dotted name. The canvas draws + * these so a value never appears to come from nowhere — or worse, appears to + * come from whichever node happens to be drawn as a producer. + */ +export type Endpoint = { + kind: string; + id: string; + label: string; + detail?: string; + provides?: Array<(string)>; + requires?: Array<(string)>; +}; + /** * One atomic flow. */ @@ -151,6 +172,7 @@ export type FlowDetail = { has_draft?: boolean; enabled?: boolean; paused?: boolean; + endpoints?: Array; }; /** diff --git a/frontend/src/components/Dashboard/DashboardEditor.tsx b/frontend/src/components/Dashboard/DashboardEditor.tsx index e46cfe5..c976b24 100644 --- a/frontend/src/components/Dashboard/DashboardEditor.tsx +++ b/frontend/src/components/Dashboard/DashboardEditor.tsx @@ -173,6 +173,7 @@ export function DashboardEditor({ ( setSelected(widget.id)} > - + )} diff --git a/frontend/src/components/Dashboard/DashboardView.tsx b/frontend/src/components/Dashboard/DashboardView.tsx index 0964315..0e1fb9f 100644 --- a/frontend/src/components/Dashboard/DashboardView.tsx +++ b/frontend/src/components/Dashboard/DashboardView.tsx @@ -48,10 +48,13 @@ export function widgetStyle(widget: WidgetDef): React.CSSProperties { export function SectionGrid({ section, + dashboard, renderWidget, className, }: { section: SectionDef_Output + /** Which dashboard this is, so an input widget can name itself. */ + dashboard: string renderWidget?: (widget: WidgetDef) => React.ReactNode className?: string }) { @@ -72,7 +75,7 @@ export function SectionGrid({ renderWidget(widget) ) : ( - + )} @@ -122,6 +125,7 @@ export function DashboardView({ ))} diff --git a/frontend/src/components/Dashboard/queries.ts b/frontend/src/components/Dashboard/queries.ts index 3f0c4d0..616ce7e 100644 --- a/frontend/src/components/Dashboard/queries.ts +++ b/frontend/src/components/Dashboard/queries.ts @@ -47,10 +47,39 @@ export function useSaveDashboard(name: string) { }) } -/** What an input widget does: put a value into the graph. */ +/** What an input widget does: put a value into the graph. + * + * The widget names itself so the flow canvas can show the value arriving from + * here, rather than crediting whichever node is drawn as a producer. + */ export function usePublishMessage() { return useMutation({ - mutationFn: ({ name, value }: { name: string; value: unknown }) => - MessagesService.publishMessage({ name, requestBody: { value } }), + mutationFn: ({ + name, + value, + dashboard, + widget, + label, + kind, + }: { + name: string + value: unknown + dashboard?: string + widget?: string + label?: string + kind?: string + }) => + MessagesService.publishMessage({ + name, + requestBody: { + value, + source_kind: "dashboard", + // Matches the endpoint id the canvas builds for this widget. + source_id: + dashboard && widget ? `dashboard:${dashboard}:${widget}` : "", + source_label: label ?? widget ?? "Dashboard", + source_detail: kind ?? "", + }, + }), }) } diff --git a/frontend/src/components/Dashboard/widgets.tsx b/frontend/src/components/Dashboard/widgets.tsx index 9cb6946..86326af 100644 --- a/frontend/src/components/Dashboard/widgets.tsx +++ b/frontend/src/components/Dashboard/widgets.tsx @@ -127,7 +127,7 @@ function Unbound() { // Display // --------------------------------------------------------------------------- -function StatWidget({ widget }: { widget: WidgetDef }) { +function StatWidget({ widget }: WidgetProps) { const cfg = config(widget) const message = text(cfg.message) const live = useLiveValue(message || undefined) @@ -154,7 +154,7 @@ function StatWidget({ widget }: { widget: WidgetDef }) { * The number is always written out as well: a reading that only exists as an * angle is unreadable to anyone who cannot judge one. */ -function GaugeWidget({ widget }: { widget: WidgetDef }) { +function GaugeWidget({ widget }: WidgetProps) { const cfg = config(widget) const message = text(cfg.message) const live = useLiveValue(message || undefined) @@ -229,7 +229,7 @@ function GaugeWidget({ widget }: { widget: WidgetDef }) { * * Enough for the labels and notes a dashboard carries, and not worth a parser. */ -function MarkdownWidget({ widget }: { widget: WidgetDef }) { +function MarkdownWidget({ widget }: WidgetProps) { const content = text(config(widget).content) const lines = content.split("\n") return ( @@ -263,7 +263,7 @@ function MarkdownWidget({ widget }: { widget: WidgetDef }) { // --------------------------------------------------------------------------- /** Publishing, with the value shown as sent until the engine confirms it. */ -function usePublish(widget: WidgetDef) { +function usePublish(widget: WidgetDef, dashboard: string) { const cfg = config(widget) const target = text(cfg.target) const publish = usePublishMessage() @@ -273,15 +273,22 @@ function usePublish(widget: WidgetDef) { live, send: (value: unknown) => { if (!target) return - publish.mutate({ name: target, value }) + publish.mutate({ + name: target, + value, + dashboard, + widget: widget.id, + label: widget.title || widget.id, + kind: widget.type, + }) }, pending: publish.isPending, } } -function ButtonWidget({ widget }: { widget: WidgetDef }) { +function ButtonWidget({ widget, dashboard }: WidgetProps) { const cfg = config(widget) - const { target, send, pending } = usePublish(widget) + const { target, send, pending } = usePublish(widget, dashboard) if (!target) return return (