perspective-viewer 5.4.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

// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
// ┃ 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>
    }
}