[
https://issues.apache.org/jira/browse/CAMEL-23636?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Federico Mariani updated CAMEL-23636:
-------------------------------------
Priority: Minor (was: Major)
> 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
> Priority: Minor
>
> 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)
