Inline viewer improvements (#6504)

### What

- Convert the `web-viewer` package to TypeScript (from JS + JSDoc)
- Add events to `WebViewer`:
  - `fullscreen`
  - `ready`
- Improve fullscreen transition
- Hide panel toggle buttons if they are inactive due to overrides

Animations across updates to `position` don't really work that properly.
I had to hack around it in this PR by using
`setTimeout`/`requestAnimationFrame` to give the browser a chance to
update the `position` CSS property before updating any other styles.

Preview:
- rerun-io/landing#913

### Checklist
* [x] I have read and agree to [Contributor
Guide](https://github.com/rerun-io/rerun/blob/main/CONTRIBUTING.md) and
the [Code of
Conduct](https://github.com/rerun-io/rerun/blob/main/CODE_OF_CONDUCT.md)
* [x] I've included a screenshot or gif (if applicable)
* [x] I have tested the web demo (if applicable):
* Using examples from latest `main` build:
[rerun.io/viewer](https://rerun.io/viewer/pr/6504?manifest_url=https://app.rerun.io/version/main/examples_manifest.json)
* Using full set of examples from `nightly` build:
[rerun.io/viewer](https://rerun.io/viewer/pr/6504?manifest_url=https://app.rerun.io/version/nightly/examples_manifest.json)
* [x] The PR title and labels are set such as to maximize their
usefulness for the next release's CHANGELOG
* [x] If applicable, add a new check to the [release
checklist](https://github.com/rerun-io/rerun/blob/main/tests/python/release_checklist)!

- [PR Build Summary](https://build.rerun.io/pr/6504)
- [Recent benchmark results](https://build.rerun.io/graphs/crates.html)
- [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)

To run all checks from `main`, comment on the PR with `@rerun-bot
full-check`.

.prettierrc.toml

@@ -7,7 +7,7 @@ files = ["*.yml", "*.yaml"]
 options = { tabWidth = 2 }
 
 [[overrides]]
-files = ["*.js", "*.mjs", "*.cjs"]
+files = ["*.js", "*.mjs", "*.cjs", "*.ts", "*.d.ts"]
 options = { semi = true, tabWidth = 2 }
 
 [[overrides]]

crates/re_viewer/src/app_blueprint.rs

@@ -157,6 +157,18 @@ impl<'a> AppBlueprint<'a> {
             command_sender,
         );
     }
+
+    pub fn blueprint_panel_overridden(&self) -> bool {
+        self.overrides.is_some_and(|s| s.blueprint.is_some())
+    }
+
+    pub fn selection_panel_overridden(&self) -> bool {
+        self.overrides.is_some_and(|s| s.selection.is_some())
+    }
+
+    pub fn time_panel_overridden(&self) -> bool {
+        self.overrides.is_some_and(|s| s.time.is_some())
+    }
 }
 
 #[derive(Debug, Default, Clone, Copy)]

crates/re_viewer/src/ui/top_panel.rs

@@ -244,15 +244,14 @@ fn connection_status_ui(ui: &mut egui::Ui, rx: &ReceiveSet<re_log_types::LogMsg>
 fn panel_buttons_r2l(app: &App, app_blueprint: &AppBlueprint<'_>, ui: &mut egui::Ui) {
     #[cfg(target_arch = "wasm32")]
     if app.is_fullscreen_allowed() {
-        let mut is_fullscreen = app.is_fullscreen_mode();
-        let icon = if is_fullscreen {
+        let icon = if app.is_fullscreen_mode() {
             &re_ui::icons::MINIMIZE
         } else {
             &re_ui::icons::MAXIMIZE
         };
 
         if ui
-            .medium_icon_toggle_button(icon, &mut is_fullscreen)
+            .medium_icon_toggle_button(icon, &mut true)
             .on_hover_text("Toggle fullscreen")
             .clicked()
         {
@@ -261,46 +260,49 @@ fn panel_buttons_r2l(app: &App, app_blueprint: &AppBlueprint<'_>, ui: &mut egui:
     }
 
     // selection panel
-    if ui
-        .medium_icon_toggle_button(
-            &re_ui::icons::RIGHT_PANEL_TOGGLE,
-            &mut app_blueprint.selection_panel_state().is_expanded(),
-        )
-        .on_hover_text(format!(
-            "Toggle Selection View{}",
-            UICommand::ToggleSelectionPanel.format_shortcut_tooltip_suffix(ui.ctx())
-        ))
-        .clicked()
+    if !app_blueprint.selection_panel_overridden()
+        && ui
+            .medium_icon_toggle_button(
+                &re_ui::icons::RIGHT_PANEL_TOGGLE,
+                &mut app_blueprint.selection_panel_state().is_expanded(),
+            )
+            .on_hover_text(format!(
+                "Toggle Selection View{}",
+                UICommand::ToggleSelectionPanel.format_shortcut_tooltip_suffix(ui.ctx())
+            ))
+            .clicked()
     {
         app_blueprint.toggle_selection_panel(&app.command_sender);
     }
 
     // time panel
-    if ui
-        .medium_icon_toggle_button(
-            &re_ui::icons::BOTTOM_PANEL_TOGGLE,
-            &mut app_blueprint.time_panel_state().is_expanded(),
-        )
-        .on_hover_text(format!(
-            "Toggle Timeline View{}",
-            UICommand::ToggleTimePanel.format_shortcut_tooltip_suffix(ui.ctx())
-        ))
-        .clicked()
+    if !app_blueprint.time_panel_overridden()
+        && ui
+            .medium_icon_toggle_button(
+                &re_ui::icons::BOTTOM_PANEL_TOGGLE,
+                &mut app_blueprint.time_panel_state().is_expanded(),
+            )
+            .on_hover_text(format!(
+                "Toggle Timeline View{}",
+                UICommand::ToggleTimePanel.format_shortcut_tooltip_suffix(ui.ctx())
+            ))
+            .clicked()
     {
         app_blueprint.toggle_time_panel(&app.command_sender);
     }
 
     // blueprint panel
-    if ui
-        .medium_icon_toggle_button(
-            &re_ui::icons::LEFT_PANEL_TOGGLE,
-            &mut app_blueprint.blueprint_panel_state().is_expanded(),
-        )
-        .on_hover_text(format!(
-            "Toggle blueprint view{}",
-            UICommand::ToggleBlueprintPanel.format_shortcut_tooltip_suffix(ui.ctx())
-        ))
-        .clicked()
+    if !app_blueprint.blueprint_panel_overridden()
+        && ui
+            .medium_icon_toggle_button(
+                &re_ui::icons::LEFT_PANEL_TOGGLE,
+                &mut app_blueprint.blueprint_panel_state().is_expanded(),
+            )
+            .on_hover_text(format!(
+                "Toggle blueprint view{}",
+                UICommand::ToggleBlueprintPanel.format_shortcut_tooltip_suffix(ui.ctx())
+            ))
+            .clicked()
     {
         app_blueprint.toggle_blueprint_panel(&app.command_sender);
     }

crates/re_viewer/src/web.rs

@@ -73,12 +73,18 @@ impl WebHandle {
     }
 
     #[wasm_bindgen]
-    pub fn toggle_panel_overrides(&self) {
+    pub fn toggle_panel_overrides(&self, value: Option<bool>) {
         let Some(mut app) = self.runner.app_mut::<crate::App>() else {
             return;
         };
 
-        app.panel_state_overrides_active ^= true;
+        match value {
+            Some(value) => app.panel_state_overrides_active = value,
+            None => app.panel_state_overrides_active ^= true,
+        }
+
+        // request repaint, because the overrides may cause panels to expand/collapse
+        app.egui_ctx.request_repaint();
     }
 
     #[wasm_bindgen]

rerun_js/scripts/common.mjs

@@ -66,8 +66,10 @@ export function inferTag(version) {
     switch (kind) {
       case "alpha":
         tag = "alpha";
+        break;
       case "rc":
         tag = "rc";
+        break;
     }
   }
 

rerun_js/web-viewer/.gitignore

@@ -5,3 +5,5 @@ re_viewer_bg.wasm
 re_viewer_bg.wasm.d.ts
 index.d.ts
 index.d.ts.map
+index.js
+index.js.map