@rerun-io/web-viewer

Rerun Web Viewer

Embed the Rerun web viewer within your app.

This package is framework-agnostic. A React wrapper is available at https://www.npmjs.com/package/@rerun-io/web-viewer-react.

Install

$ npm i @rerun-io/web-viewer

ℹ️ Note: The package version is equal to the supported rerun SDK version. This means that @rerun-io/web-viewer@0.10.0 can only connect to a data source (.rrd file, websocket connection, etc.) that originates from a rerun SDK with version 0.10.0!

Usage

The web viewer is an object which manages a canvas element:

import { WebViewer } from "@rerun-io/web-viewer";

const rrd = "…";
const parentElement = document.body;

const viewer = new WebViewer();
await viewer.start(rrd, parentElement);
// …
viewer.stop();

The rrd in the snippet above should be a URL pointing to either:

• A hosted .rrd file, such as https://demo.rerun.io/version/0.11.0/examples/dna/data.rrd
• A WebSocket connection to the SDK opened via the serve API

If rrd is not set, the viewer will display the same welcome screen as https://app.rerun.io.

For a full example, see https://github.com/rerun-io/web-viewer-example. You can open the example via CodeSandbox: https://codesandbox.io/s/github/rerun-io/web-viewer-example

ℹ️ Note: This package only targets recent versions of browsers. If your target browser does not support Wasm imports or top-level await, you may need to install additional plugins for your bundler.

Development

$ npm run build

Changelog

0.11.0 - C++ improvements & better Visible History - 2023-11-28

https://github.com/rerun-io/rerun/assets/1220815/9099b81d-626f-4974-87d7-0e974361a9f0

✨ Overview & highlights

• 🌊 C++ SDK improvements
  • Reference docs are live!
  • 2x-5x faster logging
  • CMake install support and other CMake setup improvements
  • Support for custom components & archetypes
  • Zero copy logging for images, various API improvements
• 📈 Visual History -> Visual Time Range
  • Time series plots can now limit its query to a range
  • Much more powerful UI, allowing query ranges relative to time cursor
• 🕸️ The Viewer can now be easily embedded in your web apps via our npm package
• 🐍 ⚠️ Legacy Python API now removed, check the migration guide if you're not using rr.log yet
• 🦀 The new StoreSubscriber trait allows to be notified of all changes in the datastore. This can be used to build custom indices and trigger systems, and serves as a foundation for upcoming performance improvements. Check out our example for more information.

⚠️ Known issues on Visual Time Range:

• Time cursor sometimes stops scrolling correctly on plot window
• Still doesn't work with transforms

Special thanks to @dvad & @dangush for contributing!

🔎 Details

🌊 C++ SDK

• Support std::chrono types for set_time on rerun::RecordingStream #4134
• Improve rerun_cpp readme & CMakeLists.txt #4126
• Replace the many parameters of rerun::spawn / rerun::RecordingStream::spawn with a struct #4149
• Make on TextLogLevel PascalCase (instead of SCREAMING CASE) to avoid clashes with preprocessor defines #4152
• Reduce rerun_c library size (by depending on fewer unnecessary crates) #4147
• Fix unnecessary includes in code generated headers #4132
• Doxygen documentation & many doc improvements #4191
• Rename rerun::ComponentBatch to rerun::Collection (and related constructs) #4236
• Use rerun::Collection almost everywhere we'd use std::vector before #4247
• Significantly improve C++ logging performance by using C FFI instead of Arrow IPC #4273
• Further improve C++ logging for many individual log calls by introducing a component type registry #4296
• All C++ datatypes & components now implement a new Loggable trait #4305
• Add C++ Custom Component example #4309
• Expose Rerun source/include dir in CMakeLists.txt (RERUN_CPP_SOURCE_DIR) #4313
• Support cmake install #4326
• Export TensorBuffer & TensorDimension to Rerun namespace #4331
• C++ SDK sanity checks now header/source version against rerun_c binary version #4330
• Allow creating Image/Tensor/DepthImage/SegmentationImage directly from shape & pointer #4345

🐍 Python SDK

• Python: remove legacy APIs #4037
• Remove deprecated rerun_demo package #4293
• Python: don't catch KeyboardInterrupt and SystemExit #4333 (thanks @Dvad!)

🪳 Bug fixes

• Fix line & points (& depth clouds points) radii being unaffected by scale & projection via Pinhole #4199
• Fix inaccessible entities being incorrectly added to space view #4226
• Silence spammy blueprint warnings and validate blueprint on load #4303
• Fix markdown heading size #4178

🌁 Viewer improvements

• Add command to copy direct link to fully qualified URL #4165
• Implement recording/last-modified-at aware garbage collection #4183

🖼 UI improvements

• Improve Visible History to support more general time queries #4123
• Add support for Visible History to time series space views #4179
• Make Visible History UI more ergonomic and show inherited values #4222
• Display Visible History on timeline when the mouse hovers the UI #4259
• Improve the Selection Panel with better title, context, and Space View key properties #4324

🕸️ Web

• Put web viewer on npm #4003
• Auto-switch port when getting AddrInUse error #4314 (thanks @dangush!)
• Generate per-PR web apps #4341

🧑‍💻 Dev-experience

• Simple logging benchmarks for C++ & Rust #4181
• New debug option to show the blueprint in the streams view #4189
• Use Pixi over setup scripts on CI + local dev #4302
• Run deploy docs jobs serially #4232
• fix Windows test config on main #4242

🗣 Refactors

• StoreView -> StoreSubscriber #4234
• DataStore introduce StoreEvents #4203
• DataStore introduce StoreViews #4205