Class WebViewer

Rerun Web Viewer

const viewer = new WebViewer();
await viewer.start();

Data may be provided to the Viewer as:

An HTTP file URL, e.g. viewer.start("https://app.rerun.io/version/0.24.0-alpha.1/examples/dna.rrd")
A Rerun gRPC URL, e.g. viewer.start("rerun+http://127.0.0.1:9876/proxy")
A stream of log messages, via WebViewer.open_channel.

Callbacks may be attached for various events using WebViewer.on:

viewer.on("time_update", (time) => console.log(`current time: {time}`));

For the full list of available events, see ViewerEvent.

Constructors

constructor

new WebViewer(): WebViewer
Returns WebViewer
- Defined in index.ts:296

Accessors

canvas

get canvas(): null | HTMLCanvasElement
The underlying canvas element.

Returns null | HTMLCanvasElement
- Defined in index.ts:501

ready

get ready(): boolean
Returns true if the viewer is ready to connect to data sources.

Returns boolean
- Defined in index.ts:508

Methods

close

close(rrd: string | string[]): void
Close a recording.

The viewer must have been started via WebViewer.start.
Parameters
- rrd: string | string[]
  URLs to .rrd files or gRPC connections to our SDK.
Returns void
- Defined in index.ts:545

get_active_recording_id

get_active_recording_id(): null | string
Get the active recording id.

Returns null | string
- Defined in index.ts:707

get_active_timeline

get_active_timeline(recording_id: string): null | string
Get the active timeline.

This always returns null if the recording can't be found.
Parameters
- recording_id: string
Returns null | string
- Defined in index.ts:805

get_current_time

get_current_time(recording_id: string, timeline: string): number
Get the current time.

The interpretation of time depends on what kind of timeline it is:
- For time timelines, this is the time in nanoseconds.
- For sequence timelines, this is the sequence number.
This always returns 0 if the recording or timeline can't be found.
Parameters
- recording_id: string
- timeline: string
Returns number
- Defined in index.ts:771

get_playing

get_playing(recording_id: string): boolean
Get the play state.

This always returns false if the recording can't be found.
Parameters
- recording_id: string
Returns boolean
- Defined in index.ts:737

get_time_range

get_time_range(
recording_id: string,
timeline: string,
): null | { max: number; min: number }
Get the time range for a timeline.

This always returns null if the recording or timeline can't be found.
Parameters
- recording_id: string
- timeline: string
Returns null | { max: number; min: number }
- Defined in index.ts:835

off

off<
    E extends
        | "play"
        | "pause"
        | "time_update"
        | "timeline_change"
        | "selection_change"
        | "fullscreen",
>(
    event: E,
    callback: (value: EventsWithValue[E]) => void,
): void
Unregister an event listener.

The event emitter relies on referential equality to store callbacks. The callback passed in must be the exact same instance of the function passed in to on or once.

See ViewerEvent for a full list of available events.
Type Parameters
- E extends
      | "play"
      | "pause"
      | "time_update"
      | "timeline_change"
      | "selection_change"
      | "fullscreen"
Parameters
- event: E
- callback: (value: EventsWithValue[E]) => void
Returns void
- Defined in index.ts:482
off<E extends "ready">(event: E, callback: () => void): void
Unregister an event listener.

The event emitter relies on referential equality to store callbacks. The callback passed in must be the exact same instance of the function passed in to on or once.

See ViewerEvent for a full list of available events.
Type Parameters
- E extends "ready"
Parameters
- event: E
- callback: () => void
Returns void
- Defined in index.ts:486

on

on<
    E extends
        | "play"
        | "pause"
        | "time_update"
        | "timeline_change"
        | "selection_change"
        | "fullscreen",
>(
    event: E,
    callback: (...args: EventsWithValue[E]) => void,
): () => void
Register an event listener.

Returns a function which removes the listener when called.

See ViewerEvent for a full list of available events.
Type Parameters
- E extends
      | "play"
      | "pause"
      | "time_update"
      | "timeline_change"
      | "selection_change"
      | "fullscreen"
Parameters
- event: E
- callback: (...args: EventsWithValue[E]) => void
Returns () => void
- Defined in index.ts:437
on<E extends "ready">(event: E, callback: () => void): () => void
Register an event listener.

Returns a function which removes the listener when called.

See ViewerEvent for a full list of available events.
Type Parameters
- E extends "ready"
Parameters
- event: E
- callback: () => void
Returns () => void
- Defined in index.ts:441

once

once<
    E extends
        | "play"
        | "pause"
        | "time_update"
        | "timeline_change"
        | "selection_change"
        | "fullscreen",
>(
    event: E,
    callback: (value: EventsWithValue[E]) => void,
): () => void
Register an event listener which runs only once.

Returns a function which removes the listener when called.

See ViewerEvent for a full list of available events.
Type Parameters
- E extends
      | "play"
      | "pause"
      | "time_update"
      | "timeline_change"
      | "selection_change"
      | "fullscreen"
Parameters
- event: E
- callback: (value: EventsWithValue[E]) => void
Returns () => void
- Defined in index.ts:459
once<E extends "ready">(event: E, callback: () => void): () => void
Register an event listener which runs only once.

Returns a function which removes the listener when called.

See ViewerEvent for a full list of available events.
Type Parameters
- E extends "ready"
Parameters
- event: E
- callback: () => void
Returns () => void
- Defined in index.ts:463

open

open(rrd: string | string[], options?: { follow_if_http?: boolean }): void
Open a recording.

The viewer must have been started via WebViewer.start.
Parameters
- rrd: string | string[]
  URLs to .rrd files or gRPC connections to our SDK.
- options: { follow_if_http?: boolean } = {}
  follow_if_http: Whether Rerun should open the resource in "Following" mode when streaming from an HTTP url. Defaults to false. Ignored for non-HTTP URLs.
Returns void
- Defined in index.ts:522

open_channel

open_channel(channel_name?: string): LogChannel
Opens a new channel for sending log messages.

The channel can be used to incrementally push rrd chunks into the viewer.
Parameters
- channel_name: string = "rerun-io/web-viewer"
  used to identify the channel.
Returns LogChannel
- Defined in index.ts:597

override_panel_state

override_panel_state(panel: Panel, state: undefined | null | PanelState): void
Force a panel to a specific state.
Parameters
- panel: Panel
  which panel to configure
- state: undefined | null | PanelState
  which state to force the panel into
Returns void
- Defined in index.ts:669

set_active_recording_id

set_active_recording_id(value: string): void
Set the active recording id.

This is the same as clicking on the recording in the Viewer's left panel.
Parameters
- value: string
Returns void
- Defined in index.ts:722

set_active_timeline

set_active_timeline(recording_id: string, timeline: string): void
Set the active timeline.

This does nothing if the recording or timeline can't be found.
Parameters
- recording_id: string
- timeline: string
Returns void
- Defined in index.ts:820

set_current_time

set_current_time(recording_id: string, timeline: string, time: number): void
Set the current time.

Equivalent to clicking on the timeline in the time panel at the specified time. The interpretation of time depends on what kind of timeline it is:
- For time timelines, this is the time in nanoseconds.
- For sequence timelines, this is the sequence number.
This does nothing if the recording or timeline can't be found.
Parameters
- recording_id: string
- timeline: string
- time: number
Returns void
- Defined in index.ts:790

set_playing

set_playing(recording_id: string, value: boolean): void
Set the play state.

This does nothing if the recording can't be found.
Parameters
- recording_id: string
- value: boolean
Returns void
- Defined in index.ts:750

start

start(
    rrd: null | string | string[],
    parent: null | HTMLElement,
    options: null | WebViewerOptions,
): Promise<void>
Start the viewer.
Parameters
- rrd: null | string | string[]
  URLs to .rrd files or gRPC connections to our SDK.
- parent: null | HTMLElement
  The element to attach the canvas onto.
- options: null | WebViewerOptions
  Web Viewer configuration.
Returns Promise<void>
- Defined in index.ts:308

stop

stop(): void
Stop the viewer, freeing all associated memory.

The same viewer instance may be started multiple times.

Returns void
- Defined in index.ts:566

toggle_fullscreen

toggle_fullscreen(): void
Toggle fullscreen mode.

This does nothing if allow_fullscreen was not set to true when starting the viewer.

Fullscreen mode works by updating the underlying <canvas> element's style:
- position to fixed
- width/height/top/left to cover the entire viewport
When fullscreen mode is toggled off, the style is restored to its previous values.

When fullscreen mode is toggled on, any other instance of the viewer on the page which is already in fullscreen mode is toggled off. This means that it doesn't have to be tracked manually.

This functionality can also be directly accessed in the viewer:
- The maximize/minimize top panel button
- The Toggle fullscreen UI command (accessible via the command palette, CTRL+P)
Returns void
- Defined in index.ts:865

toggle_panel_overrides

toggle_panel_overrides(value?: null | boolean): void
Toggle panel overrides set via override_panel_state.
Parameters
- Optionalvalue: null | boolean
  set to a specific value. Toggles the previous value if not provided.
Returns void
- Defined in index.ts:689

Class WebViewer

Index

Constructors

Accessors

Methods

Constructors

constructor

Returns WebViewer

Accessors

canvas

Returns null | HTMLCanvasElement

ready

Returns boolean

Methods

close

Parameters

Returns void

get_active_recording_id

Returns null | string

get_active_timeline

Parameters

Returns null | string

get_current_time

Parameters

Returns number

get_playing

Parameters

Returns boolean

get_time_range

Parameters

Returns null | { max: number; min: number }

off

Type Parameters

Parameters

Returns void

Type Parameters

Parameters

Returns void

on

Type Parameters

Parameters

Returns () => void

Type Parameters

Parameters

Returns () => void

once

Type Parameters

Parameters

Returns () => void

Type Parameters

Parameters

Returns () => void

open

Parameters

Returns void

open_channel

Parameters

Returns LogChannel

override_panel_state

Parameters

Returns void

set_active_recording_id

Parameters

Returns void

set_active_timeline

Parameters

Returns void

set_current_time

Parameters

Returns void

set_playing

Parameters

Returns void

start

Parameters

Returns Promise<void>

stop

Returns void

toggle_fullscreen

Returns void