@perspective-dev/viewer 4.0.0

package/src/rust/components/plugin_selector.rs

@@ -0,0 +1,196 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 perspective_client::config::ViewConfigUpdate;
+use yew::prelude::*;
+
+use super::containers::select::*;
+use super::style::LocalStyle;
+use crate::config::*;
+use crate::js::*;
+use crate::model::*;
+use crate::presentation::Presentation;
+use crate::renderer::*;
+use crate::session::*;
+use crate::utils::*;
+use crate::*;
+
+#[derive(Properties, PartialEq)]
+pub struct PluginSelectorProps {
+    pub renderer: Renderer,
+    pub session: Session,
+    pub presentation: Presentation,
+
+    #[cfg(test)]
+    #[prop_or_default]
+    pub weak_link: WeakScope<PluginSelector>,
+}
+
+derive_model!(Renderer, Session, Presentation for PluginSelectorProps);
+
+#[derive(Debug)]
+pub enum PluginSelectorMsg {
+    ComponentSelectPlugin(String),
+    RendererSelectPlugin(String),
+    OpenMenu,
+}
+
+use PluginSelectorMsg::*;
+
+pub struct PluginSelector {
+    options: Vec<SelectItem<String>>,
+    is_open: bool,
+    _plugin_sub: Subscription,
+}
+
+impl Component for PluginSelector {
+    type Message = PluginSelectorMsg;
+    type Properties = PluginSelectorProps;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        let options = generate_plugin_optgroups(&ctx.props().renderer);
+        let _plugin_sub = ctx.props().renderer.plugin_changed.add_listener({
+            let link = ctx.link().clone();
+            move |plugin: JsPerspectiveViewerPlugin| {
+                let name = plugin.name();
+                link.send_message(PluginSelectorMsg::RendererSelectPlugin(name))
+            }
+        });
+
+        Self {
+            options,
+            is_open: false,
+            _plugin_sub,
+        }
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            RendererSelectPlugin(_plugin_name) => true,
+            ComponentSelectPlugin(plugin_name) => {
+                if !ctx.props().session.is_errored() {
+                    let metadata = ctx
+                        .props()
+                        .renderer
+                        .get_next_plugin_metadata(&PluginUpdate::Update(plugin_name));
+
+                    let mut update = ViewConfigUpdate::default();
+                    ctx.props().session.set_update_column_defaults(
+                        &mut update,
+                        metadata
+                            .as_ref()
+                            .unwrap_or(&*ctx.props().renderer.metadata()),
+                    );
+
+                    if let Ok(task) = ctx.props().update_and_render(update) {
+                        ApiFuture::spawn(task);
+                    }
+
+                    ctx.props().presentation.set_open_column_settings(None);
+                    self.is_open = false;
+                    false
+                } else {
+                    self.is_open = false;
+                    true
+                }
+            },
+            OpenMenu => {
+                self.is_open = !self.is_open;
+                true
+            },
+        }
+    }
+
+    fn changed(&mut self, _ctx: &Context<Self>, _old: &Self::Properties) -> bool {
+        true
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let callback = ctx.link().callback(|_| OpenMenu);
+
+        let plugin_name = ctx.props().renderer.get_active_plugin().unwrap().name();
+        let plugin_name2 = plugin_name.clone();
+        let class = if self.is_open { "open" } else { "" };
+        let items = self.options.iter().map(|item| match item {
+            SelectItem::OptGroup(_cat, items) => html! {
+                items.iter().filter(|x| *x != &plugin_name2).map(|x| {
+                    let callback = ctx.link().callback(ComponentSelectPlugin);
+                    html! {
+                        <PluginSelect
+                            name={ x.to_owned() }
+                            on_click={ callback } />
+                    }
+                }).collect::<Html>()
+            },
+            SelectItem::Option(_item) => html! {},
+        });
+
+        html! {
+            <>
+                <LocalStyle href={css!("plugin-selector")} />
+                <div id="plugin_selector_container" {class}>
+                    <PluginSelect name={plugin_name} on_click={callback} />
+                    <div id="plugin_selector_border" />
+                    if self.is_open {
+                        <div class="plugin-selector-options">{ items.collect::<Html>() }</div>
+                    }
+                </div>
+            </>
+        }
+    }
+}
+
+/// Generate the opt groups for the plugin selector by collecting by category
+/// then sorting.
+fn generate_plugin_optgroups(renderer: &Renderer) -> Vec<SelectItem<String>> {
+    let mut options = renderer
+        .get_all_plugin_categories()
+        .into_iter()
+        .map(|(category, value)| SelectItem::OptGroup(category.into(), value))
+        .collect::<Vec<_>>();
+
+    options.sort_by_key(|x| x.name());
+    options
+}
+
+#[derive(Properties, PartialEq)]
+struct PluginSelectProps {
+    name: String,
+    on_click: Callback<String>,
+}
+
+#[function_component]
+fn PluginSelect(props: &PluginSelectProps) -> Html {
+    let name = props.name.clone().tee::<2>();
+    let path: String = props
+        .name
+        .chars()
+        .map(|x| {
+            if x.is_alphanumeric() {
+                x.to_ascii_lowercase()
+            } else {
+                '-'
+            }
+        })
+        .collect();
+
+    html! {
+        <div
+            class="plugin-select-item"
+            data-plugin={name.0}
+            style={format!("--default-column-title:var(--plugin-name-{}--content, \"{}\")", path, props.name)}
+            onclick={props.on_click.reform(move |_| name.1.clone())}
+        >
+            <span class="plugin-select-item-name" />
+        </div>
+    }
+}

package/src/rust/components/render_warning.rs

@@ -0,0 +1,178 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 yew::prelude::*;
+
+use super::style::LocalStyle;
+use crate::renderer::*;
+use crate::session::*;
+use crate::utils::*;
+use crate::*;
+
+#[derive(Properties)]
+pub struct RenderWarningProps {
+    pub dimensions: Option<(usize, usize, Option<usize>, Option<usize>)>,
+    pub renderer: Renderer,
+    pub session: Session,
+}
+
+impl PartialEq for RenderWarningProps {
+    fn eq(&self, other: &Self) -> bool {
+        self.dimensions == other.dimensions
+    }
+}
+
+pub enum RenderWarningMsg {
+    DismissWarning,
+}
+
+pub struct RenderWarning {
+    col_warn: Option<(usize, usize)>,
+    row_warn: Option<(usize, usize)>,
+}
+
+impl RenderWarning {
+    fn update_warnings(&mut self, ctx: &Context<Self>) {
+        if let Some((num_cols, num_rows, max_cols, max_rows)) = ctx.props().dimensions {
+            let count = num_cols * num_rows;
+            if max_cols.is_some_and(|x| x < num_cols) {
+                self.col_warn = Some((max_cols.unwrap(), num_cols));
+            } else {
+                self.col_warn = None;
+            }
+
+            if max_rows.is_some_and(|x| x < num_rows) {
+                self.row_warn = Some((num_cols * max_rows.unwrap(), count));
+            } else {
+                self.row_warn = None;
+            }
+        } else {
+            self.col_warn = None;
+            self.row_warn = None;
+        }
+    }
+}
+
+impl Component for RenderWarning {
+    type Message = RenderWarningMsg;
+    type Properties = RenderWarningProps;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        // enable_weak_link_test!(props, link);
+        let mut elem = Self {
+            col_warn: None,
+            row_warn: None,
+        };
+
+        elem.update_warnings(ctx);
+        elem
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            RenderWarningMsg::DismissWarning => {
+                clone!(ctx.props().renderer, ctx.props().session);
+                ApiFuture::spawn(async move {
+                    renderer.disable_active_plugin_render_warning();
+                    renderer.update(&session).await
+                });
+            },
+        };
+        true
+    }
+
+    fn changed(&mut self, ctx: &Context<Self>, _old: &Self::Properties) -> bool {
+        self.update_warnings(ctx);
+        true
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        if self.col_warn.is_some() || self.row_warn.is_some() {
+            let warning = match (self.col_warn, self.row_warn) {
+                (Some((x, y)), Some((a, b))) => html! {
+                    <span style="white-space: nowrap">
+                        { "Rendering" }
+                        { render_pair(x, y) }
+                        { "of columns and" }
+                        { render_pair(a, b) }
+                        { "of points." }
+                    </span>
+                },
+                (Some((x, y)), None) => html! {
+                    <span style="white-space: nowrap">
+                        { "Rendering" }
+                        { render_pair(x, y) }
+                        { "of columns." }
+                    </span>
+                },
+                (None, Some((x, y))) => html! {
+                    <span style="white-space: nowrap">
+                        { "Rendering" }
+                        { render_pair(x, y) }
+                        { "of points." }
+                    </span>
+                },
+                _ => html! { <div /> },
+            };
+
+            let onclick = ctx.link().callback(|_| RenderWarningMsg::DismissWarning);
+
+            html! {
+                <>
+                    <LocalStyle href={css!("render-warning")} />
+                    <div
+                        class="plugin_information plugin_information--warning"
+                        id="plugin_information--size"
+                    >
+                        <span class="plugin_information__icon" />
+                        <span class="plugin_information__text" id="plugin_information_count">
+                            { warning }
+                        </span>
+                        <span class="plugin_information__actions">
+                            <span class="plugin_information__action" onmousedown={onclick}>
+                                { "Render all points" }
+                            </span>
+                        </span>
+                    </div>
+                </>
+            }
+        } else {
+            html! {}
+        }
+    }
+}
+
+fn pretty_print_int(i: usize) -> String {
+    let mut s = String::new();
+    let i_str = i.to_string();
+    let a = i_str.chars().rev().enumerate();
+    for (idx, val) in a {
+        if idx != 0 && idx % 3 == 0 {
+            s.insert(0, ',');
+        }
+        s.insert(0, val);
+    }
+    s
+}
+
+fn render_pair(n: usize, d: usize) -> Html {
+    let x = pretty_print_int(n);
+    let y = pretty_print_int(d);
+    let total = ((n as f64 / d as f64) * 100_f64).floor() as usize;
+    html! {
+        <span title={format!("${x} / ${y}")} class="plugin_information--overflow-hint">
+            { "\u{00a0}" }
+            <span class="plugin_information--overflow-hint-percent">{ format!("{}%", total) }</span>
+            { "\u{00a0}" }
+        </span>
+    }
+}

package/src/rust/components/status_bar.rs

@@ -0,0 +1,315 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 wasm_bindgen::JsCast;
+use web_sys::*;
+use yew::prelude::*;
+
+use super::status_indicator::StatusIndicator;
+use super::style::LocalStyle;
+use crate::components::containers::select::*;
+use crate::components::status_bar_counter::StatusBarRowsCounter;
+use crate::custom_elements::copy_dropdown::*;
+use crate::custom_elements::export_dropdown::*;
+use crate::presentation::Presentation;
+use crate::renderer::*;
+use crate::session::*;
+#[cfg(test)]
+use crate::utils::WeakScope;
+use crate::utils::*;
+use crate::*;
+
+#[derive(Properties, Clone)]
+pub struct StatusBarProps {
+    pub id: String,
+    pub on_reset: Callback<bool>,
+    pub session: Session,
+    pub renderer: Renderer,
+    pub presentation: Presentation,
+
+    #[cfg(test)]
+    #[prop_or_default]
+    pub weak_link: WeakScope<StatusBar>,
+}
+
+derive_model!(Renderer, Session, Presentation for StatusBarProps);
+
+impl PartialEq for StatusBarProps {
+    fn eq(&self, other: &Self) -> bool {
+        self.id == other.id
+    }
+}
+
+pub enum StatusBarMsg {
+    Reset(bool),
+    Export,
+    Copy,
+    Noop,
+    SetThemeConfig((Rc<Vec<String>>, Option<usize>)),
+    SetTheme(String),
+    ResetTheme,
+    // SetError(Option<String>),
+    // TableStatsChanged,
+    // SetIsUpdating(bool),
+    SetTitle(Option<String>),
+}
+
+/// A toolbar with buttons, and `Table` & `View` status information.
+pub struct StatusBar {
+    is_updating: i32,
+    theme: Option<String>,
+    themes: Rc<Vec<String>>,
+    export_ref: NodeRef,
+    copy_ref: NodeRef,
+    _sub: [Subscription; 2],
+}
+
+impl Component for StatusBar {
+    type Message = StatusBarMsg;
+    type Properties = StatusBarProps;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        let _sub = [
+            ctx.props()
+                .presentation
+                .theme_config_updated
+                .add_listener(ctx.link().callback(StatusBarMsg::SetThemeConfig)),
+            ctx.props()
+                .presentation
+                .title_changed
+                .add_listener(ctx.link().callback(|_| StatusBarMsg::Noop)),
+        ];
+
+        // Fetch initial theme
+        let presentation = ctx.props().presentation.clone();
+        let on_theme = ctx.link().callback(StatusBarMsg::SetThemeConfig);
+        ApiFuture::spawn(async move {
+            on_theme.emit(presentation.get_selected_theme_config().await?);
+            Ok(())
+        });
+
+        Self {
+            _sub,
+            theme: None,
+            themes: vec![].into(),
+            copy_ref: NodeRef::default(),
+            export_ref: NodeRef::default(),
+            is_updating: 0,
+        }
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            StatusBarMsg::Reset(all) => {
+                ctx.props().on_reset.emit(all);
+                false
+            },
+            StatusBarMsg::ResetTheme => {
+                clone!(
+                    ctx.props().renderer,
+                    ctx.props().session,
+                    ctx.props().presentation
+                );
+
+                ApiFuture::spawn(async move {
+                    presentation.reset_theme().await?;
+                    let view = session.get_view().into_apierror()?;
+                    renderer.restyle_all(&view).await
+                });
+                true
+            },
+            StatusBarMsg::SetThemeConfig((themes, index)) => {
+                let new_theme = index.and_then(|x| themes.get(x)).cloned();
+                let should_render = new_theme != self.theme || self.themes != themes;
+                self.theme = new_theme;
+                self.themes = themes;
+                should_render
+            },
+            StatusBarMsg::SetTheme(theme_name) => {
+                clone!(
+                    ctx.props().renderer,
+                    ctx.props().session,
+                    ctx.props().presentation
+                );
+                ApiFuture::spawn(async move {
+                    presentation.set_theme_name(Some(&theme_name)).await?;
+                    let view = session.get_view().into_apierror()?;
+                    renderer.restyle_all(&view).await
+                });
+
+                false
+            },
+            StatusBarMsg::Export => {
+                let target = self.export_ref.cast::<HtmlElement>().unwrap();
+                ExportDropDownMenuElement::new_from_model(ctx.props()).open(target);
+                false
+            },
+            StatusBarMsg::Copy => {
+                let target = self.copy_ref.cast::<HtmlElement>().unwrap();
+                CopyDropDownMenuElement::new_from_model(ctx.props()).open(target);
+                false
+            },
+            StatusBarMsg::Noop => true,
+            StatusBarMsg::SetTitle(title) => {
+                ctx.props().presentation.set_title(title);
+                false
+            },
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let mut is_updating_class_name = classes!();
+        if self.is_updating > 0 {
+            is_updating_class_name.push("updating")
+        };
+
+        if ctx.props().presentation.get_title().is_some() {
+            is_updating_class_name.push("titled")
+        };
+
+        let reset = ctx
+            .link()
+            .callback(|event: MouseEvent| StatusBarMsg::Reset(event.shift_key()));
+
+        let export = ctx.link().callback(|_: MouseEvent| StatusBarMsg::Export);
+        let copy = ctx.link().callback(|_: MouseEvent| StatusBarMsg::Copy);
+
+        let onchange = ctx.link().callback({
+            move |input: Event| {
+                let title = input
+                    .target()
+                    .unwrap()
+                    .unchecked_into::<HtmlInputElement>()
+                    .value();
+
+                let title = if title.trim().is_empty() {
+                    None
+                } else {
+                    Some(title)
+                };
+
+                StatusBarMsg::SetTitle(title)
+            }
+        });
+
+        let is_menu = ctx.props().session.has_table()
+            && (ctx.props().presentation.is_settings_open()
+                || (ctx.props().presentation.get_title().is_some()
+                    && !ctx.props().session.is_errored()));
+
+        if !ctx.props().session.has_table() {
+            is_updating_class_name.push("updating");
+        }
+
+        html! {
+            <>
+                <LocalStyle href={css!("status-bar")} />
+                <div id={ctx.props().id.clone()} class={is_updating_class_name}>
+                    <StatusIndicator
+                        session={&ctx.props().session}
+                        renderer={&ctx.props().renderer}
+                    />
+                    if is_menu {
+                        <label
+                            class="input-sizer"
+                            data-value={ctx.props().presentation.get_title().unwrap_or_default()}
+                        >
+                            <input
+                                placeholder=" "
+                                value={ctx.props().presentation.get_title()}
+                                size="10"
+                                {onchange}
+                            />
+                            <span id="status-bar-placeholder" />
+                        </label>
+                    }
+                    <StatusBarRowsCounter session={&ctx.props().session} />
+                    <div id="spacer" />
+                    if is_menu {
+                        <div id="menu-bar" class="section">
+                            <ThemeSelector
+                                theme={self.theme.clone()}
+                                themes={self.themes.clone()}
+                                on_change={ctx.link().callback(StatusBarMsg::SetTheme)}
+                                on_reset={ctx.link().callback(|_| StatusBarMsg::ResetTheme)}
+                            />
+                            <div id="plugin-settings"><slot name="plugin-settings" /></div>
+                            <span class="hover-target">
+                                <span id="reset" class="button" onmousedown={reset}><span /></span>
+                            </span>
+                            <span class="hover-target" ref={&self.export_ref} onmousedown={export}>
+                                <span id="export" class="button"><span /></span>
+                            </span>
+                            <span class="hover-target" ref={&self.copy_ref} onmousedown={copy}>
+                                <span id="copy" class="button"><span /></span>
+                            </span>
+                        </div>
+                    }
+                </div>
+            </>
+        }
+    }
+}
+
+#[derive(Properties, PartialEq)]
+pub struct ThemeSelectorProps {
+    pub theme: Option<String>,
+    pub themes: Rc<Vec<String>>,
+    pub on_reset: Callback<()>,
+    pub on_change: Callback<String>,
+}
+
+#[function_component]
+pub fn ThemeSelector(props: &ThemeSelectorProps) -> Html {
+    let is_first = props
+        .theme
+        .as_ref()
+        .and_then(|x| props.themes.first().map(|y| y == x))
+        .unwrap_or_default();
+
+    let values = use_memo(props.themes.clone(), |themes| {
+        themes
+            .iter()
+            .cloned()
+            .map(SelectItem::Option)
+            .collect::<Vec<_>>()
+    });
+
+    match &props.theme {
+        None => html! {},
+        Some(selected) => {
+            html! {
+                if values.len() > 1 {
+                    <span class="hover-target">
+                        <div
+                            id="theme_icon"
+                            class={if is_first {""} else {"modified"}}
+                            tabindex="0"
+                            onclick={props.on_reset.reform(|_| ())}
+                        />
+                        <span id="theme" class="button">
+                            <Select<String>
+                                id="theme_selector"
+                                class="invert"
+                                {values}
+                                selected={selected.to_owned()}
+                                on_select={props.on_change.clone()}
+                            />
+                        </span>
+                    </span>
+                }
+            }
+        },
+    }
+}