CAMEL-23636: camel-diagram - fix diagram text overflow, dark-theme contrast, add smoke pages

[ammachado]

Description

Improves the text rendering and theming of the camel-diagram dev-console web components (camel-route-diagram and camel-topology-diagram) and refreshes their local smoke-test pages.

Rendering fixes (production component JS):

• Replace fixed character-count truncation with canvas measureText width-aware fitText, so long node labels trim to a clean ellipsis instead of overflowing the box. Applies to both camel-route-diagram.js and camel-topology-diagram.js.
• camel-topology-diagram: reserve horizontal space for the metric badge so the green/red exchange counters no longer overlap the label, and add a native SVG <title> tooltip that reveals the full label and underlying URI when the text is trimmed.
• Fix dark-theme node-box contrast in camel-topology-diagram by introducing a --ctd-node-bg custom property that the @media (prefers-color-scheme: dark) query flips together with the text color. Previously the node <rect> read --ctd-bg directly, which never flipped, producing light text on a white box. This mirrors the existing --crd-node-bg pattern already used by camel-route-diagram.

Test resources (manual smoke pages, not part of CI):

• Add smoke-test-topology.html, a verification page for camel-topology-diagram with five examples (route pipeline, external endpoints, interlinked shared endpoint, live metrics, and theme variants) drawn from the topology unit tests and the route-topology blog scenario.
• Rename smoke-test.html to smoke-test-route.html for naming consistency with the new topology page.
• Add a Light / Dark / OS header theme switch (defaulting to OS) to both smoke pages so each section can be checked in either theme without changing OS settings.
• Update integration-test.html navigation links to point at the renamed and new pages.

The change is limited to static JS resources and HTML test pages; no Java sources or auto-generated artifacts are affected.

Target

• I checked that the commit is targeting the correct branch (Camel 4 uses the main branch)

Tracking

• If this is a large change, bug fix, or code improvement, I checked there is a JIRA issue filed for the change (usually before you start working on it).

Apache Camel coding standards and style

• I checked that each commit in the pull request has a meaningful subject line and body.
• I have run mvn clean install -DskipTests locally from root folder and I have committed all auto-generated changes.

AI-assisted contributions

• If this PR includes AI-generated code, commits have proper co-authorship attribution (e.g., Co-authored-by trailers) and the PR description identifies the AI tool used.

---

Claude Code on behalf of Adriano Machado

[github-actions]

🌟 Thank you for your contribution to the Apache Camel project! 🌟
🤖 CI automation will test this PR automatically.

🐫 Apache Camel Committers, please review the following items:

• First-time contributors require MANUAL approval for the GitHub Actions to run
• You can use the command /component-test (camel-)component-name1 (camel-)component-name2.. to request a test from the test bot although they are normally detected and executed by CI.
• You can label PRs using skip-tests and test-dependents to fine-tune the checks executed by this PR.
• Build and test logs are available in the summary page. Only Apache Camel committers have access to the summary.

⚠️ Be careful when sharing logs. Review their contents before sharing them publicly.

[github-actions]

🧪 CI tested the following changed modules:

• components/camel-diagram

All tested modules (8 modules)

• Camel :: Diagram
• Camel :: JBang :: MCP
• Camel :: JBang :: Plugin :: Route Parser
• Camel :: JBang :: Plugin :: TUI
• Camel :: JBang :: Plugin :: Validate
• Camel :: Launcher :: Container
• Camel :: YAML DSL :: Validator
• Camel :: YAML DSL :: Validator Maven Plugin

---

⚙️ View full build and test results

[davsclaus]

Nice work on the text-overflow fix and dark-theme contrast — the fitText approach with canvas measureText is a solid improvement over the fixed character-count truncation, and the graceful fallback for environments without a canvas context is a good touch.

One minor documentation gap: the new --ctd-node-bg CSS custom property is correctly introduced in the JS and mentioned in the JSDoc, but it's missing from the Topology Diagram Theming section in diagram.adoc. The analogous --crd-node-bg is documented in the Route Diagram Theming section — adding --ctd-node-bg to the topology section would keep them consistent.

Everything else looks clean — CI passes, the esc() escaping is correct for the new <title> tooltips, the smoke-test rename is fully propagated, and the tests follow the existing pattern.

This review does not replace specialized AI review tools (CodeRabbit, Sourcery) or static analysis (SonarCloud).

This review was generated by an AI agent and may contain inaccuracies. Please verify all suggestions before applying.

[davsclaus]

The new --ctd-node-bg CSS custom property (introduced in the JS to fix the dark-theme contrast bug) is missing from this theming reference. The Route Diagram Theming section above documents the analogous --crd-node-bg. Consider adding it here for consistency:

Suggested change

	----
	camel-topology-diagram {
	--ctd-bg: #ffffff; /* canvas background */
	--ctd-node-bg: #ffffff; /* node box fill, auto-inverts in dark mode */
	--ctd-fg: #1e293b; /* text colour */
	--ctd-edge: #94a3b8; /* edge/arrow colour */
	--ctd-stat: #64748b; /* metric overlay text */
	--ctd-font: system-ui; /* font family */
	--ctd-font-size: 12px; /* base font size */
	--ctd-color-route: #6366f1; /* route nodes */
	--ctd-color-trigger: #f59e0b; /* trigger/timer routes */
	--ctd-color-external-in: #6b7280; /* external input endpoints */
	--ctd-color-external-out: #6b7280; /* external output endpoints */
	--ctd-color-external-shared: #8b5cf6; /* shared external endpoints */
	}