@perspective-dev/viewer 5.3.1 → 5.5.0

package/src/rust/components/main_panel/frame_theme.rs

@@ -21,42 +21,6 @@
 //! own per-panel themed background), but while the plugin is missing — not yet
 //! mounted, first draw pending, or torn down — the host-theme container shows
 //! through a panel themed differently, as a visible artifact.
-//!
-//! There is no native cascade channel from the light-DOM plugin to the frame
-//! (siblings in the flattened tree), so the value is mirrored imperatively:
-//! each panel's *plugin element* — light-DOM, slotted under the panel's slot,
-//! mounted eagerly at panel creation (`create_panel_model` /
-//! `Renderer::mount_active_plugin`) — is where the document theme rules
-//! actually resolve, so its computed `--psp--background-color` is copied onto
-//! the frame's inline style, where the frame's shadow parts inherit it. The
-//! plugin is the ONLY sound source element:
-//!
-//! - An owned hidden probe child of the viewer does NOT work: an *unslotted*
-//!   light-DOM child of a shadow host is outside the flattened tree, and
-//!   `getComputedStyle` returns all-empty for it even though the document rules
-//!   match it syntactically (selector matching is DOM-tree; style computation
-//!   is flat-tree).
-//! - The `<perspective-viewer-tab>` is slotted, but stamps its own `theme` attr
-//!   in `PanelTab::rendered` — an unordered sibling lifecycle relative to this
-//!   pass (the theme-stamp-lag class of bug).
-//! - The plugin's `theme` attr, by contrast, is stamped *synchronously at the
-//!   mutation sites* (`update_theme`, `restorePanel`, …) before the events that
-//!   schedule this render, so it is current when this pass reads it.
-//!
-//! A read is trusted ONLY when the plugin's stamped attr equals the theme
-//! being mirrored: a freshly-created panel's plugin is mounted *unstamped*
-//! (the attr first lands inside its first locked dispatch), and reading it
-//! early would silently mirror the HOST theme's values. Trusted reads seed
-//! [`MainPanel::theme_backgrounds`], the fallback for frames with no readable
-//! plugin (an unregistered plugin name stays lazily unmounted; plugin-switch
-//! and teardown transients). A frame with neither leaves the pass gate
-//! unlatched, so it retries on subsequent renders until the dispatch stamp
-//! lands (the render that follows that dispatch's `update_count` bump).
-//!
-//! Unlike the plugin `theme`/`active` stamps (see the NOTE in [`reconcile`]),
-//! the frame is pure viewer chrome — no plugin dispatch reads it — so
-//! stamping it from this async `rendered` pass cannot split a plugin draw
-//! across paints, and it needs no lock.
 
 use wasm_bindgen::prelude::*;
 use yew::prelude::*;
@@ -69,12 +33,7 @@ use crate::workspace::PanelId;
 /// `.rl-panel::part(container)` background resolves.
 const BACKGROUND_VAR: &str = "--psp--background-color";
 
-/// The inputs the frame backgrounds were last computed from; re-mirroring is
-/// skipped while these are unchanged, so the forced style recalcs of
-/// `getComputedStyle` don't run on every render (e.g. the per-update
-/// `update_count` renders of a streaming table). `available_themes` is part of
-/// the key because theme CSS registering late changes the *computed* value
-/// under an unchanged theme name.
+/// The inputs the frame backgrounds were last computed from.
 pub(super) type FrameThemeSnapshot = (
     Vec<PanelId>,
     Vec<(String, Option<String>)>,
@@ -82,12 +41,7 @@ pub(super) type FrameThemeSnapshot = (
 );
 
 impl MainPanel {
-    /// Mirror each panel's effective theme background (its own theme, else the
-    /// registry default — the same fallback the tab/menu use) onto its
-    /// `<regular-layout-frame>`'s inline `--psp--background-color`, read off
-    /// the panel's stamped plugin element (else the theme-keyed cache of prior
-    /// reads). A panel with no resolvable theme has the property removed,
-    /// falling back to the inherited host-theme value.
+    /// Mirror each panel's effective theme background.
     pub(super) fn stamp_frame_themes(&mut self, ctx: &Context<Self>) {
         let Some(layout) = self.layout_ref.cast::<web_sys::Element>() else {
             return;
@@ -104,8 +58,6 @@ impl MainPanel {
             return;
         }
 
-        // A theme-registry change can re-value an unchanged theme name, so
-        // cached reads from the previous registry are unsound.
         if let Some((_, _, prev_themes)) = &self.stamped_frame_themes
             && prev_themes != &snapshot.2
         {
@@ -155,19 +107,11 @@ impl MainPanel {
             }
         }
 
-        // Latch only a fully-resolved pass; an unresolved frame (unmounted or
-        // not-yet-stamped plugin) retries each render until its dispatch
-        // stamp lands.
         self.stamped_frame_themes = complete.then_some(snapshot);
     }
 }
 
-/// Read the computed [`BACKGROUND_VAR`] off `slot`'s plugin element — the
-/// viewer light-DOM child mounted under exactly that slot name (the tab and
-/// toolbar use `tab-`/`statusbar-extra-` prefixed slots). Requires the
-/// plugin's `theme` attr to already equal `theme` — during a plugin switch
-/// two elements briefly share the slot, and a freshly-mounted plugin is not
-/// yet stamped; both are disambiguated by the attr check.
+/// Read the computed [`BACKGROUND_VAR`] off `slot`'s plugin element.
 fn read_plugin_background(viewer: &web_sys::Element, slot: &str, theme: &str) -> Option<String> {
     let children = viewer.children();
     let plugin = (0..children.length())

package/src/rust/components/main_panel/msg.rs

@@ -25,6 +25,10 @@ pub enum MainPanelMsg {
     /// deliver in every observed context.
     StagedChanged,
 
+    /// A layout tree was staged for the retained panel set
+    /// (`layout_staged` PubSub): re-render so `reconcile` applies it.
+    LayoutStaged,
+
     /// The `<regular-layout>` tree changed (fired by its
     /// `regular-layout-update` event). Used to detect panels removed from
     /// the layout (e.g. a frame's close button) so they can be disposed.

package/src/rust/components/main_panel/reconcile.rs

@@ -190,16 +190,21 @@ impl MainPanel {
             self.inserted.push(name.to_owned());
         }
 
-        // Remove cells whose panels are gone.
+        let mut pending = std::mem::take(&mut self.pending_removals);
         self.inserted.retain(|name| {
             if panel_ids.iter().any(|id| id.as_str() == name) {
-                true
-            } else {
+                return true;
+            }
+
+            if pending.insert(name.clone()) {
                 let _ = layout.remove_panel(name);
-                false
             }
+
+            true
         });
 
+        self.pending_removals = pending;
+
         // A removed panel can't stay "maximized" (regular-layout drops the
         // maximize stylesheet when its panel leaves the layout).
         if let Some(m) = &self.maximized

package/src/rust/components/main_panel/render.rs

@@ -18,7 +18,8 @@ use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
 use super::{MainPanel, MainPanelMsg, MainPanelProps};
-use crate::components::panel_menu::PanelMenu;
+use crate::components::new_panel_menu::NewPanelPick;
+use crate::components::panel_menu::{PanelCommand, PanelMenu};
 use crate::components::panel_tab::PanelTab;
 use crate::components::render_warning::RenderWarning;
 use crate::components::status_bar::StatusBar;
@@ -73,14 +74,26 @@ impl MainPanel {
             let active_slot = renderer.slot_name();
             // Panel-count chrome (`single`/`multi`, closable, draggable)
             let placed_count = ctx.props().workspace.placed_count();
+            let closing = self
+                .inserted
+                .iter()
+                .filter(|name| !ctx.props().panel_ids.iter().any(|id| id.as_str() == *name))
+                .map(|name| PanelId::from(name.as_str()))
+                .collect::<Vec<_>>();
             let cells = ctx
                 .props()
                 .panel_ids
                 .iter()
                 .filter(|id| !ctx.props().workspace.is_staged(id))
-                .map(|id| {
+                .map(|id| (id, false))
+                .chain(closing.iter().map(|id| (id, true)))
+                .map(|(id, is_closing)| {
                     let name = id.as_str().to_owned();
                     let mut class = classes!("rl-panel");
+                    if is_closing {
+                        class.push("closing");
+                    }
+
                     if placed_count > 1 {
                         if active_slot.as_deref() == Some(name.as_str()) {
                             class.push("active");
@@ -103,7 +116,9 @@ impl MainPanel {
                     let on_activate = ctx.props().on_activate_panel.clone();
                     let activate_name = name.clone();
                     let onpointerdown = Callback::from(move |_: web_sys::PointerEvent| {
-                        on_activate.emit(activate_name.clone());
+                        if !is_closing {
+                            on_activate.emit(activate_name.clone());
+                        }
                     });
 
                     // Right-click anywhere in the panel opens the context menu. This
@@ -214,23 +229,41 @@ impl MainPanel {
                     on_settings.emit(());
                 })
             };
+            let closing_tabs = closing.iter().filter_map(|id| {
+                let panel = ctx.props().workspace.closing_panel(id)?;
+                let title = panel.session.get_title().filter(|t| !t.is_empty());
+                let theme = panel.renderer.theme().or_else(|| {
+                    ctx.props()
+                        .presentation_props
+                        .available_themes
+                        .first()
+                        .cloned()
+                });
+                Some((id, panel.session, title, theme, true))
+            });
             let tabs = ctx
                 .props()
                 .panel_ids
                 .iter()
                 .filter(|id| !ctx.props().workspace.is_staged(id))
-                .map(|id| {
-                    let name = id.as_str().to_owned();
+                .filter_map(|id| {
+                    let panel = ctx.props().workspace.panel(id)?;
+                    let name = id.as_str();
                     let title = ctx
                         .props()
                         .panel_titles
                         .iter()
-                        .find(|(pid, _)| pid == &name)
+                        .find(|(pid, _)| pid == name)
                         .and_then(|(_, t)| t.clone());
-                    let active = active_slot.as_deref() == Some(name.as_str());
+                    let theme = ctx.props().effective_panel_theme(name);
+                    Some((id, panel.session, title, theme, false))
+                })
+                .chain(closing_tabs)
+                .map(|(id, session, title, theme, is_closing)| {
+                    let name = id.as_str().to_owned();
+                    let active = !is_closing && active_slot.as_deref() == Some(name.as_str());
                     let visible = !self.hidden_tabs.contains(name.as_str());
-                    let is_master = ctx.props().panel_masters.contains(id);
-                    let theme = ctx.props().effective_panel_theme(&name);
+                    let is_master = !is_closing && ctx.props().panel_masters.contains(id);
 
                     html! {
                         <PanelTab
@@ -238,14 +271,16 @@ impl MainPanel {
                             viewer={viewer_elem.clone()}
                             panel_id={name.clone()}
                             {title}
+                            {session}
                             {theme}
                             {active}
                             {visible}
                             {is_master}
                             {single}
-                            {closable}
+                            closable={closable && !is_closing}
                             {is_settings_open}
-                            {draggable}
+                            draggable={draggable && !is_closing}
+                            closing={is_closing}
                             on_select={on_select.clone()}
                             on_close={on_close.clone()}
                             on_open_settings={on_open_settings.clone()}
@@ -349,11 +384,27 @@ impl MainPanel {
             })
             .unwrap_or_default();
 
+        let on_new_panel = {
+            let on_command = ctx.props().on_panel_command.clone();
+            let id = renderer.slot_name().unwrap_or_default();
+            Callback::from(move |pick: NewPanelPick| {
+                let cmd = match pick {
+                    NewPanelPick::FromTable { client, table } => {
+                        PanelCommand::NewFrom { client, table }
+                    },
+                    NewPanelPick::FromPanel(source) => PanelCommand::NewFromPanel(source),
+                };
+
+                on_command.emit((id.clone(), cmd));
+            })
+        };
+
         html! {
             <div id="main_column">
                 <StatusBar
                     id="status_bar"
                     on_reset={ctx.props().on_reset.clone()}
+                    {on_new_panel}
                     session_props={ctx.props().session_props.clone()}
                     presentation_props={ctx.props().presentation_props.clone()}
                     is_settings_open={ctx.props().is_settings_open}

package/src/rust/components/main_panel/update.rs

@@ -22,6 +22,7 @@ use yew::prelude::*;
 use super::MainPanel;
 use crate::components::panel_menu::PanelCommand;
 use crate::js::{Layout, RegularLayout};
+use crate::renderer::SUBPIXEL_EPSILON;
 use crate::tasks::resize_callback;
 
 impl MainPanel {
@@ -42,11 +43,9 @@ impl MainPanel {
         false
     }
 
+    /// Report closed every panel this commit dropped from the layout, and
+    /// re-render so its frame leaves the DOM in the commit's paint.
     pub(super) fn on_layout_updated(&mut self, ctx: &Context<Self>) -> bool {
-        // A panel still tracked in `inserted` but no longer present in
-        // the layout (calculatePath → null) was removed by the layout —
-        // i.e. its frame's close button was pressed. Report it for
-        // disposal.
         let Some(el) = self.layout_ref.cast::<web_sys::HtmlElement>() else {
             return false;
         };
@@ -68,10 +67,14 @@ impl MainPanel {
             }
         });
 
+        let closed_any = !closed.is_empty();
         for id in closed {
-            ctx.props().on_close_panel.emit(id);
+            self.pending_removals.remove(&id);
+            ctx.props().on_panel_closed.emit(id);
         }
 
+        let reissue = self.forget_dropped_removals(&layout);
+
         // A layout change (divider drag, insert, restore) reflows the
         // grid cells without resizing the host, so the host
         // `ResizeObserver` never fires. Resize every activated panel's
@@ -92,6 +95,19 @@ impl MainPanel {
             if let Some(panel) = ctx.props().workspace.panel(id)
                 && panel.renderer.is_plugin_activated().unwrap_or(false)
             {
+                if let Some((w, h)) = panel.renderer.take_presized_box()
+                    && let Some(plugin) = panel.renderer.active_plugin()
+                {
+                    let rect = plugin
+                        .unchecked_ref::<web_sys::Element>()
+                        .get_bounding_client_rect();
+                    if (rect.width() - w).abs() <= SUBPIXEL_EPSILON
+                        && (rect.height() - h).abs() <= SUBPIXEL_EPSILON
+                    {
+                        continue;
+                    }
+                }
+
                 resize_callback(&panel.session, &panel.renderer).emit(());
             }
         }
@@ -111,10 +127,27 @@ impl MainPanel {
             self.hidden_tabs = hidden;
             true
         } else {
-            false
+            closed_any || reissue
         }
     }
 
+    /// Forget every issued removal whose panel survived the commit, so the
+    /// next `reconcile` re-issues it.
+    fn forget_dropped_removals(&mut self, layout: &RegularLayout) -> bool {
+        let dropped = self
+            .pending_removals
+            .iter()
+            .filter(|id| layout.contains_panel(id))
+            .cloned()
+            .collect::<Vec<_>>();
+        let reissue = !dropped.is_empty();
+        for id in dropped {
+            self.pending_removals.remove(&id);
+        }
+
+        reissue
+    }
+
     pub(super) fn on_tab_selected(&self, ctx: &Context<Self>, name: String) -> bool {
         ctx.props().on_activate_panel.emit(name);
         false
@@ -169,10 +202,6 @@ impl MainPanel {
 
                 self.maximized = None;
             },
-            // The stage menu (no target panel) offers ONLY `NewFrom`, whose
-            // handler resolves the client/table purely from the loaded-clients
-            // registry — the panel id is unused there, so the empty id never
-            // reaches a panel lookup.
             cmd => ctx
                 .props()
                 .on_panel_command

package/src/rust/components/main_panel.rs

@@ -61,10 +61,14 @@ pub struct MainPanelProps {
     /// active panel.
     pub on_activate_panel: Callback<String>,
 
-    /// Fired with a panel id when its frame's close button removes it from the
-    /// layout, so the root can dispose the panel.
+    /// Fired with a panel id from a tab × (an app-initiated close): the root
+    /// removes it from the model at once and parks its engines.
     pub on_close_panel: Callback<String>,
 
+    /// Fired with a panel id once the `regular-layout` tree no longer holds
+    /// it, so the root can eject the parked panel.
+    pub on_panel_closed: Callback<String>,
+
     /// Fired with `(panel id, command)` when the panel context menu selects a
     /// command the root executes (New/Duplicate/Reset/ToggleMaster/Close).
     /// Maximize/Restore are handled HERE (this component owns the layout
@@ -203,6 +207,10 @@ pub struct MainPanel {
     /// every listener, and nothing ever noticed.
     listener_target: Option<web_sys::HtmlElement>,
 
+    /// Ids gone from the model whose `removePanel` has been issued to the
+    /// layout and not yet committed.
+    pending_removals: HashSet<String>,
+
     /// Per-panel `ResizeObserver`s, keyed by panel id, each observing that
     /// panel's slotted plugin element and resizing only that panel's
     /// `Renderer`. Bound in `BeforeResize` for the DRAGGED panel only (it is
@@ -242,6 +250,9 @@ pub struct MainPanel {
     /// `Workspace::staged_changed` → [`MainPanelMsg::StagedChanged`] on THIS
     /// component's scope (see the message doc for why not the root's).
     _staged_sub: crate::utils::Subscription,
+
+    /// `Workspace::layout_staged` → [`MainPanelMsg::LayoutStaged`].
+    _layout_staged_sub: crate::utils::Subscription,
 }
 
 impl Component for MainPanel {
@@ -343,10 +354,20 @@ impl Component for MainPanel {
                 .add_listener(move |()| cb.emit(()))
         };
 
+        let layout_staged_sub = {
+            use crate::utils::AddListener;
+            let cb = ctx.link().callback(|_: ()| MainPanelMsg::LayoutStaged);
+            ctx.props()
+                .workspace
+                .layout_staged()
+                .add_listener(move |()| cb.emit(()))
+        };
+
         Self {
             main_panel_ref: NodeRef::default(),
             layout_ref: NodeRef::default(),
             inserted: Vec::new(),
+            pending_removals: HashSet::new(),
             _layout_update_listener: listener,
             _layout_select_listener: select_listener,
             _layout_before_resize_listener: before_resize_listener,
@@ -359,6 +380,7 @@ impl Component for MainPanel {
             theme_backgrounds: HashMap::new(),
             stamped_frame_themes: None,
             _staged_sub: staged_sub,
+            _layout_staged_sub: layout_staged_sub,
         }
     }
 
@@ -366,6 +388,7 @@ impl Component for MainPanel {
         match msg {
             MainPanelMsg::PointerEvent(event) => self.on_pointer_event(ctx, event),
             MainPanelMsg::StagedChanged => true,
+            MainPanelMsg::LayoutStaged => true,
             MainPanelMsg::LayoutUpdated => self.on_layout_updated(ctx),
             MainPanelMsg::TabSelected(name) => self.on_tab_selected(ctx, name),
             MainPanelMsg::ContextMenu(id, x, y) => self.on_context_menu(ctx, id, x, y),
@@ -376,6 +399,7 @@ impl Component for MainPanel {
     }
 
     fn changed(&mut self, ctx: &Context<Self>, old: &Self::Properties) -> bool {
+        self.close_unstaged_panels(ctx, old);
         ctx.props() != old
     }
 
@@ -403,3 +427,17 @@ impl Component for MainPanel {
 
     fn destroy(&mut self, _ctx: &Context<Self>) {}
 }
+
+impl MainPanel {
+    /// Report closed every panel gone from the model that the layout never
+    /// held, since it has no commit to wait for.
+    fn close_unstaged_panels(&self, ctx: &Context<Self>, old: &MainPanelProps) {
+        for id in &old.panel_ids {
+            if !ctx.props().panel_ids.contains(id)
+                && !self.inserted.iter().any(|n| n == id.as_str())
+            {
+                ctx.props().on_panel_closed.emit(id.as_str().to_owned());
+            }
+        }
+    }
+}

package/src/rust/components/mod.rs

@@ -16,36 +16,33 @@
 
 #[cfg(feature = "llm-agent")]
 pub mod chat_panel;
+pub mod code_editor;
 pub mod column_dropdown;
 pub mod column_selector;
 pub mod column_settings_sidebar;
-pub mod containers;
-pub mod context_menu;
 pub mod copy_dropdown;
 pub mod datetime_column_style;
+pub mod debug_panel;
+pub mod dragdrop_list;
 pub mod editable_header;
 pub mod empty_row;
 pub mod export_dropdown;
 pub mod expression_editor;
 pub mod filter_dropdown;
-pub mod font_loader;
-pub mod form;
 pub mod function_dropdown;
 pub mod global_filter_bar;
 pub mod main_panel;
-pub mod modal;
+pub mod new_panel_menu;
 pub mod number_series_style;
 pub mod panel_menu;
 pub mod panel_tab;
 pub mod plugin_selector;
 pub mod plugin_tab;
-pub mod portal;
 pub mod render_warning;
+pub mod rows_counter;
 pub mod settings_panel;
 pub mod status_bar;
-pub mod status_bar_counter;
 pub mod status_indicator;
-pub mod string_column_style;
 pub mod style;
 pub mod style_controls;
 pub mod type_icon;

package/src/rust/components/new_panel_menu.rs

@@ -0,0 +1,97 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use std::rc::Rc;
+
+use yew::prelude::*;
+
+/// A pick in the "New" menu: a fresh panel on a hosted `Table`, or a copy of
+/// an existing panel (the same operation as the context menu's "Duplicate").
+#[derive(Clone, PartialEq)]
+pub enum NewPanelPick {
+    FromTable { client: String, table: String },
+    FromPanel(String),
+}
+
+/// `(client name, its hosted table names)` per loaded client — the resolved
+/// output of `queries::fetch_hosted_tables`.
+pub type HostedTables = Rc<Vec<(String, Vec<String>)>>;
+
+/// `(panel id, title)` per panel, in layout-insertion order.
+pub type PanelLabels = Rc<Vec<(String, Option<String>)>>;
+
+#[derive(Properties, PartialEq)]
+pub struct NewPanelMenuProps {
+    /// `None` while the hosted-table fetch is in flight.
+    pub tables: Option<HostedTables>,
+    pub panels: PanelLabels,
+    pub callback: Callback<NewPanelPick>,
+}
+
+/// The "New" menu body shared by the status bar dropdown and the context
+/// menu's "New" flyout.
+#[function_component]
+pub fn NewPanelMenu(props: &NewPanelMenuProps) -> Html {
+    let pick = |value: NewPanelPick| props.callback.reform(move |_: MouseEvent| value.clone());
+
+    let tables = match &props.tables {
+        None => html! { <span class="no-results">{ "Loading..." }</span> },
+        Some(clients) if clients.iter().all(|(_, tables)| tables.is_empty()) => {
+            html! { <span class="no-results">{ "No tables" }</span> }
+        },
+        Some(clients) => {
+            let multi = clients.len() > 1;
+            clients
+                .iter()
+                .map(|(client, tables)| {
+                    let rows = tables.iter().map(|table| {
+                        let onmousedown = pick(NewPanelPick::FromTable {
+                            client: client.clone(),
+                            table: table.clone(),
+                        });
+                        html! { <span class="dropdown-menu-item" {onmousedown}>{ table }</span> }
+                    });
+
+                    html! {
+                        <>
+                            if multi { <span class="dropdown-group-sublabel">{ client }</span> }
+                            { for rows }
+                        </>
+                    }
+                })
+                .collect::<Html>()
+        },
+    };
+
+    let panels = if props.panels.is_empty() {
+        html! { <span class="no-results">{ "No panels" }</span> }
+    } else {
+        props
+            .panels
+            .iter()
+            .map(|(id, title)| {
+                let onmousedown = pick(NewPanelPick::FromPanel(id.clone()));
+                let label = title.clone().unwrap_or_else(|| id.clone());
+                html! { <span class="dropdown-menu-item" {onmousedown}>{ label }</span> }
+            })
+            .collect::<Html>()
+    };
+
+    html! {
+        <div class="new-panel-menu">
+            <span class="dropdown-group-label" data-label="new-from-table" />
+            <div class="dropdown-group-container">{ tables }</div>
+            <span class="dropdown-group-label" data-label="new-from-panel" />
+            <div class="dropdown-group-container">{ panels }</div>
+        </div>
+    }
+}

package/src/rust/components/number_series_style.rs

@@ -13,9 +13,8 @@
 use web_sys::{HtmlInputElement, InputEvent};
 use yew::prelude::*;
 
-use super::modal::{ModalLink, SetModalLink};
-use crate::components::form::select_enum_field::SelectEnumField;
 use crate::config::*;
+use crate::ui::{IntlLabel, ModalLink, SelectEnumField, SetModalLink};
 use crate::utils::WeakScope;
 
 #[derive(Properties)]
@@ -113,7 +112,7 @@ impl Component for NumberSeriesStyle {
             });
             html! {
                 <div class="row">
-                    <label id="stack-label" />
+                    <IntlLabel name="stack" />
                     <input type="checkbox" id="stack-checkbox" {checked} {oninput} />
                 </div>
             }