@perspective-dev/viewer 5.3.1 → 5.4.0

package/src/rust/components/panel_menu.rs

@@ -26,20 +26,23 @@
 //! `on_close` fires exactly once, when the session ends (blur dismissal, a
 //! command selection, or the picker closing).
 
+use std::rc::Rc;
+
 use perspective_js::utils::*;
 use wasm_bindgen::JsCast;
 use web_sys::HtmlElement;
 use yew::prelude::*;
 
-use crate::components::context_menu::{ContextMenu, ContextMenuEntry, ContextMenuItem};
 use crate::components::copy_dropdown::CopyDropDownMenu;
 use crate::components::export_dropdown::ExportDropDownMenu;
-use crate::components::portal::PortalModal;
+use crate::components::new_panel_menu::{HostedTables, NewPanelMenu, NewPanelPick};
 use crate::components::style::StyleSurface;
 use crate::config::*;
 use crate::js::copy_to_clipboard;
 use crate::presentation::Presentation;
+use crate::queries::fetch_hosted_tables;
 use crate::tasks::export_method_to_blob;
+use crate::ui::{ContextMenu, ContextMenuEntry, ContextMenuItem, MODAL_SLOT, PortalModal};
 use crate::utils::*;
 use crate::workspace::{PanelId, Workspace};
 
@@ -48,7 +51,13 @@ use crate::workspace::{PanelId, Workspace};
 #[derive(Clone, Debug, PartialEq, Eq)]
 pub enum PanelCommand {
     New,
-    NewFrom { client: String, table: String },
+    NewFrom {
+        client: String,
+        table: String,
+    },
+
+    /// A fresh panel copied from the named panel.
+    NewFromPanel(String),
     Duplicate,
     Reset,
     Maximize,
@@ -133,8 +142,8 @@ pub enum PanelMenuMsg {
 }
 
 pub struct PanelMenu {
-    /// The session-long 0×0 cursor anchor element (appended to `<body>`) both
-    /// stages' `PortalModal`s position against; removed on destroy.
+    /// The session-long 0×0 cursor anchor element (a viewer light-DOM child)
+    /// both stages' `PortalModal`s position against; removed on destroy.
     anchor: HtmlElement,
 
     /// The open format picker, if the session is in its picker stage.
@@ -143,7 +152,7 @@ pub struct PanelMenu {
     /// The "New" sub-menu's data: `(client name, its hosted table names)` per
     /// loaded client, in registration order. `None` while the fetch spawned at
     /// menu open is still in flight.
-    tables: Option<Vec<(String, Vec<String>)>>,
+    tables: Option<HostedTables>,
 }
 
 impl Component for PanelMenu {
@@ -151,37 +160,20 @@ impl Component for PanelMenu {
     type Properties = PanelMenuProps;
 
     fn create(ctx: &Context<Self>) -> Self {
-        let clients = ctx.props().workspace.clients();
+        let workspace = ctx.props().workspace.clone();
         let link = ctx.link().clone();
         ApiFuture::spawn(async move {
-            let mut tables = Vec::with_capacity(clients.len());
-            for client in clients {
-                // A failing client contributes an empty list rather than
-                // poisoning the whole menu.
-                let mut names = match client.get_hosted_table_names().await {
-                    Ok(names) => names,
-                    Err(err) => {
-                        tracing::warn!(
-                            "Failed to list tables for `Client` \"{}\": {err}",
-                            client.get_name()
-                        );
-
-                        vec![]
-                    },
-                };
-
-                // Server-side name order isn't meaningful (or stable) — list
-                // deterministically.
-                names.sort_unstable();
-                tables.push((client.get_name().to_owned(), names));
-            }
-
+            let tables = fetch_hosted_tables(&workspace).await;
             link.send_message(PanelMenuMsg::TablesLoaded(tables));
             Ok(())
         });
 
         Self {
-            anchor: session_anchor(ctx.props().x, ctx.props().y),
+            anchor: session_anchor(
+                ctx.props().presentation.viewer_elem(),
+                ctx.props().x,
+                ctx.props().y,
+            ),
             picker: None,
             tables: None,
         }
@@ -213,7 +205,7 @@ impl Component for PanelMenu {
                 false
             },
             PanelMenuMsg::TablesLoaded(tables) => {
-                self.tables = Some(tables);
+                self.tables = Some(Rc::new(tables));
                 self.picker.is_none()
             },
         }
@@ -229,7 +221,7 @@ impl Component for PanelMenu {
     fn destroy(&mut self, _ctx: &Context<Self>) {
         // The session ended (or the parent unmounted mid-session, e.g. the
         // target panel closed); don't leak the cursor anchor.
-        let _ = global::body().remove_child(&self.anchor);
+        self.anchor.remove();
     }
 }
 
@@ -254,7 +246,7 @@ impl PanelMenu {
             None => vec![ContextMenuEntry::Submenu {
                 label: "New".to_owned(),
                 on_select: None,
-                entries: self.new_submenu_entries(ctx),
+                entries: vec![ContextMenuEntry::Custom(self.new_submenu_body(ctx))],
             }],
             Some(panel_id) => {
                 let can_close = ctx.props().workspace.len() > 1;
@@ -263,7 +255,7 @@ impl PanelMenu {
                     ContextMenuEntry::Submenu {
                         label: "New".to_owned(),
                         on_select: Some(cmd(PanelCommand::New)),
-                        entries: self.new_submenu_entries(ctx),
+                        entries: vec![ContextMenuEntry::Custom(self.new_submenu_body(ctx))],
                     },
                     item("Duplicate", cmd(PanelCommand::Duplicate), false),
                     item("Reset", cmd(PanelCommand::Reset), false),
@@ -301,7 +293,7 @@ impl PanelMenu {
             <PortalModal
                 key="perspective-context-menu"
                 tag_name="perspective-context-menu"
-                surface={StyleSurface::ContextMenu}
+                sheet={StyleSurface::ContextMenu.sheet()}
                 target={Some(self.anchor.clone())}
                 own_focus=true
                 on_close={&on_close}
@@ -315,54 +307,35 @@ impl PanelMenu {
         }
     }
 
-    /// The "New" hover sub-menu's entries: every hosted `Table` name from
-    /// every loaded `Client`, flat for a single client, grouped under a
-    /// header row per client otherwise (client names are globally unique, so
-    /// the grouping also disambiguates table-name collisions).
-    fn new_submenu_entries(&self, ctx: &Context<Self>) -> Vec<ContextMenuEntry> {
-        let placeholder = |label: &str| {
-            vec![ContextMenuEntry::Item(ContextMenuItem {
-                label: label.to_owned(),
-                on_select: Callback::noop(),
-                disabled: true,
-            })]
-        };
-
-        let Some(clients) = &self.tables else {
-            return placeholder("Loading...");
-        };
-
-        if clients.iter().all(|(_, tables)| tables.is_empty()) {
-            return placeholder("No tables");
-        }
-
-        let multi = clients.len() > 1;
-        let mut entries = Vec::new();
-        for (client_name, tables) in clients {
-            if multi {
-                entries.push(ContextMenuEntry::Header(client_name.clone()));
-            }
-
-            for table in tables {
-                let on_select = {
-                    clone!(client_name, table);
-                    ctx.link().callback(move |_| {
-                        PanelMenuMsg::Command(PanelCommand::NewFrom {
-                            client: client_name.clone(),
-                            table: table.clone(),
-                        })
-                    })
-                };
-
-                entries.push(ContextMenuEntry::Item(ContextMenuItem {
-                    label: table.clone(),
-                    on_select,
-                    disabled: false,
-                }));
-            }
-        }
+    /// The "New" hover sub-menu's body, the shared [`NewPanelMenu`].
+    fn new_submenu_body(&self, ctx: &Context<Self>) -> Html {
+        let panels = Rc::new(
+            ctx.props()
+                .workspace
+                .panel_ids()
+                .into_iter()
+                .filter_map(|id| {
+                    let panel = ctx.props().workspace.panel(&id)?;
+                    let title = panel.session.get_title().filter(|t| !t.is_empty());
+                    Some((id.as_str().to_owned(), title))
+                })
+                .collect::<Vec<_>>(),
+        );
+
+        let callback = ctx.link().batch_callback(|pick: NewPanelPick| {
+            let cmd = match pick {
+                NewPanelPick::FromTable { client, table } => {
+                    PanelMenuMsg::Command(PanelCommand::NewFrom { client, table })
+                },
+                NewPanelPick::FromPanel(id) => {
+                    PanelMenuMsg::Command(PanelCommand::NewFromPanel(id))
+                },
+            };
+
+            vec![cmd, PanelMenuMsg::MenuClosed]
+        });
 
-        entries
+        html! { <NewPanelMenu tables={self.tables.clone()} {panels} {callback} /> }
     }
 
     /// Export/Copy format-picker spawned in place of the context menu, anchored
@@ -462,7 +435,7 @@ impl PanelMenu {
             <PortalModal
                 key={tag_name}
                 {tag_name}
-                surface={StyleSurface::DropdownMenu}
+                sheet={StyleSurface::DropdownMenu.sheet()}
                 {target}
                 own_focus=true
                 {on_close}
@@ -474,20 +447,21 @@ impl PanelMenu {
     }
 }
 
-/// Create a session-long 0×0 anchor element at viewport `(x, y)`, appended to
-/// `<body>`, for both stages' `PortalModal`s to position against.
-fn session_anchor(x: f64, y: f64) -> HtmlElement {
+/// Create the session-long 0×0 cursor anchor at viewport `(x, y)` as a
+/// light-DOM child of `viewer` in the modal slot.
+fn session_anchor(viewer: &HtmlElement, x: f64, y: f64) -> HtmlElement {
     let anchor: HtmlElement = global::document()
         .create_element("div")
         .unwrap()
         .unchecked_into();
 
+    let _ = anchor.set_attribute("slot", MODAL_SLOT);
     let style = anchor.style();
     let _ = style.set_property("position", "fixed");
     let _ = style.set_property("left", &format!("{x}px"));
     let _ = style.set_property("top", &format!("{y}px"));
     let _ = style.set_property("width", "0px");
     let _ = style.set_property("height", "0px");
-    let _ = global::body().append_child(&anchor);
+    let _ = viewer.append_child(&anchor);
     anchor
 }

package/src/rust/components/panel_tab.rs

@@ -19,6 +19,10 @@ use wasm_bindgen::prelude::*;
 use web_sys::*;
 use yew::prelude::*;
 
+use crate::components::rows_counter::RowsCounter;
+use crate::session::{Session, ViewStats};
+use crate::utils::Subscription;
+
 #[wasm_bindgen(inline_js = r#"
     export function define_panel_tab(name) {
         if (!customElements.get(name)) {
@@ -41,8 +45,6 @@ thread_local! {
     static ELEMENT_DEFINED: Cell<bool> = const { Cell::new(false) };
 
     /// The shared, constructed stylesheet adopted into every tab's ShadowRoot.
-    /// Built once from `panel-tab.css`; a constructed `CSSStyleSheet` is cheap
-    /// and safe to adopt into arbitrarily many roots.
     static TAB_SHEET: CssStyleSheet = {
         let sheet = CssStyleSheet::new().unwrap();
         sheet.replace_sync(include_str!("../../css/panel-tab.css"))
@@ -55,11 +57,6 @@ thread_local! {
 /// lifecycle callbacks — it exists only to own a ShadowRoot into which each
 /// tab's contents are rendered (so the tab's structure CSS is encapsulated in
 /// its `adoptedStyleSheets` rather than injected into `document.head`).
-///
-/// The host stays a *light-DOM* child of the viewer, so the per-panel `theme`
-/// attr is still matched by the document theme rules (`perspective-viewer
-/// [theme="X"]`); the `--psp-*` they set are inherited across the shadow
-/// boundary into the tab's contents.
 fn ensure_custom_element() {
     ELEMENT_DEFINED.with(|defined| {
         if !defined.get() {
@@ -90,16 +87,6 @@ fn adopt_sheet(shadow_root: &Element) {
 /// `<regular-layout-frame>` titlebar via a `<slot name="tab-{id}" slot="tab">`
 /// (rendered by `MainPanel`); the tab's *contents* live in the host's
 /// **ShadowRoot**, whose `adoptedStyleSheets` carry the structure CSS.
-///
-/// Keeping the host in the light DOM — like the plugin — is what lets
-/// *document* theme CSS (`perspective-viewer [theme="X"]`) reach it, so each
-/// panel's chrome is themed by the native cascade instead of a runtime-inlined
-/// string; the `--psp-*` those rules set are inherited across the shadow
-/// boundary into the contents. The host carries `part="tab"`, which
-/// `<regular-layout-frame>`'s pointer handler treats as a drag handle
-/// (regular-layout@>=0.6.0's custom-tab contract); the title is
-/// `pointer-events:none` so clicks fall through to the host (like the built-in
-/// `<regular-layout-tab>`).
 #[derive(Properties, PartialEq)]
 pub struct PanelTabProps {
     /// The `<perspective-viewer>` host element; the tab is attached here as a
@@ -112,6 +99,10 @@ pub struct PanelTabProps {
     /// The panel's title; falls back to the id when `None`.
     pub title: Option<String>,
 
+    /// This panel's own `Session`, whose `stats_changed` the tab subscribes
+    /// to directly so a stats tick re-renders only this tab.
+    pub session: Session,
+
     /// This panel's effective theme. Reflected onto the host's `theme`
     /// attribute so the document theme rules (`perspective-viewer [theme="X"]`)
     /// theme the tab per-panel via the native cascade.
@@ -147,6 +138,11 @@ pub struct PanelTabProps {
     /// at zero panels).
     pub is_settings_open: bool,
 
+    /// `true` while this panel's close awaits its layout commit, which keeps
+    /// the tab rendered but inert.
+    #[prop_or_default]
+    pub closing: bool,
+
     /// `false` for a lone panel — suppresses the tab rearrange-drag.
     /// `<regular-layout-frame>` arms a drag from any `part="tab"` pointerdown,
     /// but a lone panel has nowhere to drop, so the host `pointerdown` handler
@@ -189,56 +185,81 @@ const TITLE_PLACEHOLDER: &str = "untitled";
 
 pub enum PanelTabMsg {
     /// A pointerdown on the tab host. Selects the panel; and when it's the
-    /// second within [`DBLCLICK_MS`], enters title-edit mode. Carries the
-    /// event `timeStamp` (ms). We synthesize the double-click from pointerdown
-    /// because `<regular-layout-frame>` calls `setPointerCapture` +
-    /// `preventDefault` on the tab's pointerdown (to arm a drag), which
-    /// suppresses the browser's synthesized `click`/`dblclick` — so a native
-    /// `dblclick` listener never fires on the tab.
+    /// second within [`DBLCLICK_MS`], enters title-edit mode.
     PointerDown(f64),
     Close,
+
     /// The tab's open-settings button (shown while the settings sidebar is
     /// closed, in the close button's place).
     OpenSettings,
     ContextMenu(f64, f64),
+
     /// Track the live `<input>` value while editing (drives the auto-sizer).
     EditInput(String),
+
     /// Commit the edited title to the panel's session (blur / Enter).
     CommitEdit,
+
     /// Abandon the edit, restoring the previous title (Escape).
     CancelEdit,
+
+    /// This panel's `Session::stats_changed` fired; re-read the stats.
+    StatsChanged,
 }
 
 pub struct PanelTab {
     host: HtmlElement,
-    /// The host's open ShadowRoot; the tab's contents are portaled here (stored
-    /// as `Element` for `create_portal`, matching `PortalModal`).
     shadow_root: Element,
-    /// `pointerdown` listener on the host (kept alive); selects this panel and
-    /// synthesizes double-click-to-edit (see [`PanelTabMsg::PointerDown`]).
     _pointerdown: Closure<dyn FnMut(PointerEvent)>,
-    /// `contextmenu` listener on the host (kept alive); opens the panel menu.
     _contextmenu: Closure<dyn FnMut(MouseEvent)>,
-    /// Current `draggable` prop, shared into the `pointerdown` closure so a
-    /// prop change (lone ⇄ multi panel) takes effect without re-creating it.
     draggable: Rc<Cell<bool>>,
+
     /// `timeStamp` (ms) of the last host pointerdown, for synthesizing
-    /// double-clicks. `NEG_INFINITY` until the first pointerdown.
+    /// double-clicks.
     last_pointerdown: f64,
+
     /// `true` while the title is being edited (renders an `<input>`).
     editing: bool,
+
     /// Live edited value; controls the `<input>` and the auto-sizer width.
     edit_value: String,
+
     /// The edit `<input>`, for focusing on edit entry.
     input_ref: NodeRef,
+
     /// Focus + select-all the input on the next render after entering edit
     /// mode.
     focus_pending: bool,
+
+    /// The `theme` prop value last written to the host.
+    stamped_theme: Option<Option<String>>,
+
+    /// This panel's `Table`/`View` dimensions, rendered as the `RowsCounter`
+    /// after the title.
+    stats: Option<ViewStats>,
+
+    /// Subscription to `session.stats_changed`, armed only while the tab is
+    /// `visible`.
+    _stats_sub: Option<Subscription>,
 }
 
 impl PanelTab {
     fn slot_name(panel_id: &str) -> String {
-        format!("tab-{panel_id}")
+        format!("tab-{}", panel_id)
+    }
+
+    /// Arm the `session.stats_changed` subscription and take a fresh stats
+    /// snapshot.
+    fn arm_stats(&mut self, ctx: &Context<Self>) {
+        let cb = ctx.link().callback(|_: ()| PanelTabMsg::StatsChanged);
+        self._stats_sub = Some(ctx.props().session.stats_changed.add_notify_listener(&cb));
+        self.stats = ctx.props().session.get_table_stats();
+    }
+
+    /// Drop the stats subscription and snapshot.
+    fn disarm_stats(&mut self) {
+        self._stats_sub = None;
+        self.stats = None;
     }
 
     /// Enter title-edit mode, seeding the input with the *real* title (empty
@@ -261,8 +282,8 @@ impl PanelTab {
     /// tab of every stack, not just the single active panel; `single`/`multi`
     /// reflect the host viewer's panel count. The shadow CSS keys off
     /// `:host(.active)` / `:host(.visible)` / `:host(.single)`.
-    fn sync_class(&self, active: bool, visible: bool, single: bool) {
-        let mut class = Vec::with_capacity(3);
+    fn sync_class(&self, active: bool, visible: bool, single: bool, closing: bool) {
+        let mut class = Vec::with_capacity(4);
         if active {
             class.push("active");
         }
@@ -271,6 +292,10 @@ impl PanelTab {
             class.push("visible");
         }
 
+        if closing {
+            class.push("closing");
+        }
+
         class.push(if single { "single" } else { "multi" });
         let _ = self.host.set_attribute("class", &class.join(" "));
     }
@@ -331,7 +356,7 @@ impl Component for PanelTab {
         let _ = host
             .add_event_listener_with_callback("contextmenu", contextmenu.as_ref().unchecked_ref());
 
-        Self {
+        let mut tab = Self {
             host,
             shadow_root,
             _pointerdown: pointerdown,
@@ -342,7 +367,16 @@ impl Component for PanelTab {
             edit_value: String::new(),
             input_ref: NodeRef::default(),
             focus_pending: false,
+            stamped_theme: None,
+            stats: None,
+            _stats_sub: None,
+        };
+
+        if ctx.props().visible {
+            tab.arm_stats(ctx);
         }
+
+        tab
     }
 
     fn changed(&mut self, ctx: &Context<Self>, old: &Self::Properties) -> bool {
@@ -352,6 +386,12 @@ impl Component for PanelTab {
                 .set_attribute("slot", &Self::slot_name(&ctx.props().panel_id));
         }
 
+        if !ctx.props().visible {
+            self.disarm_stats();
+        } else if self._stats_sub.is_none() || ctx.props().session != old.session {
+            self.arm_stats(ctx);
+        }
+
         self.draggable.set(ctx.props().draggable);
         true
     }
@@ -400,6 +440,12 @@ impl Component for PanelTab {
                 self.editing = false;
                 true
             },
+            PanelTabMsg::StatsChanged => {
+                let stats = ctx.props().session.get_table_stats();
+                let changed = stats != self.stats;
+                self.stats = stats;
+                changed
+            },
         }
     }
 
@@ -465,6 +511,7 @@ impl Component for PanelTab {
                 <span class="psp-tab-caret" />
                 // <span class="psp-tab-grip" />
                 { title_html }
+                if ctx.props().visible { <RowsCounter stats={self.stats.clone()} /> }
                 if ctx.props().is_master { <span class="psp-tab-master" /> }
                 if !ctx.props().is_settings_open {
                     <button class="psp-tab-settings" onpointerdown={on_open_settings} />
@@ -478,14 +525,24 @@ impl Component for PanelTab {
     }
 
     fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
-        self.sync_class(ctx.props().active, ctx.props().visible, ctx.props().single);
-        match &ctx.props().theme {
-            Some(theme) => {
-                let _ = self.host.set_attribute("theme", theme);
-            },
-            None => {
-                let _ = self.host.remove_attribute("theme");
-            },
+        self.sync_class(
+            ctx.props().active,
+            ctx.props().visible,
+            ctx.props().single,
+            ctx.props().closing,
+        );
+        let theme = &ctx.props().theme;
+        if self.stamped_theme.as_ref() != Some(theme) {
+            match theme {
+                Some(theme) => {
+                    let _ = self.host.set_attribute("theme", theme);
+                },
+                None => {
+                    let _ = self.host.remove_attribute("theme");
+                },
+            }
+
+            self.stamped_theme = Some(theme.clone());
         }
 
         if !self.host.is_connected() {

package/src/rust/components/plugin_tab.rs

@@ -22,13 +22,13 @@ use yew::prelude::*;
 use crate::components::column_settings_sidebar::style_tab::primitive_field::{
     BoolField, ColorField, EnumField, NumberFieldPrimitive,
 };
-use crate::components::containers::control_group::ControlGroup;
 use crate::config::ControlSpec;
 use crate::presentation::Presentation;
 use crate::queries::get_plugin_config_schema;
 use crate::renderer::Renderer;
 use crate::session::Session;
 use crate::tasks::send_plugin_config;
+use crate::ui::ControlGroup;
 use crate::utils::PtrEqRc;
 
 #[derive(Clone, PartialEq, Properties)]

package/src/rust/components/render_warning.rs

@@ -27,13 +27,13 @@ pub struct RenderWarningProps {
 pub fn render_warning(props: &RenderWarningProps) -> Html {
     let dimensions = props.dimensions;
     let (col_warn, row_warn) = if let Some(limits) = dimensions {
-        let col_warn = if limits.max_cols.is_some_and(|x| x < limits.num_cols) {
+        let col_warn = if limits.is_col_capped() {
             Some((limits.max_cols.unwrap(), limits.num_cols))
         } else {
             None
         };
 
-        let row_warn = if limits.max_rows.is_some_and(|x| x < limits.num_rows) {
+        let row_warn = if limits.is_row_capped() {
             Some((
                 limits.num_cols * limits.max_rows.unwrap(),
                 limits.num_cols * limits.num_rows,

package/src/rust/components/{status_bar_counter.rs → rows_counter.rs}

@@ -15,17 +15,17 @@ use yew::prelude::*;
 use crate::session::ViewStats;
 use crate::utils::u32Ext;
 
-/// Props are now pure value types: no `Session` handle, no PubSub
-/// subscriptions.  The parent passes an updated `stats` whenever the
-/// underlying data changes (driven by the root's `UpdateSession` message).
+/// Pure value props: no `Session` handle, no PubSub subscriptions. The parent
+/// (`PanelTab`) passes its panel's `stats` snapshot, refreshed by the root on
+/// that panel's `Session::stats_changed`.
 #[derive(PartialEq, Properties)]
-pub struct StatusBarRowsCounterProps {
+pub struct RowsCounterProps {
     pub stats: Option<ViewStats>,
 }
 
-/// A component to show the current [`Table`]'s dimensions.
+/// Shows a panel's `Table`/`View` dimensions in its `PanelTab` header.
 #[function_component]
-pub fn StatusBarRowsCounter(props: &StatusBarRowsCounterProps) -> Html {
+pub fn RowsCounter(props: &RowsCounterProps) -> Html {
     match props.stats {
         Some(
             ViewStats {
@@ -49,7 +49,7 @@ pub fn StatusBarRowsCounter(props: &StatusBarRowsCounterProps) -> Html {
                 <span id="rows">
                     <span>{ vrows }</span>
                     <span class="total">{ format!(" ({})", nrows) }</span>
-                    <span class="x">{ " x " }</span>
+                    <span class="x">{ " / " }</span>
                     <span>{ vcols }</span>
                     <span class="total">{ format!(" ({})", ncols) }</span>
                 </span>
@@ -77,7 +77,7 @@ pub fn StatusBarRowsCounter(props: &StatusBarRowsCounterProps) -> Html {
                 <span id="rows">
                     <span>{ vrows }</span>
                     <span class="total">{ format!(" ({})", nrows) }</span>
-                    <span class="x">{ " x " }</span>
+                    <span class="x">{ " / " }</span>
                     <span>{ vcols }</span>
                 </span>
             }
@@ -94,7 +94,7 @@ pub fn StatusBarRowsCounter(props: &StatusBarRowsCounterProps) -> Html {
             html! {
                 <span id="rows">
                     <span>{ vrows }</span>
-                    <span class="x">{ " x " }</span>
+                    <span class="x">{ " / " }</span>
                     <span>{ vcols }</span>
                     <span class="total">{ format!(" ({})", ncols) }</span>
                 </span>
@@ -110,7 +110,7 @@ pub fn StatusBarRowsCounter(props: &StatusBarRowsCounterProps) -> Html {
             html! {
                 <span id="rows">
                     <span>{ nrows }</span>
-                    <span class="x">{ " x " }</span>
+                    <span class="x">{ " / " }</span>
                     <span>{ ncols }</span>
                 </span>
             }

package/src/rust/components/settings_panel.rs

@@ -19,8 +19,7 @@ use yew::prelude::*;
 use super::column_selector::ColumnSelector;
 use super::plugin_selector::PluginSelector;
 use super::plugin_tab::PluginTab;
-use crate::components::containers::sidebar_close_button::SidebarCloseButton;
-use crate::components::form::debug::DebugPanel;
+use crate::components::debug_panel::DebugPanel;
 use crate::config::{PluginStaticConfig, PluginUpdate};
 use crate::presentation::{ColumnLocator, ColumnSettingsTarget, OpenColumnSettings, Presentation};
 use crate::queries::classify_column;
@@ -28,6 +27,7 @@ use crate::renderer::*;
 use crate::session::column_defaults_update::*;
 use crate::session::*;
 use crate::tasks::update_plugin_and_render;
+use crate::ui::SidebarCloseButton;
 use crate::utils::*;
 use crate::workspace::Workspace;