Skip to content

fix(embed): scope embed CSS, navbar brand toggle, playback scrubber, and layout guard (v1.5.2)#12

Merged
joaner merged 4 commits into
ioai-tech:mainfrom
joaner:fix/embed-css-navbar-brand
Jun 4, 2026
Merged

fix(embed): scope embed CSS, navbar brand toggle, playback scrubber, and layout guard (v1.5.2)#12
joaner merged 4 commits into
ioai-tech:mainfrom
joaner:fix/embed-css-navbar-brand

Conversation

@joaner
Copy link
Copy Markdown
Contributor

@joaner joaner commented Jun 4, 2026

Description

Release v1.5.2 with embed-host fixes and Plot panel improvements carried from the 1.5.1 line.

Embed / host integration

  • Scope Tailwind preflight to #rosview-root only (preflight: false + scoped base rules) so host apps (e.g. Next.js + Tailwind v4) are not affected by global resets on button, body, etc.
  • Add showNavbarBrand and navbarBrandLabel on RosViewer so hosts can hide the left “ROSView” brand while keeping navbarSourceName for the dataset title.
  • Document embed styling and new props in EMBEDDING.md / EMBEDDING.zh.md.
  • Fix playback scrubber in embedded UIs: progress fill/loaded/hover layers use pointer-events-none so scrubbing works on playback-track; thumb/hover line centered with Tailwind translate utilities under #rosview-root.
  • Only re-run reapplyAutoLayout when preferAutoLayout is true, so a host-provided initialLayout is not overwritten after topics finish loading.

Plot panel

  • Legend visibility, styles, and seek/x-axis alignment fixes (continued from 1.5.1 work).
  • shouldPinPlotXScaleToLogRange and related chart/data pipeline updates.

Motivation / related issue

Embedded consumers (e.g. Limx agent-manager /visualize) reported:

  1. Host app navbar/button styles broken after importing @ioai/rosview/style.css (global preflight leakage).
  2. Dual-navbar layouts need a hidden ROSView brand label for a cleaner chrome.
  3. Playback thumb misaligned and track not draggable in embed mode.
  4. Custom initialLayout replaced by auto 3D/Pose layout once topics loaded when preferAutoLayout was off.

Type of change

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that would cause existing behavior to change)
  • Documentation update
  • Refactor / internal cleanup (no behavior change)

Checklist

  • npm run lint passes with no errors
  • npm test passes (unit tests)
  • npm run build and npm run build:lib succeed
  • New behavior is covered by tests (or explain why tests aren't applicable)
  • Documentation updated (README, API.md, EMBEDDING.md) if the public API changed
  • Breaking change: all affected call sites updated and migration path described in PR description

API compatibility

Additive (non-breaking)

  • RosViewer / RosViewContent / AppShell: showNavbarBrand?: boolean (default true)
  • RosViewer: navbarBrandLabel?: string (optional custom brand text)

Behavior fixes (no export changes)

  • Built CSS: preflight limited to #rosview-root
  • DockviewLayout: auto-layout reapply gated on preferAutoLayout
  • PlaybackBar: pointer hit-testing and thumb positioning via Tailwind classes

Plot panel

  • Internal Plot hooks/helpers; no new symbols in src/entrypoints/index.ts for embed API.

N/A for removed exports.

Screenshots / recordings

joaner added 4 commits June 4, 2026 12:25
Disable global preflight and inject an equivalent reset under #rosview-root
so importing @ioai/rosview/style.css no longer resets host navbar/button styles.
Expose showNavbarBrand and navbarBrandLabel on RosViewer so hosts can hide
or replace the default ROS View label, and document CSS scoping plus branding
in the English and Chinese embedding guides.
…lotChart logic

Introduce a new utility function to determine if the X axis should be pinned to the full log range during incremental updates. Update the usePlotChart implementation to utilize this function, ensuring the X scale remains consistent while data is loading. Additionally, refine the scoped preflight CSS for better integration with the host application.
…1.5.2)

Scope playback progress layers with pointer-events-none so the track receives
pointer events in embedded hosts. Center the thumb and hover line with Tailwind
translate utilities under #rosview-root.

Only reapply auto-layout when preferAutoLayout is enabled, so host initialLayout
is not replaced after topics finish loading.
@joaner joaner merged commit d3ec86b into ioai-tech:main Jun 4, 2026
2 checks passed
@joaner joaner deleted the fix/embed-css-navbar-brand branch June 4, 2026 06:48
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