Skip to content

feat(render-html): Calm group surfaces and lead the viewer sidebar with search - #303

Open
mhiro2 wants to merge 10 commits into
feat/diff-change-kindfrom
feat/viewer-groups-sidebar
Open

mhiro2 wants to merge 10 commits into
feat/diff-change-kindfrom
feat/viewer-groups-sidebar

Conversation

@mhiro2

@mhiro2 mhiro2 commented Oct 10, 2026

Copy link
Copy Markdown
Owner

Summary

  • Draw groups as a faint surface with a small heading, outlining a group only when another group or an outside card overlaps it
  • Rework the HTML viewer sidebar so search and the object list come first, with Filters and Groups as collapsed sections and a hideable sidebar (S)
  • Keep the detail drawer, minimap, and filter bar out of the diagram's way, and use the blue-grey selection color instead of orange accents in the viewer chrome
  • Share the PK / FK / IX badge colors between SVG cards and the drawer's key pills
  • Restore a selected relationship from shared links (r=from(columns)>to(columns)) and give relationship lines one Tab stop with arrow-key navigation
  • Explain change markers and risk labels in the diff legend, and refresh the README viewer preview

Changes

  • cbf7916 : refactor(theme): share the column badge colors between renderers
    • Moves PK / FK / IX badge colors into ThemeColors::badges with an AA contrast test; SVG output is unchanged
  • c45a16f : fix(render-html): color the drawer's key pills like the card badges
    • The drawer's key pills and join table badge use the theme's badge colors instead of the old orange, indigo, and teal tints that failed AA in the light theme
  • 00421d3 : feat(render-svg): draw groups as a faint surface with a small heading
    • Drops the dashed frame, header band, divider, and drop shadow; ambiguous_groups adds a thin solid boundary only where membership would be unclear
    • Shrinks the space above a group's first card from 44px to 34px and moves group dimensions into relune_layout::metrics
  • 8082e11 : feat(render-svg): explain change kinds and risk labels in diff legends
    • When an overlay marks changes, the legend adds the + / − / ~ markers and a sample risk label, sharing the risk pill drawing with the cards
  • 0f2008d : feat(render-html): lead the sidebar with search and objects
    • Search and the object list come first; Filters and Groups are collapsed sections showing active filter and hidden group counts, and the sidebar can be hidden with its button or S
    • The drawer sizes to its content, the minimap steps left of an open drawer, the filter bar shows only while the sidebar is hidden, and hiding a group also hides its surface, label, and minimap rectangles
  • 1a4ecc9 : feat(render-html): keep the selected relationship in shared links
    • Writes the selected relationship to the URL hash by both ends and their columns, restoring it ahead of the table selection
  • 231d41d : feat(render-html): move between relationship lines with arrow keys
    • Relationship lines share one Tab stop that arrow keys, Home, and End move along, skipping lines removed by hidden groups or filters
  • 64f74a2 : docs: describe group surfaces, the reworked viewer sidebar, and diff legends
    • Documents group drawing, the viewer layout, shortcuts, line navigation, URL hash contents, and the diff legend, and re-captures the README viewer preview
  • d90d9f7 : fix(render-html): scroll the sidebar when open sections outgrow it
    • The sidebar and the floating Groups panel scroll as a whole instead of clipping controls, and the shared section styles ship whenever Groups is enabled
  • 81a6b4a : fix(render-html): keep shared relationship links and line focus in step
    • Back navigation to a hash without a selection clears it, relationship keys escape delimiters inside quoted identifiers, and restoring a hidden relationship keeps the Tab stop on a visible line

mhiro2 added 10 commits October 10, 2026 21:37
The PK, FK, and IX badge colors lived as literals in the SVG node
renderer, so the HTML viewer could not reuse them. They now sit in
ThemeColors::badges with an AA contrast test against the card surface;
the SVG output is unchanged.
The detail drawer still drew PK, FK, and IX pills in the old orange,
indigo, and teal tints, which failed AA in the light theme and no
longer matched the cards. The pills and the join table badge now use
the theme's badge colors through CSS variables.
Groups stacked a dashed frame, a header band, a divider, and a drop
shadow, which competed with the cards they hold. A group is now a
plain tinted surface with its label, and gets a thin solid boundary
only when another group or a card outside it overlaps the surface.
Without the band the label needs less room, so the space above a
group's first card shrinks from 44px to 34px; group dimensions moved
to relune_layout::metrics next to the label metrics.
The legend described only the key badges and the nullable marker, so
a diff diagram's + / − / ~ markers and its breaking 1-style labels went
unexplained. When an overlay marks changes, the legend adds the three
change kind markers and a sample risk label, widening the bar to fit;
the risk pill drawing is shared with the card labels.
The explorer sidebar opened with the filter facets and kept groups at
the bottom, so the object list got whatever height was left. Search
and the object list now come first in a narrower sidebar, while
Filters and Groups are collapsed sections that show an active filter
count or hidden group count and remember being opened. The sidebar can
be put away with its button or S, leaving a small Explore button, and
/ or G bring it back. The detail drawer is only as tall as its
content, the minimap drops its header and steps left of an open
drawer, and the floating filter bar appears only while the sidebar is
away. Hiding a group also hides its surface, label, and minimap
rectangles, and the viewer chrome uses the blue-grey selection color
on a plain background instead of orange accents and a top glow.
Only the selected table reached the URL hash, so a link to a
highlighted relationship opened on the plain diagram. The selected
relationship is now written as r=from(columns)>to(columns), which names
both ends rather than an index so it survives unrelated schema
changes, and restoring it takes precedence over the table selection.
Selecting or clearing a relationship emits relation-selected and
relation-cleared events that drive the hash update.
Every relationship line was its own Tab stop, so tabbing past the
diagram meant walking each line of a large schema. The lines now share
one Tab stop that arrow keys, Home, and End move along, skipping lines
a hidden group or filter removed; a described hint tells screen reader
users about the arrow keys, and selecting a relationship elsewhere
moves the Tab stop to its line.
…legends

The CLI reference covers how groups are drawn, the viewer's sidebar,
drawer, and minimap placement, its keyboard shortcuts and relationship
line navigation, what the URL hash records, and the diff legend; the
README and agent skill mention shareable relationship links and the
legend. ARCHITECTURE.md describes the shared badge and group colors,
the group boundary rule, and the viewer changes, and the README viewer
preview is re-captured with a relationship selected.
With Filters and Groups both open on a short window, the sections could
not shrink and the sidebar clipped their lower controls, and a floating
Groups panel without search lost the section styles that scroll a long
group list. The sidebar and the floating panel now scroll as a whole
while the object list keeps its minimum height, and the shared section
styles ship whenever Groups is enabled.
Going back to a history entry without a table or relationship left the
old selection in place, so a later write could bring the stale r= back;
restoring such a hash now clears the selection. Relationship keys
percent-escape the delimiters inside quoted identifiers so a column
named "a,b" no longer shares a key with the composite key (a, b), and
restoring a relationship hidden by a group leaves the Tab stop on a
visible line.
@github-actions

Copy link
Copy Markdown

Code Metrics Report

main (8fa087d) #303 (9076d17) +/-
Coverage 95.7% 96.0% +0.2%
Test Execution Time 2m7s 2m12s +5s
Details
  |                     | main (8fa087d) | #303 (9076d17) |  +/-  |
  |---------------------|----------------|----------------|-------|
+ | Coverage            |          95.7% |          96.0% | +0.2% |
  |   Files             |            106 |            109 |    +3 |
  |   Lines             |          42589 |          43796 | +1207 |
+ |   Covered           |          40798 |          42075 | +1277 |
- | Test Execution Time |           2m7s |          2m12s |   +5s |

Code coverage of files in pull request scope (96.3% → 96.8%, patch 99.5%)

Details
Files Coverage +/- Patch Coverage Status
crates/relune-app/src/usecases/diff.rs 93.3% +4.0% - affected
crates/relune-app/src/usecases/render.rs 97.0% +0.2% - affected
crates/relune-cli/src/cli.rs 87.0% -1.0% - affected
crates/relune-cli/src/commands/diff.rs 95.1% -0.1% - affected
crates/relune-cli/src/commands/mod.rs 100.0% +100.0% - affected
crates/relune-cli/src/commands/render.rs 98.4% -0.1% - affected
crates/relune-cli/src/config.rs 96.6% +0.0% - affected
crates/relune-core/src/config.rs 95.9% +0.0% - affected
crates/relune-core/src/model.rs 99.0% -0.1% - affected
crates/relune-core/src/review.rs 95.5% +0.6% - affected
crates/relune-core/src/review/rules.rs 98.8% -0.2% - affected
crates/relune-layout/src/diagram_export.rs 94.5% +0.0% - affected
crates/relune-layout/src/graph.rs 98.9% +0.0% - affected
crates/relune-layout/src/layout/density.rs 100.0% +100.0% - affected
crates/relune-layout/src/layout/edge_routing.rs 95.5% +0.0% - affected
crates/relune-layout/src/layout/mod.rs 97.4% +0.1% - modified
crates/relune-layout/src/layout/spacing.rs 99.5% +0.0% - affected
crates/relune-layout/src/metrics.rs 98.2% +5.2% - modified
crates/relune-layout/src/overlay.rs 100.0% +0.5% - affected
crates/relune-layout/src/port.rs 97.8% +0.5% - affected
crates/relune-layout/src/route/obstacle.rs 93.6% +1.6% - affected
crates/relune-render-html/src/components.rs 100.0% 0.0% 100.0% modified
crates/relune-render-html/src/css.rs 100.0% 0.0% 100.0% modified
crates/relune-render-html/src/html.rs 99.8% +0.0% 100.0% modified
crates/relune-render-html/src/metadata.rs 100.0% +0.3% - affected
crates/relune-render-svg/src/diff.rs 92.6% +92.6% 94.7% modified
crates/relune-render-svg/src/edge.rs 95.6% -0.2% - affected
crates/relune-render-svg/src/group.rs 99.6% +0.7% 100.0% modified
crates/relune-render-svg/src/legend.rs 96.1% -1.1% 96.7% modified
crates/relune-render-svg/src/lib.rs 98.7% +0.8% 100.0% modified
crates/relune-render-svg/src/node.rs 93.1% -1.7% 100.0% modified
crates/relune-render-theme/src/lib.rs 100.0% 0.0% 100.0% modified
crates/relune-testkit/src/lib.rs 87.4% +0.1% - affected
crates/relune-wasm/src/lib.rs 4.6% -0.1% - affected
crates/relune-wasm/src/request.rs 98.5% +0.0% - affected

Reported by octocov

@github-actions

Copy link
Copy Markdown

Schema review

Tip

✅ No risk findings — schema changes look safe to merge.

@mhiro2
mhiro2 added this pull request to stack #294 October 11, 2026 12:37

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant