Add width/height properties to web viewer

rerun_js/web-viewer-react/README.md

@@ -30,7 +30,7 @@ This means that `@rerun-io/[email protected]` can only connect to a data s
 import WebViewer from "@rerun-io/web-viewer-react";
 
 export default function App() {
-  return <WebViewer rrd="...">
+  return <WebViewer width="800px" height="600px" rrd="...">
 }
 ```
 
@@ -39,6 +39,10 @@ The `rrd` in the snippet above should be a URL pointing to either:
 - A WebSocket connection to the SDK opened via the [`serve`](https://www.rerun.io/docs/reference/sdk-operating-modes#serve) API
 
 If `rrd` is not set, the Viewer will display the same welcome screen as <https://app.rerun.io>.
+This can be disabled by setting the `hide_welcome_screen` prop to `true`.
+
+⚠ It's important to set the viewer's width and height, as without it the viewer may not display correctly.
+Setting the values to empty strings is valid, as long as you style the canvas through other means.
 
 ℹ️ Note:
 This package only targets recent versions of browsers.

rerun_js/web-viewer-react/index.js

@@ -44,6 +44,8 @@ export default class WebViewer extends React.Component {
     const current = /** @type {HTMLDivElement} */ (this.#parent.current);
     this.#handle.start(this.#recordings, current, {
       hide_welcome_screen: this.#hide_welcome_screen,
+      width: "100%",
+      height: "100%",
     });
   }
 
@@ -61,7 +63,7 @@ export default class WebViewer extends React.Component {
   }
 
   render() {
-    const { width = "100%", height = "640px" } = this.props;
+    const { width = "640px", height = "360px" } = this.props;
     return React.createElement("div", {
       className: "rerun-web-viewer",
       style: { width, height, position: "relative" },

rerun_js/web-viewer/README.md

@@ -35,7 +35,7 @@ const rrd = "…";
 const parentElement = document.body;
 
 const viewer = new WebViewer();
-await viewer.start(rrd, parentElement);
+await viewer.start(rrd, parentElement, { width: "800px", height: "600px" });
 // …
 viewer.stop();
 ```
@@ -45,6 +45,10 @@ The `rrd` in the snippet above should be a URL pointing to either:
 - A WebSocket connection to the SDK opened via the [`serve`](https://www.rerun.io/docs/reference/sdk-operating-modes#serve) API
 
 If `rrd` is not set, the Viewer will display the same welcome screen as <https://app.rerun.io>.
+This can be disabled by setting `hide_welcome_screen` to `true` in the options object of `viewer.start`.
+
+⚠ It's important to set the viewer's width and height, as without it the viewer may not display correctly.
+Setting the values to empty strings is valid, as long as you style the canvas through other means.
 
 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

rerun_js/web-viewer/index.ts

@@ -44,6 +44,9 @@ interface WebViewerOptions {
   render_backend?: Backend;
   hide_welcome_screen?: boolean;
   allow_fullscreen?: boolean;
+
+  width?: string;
+  height?: string;
 }
 
 interface FullscreenOptions {
@@ -107,6 +110,8 @@ export class WebViewer {
     this.#state = "starting";
 
     this.#canvas = document.createElement("canvas");
+    this.#canvas.style.width = options.width ?? "640px";
+    this.#canvas.style.height = options.height ?? "360px";
     this.#canvas.id = this.#id;
     parent.append(this.#canvas);