support panel states

Author: jprochazk

Diff for: backend/gradio_rerun/rerun.py

@@ -47,6 +47,7 @@ def __init__(
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
         render: bool = True,
+        panel_states: dict[str, Any] | None = None,
     ):
         """
         Parameters:
@@ -63,9 +64,11 @@ def __init__(
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
             elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
             render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            panel_states: Force viewer panels to a specific state. Any panels set cannot be toggled by the user in the viewer. Panel names are "top", "blueprint", "selection", and "time". States are "hidden", "collapsed", and "expanded".
         """
         self.height = height
         self.streaming = streaming
+        self.panel_states = panel_states
         super().__init__(
             label=label,
             every=every,
@@ -81,6 +84,11 @@ def __init__(
             value=value,
         )
 
+    def get_config(self):
+        config = super().get_config()
+        config["panel_states"] = self.panel_states
+        return config
+
     def preprocess(self, payload: RerunData | None) -> RerunData | None:
         """
         This component does not accept input.

Diff for: demo/app.py

@@ -133,6 +133,11 @@ def cleanup_cube_rrds(pending_cleanup):
     with gr.Row():
         viewer = Rerun(
             streaming=True,
+            panel_states={
+                "time": "hidden",
+                "blueprint": "hidden",
+                "selection": "hidden",
+            },
         )
 
     stream_blur.click(streaming_repeated_blur, inputs=[img], outputs=[viewer])

Diff for: frontend/Index.svelte

@@ -8,7 +8,7 @@
   import "./app.css";
   import type { Gradio } from "@gradio/utils";
 
-  import { WebViewer } from "@rerun-io/web-viewer";
+  import { WebViewer, type Panel, type PanelState } from "@rerun-io/web-viewer";
   import { onMount } from "svelte";
 
   import { Block } from "@gradio/atoms";
@@ -32,6 +32,7 @@
   export let loading_status: LoadingStatus;
   export let interactive: boolean;
   export let streaming: boolean;
+  export let panel_states: { [K in Panel]: PanelState } | null = null;
 
   let old_value: null | BinaryStream | (FileData | string)[] = null;
 
@@ -72,12 +73,27 @@
     }
   }
 
+  const is_panel = (v: string): v is Panel => ["top", "blueprint", "selection", "time"].includes(v);
+
+  function setup_panels() {
+    if (rr?.ready && panel_states) {
+      for (const panel in panel_states) {
+        // ignore extra properties
+        if (!is_panel(panel)) continue;
+        rr.override_panel_state(panel, panel_states[panel]);
+      }
+    }
+  }
+
   onMount(() => {
     rr = new WebViewer();
-    rr.start(undefined, ref, { hide_welcome_screen: true, allow_fullscreen: true }).then(() => {
+    rr.on("ready", () => {
       try_load_value();
+      setup_panels();
     });
+    rr.on("fullscreen", (on) => rr.toggle_panel_overrides(!on));
 
+    rr.start(undefined, ref, { hide_welcome_screen: true, allow_fullscreen: true });
     return () => {
       rr.stop();
     };
@@ -94,6 +110,7 @@
   }
 
   $: value, try_load_value();
+  $: panel_states, setup_panels();
 </script>
 
 {#if !interactive}