[
https://issues.apache.org/jira/browse/CAMEL-23636?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Federico Mariani updated CAMEL-23636:
-------------------------------------
Description:
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.
h4. 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"
refresh="5000">
</camel-route-diagram>
{code}
h4. Styling
The component is theme-agnostic. It respects {{prefers-color-scheme}} for
automatic dark/light mode and exposes CSS custom properties for full control by
the host application
h4. Configuration attributes
||Attribute||Description||Default||
|{{src}}|URL to fetch route-structure JSON from|(required)|
|{{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)
was:
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)
> 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.
> h4. 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"
> refresh="5000">
> </camel-route-diagram>
> {code}
> h4. Styling
> The component is theme-agnostic. It respects {{prefers-color-scheme}} for
> automatic dark/light mode and exposes CSS custom properties for full control
> by the host application
> h4. Configuration attributes
> ||Attribute||Description||Default||
> |{{src}}|URL to fetch route-structure JSON from|(required)|
> |{{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)
