Skip to content

Improve XSD visual layout and styling#85

Merged
rg4444 merged 1 commit into
mainfrom
codex/improve-xsd-visual-rendering-aesthetics
Feb 5, 2026
Merged

Improve XSD visual layout and styling#85
rg4444 merged 1 commit into
mainfrom
codex/improve-xsd-visual-rendering-aesthetics

Conversation

@rg4444
Copy link
Copy Markdown
Contributor

@rg4444 rg4444 commented Feb 5, 2026

Motivation

  • Improve the XSD diagram so it reads left→right (root left) with cleaner orthogonal routing and spacing to avoid cramped/incorrect edge elbows.
  • Make node visuals more UI-friendly by using card-style nodes with a header, icon, and a visible attributes summary to resemble XMLSpy-like readability.
  • Surface element/type attributes from the XSD so they can be displayed in the node cards.

Description

  • Add AttributeDecl and GraphPoint types and extend ElementDecl, ComplexType, and GraphEdge to carry parsed attributes and routed points (web_src/js/features/xsdvisual/types.ts).
  • Parse <xs:attribute> declarations with helpers getAttr and parseAttributes and attach attributes to inline complex types and element declarations (web_src/js/features/xsdvisual/parse.ts).
  • Switch Dagre layout to left-to-right and increase spacing (rankdir: 'LR', nodesep, ranksep, marginx, marginy), increase NODE_HEIGHT, and attach routed points from the Dagre edge layout into GraphEdge.points using edge keys (web_src/js/features/xsdvisual/graph.ts).
  • Render edges from routed Dagre points as polylines with improved stroke, rounded joins/caps, and marker coloring, and place labels at the routed midpoint (web_src/js/features/xsdvisual/render.ts).
  • Render nodes as “cards” with a header strip, divider, icon, title alignment, and rows including type, base, occurs, and a truncated attributes summary; add an SVG drop-shadow filter and adjust node sizing (web_src/js/features/xsdvisual/render.ts).
  • Increase diagram canvas size to 70vh for better fit (web_src/js/features/xsdvisual/ui.ts).
  • Append XSD-specific CSS tokens and card styling to the repo file-view stylesheet to produce a clean, professional look (web_src/css/repo/file-view.css).

Testing

  • Performed local code edits and added the changeset, then committed with the message Improve XSD visual layout and styling (commit succeeded).
  • Attempted an automated Playwright screenshot run (mcp__browser_tools__run_playwright_script) to capture the updated renderer, but it failed to load the local dev server with net::ERR_EMPTY_RESPONSE, so no runtime screenshot was produced.
  • No unit or integration tests were executed as part of this change (none run).

Codex Task

@rg4444 rg4444 merged commit 090f903 into main Feb 5, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant