@rerun-io/web-viewer-react 0.31.3 → 0.32.0-alpha.1

package/README.md

@@ -35,7 +35,7 @@ export default function App() {
 ```
 
 The `rrd` in the snippet above should be a URL pointing to either:
-- A hosted `.rrd` file, such as <https://app.rerun.io/version/0.31.3/examples/dna.rrd>
+- A hosted `.rrd` file, such as <https://app.rerun.io/version/0.32.0-alpha.1/examples/dna.rrd>
 - A gRPC 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>.

package/index.d.ts

@@ -32,6 +32,11 @@ declare module '@rerun-io/web-viewer-react' {
 		 * and close any URLs which are not present.
 		 */
 		rrd: string | string[];
+		/**
+		 * Whether to open HTTP `.rrd` sources in following mode.
+		 *  Defaults to `false`. Ignored for non-HTTP sources.
+		 */
+		follow_if_http?: boolean | undefined;
 		/**
 		 * CSS width of the viewer's parent div
 		 */

package/index.d.ts.map

@@ -10,5 +10,5 @@
 	"sourcesContent": [
 		null
 	],
-	"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiBYA,YAAYA"
+	"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiBYA,YAAYA"
 }

package/index.js

@@ -9,6 +9,8 @@ import * as rerun from "@rerun-io/web-viewer";
  * @property {string | string[]} rrd URL(s) of the `.rrd` file(s) to load.
  *                                   Changing this prop will open any new unique URLs as recordings,
  *                                   and close any URLs which are not present.
+ * @property {boolean} [follow_if_http] Whether to open HTTP `.rrd` sources in following mode.
+ *                                      Defaults to `false`. Ignored for non-HTTP sources.
  * @property {string} [width] CSS width of the viewer's parent div
  * @property {string} [height] CSS height of the viewer's parent div
  *
@@ -71,11 +73,17 @@ export default class WebViewer extends React.Component {
     } else {
       // We only need to diff the recordings.
 
-      const prev = toArray(prevProps.rrd);
-      const current = toArray(this.props.rrd);
-      const { added, removed } = diff(prev, current);
-      this.#handle.open(added);
-      this.#handle.close(removed);
+      if (!this.#handle.ready) {
+        return;
+      }
+
+      syncRecordings(
+        this.#handle,
+        toArray(prevProps.rrd),
+        toArray(this.props.rrd),
+        prevProps.follow_if_http,
+        this.props.follow_if_http,
+      );
     }
   }
 
@@ -120,17 +128,42 @@ function pascalToSnake(str) {
  */
 function startViewer(handle, parent, getProps) {
   const props = getProps();
-  handle.start(toArray(props.rrd), parent, {
-    manifest_url: props.manifest_url,
-    render_backend: props.render_backend,
-    hide_welcome_screen: props.hide_welcome_screen,
-    theme: props.theme,
-
-    // NOTE: `width`, `height` intentionally ignored, they will
-    //       instead be used on the parent `div` element
-    width: "100%",
-    height: "100%",
-  });
+  const initial = toArray(props.rrd);
+  const initialFollowIfHttp = props.follow_if_http;
+  handle
+    .start(
+      initial,
+      parent,
+      {
+        manifest_url: props.manifest_url,
+        render_backend: props.render_backend,
+        hide_welcome_screen: props.hide_welcome_screen,
+        theme: props.theme,
+
+        // NOTE: `width`, `height` intentionally ignored, they will
+        //       instead be used on the parent `div` element
+        width: "100%",
+        height: "100%",
+      },
+      {
+        follow_if_http: initialFollowIfHttp,
+      },
+    )
+    .then(() => {
+      if (!handle.ready) {
+        return;
+      }
+
+      const { rrd, follow_if_http } = getProps();
+      syncRecordings(
+        handle,
+        initial,
+        toArray(rrd),
+        initialFollowIfHttp,
+        follow_if_http,
+      );
+    })
+    .catch(() => {});
 
   for (const key of Object.keys(props)) {
     if (key.startsWith("on")) {
@@ -159,6 +192,59 @@ function diff(prev, current) {
   };
 }
 
+/**
+ * Reconcile the currently open recordings with the latest props.
+ *
+ * @param {rerun.WebViewer} handle
+ * @param {string[]} prev
+ * @param {string[]} current
+ * @param {boolean | undefined} prevFollowIfHttp
+ * @param {boolean | undefined} followIfHttp
+ */
+function syncRecordings(handle, prev, current, prevFollowIfHttp, followIfHttp) {
+  const { added, removed } = diff(prev, current);
+  const reopened =
+    prevFollowIfHttp !== followIfHttp
+      ? intersection(prev, current).filter(isHttpSource)
+      : [];
+
+  if (removed.length > 0 || reopened.length > 0) {
+    handle.close([...removed, ...reopened]);
+  }
+  if (added.length > 0) {
+    handle.open(added, { follow_if_http: followIfHttp });
+  }
+  if (reopened.length > 0) {
+    handle.open(reopened, { follow_if_http: followIfHttp });
+  }
+}
+
+/**
+ * Return the values present in both arrays.
+ *
+ * @param {string[]} prev
+ * @param {string[]} current
+ * @returns {string[]}
+ */
+function intersection(prev, current) {
+  const prevSet = new Set(prev);
+  return current.filter((v) => prevSet.has(v));
+}
+
+/**
+ * Returns `true` if the recording source is affected by `follow_if_http`.
+ *
+ * @param {string} url
+ */
+function isHttpSource(url) {
+  try {
+    const protocol = new URL(url, document.baseURI).protocol;
+    return protocol === "http:" || protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
 /**
  * Returns `true` if any of the `keys` changed between `prev` and `curr`.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rerun-io/web-viewer-react",
-  "version": "0.31.3",
+  "version": "0.32.0-alpha.1",
   "description": "Embed the Rerun web viewer in your React app",
   "licenses": [
     {
@@ -43,7 +43,7 @@
     "tsconfig.json"
   ],
   "dependencies": {
-    "@rerun-io/web-viewer": "0.31.3"
+    "@rerun-io/web-viewer": "0.32.0-alpha.1"
   },
   "peerDependencies": {
     "@types/react": "^18.2.33 || ^19.0.0",