Federico Mariani created CAMEL-23636:
----------------------------------------
Summary: Add embeddable web component to camel-diagram for
interactive route visualization
Key: CAMEL-23636
URL: https://issues.apache.org/jira/browse/CAMEL-23636
Project: Camel
Issue Type: New Feature
Components: camel-diagram
Affects Versions: 4.20.0
Reporter: Federico Mariani
The {{camel-diagram}} module currently renders route diagrams as server-side
PNG images (via AWT Graphics2D) or ASCII/Unicode art. Consumers like Web UI
developer consoles, IDE extensions, and web-based tools receive a static image
with no interactivity, no hover tooltips, no click-to-inspect nodes, no smooth
metric updates. Each consumer that wants a richer experience must re-implement
the layout algorithm and rendering client-side.
h3. Proposed Solution
Ship a lightweight [Lit|https://lit.dev/]-based web component ({{}}) inside the
{{camel-diagram}} JAR, bundled under {{META-INF/resources/camel/diagram/}}. Any
application with {{camel-diagram}} on the classpath serves the component as a
static resource automatically (standard {{META-INF/resources/}} mechanism).
The component consumes the existing {{route-structure}} dev console JSON output
(with {{metric=true}}), no new server-side format is needed. It handles layout
computation, SVG rendering, and periodic refresh internally. The consumer just
points it at their endpoint:
{code:html}
<camel-route-diagram
src="/api/camel/routes/structure"
theme="light"
refresh="5000">
</camel-route-diagram>
{code}
h4. Configuration attributes
||Attribute||Description||Default||
|{{src}}|URL to fetch route-structure JSON from|(required)|
|{{theme}}|Visual theme ({{light}}, {{dark}})|{{light}}|
|{{refresh}}|Polling interval in ms ({{0}} = disabled)|{{0}}|
|{{filter}}|Route ID filter (appended as query param)|(all routes)|
h4. Architecture
The web component implements its own layout algorithm (~150 lines), porting the
tree-building and position-assignment logic from {{RouteDiagramLayoutEngine}}.
The existing PNG and ASCII/Unicode renderers remain unchanged.
h3. Implementation Notes
- Component source in {{components/camel-diagram/src/main/frontend/}}
- Built with {{frontend-maven-plugin}} into a single JS bundle
- Lit adds ~5 KB
- The existing {{route-structure}} JSON provides all needed data: node types
and levels (for tree building and color coding), code/description (for labels),
and per-node statistics (for metric overlays)
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
