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 perspective_js::utils::ApiFuture;
15use yew::prelude::*;
16
17use super::containers::select::*;
18use super::style::LocalStyle;
19use crate::config::*;
20use crate::js::*;
21use crate::model::*;
22use crate::presentation::Presentation;
23use crate::renderer::*;
24use crate::session::*;
25use crate::utils::*;
26use crate::{css, *};
27
28#[derive(Properties, PartialEq, PerspectiveProperties!)]
29pub struct PluginSelectorProps {
30    pub presentation: Presentation,
31    pub renderer: Renderer,
32    pub session: Session,
33}
34
35#[derive(Debug)]
36pub enum PluginSelectorMsg {
37    ComponentSelectPlugin(String),
38    RendererSelectPlugin(String),
39    OpenMenu,
40}
41
42use PluginSelectorMsg::*;
43
44pub struct PluginSelector {
45    options: Vec<SelectItem<String>>,
46    is_open: bool,
47    _plugin_sub: Subscription,
48}
49
50impl Component for PluginSelector {
51    type Message = PluginSelectorMsg;
52    type Properties = PluginSelectorProps;
53
54    fn create(ctx: &Context<Self>) -> Self {
55        let PluginSelectorProps { renderer, .. } = ctx.props();
56        let options = generate_plugin_optgroups(renderer);
57        let _plugin_sub = renderer.plugin_changed.add_listener({
58            let link = ctx.link().clone();
59            move |plugin: JsPerspectiveViewerPlugin| {
60                let name = plugin.name();
61                link.send_message(PluginSelectorMsg::RendererSelectPlugin(name))
62            }
63        });
64
65        Self {
66            options,
67            is_open: false,
68            _plugin_sub,
69        }
70    }
71
72    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
73        let PluginSelectorProps {
74            presentation,
75            renderer,
76            session,
77            ..
78        } = ctx.props();
79        match msg {
80            RendererSelectPlugin(_plugin_name) => true,
81            ComponentSelectPlugin(plugin_name) => {
82                if !session.is_errored() {
83                    let metadata =
84                        renderer.get_next_plugin_metadata(&PluginUpdate::Update(plugin_name));
85
86                    let mut update = ViewConfigUpdate::default();
87                    session.set_update_column_defaults(
88                        &mut update,
89                        metadata.as_ref().unwrap_or(&*renderer.metadata()),
90                    );
91
92                    if let Ok(task) = ctx.props().update_and_render(update) {
93                        ApiFuture::spawn(task);
94                    }
95
96                    presentation.set_open_column_settings(None);
97                    self.is_open = false;
98                    false
99                } else {
100                    self.is_open = false;
101                    true
102                }
103            },
104            OpenMenu => {
105                self.is_open = !self.is_open;
106                true
107            },
108        }
109    }
110
111    fn changed(&mut self, _ctx: &Context<Self>, _old: &Self::Properties) -> bool {
112        true
113    }
114
115    fn view(&self, ctx: &Context<Self>) -> Html {
116        let callback = ctx.link().callback(|_| OpenMenu);
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();
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.clone()}
187            style={format!("--default-column-title:var(--plugin-name-{}--content, \"{}\")", path, props.name)}
188            onclick={props.on_click.reform(move |_| name.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
