Directed graph visualisation

[Quafadas]

@copilot Can you help with this?

Implementation Plan: Static DAG Rendering with ELK (Java) + Sprotty (HTML)

Goal

Render a simple, static directed acyclic graph (DAG) in the browser using Sprotty for visualization and ELK for layout.
• Layout is computed offline in Java using ELK.
• The browser only renders pre-positioned nodes and edges.
• Nodes may contain tabular content rendered as SVG.
• No client-side layout, no interactivity beyond pan/zoom.

Java (backend / build step)
  ├─ Construct DAG model
  ├─ Compute layout using ELK (Java)
  ├─ Export Sprotty-compatible JSON
  ↓
HTML (static page)
  ├─ Load JSON (inline or external)
  ├─ Initialize Sprotty
  ├─ Render graph

⸻

Scope & Assumptions
• Graph is static (no runtime updates).
• Node sizes are known or computable upfront.
• DAG only (no cycles, no complex edge cases).
• Browser rendering only (no server interaction).
• SVG rendering preferred over HTML embedding.

⸻

Backend (Java) Responsibilities

1. Graph Model Definition

Define a Java model representing:
• Nodes (id, label, optional table data)
• Edges (source → target)

Example node types:
• Simple node (label only)
• Table node (rows × columns)

⸻

2. Node Size Computation

Before running ELK, compute exact node dimensions.

For table nodes:
• Fixed row height (e.g. 20px)
• Fixed or computed column widths
• Width = sum(column widths)
• Height = rows × row height

This step is critical because ELK requires node sizes before layout.

⸻

3. ELK Graph Construction

Using org.eclipse.elk.graph:
• Create an ElkNode root
• Add child ElkNodes for each graph node
• Add ElkEdges for each DAG edge
• Assign width/height to each node
• Set layout options, e.g.:
• Algorithm: layered
• Direction: DOWN or RIGHT
• Spacing options as needed

⸻

4. Run Layout

Execute layout using ELK’s Java engine:
• RecursiveGraphLayoutEngine
• After layout:
• Each node has x, y, width, height
• Optionally, edges have routing / bend points

⸻

5. Export to JSON (Sprotty Model)

Convert ELK output into a Sprotty-compatible JSON model.

Each node should include:
• id
• type (e.g. "simpleNode", "tableNode")
• bounds (x, y, width, height)
• Custom data (e.g. table rows)

Each edge should include:
• id
• type
• sourceId
• targetId
• (Optional) routing points

Output options:
• Inline JSON embedded into HTML
• Or separate graph.json file

⸻

Frontend (HTML + Sprotty) Responsibilities

6. Static HTML Setup

Create a static HTML page that:
• Loads Sprotty dependencies
• Loads the generated graph JSON
• Initializes a Sprotty viewer

No ELK or layout code is required in the browser.

⸻

7. Sprotty Model Configuration

Define:
• Custom node types
• Corresponding views
• Basic edge rendering

Minimal configuration only — no GLSP, no client-side layout engine.

⸻

8. Custom Node Rendering (Table Nodes)

Recommended approach: SVG-based rendering
Implement a custom Sprotty View that renders:
• Outer rectangle
• Horizontal grid lines per row
• Vertical grid lines per column
• Text centered within cells

The view should:
• Use only SVG primitives (, , , )
• Respect the bounds supplied in JSON
• Not perform any layout logic

This ensures:
• Predictable sizing
• Perfect alignment with ELK layout
• Zoom/pan compatibility

Avoid unless rich HTML is explicitly required.

⸻

9. Edge Rendering

Initially:
• Render straight-line edges between node centers or anchors

Optionally:
• Use ELK-provided bend points for nicer routing

⸻

Non-Goals (Explicitly Out of Scope)
• Runtime graph updates
• Client-side ELK layout
• Interactive editing
• Dynamic node resizing
• Complex edge routing heuristics

⸻

Deliverables
1. Java module:
• DAG model
• ELK layout execution
• JSON export
2. Static assets:
• HTML page
• JavaScript Sprotty setup
• Custom node views (including table node)
3. Example output:
• One rendered static DAG demonstrating table nodes

In order to make life easier, here's the module we want to import in the html template.

<script type="module"> import sprotty from 'https://cdn.jsdelivr.net/npm/sprotty@1.4.0/+esm' </script>

And here's the elk dependancies we'll need to add to the core java project.

  mvn"org.eclipse.elk:org.eclipse.elk.core:0.11.0",
  mvn"org.eclipse.elk:org.eclipse.elk.alg.layered:0.11.0"

1. The starting point is going to be to add a ChartLibrary enum in core/src/viz/ChartLibrary.scala.
2. This should result in a bunch of compile errors, in particular with the PlotTargets. the goal would be to work those through. In the first instance the goal is to get to "something" that works. Leave ??? behind where you get stuck and write up those locations. Ask if there isn't enough clarity here to finish the task.
3. For now, generate a very simple digraph of elk JSON using named tuples and circe to encode the JSON. We'll look into proper integration with the JSON classes later. The goal o this PR is to be able to render a simple digraph.