[Feature] Build the graphical node editor and SQL workbench #5

New Issue

2026-07-28T00:58:08+02:00

zemion commented

2026-07-28 00:58:08 +02:00

Parent: #1

Scope

Build a full-height Dataflow workspace with pipeline selection, a node palette, draggable canvas, connectable typed edges, node inspector, SQL editor, validation panel, and preview table. Graphical and SQL modes operate on the same canonical definition and make lossy conversion explicit.

Acceptance Criteria

Users can drag transforms onto the canvas, connect them, reposition them, select them, edit configuration, and delete them.
A visible connection preview/drop target makes edge creation clear.
SQL mode validates and compiles without losing the last saved graph on failure.
Save, discard, preview, loading, empty, error, conflict, and unsaved states are complete.
Keyboard access, focus handling, responsive sizing, and non-overlapping full-height layout are verified.
WebUI structure tests and a production TypeScript build pass.

Parent: https://git.add-ideas.de/GovOPlaN/govoplan-dataflow/issues/1 ## Scope Build a full-height Dataflow workspace with pipeline selection, a node palette, draggable canvas, connectable typed edges, node inspector, SQL editor, validation panel, and preview table. Graphical and SQL modes operate on the same canonical definition and make lossy conversion explicit. ## Acceptance Criteria - [x] Users can drag transforms onto the canvas, connect them, reposition them, select them, edit configuration, and delete them. - [x] A visible connection preview/drop target makes edge creation clear. - [x] SQL mode validates and compiles without losing the last saved graph on failure. - [x] Save, discard, preview, loading, empty, error, conflict, and unsaved states are complete. - [ ] Keyboard access, focus handling, responsive sizing, and non-overlapping full-height layout are verified. - [x] WebUI structure tests and a production TypeScript build pass.

zemion added the module/dataflow area/webui codex/ready

labels 2026-07-28 00:58:08 +02:00

zemion commented

2026-07-28 01:32:19 +02:00

Codex State: progress

Summary

Implemented the full-height Dataflow workspace with pipeline selection, drag/drop node palette, connectable React Flow canvas, node inspector, SQL workbench, validation, bounded preview, conflict handling, save/discard/delete, and result diagnostics.

Changed Files

webui/src/features/dataflow
webui/src/api/dataflow.ts
webui/src/styles/dataflow.css

Verification

WebUI structure test, standalone TypeScript typecheck, Dataflow-only production build, and full-product build pass.

Next / Blocked

Run browser-level interaction, keyboard/focus, and responsive visual checks before closing this package.

Suggested status label: status/in-progress

## Codex State: progress ### Summary - Implemented the full-height Dataflow workspace with pipeline selection, drag/drop node palette, connectable React Flow canvas, node inspector, SQL workbench, validation, bounded preview, conflict handling, save/discard/delete, and result diagnostics. ### Changed Files - `webui/src/features/dataflow` - `webui/src/api/dataflow.ts` - `webui/src/styles/dataflow.css` ### Verification - `WebUI structure test, standalone TypeScript typecheck, Dataflow-only production build, and full-product build pass.` ### Next / Blocked - Run browser-level interaction, keyboard/focus, and responsive visual checks before closing this package. Suggested status label: `status/in-progress`

zemion referenced this issue

2026-07-28 01:32:40 +02:00

[Epic] Deliver a governed Dataflow manager with graphical and SQL editing #1

zemion referenced this issue

2026-07-28 11:18:40 +02:00

[Epic] Deliver a governed Dataflow manager with graphical and SQL editing #1

zemion commented

2026-07-28 11:18:40 +02:00

Codex State: progress

Summary

The full-height editor now consumes the backend catalogue and groups reusable nodes under Load, Combine, Filter, Transform, and Output.
Typed/multi-input ports, join-side handles, cycle/fan-in checks, connector source selection, JSON/CSV import, node-specific inspectors, and preview lineage summaries are implemented.
TypeScript, structure tests, Dataflow-only builds, and full-product builds pass.

Verification

python -m unittest discover -s govoplan-connectors/tests (7 passed)
python -m unittest discover -s govoplan-dataflow/tests (24 passed)
tools/checks/check-contracts.sh (45 contracts passed)
tools/checks/check-focused.sh (core, module, API, and WebUI checks passed)
Composed JSON/CSV snapshot and connector-backed preview probe passed.

Next / Blocked

Keep open for focused keyboard/focus testing and desktop/mobile interaction screenshots against a running app.

## Codex State: progress ### Summary - The full-height editor now consumes the backend catalogue and groups reusable nodes under Load, Combine, Filter, Transform, and Output. - Typed/multi-input ports, join-side handles, cycle/fan-in checks, connector source selection, JSON/CSV import, node-specific inspectors, and preview lineage summaries are implemented. - TypeScript, structure tests, Dataflow-only builds, and full-product builds pass. ### Verification - `python -m unittest discover -s govoplan-connectors/tests` (7 passed) - `python -m unittest discover -s govoplan-dataflow/tests` (24 passed) - `tools/checks/check-contracts.sh` (45 contracts passed) - `tools/checks/check-focused.sh` (core, module, API, and WebUI checks passed) - Composed JSON/CSV snapshot and connector-backed preview probe passed. ### Next / Blocked - Keep open for focused keyboard/focus testing and desktop/mobile interaction screenshots against a running app.

zemion commented

2026-07-31 15:23:53 +02:00

Close-out audit, 2026-07-31

Functional editor scope is implemented. Dataflow's 67 backend tests, WebUI structure test, TypeScript typecheck, and the full linked production build pass.

The only remaining acceptance item is browser-level verification of keyboard/focus behavior and non-overlapping responsive/full-height layout. A bounded Playwright matrix over desktop, compact desktop, tablet, and mobile, including keyboard node selection/deletion and focus restoration, should be enough to close this issue.

## Close-out audit, 2026-07-31 Functional editor scope is implemented. Dataflow's 67 backend tests, WebUI structure test, TypeScript typecheck, and the full linked production build pass. The only remaining acceptance item is browser-level verification of keyboard/focus behavior and non-overlapping responsive/full-height layout. A bounded Playwright matrix over desktop, compact desktop, tablet, and mobile, including keyboard node selection/deletion and focus restoration, should be enough to close this issue.

zemion commented

2026-07-31 17:20:02 +02:00

Codex State: complete

Completed the bounded browser matrix and fixed the defects it exposed in commit 8724591.

Matrix: Chromium at 1440x900, 1024x768, 768x1024, and 390x844.

Verified at every viewport:

keyboard focus selects graph nodes;
Delete removes the focused node and focus moves to the next node (canvas fallback when empty);
palette nodes can be added with Enter;
Definition settings returns focus to its opener after Escape;
the document and Dataflow page remain within the viewport;
pipeline/workspace regions do not overlap and the graph surface remains non-collapsed;
no page or console errors occur.

The run found and fixed post-delete focus loss plus a stale mobile header offset/over-wrapped toolbar. Desktop and mobile screenshots were inspected after the passing run. Dataflow's 68 backend tests, typecheck, structure test, and linked production build also pass.

All acceptance criteria are complete.

## Codex State: complete Completed the bounded browser matrix and fixed the defects it exposed in commit `8724591`. Matrix: Chromium at 1440x900, 1024x768, 768x1024, and 390x844. Verified at every viewport: - keyboard focus selects graph nodes; - Delete removes the focused node and focus moves to the next node (canvas fallback when empty); - palette nodes can be added with Enter; - Definition settings returns focus to its opener after Escape; - the document and Dataflow page remain within the viewport; - pipeline/workspace regions do not overlap and the graph surface remains non-collapsed; - no page or console errors occur. The run found and fixed post-delete focus loss plus a stale mobile header offset/over-wrapped toolbar. Desktop and mobile screenshots were inspected after the passing run. Dataflow's 68 backend tests, typecheck, structure test, and linked production build also pass. All acceptance criteria are complete.

zemion closed this issue

2026-07-31 17:20:03 +02:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: GovOPlaN/govoplan-dataflow#5