Gradio component tracking issue

[jleibs]

Issues from: https://github.com/radames/gradio-rerun-viewer

• Takes up the entire screen when used without any other component as input. radames/gradio-rerun-viewer#2
• Examples don't work for streaming radames/gradio-rerun-viewer#4

[radames]

Hi @jleibs, I'm bringing this on here as well. radames/gradio-rerun-viewer#5
Can I get mount events via rr = new WebViewer() thus creating a loading bar on the custom component

[jprochazk]

TL;DR: No, and it's difficult to do properly

There are no such events exposed right now. The way rerun.io/viewer works is that it loads the JS and Wasm from a separate host which is determined dynamically from the path, e.g. rerun.io/viewer/version/nightly. It involves doing a fetch for the JS/Wasm, and it's possible to measure the progress (both current and total payload) of the Response.

The rerun-io/web-viewer package does not use the same approach. It is meant for bundling into applications, so it uses dynamic import, which is something that bundlers understand as "please put this part of the code in a separate bundle, and load it lazily".

The problem with that approach is that there's no way to track the progress of the import. I don't know of a bundler-agnostic way to say "please put this part of the code in a separate bundle, and _give me the URL to load it", so that we could use fetch and track the download progress.

Some bundlers support the new URL("./file.js", import.meta.url) pattern (https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url), and we can try using that, but I'm concerned about the portability.

[radames]

I see. I was thinking about trying onMount to do a dynamic import. At least you will have a simple signal that something is loading, though not necessarily the progress bar I was talking about.

loading = true
const viewer = await import("@rerun-io/web-viewer");

[jprochazk]

Yes, in that case it's already possible, by setting loading = true before calling WebViewer.start, and then setting loading = false when the promise resolves:

<script>
  import { WebViewer } from "@rerun-io/web-viewer";
  import { onMount } from "svelte";
  
  let rr;
  let loading = false;
  onMount(() => {
    rr = new WebViewer();

    loading = true;
    rr.start().then(() => loading = false);

    return () => rr.stop();
  }); 
</script>

Or with the new ready event in 0.17:

<script>
  import { WebViewer } from "@rerun-io/web-viewer";
  import { onMount } from "svelte";
  
  let rr;
  let loading = false;
  onMount(() => {
    rr = new WebViewer();

    loading = true;
    rr.on("ready", () => loading = false);
    
    rr.start();
    return () => rr.stop();
  }); 
</script>

[radames]

Perfect! that's enough IMO