perspective-viewer 5.0.0

A data visualization and analytics component, especially well-suited for large and/or streaming datasets.
Documentation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
// ┃ 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). ┃
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

//! The per-panel command menu: a cursor-anchored [`ContextMenu`] plus the
//! Export/Copy format-picker dropdowns it can spawn in place of itself. The
//! Export/Copy flows are handled end-to-end HERE (the target panel's engines
//! resolve from the `workspace` prop, like `StatusBar`'s own dropdowns);
//! every other command is emitted as a [`PanelCommand`] for the parent.
//!
//! Both stages are body-mounted [`PortalModal`]s positioned against a shared
//! session-long cursor anchor, so the menu is themed exactly like the pickers:
//! the host (`<perspective-context-menu theme="X">`) is matched by the
//! document theme rules' modal selector groups, with `X` = the TARGET panel's
//! effective theme (not the active/host theme).
//!
//! One menu "session" spans right-click → (menu | picker) → dismissal:
//! `on_close` fires exactly once, when the session ends (blur dismissal, a
//! command selection, or the picker closing).

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::style::StyleSurface;
use crate::config::*;
use crate::js::copy_to_clipboard;
use crate::presentation::Presentation;
use crate::tasks::export_method_to_blob;
use crate::utils::*;
use crate::workspace::{PanelId, Workspace};

/// A panel command the menu delegates to its parent. Export/Copy are absent —
/// they're handled internally by the picker flow.
#[derive(Clone, Debug, PartialEq, Eq)]
pub enum PanelCommand {
    New,
    NewFrom { client: String, table: String },
    Duplicate,
    Reset,
    Maximize,
    Restore,
    ToggleMaster,
    Close,
}

/// Which format-picker dropdown the context menu spawned in place of itself.
#[derive(Clone, Copy, PartialEq)]
pub enum PickerKind {
    Export,
    Copy,
}

#[derive(Properties)]
pub struct PanelMenuProps {
    /// Viewport (client) coordinates the menu (and any spawned picker) anchors
    /// at.
    pub x: f64,
    pub y: f64,

    /// The right-clicked panel this menu targets — or `None` for the
    /// EMPTY-stage menu (zero panels), which offers only the "New" sub-menu
    /// (its `NewFrom` items resolve from the loaded-clients registry, no
    /// panel required).
    pub panel_id: Option<String>,

    /// For per-panel command context (`is_master`, pivot state, panel count)
    /// and resolving the target panel's engines for Export/Copy.
    pub workspace: Workspace,

    /// For `export_method_to_blob`.
    pub presentation: Presentation,

    /// The TARGET panel's effective theme (its own, else the registry
    /// default), stamped on both stages' `PortalModal` hosts.
    pub theme: Option<String>,

    /// Whether the target panel is currently maximized (drives the
    /// Maximize/Restore item).
    pub maximized: bool,

    /// A command was selected — the parent executes it (and ends the session
    /// via the `on_close` that follows every selection).
    pub on_command: Callback<PanelCommand>,

    /// The menu session ended (backdrop dismissal, command selection, or
    /// picker close); the parent unmounts this component.
    pub on_close: Callback<()>,
}

impl PartialEq for PanelMenuProps {
    fn eq(&self, rhs: &Self) -> bool {
        self.x == rhs.x
            && self.y == rhs.y
            && self.panel_id == rhs.panel_id
            && self.theme == rhs.theme
            && self.maximized == rhs.maximized
    }
}

pub enum PanelMenuMsg {
    /// A parent-executed command was selected.
    Command(PanelCommand),

    /// Export/Copy was selected: swap the menu for the format picker.
    OpenPicker(PickerKind),

    /// The `ContextMenu` closed. Fired on backdrop dismissal AND after every
    /// item selection — swallowed when a picker was just opened (the session
    /// continues in the picker).
    MenuClosed,

    /// The picker closed (blur, or a completed export/copy).
    ClosePicker,

    /// The per-client hosted-table-name fetch (spawned at menu open, feeding
    /// the "New" sub-menu) resolved: `(client name, its table names)` per
    /// loaded client.
    TablesLoaded(Vec<(String, Vec<String>)>),
}

pub struct PanelMenu {
    /// The session-long 0×0 cursor anchor element (appended to `<body>`) both
    /// stages' `PortalModal`s position against; removed on destroy.
    anchor: HtmlElement,

    /// The open format picker, if the session is in its picker stage.
    picker: Option<PickerKind>,

    /// 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>)>>,
}

impl Component for PanelMenu {
    type Message = PanelMenuMsg;
    type Properties = PanelMenuProps;

    fn create(ctx: &Context<Self>) -> Self {
        let clients = ctx.props().workspace.clients();
        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));
            }

            link.send_message(PanelMenuMsg::TablesLoaded(tables));
            Ok(())
        });

        Self {
            anchor: session_anchor(ctx.props().x, ctx.props().y),
            picker: None,
            tables: None,
        }
    }

    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            PanelMenuMsg::Command(cmd) => {
                ctx.props().on_command.emit(cmd);
                false
            },
            PanelMenuMsg::OpenPicker(kind) => {
                self.picker = Some(kind);
                true
            },
            PanelMenuMsg::MenuClosed => {
                // The menu's `PortalModal` closes (blur) after every item
                // selection; when that selection just opened a picker, the
                // session continues — only a plain dismissal/selection ends
                // it.
                if self.picker.is_none() {
                    ctx.props().on_close.emit(());
                }

                false
            },
            PanelMenuMsg::ClosePicker => {
                ctx.props().on_close.emit(());
                false
            },
            PanelMenuMsg::TablesLoaded(tables) => {
                self.tables = Some(tables);
                self.picker.is_none()
            },
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        match &self.picker {
            Some(kind) => self.picker_html(ctx, *kind),
            None => self.menu_html(ctx),
        }
    }

    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);
    }
}

impl PanelMenu {
    fn menu_html(&self, ctx: &Context<Self>) -> Html {
        let on_close = ctx.link().callback(|_| PanelMenuMsg::MenuClosed);
        let item = |label: &str, on_select: Callback<()>, disabled: bool| {
            ContextMenuEntry::Item(ContextMenuItem {
                label: label.to_owned(),
                on_select,
                disabled,
            })
        };
        let cmd = |cmd: PanelCommand| {
            ctx.link()
                .callback(move |_| PanelMenuMsg::Command(cmd.clone()))
        };
        let entries = match ctx.props().panel_id.as_deref() {
            // The empty-stage menu: no target panel, so only the "New"
            // sub-menu. Hover-only (`on_select: None`) — plain "New" copies
            // its source panel's table binding, which doesn't exist here.
            None => vec![ContextMenuEntry::Submenu {
                label: "New".to_owned(),
                on_select: None,
                entries: self.new_submenu_entries(ctx),
            }],
            Some(panel_id) => {
                let can_close = ctx.props().workspace.len() > 1;
                let is_master = ctx.props().workspace.is_master(&PanelId::from(panel_id));
                vec![
                    ContextMenuEntry::Submenu {
                        label: "New".to_owned(),
                        on_select: Some(cmd(PanelCommand::New)),
                        entries: self.new_submenu_entries(ctx),
                    },
                    item("Duplicate", cmd(PanelCommand::Duplicate), false),
                    item("Reset", cmd(PanelCommand::Reset), false),
                    item(
                        "Export",
                        ctx.link()
                            .callback(|_| PanelMenuMsg::OpenPicker(PickerKind::Export)),
                        false,
                    ),
                    item(
                        "Copy",
                        ctx.link()
                            .callback(|_| PanelMenuMsg::OpenPicker(PickerKind::Copy)),
                        false,
                    ),
                    if ctx.props().maximized {
                        item("Restore", cmd(PanelCommand::Restore), false)
                    } else {
                        item("Maximize", cmd(PanelCommand::Maximize), false)
                    },
                    // Never gated: masters broadcast from ANY select/click event
                    // (flat grids fall back to the clicked cell's `==` clause), not
                    // just a grouped row tree.
                    item(
                        if is_master { "Detail" } else { "Master" },
                        cmd(PanelCommand::ToggleMaster),
                        false,
                    ),
                    item("Close", cmd(PanelCommand::Close), !can_close),
                ]
            },
        };

        html! {
            <PortalModal
                tag_name="perspective-context-menu"
                surface={StyleSurface::ContextMenu}
                target={Some(self.anchor.clone())}
                own_focus=true
                on_close={&on_close}
                theme={ctx.props().theme.clone().unwrap_or_default()}
            >
                // Selection-end and blur-dismissal both route to `MenuClosed`;
                // duplicates are harmless (the first ends the session or is
                // swallowed by an open picker).
                <ContextMenu {entries} {on_close} />
            </PortalModal>
        }
    }

    /// 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,
                }));
            }
        }

        entries
    }

    /// Export/Copy format-picker spawned in place of the context menu, anchored
    /// at the same cursor anchor and reusing the status bar's dropdown
    /// components.
    fn picker_html(&self, ctx: &Context<Self>, kind: PickerKind) -> Html {
        // Export/Copy are absent from the target-less stage menu, so
        // `panel_id` is always `Some` here in practice.
        let Some(panel) = ctx
            .props()
            .panel_id
            .as_deref()
            .and_then(|id| ctx.props().workspace.panel(&PanelId::from(id)))
        else {
            return Html::default();
        };

        let on_close = ctx.link().callback(|_| PanelMenuMsg::ClosePicker);
        let theme = ctx.props().theme.clone().unwrap_or_default();
        let target = Some(self.anchor.clone());
        let presentation = ctx.props().presentation.clone();

        let inner = match kind {
            PickerKind::Export => {
                let callback = {
                    clone!(presentation);
                    let session = panel.session.clone();
                    let renderer = panel.renderer.clone();
                    let link = ctx.link().clone();
                    Callback::from(move |file: ExportFile| {
                        if file.name.is_empty() {
                            return;
                        }

                        clone!(session, renderer, presentation, link);
                        ApiFuture::spawn(async move {
                            let blob = export_method_to_blob(
                                &session,
                                &renderer,
                                &presentation,
                                file.method,
                            )
                            .await?;

                            download(&file.as_filename(renderer.is_chart()), &blob)?;
                            link.send_message(PanelMenuMsg::ClosePicker);
                            Ok(())
                        });
                    })
                };

                html! {
                    <ExportDropDownMenu
                        renderer={panel.renderer.clone()}
                        session={panel.session.clone()}
                        {callback}
                    />
                }
            },
            PickerKind::Copy => {
                let callback = {
                    clone!(presentation);
                    let session = panel.session.clone();
                    let renderer = panel.renderer.clone();
                    let link = ctx.link().clone();
                    Callback::from(move |file: ExportFile| {
                        clone!(session, renderer, presentation, link);
                        ApiFuture::spawn(async move {
                            let task = export_method_to_blob(
                                &session,
                                &renderer,
                                &presentation,
                                file.method,
                            );
                            copy_to_clipboard(task, file.method.mimetype(file.is_chart)).await?;
                            link.send_message(PanelMenuMsg::ClosePicker);
                            Ok(())
                        });
                    })
                };

                html! { <CopyDropDownMenu renderer={panel.renderer.clone()} {callback} /> }
            },
        };

        let tag_name = match kind {
            PickerKind::Export => "perspective-export-menu",
            PickerKind::Copy => "perspective-copy-menu",
        };

        html! {
            <PortalModal
                {tag_name}
                surface={StyleSurface::DropdownMenu}
                {target}
                own_focus=true
                {on_close}
                {theme}
            >
                { inner }
            </PortalModal>
        }
    }
}

/// 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 {
    let anchor: HtmlElement = global::document()
        .create_element("div")
        .unwrap()
        .unchecked_into();

    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);
    anchor
}