GovOPlaN/govoplan-dataflow
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dataflow canvas and side panel layout

Browse Source
This commit is contained in:
Albrecht Degering
2026-07-28 15:47:15 +02:00
parent 08ddc8d3e8
commit 61dcfc7a52
3 changed files with 28 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
webui/scripts/test-dataflow-page-structure.mjs
View File

@@ -3,6 +3,7 @@ import { readFileSync } from "node:fs";
const page = readFileSync(new URL("../src/features/dataflow/DataflowPage.tsx", import.meta.url), "utf8"); const page = readFileSync(new URL("../src/features/dataflow/DataflowPage.tsx", import.meta.url), "utf8");
const canvas = readFileSync(new URL("../src/features/dataflow/DataflowCanvas.tsx", import.meta.url), "utf8"); const canvas = readFileSync(new URL("../src/features/dataflow/DataflowCanvas.tsx", import.meta.url), "utf8");
const css = readFileSync(new URL("../src/styles/dataflow.css", import.meta.url), "utf8"); const css = readFileSync(new URL("../src/styles/dataflow.css", import.meta.url), "utf8");
const moduleEntry = readFileSync(new URL("../src/module.ts", import.meta.url), "utf8");
const checks = [ const checks = [
[page.includes("<DataflowCanvas"), "graph canvas"], [page.includes("<DataflowCanvas"), "graph canvas"],
@@ -13,8 +14,21 @@ const checks = [
[canvas.includes("application/x-govoplan-dataflow-node"), "palette drop handling"], [canvas.includes("application/x-govoplan-dataflow-node"), "palette drop handling"],
[canvas.includes("isValidConnection"), "edge validation"], [canvas.includes("isValidConnection"), "edge validation"],
[canvas.includes("connectionRadius={32}"), "visible connection drop radius"], [canvas.includes("connectionRadius={32}"), "visible connection drop radius"],
[
moduleEntry.indexOf("@xyflow/react/dist/style.css") <
moduleEntry.indexOf("./styles/dataflow.css"),
"XyFlow base styles before GovOPlaN overrides"
],
[css.includes("height: calc(100vh - 115px)"), "full-height workspace"], [css.includes("height: calc(100vh - 115px)"), "full-height workspace"],
[css.includes(".dataflow-preview-table-wrap"), "bounded preview scrolling"] [css.includes(".dataflow-preview-table-wrap"), "bounded preview scrolling"],
[
/\.dataflow-palette-items\s*\{[^}]*grid-auto-rows:\s*max-content;[^}]*overflow-y:\s*auto;/s.test(css),
"bounded palette scrolling"
],
[
/\.dataflow-inspector-fields\s*\{[^}]*grid-auto-rows:\s*max-content;[^}]*overflow-y:\s*auto;/s.test(css),
"bounded inspector scrolling"
]
]; ];
const missing = checks.filter(([present]) => !present).map(([, label]) => label); const missing = checks.filter(([present]) => !present).map(([, label]) => label);

2
webui/src/module.ts
View File

@@ -1,7 +1,7 @@
import { createElement, lazy } from "react"; import { createElement, lazy } from "react";
import type { PlatformWebModule } from "@govoplan/core-webui"; import type { PlatformWebModule } from "@govoplan/core-webui";
import "./styles/dataflow.css";
import "@xyflow/react/dist/style.css"; import "@xyflow/react/dist/style.css";
import "./styles/dataflow.css";
const DataflowPage = lazy(() => import("./features/dataflow/DataflowPage")); const DataflowPage = lazy(() => import("./features/dataflow/DataflowPage"));

14
webui/src/styles/dataflow.css
View File

@@ -418,14 +418,20 @@
.dataflow-palette-items { .dataflow-palette-items {
display: grid; display: grid;
grid-auto-rows: max-content;
align-content: start;
gap: 4px; gap: 4px;
height: calc(100% - 44px); height: calc(100% - 44px);
padding: 8px; padding: 8px;
overflow: auto; overflow-x: hidden;
overflow-y: auto;
scrollbar-gutter: stable;
} }
.dataflow-palette-group { .dataflow-palette-group {
display: grid; display: grid;
grid-auto-rows: max-content;
align-content: start;
gap: 2px; gap: 2px;
} }
@@ -682,10 +688,14 @@
.dataflow-inspector-fields { .dataflow-inspector-fields {
display: grid; display: grid;
grid-auto-rows: max-content;
align-content: start;
gap: 12px; gap: 12px;
height: calc(100% - 44px); height: calc(100% - 44px);
overflow: auto; overflow-x: hidden;
overflow-y: auto;
padding: 12px; padding: 12px;
scrollbar-gutter: stable;
} }
.dataflow-inspector-fields .form-field { .dataflow-inspector-fields .form-field {