perspective_viewer/components/
plugin_selector.rs

1// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
2// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
3// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
4// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
5// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
6// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
7// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
8// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
9// ┃ This file is part of the Perspective library, distributed under the terms ┃
10// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
11// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
12
13use perspective_client::config::ViewConfigUpdate;
14use yew::prelude::*;
15
16use super::containers::select::*;
17use super::style::LocalStyle;
18use crate::config::*;
19use crate::js::*;
20use crate::model::*;
21use crate::presentation::Presentation;
22use crate::renderer::*;
23use crate::session::*;
24use crate::utils::*;
25use crate::*;
26
27#[derive(Properties, PartialEq)]
28pub struct PluginSelectorProps {
29    pub renderer: Renderer,
30    pub session: Session,
31    pub presentation: Presentation,
32
33    #[cfg(test)]
34    #[prop_or_default]
35    pub weak_link: WeakScope<PluginSelector>,
36}
37
38derive_model!(Renderer, Session, Presentation for PluginSelectorProps);
39
40#[derive(Debug)]
41pub enum PluginSelectorMsg {
42    ComponentSelectPlugin(String),
43    RendererSelectPlugin(String),
44    OpenMenu,
45}
46
47use PluginSelectorMsg::*;
48
49pub struct PluginSelector {
50    options: Vec<SelectItem<String>>,
51    is_open: bool,
52    _plugin_sub: Subscription,
53}
54
55impl Component for PluginSelector {
56    type Message = PluginSelectorMsg;
57    type Properties = PluginSelectorProps;
58
59    fn create(ctx: &Context<Self>) -> Self {
60        let options = generate_plugin_optgroups(&ctx.props().renderer);
61        let _plugin_sub = ctx.props().renderer.plugin_changed.add_listener({
62            let link = ctx.link().clone();
63            move |plugin: JsPerspectiveViewerPlugin| {
64                let name = plugin.name();
65                link.send_message(PluginSelectorMsg::RendererSelectPlugin(name))
66            }
67        });
68
69        Self {
70            options,
71            is_open: false,
72            _plugin_sub,
73        }
74    }
75
76    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
77        match msg {
78            RendererSelectPlugin(_plugin_name) => true,
79            ComponentSelectPlugin(plugin_name) => {
80                if ctx.props().session.get_error().is_none() {
81                    ctx.props()
82                        .renderer
83                        .update_plugin(&PluginUpdate::Update(plugin_name))
84                        .unwrap();
85
86                    let mut update = ViewConfigUpdate::default();
87                    ctx.props()
88                        .session
89                        .set_update_column_defaults(&mut update, &ctx.props().renderer.metadata());
90
91                    if let Ok(task) = ctx.props().update_and_render(update) {
92                        ApiFuture::spawn(task);
93                    }
94
95                    ctx.props().presentation.set_open_column_settings(None);
96                    self.is_open = false;
97                    false
98                } else {
99                    self.is_open = false;
100                    true
101                }
102            },
103            OpenMenu => {
104                self.is_open = !self.is_open;
105                true
106            },
107        }
108    }
109
110    fn changed(&mut self, _ctx: &Context<Self>, _old: &Self::Properties) -> bool {
111        true
112    }
113
114    fn view(&self, ctx: &Context<Self>) -> Html {
115        let callback = ctx.link().callback(|_| OpenMenu);
116
117        let plugin_name = ctx.props().renderer.get_active_plugin().unwrap().name();
118        let plugin_name2 = plugin_name.clone();
119        let class = if self.is_open { "open" } else { "" };
120        let items = self.options.iter().map(|item| match item {
121            SelectItem::OptGroup(_cat, items) => html! {
122                items.iter().filter(|x| *x != &plugin_name2).map(|x| {
123                    let callback = ctx.link().callback(ComponentSelectPlugin);
124                    html! {
125                        <PluginSelect
126                            name={ x.to_owned() }
127                            on_click={ callback } />
128                    }
129                }).collect::<Html>()
130            },
131            SelectItem::Option(_item) => html! {},
132        });
133
134        html! {
135            <>
136                <LocalStyle href={css!("plugin-selector")} />
137                <div id="plugin_selector_container" {class}>
138                    <PluginSelect name={plugin_name} on_click={callback} />
139                    <div id="plugin_selector_border" />
140                    if self.is_open {
141                        <div class="plugin-selector-options">{ items.collect::<Html>() }</div>
142                    }
143                </div>
144            </>
145        }
146    }
147}
148
149/// Generate the opt groups for the plugin selector by collecting by category
150/// then sorting.
151fn generate_plugin_optgroups(renderer: &Renderer) -> Vec<SelectItem<String>> {
152    let mut options = renderer
153        .get_all_plugin_categories()
154        .into_iter()
155        .map(|(category, value)| SelectItem::OptGroup(category.into(), value))
156        .collect::<Vec<_>>();
157
158    options.sort_by_key(|x| x.name());
159    options
160}
161
162#[derive(Properties, PartialEq)]
163struct PluginSelectProps {
164    name: String,
165    on_click: Callback<String>,
166}
167
168#[function_component]
169fn PluginSelect(props: &PluginSelectProps) -> Html {
170    let name = props.name.clone().tee::<2>();
171    let path: String = props
172        .name
173        .chars()
174        .map(|x| {
175            if x.is_alphanumeric() {
176                x.to_ascii_lowercase()
177            } else {
178                '-'
179            }
180        })
181        .collect();
182
183    html! {
184        <div
185            class="plugin-select-item"
186            data-plugin={name.0}
187            style={format!("--default-column-title:var(--plugin-name-{}--content, \"{}\")", path, props.name)}
188            onclick={props.on_click.reform(move |_| name.1.clone())}
189        >
190            <span class="plugin-select-item-name" />
191        </div>
192    }
193}
perspective_viewer/components/plugin_selector.rs

perspective_viewer/components/
plugin_selector.rs
