Add categories to plugin selector

packages/perspective-viewer-d3fc/src/js/charts/area.js

@@ -98,6 +98,7 @@ function areaChart(container, settings) {
 }
 areaChart.plugin = {
     name: "Y Area",
+    category: "Y Chart",
     max_cells: 4000,
     max_columns: 50,
     render_warning: true,

packages/perspective-viewer-d3fc/src/js/charts/bar.js

@@ -66,6 +66,7 @@ function barChart(container, settings) {
 }
 barChart.plugin = {
     name: "X Bar",
+    category: "X Chart",
     max_cells: 1000,
     max_columns: 50,
     render_warning: true,

packages/perspective-viewer-d3fc/src/js/charts/candlestick.js

@@ -12,6 +12,7 @@ import ohlcCandle from "./ohlcCandle";
 const candlestick = ohlcCandle(seriesCanvasCandlestick);
 candlestick.plugin = {
     name: "Candlestick",
+    category: "Y Chart",
     max_cells: 4000,
     max_columns: 50,
     render_warning: true,

packages/perspective-viewer-d3fc/src/js/charts/column.js

@@ -93,6 +93,7 @@ function columnChart(container, settings) {
 }
 columnChart.plugin = {
     name: "Y Bar",
+    category: "Y Chart",
     max_cells: 1000,
     max_columns: 50,
     render_warning: true,

packages/perspective-viewer-d3fc/src/js/charts/heatmap.js

@@ -82,6 +82,7 @@ function heatmapChart(container, settings) {
 }
 heatmapChart.plugin = {
     name: "Heatmap",
+    category: "Hierarchial Chart",
     max_cells: 50000,
     max_columns: 500,
     render_warning: true,

packages/perspective-viewer-d3fc/src/js/charts/line.js

@@ -97,6 +97,7 @@ function lineChart(container, settings) {
 
 lineChart.plugin = {
     name: "Y Line",
+    category: "Y Chart",
     max_cells: 4000,
     max_columns: 50,
     render_warning: true,

packages/perspective-viewer-d3fc/src/js/charts/ohlc.js

@@ -12,6 +12,7 @@ import ohlcCandle from "./ohlcCandle";
 const ohlc = ohlcCandle(seriesCanvasOhlc);
 ohlc.plugin = {
     name: "OHLC",
+    category: "Y Chart",
     max_cells: 3500,
     max_columns: 50,
     render_warning: true,

packages/perspective-viewer-d3fc/src/js/charts/sunburst.js

@@ -87,6 +87,7 @@ function sunburst(container, settings) {
 
 sunburst.plugin = {
     name: "Sunburst",
+    category: "Hierarchial Chart",
     max_cells: 7500,
     max_columns: 50,
     render_warning: true,

packages/perspective-viewer-d3fc/src/js/charts/treemap.js

@@ -80,6 +80,7 @@ function treemap(container, settings) {
 treemap.plugin = {
     type: "Treemap",
     name: "Treemap",
+    category: "Hierarchial Chart",
     max_cells: 5000,
     max_columns: 50,
     render_warning: true,

packages/perspective-viewer-d3fc/src/js/charts/xy-line.js

@@ -95,6 +95,7 @@ function xyLine(container, settings) {
 
 xyLine.plugin = {
     name: "X/Y Line",
+    category: "X/Y Chart",
     max_cells: 50000,
     max_columns: 50,
     render_warning: true,

packages/perspective-viewer-d3fc/src/js/charts/xy-scatter.js

@@ -132,6 +132,7 @@ function xyScatter(container, settings) {
 
 xyScatter.plugin = {
     name: "X/Y Scatter",
+    category: "X/Y Chart",
     max_cells: 50000,
     max_columns: 50,
     render_warning: true,

packages/perspective-viewer-d3fc/src/js/charts/y-scatter.js

@@ -103,6 +103,7 @@ function yScatter(container, settings) {
 
 yScatter.plugin = {
     name: "Y Scatter",
+    category: "Y Chart",
     max_cells: 4000,
     max_columns: 50,
     render_warning: true,

packages/perspective-viewer-d3fc/src/js/plugin/plugin.js

@@ -88,6 +88,10 @@ export function register(...plugins) {
                         return chart.plugin.name;
                     }
 
+                    get category() {
+                        return chart.plugin.category;
+                    }
+
                     get select_mode() {
                         return chart.plugin.selectMode || "select";
                     }

packages/perspective-viewer-datagrid/src/js/plugin.js

@@ -133,6 +133,10 @@ export class PerspectiveViewerDatagridPluginElement extends HTMLElement {
         return "Datagrid";
     }
 
+    get category() {
+        return "Basic";
+    }
+
     get select_mode() {
         return "toggle";
     }

rust/perspective-viewer/src/rust/components/aggregate_selector.rs

@@ -90,6 +90,7 @@ impl Component for AggregateSelector {
                 <Select<Aggregate>
                     class={ "aggregate-selector" }
                     values={ values }
+                    label="weighted mean"
                     selected={ selected_agg }
                     on_select={ callback }>
 
@@ -126,7 +127,10 @@ impl AggregateSelector {
             .collect::<Vec<_>>();
 
         let multi_aggregates2 = if !multi_aggregates.is_empty() {
-            vec![SelectItem::OptGroup("weighted mean", multi_aggregates)]
+            vec![SelectItem::OptGroup(
+                "weighted mean".into(),
+                multi_aggregates,
+            )]
         } else {
             vec![]
         };

rust/perspective-viewer/src/rust/components/containers/select.rs

@@ -6,6 +6,8 @@
 // of the Apache License 2.0.  The full license can be found in the LICENSE
 // file.
 
+use std::borrow::Borrow;
+use std::borrow::Cow;
 use std::fmt::Debug;
 use std::fmt::Display;
 use std::str::FromStr;
@@ -15,7 +17,16 @@ use yew::prelude::*;
 #[derive(Clone, Eq, PartialEq)]
 pub enum SelectItem<T> {
     Option(T),
-    OptGroup(&'static str, Vec<T>),
+    OptGroup(Cow<'static, str>, Vec<T>),
+}
+
+impl<T: Display> SelectItem<T> {
+    pub fn name<'a>(&self) -> Cow<'a, str> {
+        match self {
+            Self::Option(x) => format!("{}", x).into(),
+            Self::OptGroup(x, _) => x.clone(),
+        }
+    }
 }
 
 pub enum SelectMsg<T> {
@@ -32,6 +43,9 @@ where
     pub selected: T,
     pub on_select: Callback<T>,
 
+    #[prop_or_default]
+    pub label: Option<&'static str>,
+
     #[prop_or_default]
     pub id: Option<&'static str>,
 
@@ -137,15 +151,19 @@ where
                             }
                         },
                         SelectItem::OptGroup(name, group) => html! {
-                            <optgroup key={ name.to_owned() } label={ name.to_owned() }>
+                            <optgroup
+                                key={ name.to_string() }
+                                label={ name.to_string() }>
                                 {
                                     for group.iter().map(|value| {
                                         let selected =
                                             *value == ctx.props().selected;
 
-                                        let label = format!("{}", value)
-                                            .strip_prefix(name)
-                                            .unwrap()
+                                        let label = format!("{}", value);
+                                        let category: &str = name.borrow();
+                                        let label = label
+                                            .strip_prefix(category)
+                                            .unwrap_or(&label)
                                             .trim()
                                             .to_owned();
 
@@ -167,8 +185,8 @@ where
         };
 
         html! {
-            if is_group_selected {
-                <label>{ "weighted mean" }</label>
+            if is_group_selected && ctx.props().label.is_some() {
+                <label>{ ctx.props().label.unwrap() }</label>
                 <div
                     class="dropdown-width-container"
                     data-value={ format!("{}", self.selected) }>

rust/perspective-viewer/src/rust/components/copy_dropdown.rs

@@ -73,14 +73,17 @@ impl Component for CopyDropDownMenu {
 fn get_menu_items(has_render: bool) -> Vec<CopyDropDownMenuItem> {
     vec![
         CopyDropDownMenuItem::OptGroup(
-            "Current View",
+            "Current View".into(),
             if has_render {
                 vec![ExportMethod::Csv, ExportMethod::Json, ExportMethod::Png]
             } else {
                 vec![ExportMethod::Csv, ExportMethod::Json]
             },
         ),
-        CopyDropDownMenuItem::OptGroup("All", vec![ExportMethod::CsvAll, ExportMethod::JsonAll]),
-        CopyDropDownMenuItem::OptGroup("Config", vec![ExportMethod::JsonConfig]),
+        CopyDropDownMenuItem::OptGroup("All".into(), vec![
+            ExportMethod::CsvAll,
+            ExportMethod::JsonAll,
+        ]),
+        CopyDropDownMenuItem::OptGroup("Config".into(), vec![ExportMethod::JsonConfig]),
     ]
 }

rust/perspective-viewer/src/rust/components/export_dropdown.rs

@@ -50,7 +50,7 @@ pub enum ExportDropDownMenuMsg {
 fn get_menu_items(name: &str, has_render: bool) -> Vec<ExportDropDownMenuItem> {
     vec![
         ExportDropDownMenuItem::OptGroup(
-            "Current View",
+            "Current View".into(),
             if has_render {
                 vec![
                     ExportMethod::Csv.new_file(name),
@@ -68,12 +68,14 @@ fn get_menu_items(name: &str, has_render: bool) -> Vec<ExportDropDownMenuItem> {
                 ]
             },
         ),
-        ExportDropDownMenuItem::OptGroup("All", vec![
+        ExportDropDownMenuItem::OptGroup("All".into(), vec![
             ExportMethod::CsvAll.new_file(name),
             ExportMethod::JsonAll.new_file(name),
             ExportMethod::ArrowAll.new_file(name),
         ]),
-        ExportDropDownMenuItem::OptGroup("Config", vec![ExportMethod::JsonConfig.new_file(name)]),
+        ExportDropDownMenuItem::OptGroup("Config".into(), vec![
+            ExportMethod::JsonConfig.new_file(name)
+        ]),
     ]
 }
 

rust/perspective-viewer/src/rust/components/plugin_selector.rs

@@ -37,6 +37,7 @@ pub enum PluginSelectorMsg {
 }
 
 pub struct PluginSelector {
+    options: Vec<SelectItem<String>>,
     _plugin_sub: Subscription,
 }
 
@@ -46,6 +47,7 @@ impl Component for PluginSelector {
 
     fn create(ctx: &Context<Self>) -> Self {
         enable_weak_link_test!(ctx.props(), ctx.link());
+        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| {
@@ -54,7 +56,10 @@ impl Component for PluginSelector {
             }
         });
 
-        PluginSelector { _plugin_sub }
+        PluginSelector {
+            options,
+            _plugin_sub,
+        }
     }
 
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
@@ -85,20 +90,13 @@ impl Component for PluginSelector {
         let callback = ctx
             .link()
             .callback(PluginSelectorMsg::ComponentSelectPlugin);
-        let plugin_name = ctx.props().renderer.get_active_plugin().unwrap().name();
-        let options = ctx
-            .props()
-            .renderer
-            .get_all_plugin_names()
-            .into_iter()
-            .map(SelectItem::Option)
-            .collect::<Vec<_>>();
 
+        let plugin_name = ctx.props().renderer.get_active_plugin().unwrap().name();
         html! {
             <div id="plugin_selector_container">
                 <Select<String>
                     id="plugin_selector"
-                    values={ options }
+                    values={ self.options.clone() }
                     selected={ plugin_name }
                     on_select={ callback }>
 
@@ -107,3 +105,16 @@ impl Component for PluginSelector {
         }
     }
 }
+
+/// 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
+}

rust/perspective-viewer/src/rust/js/plugin.rs

@@ -23,6 +23,9 @@ extern "C" {
     #[wasm_bindgen(method, getter)]
     pub fn name(this: &JsPerspectiveViewerPlugin) -> String;
 
+    #[wasm_bindgen(method, getter)]
+    pub fn category(this: &JsPerspectiveViewerPlugin) -> Option<String>;
+
     #[wasm_bindgen(method, getter)]
     pub fn max_columns(this: &JsPerspectiveViewerPlugin) -> Option<usize>;
 

rust/perspective-viewer/src/rust/renderer.rs

@@ -34,6 +34,7 @@ use crate::*;
 use futures::future::join_all;
 use futures::future::select_all;
 use std::cell::{Ref, RefCell};
+use std::collections::HashMap;
 use std::future::Future;
 use std::ops::Deref;
 use std::pin::Pin;
@@ -130,7 +131,7 @@ impl Renderer {
     }
 
     /// Return all plugin names, whether they are active or not.
-    pub fn get_all_plugin_names(&self) -> Vec<String> {
+    pub fn get_all_plugin_categories(&self) -> HashMap<String, Vec<String>> {
         self.0.borrow_mut().plugin_store.plugin_records().clone()
     }
 

rust/perspective-viewer/src/rust/renderer/plugin_store.rs

@@ -8,17 +8,18 @@
 
 use super::registry::*;
 use crate::js::plugin::*;
+use std::collections::HashMap;
 
 #[derive(Default)]
 pub struct PluginStore {
     plugins: Option<Vec<JsPerspectiveViewerPlugin>>,
-    plugin_records: Option<Vec<String>>,
+    plugin_records: Option<HashMap<String, Vec<String>>>,
 }
 
 impl PluginStore {
     fn init_lazy(&mut self) {
         self.plugins = Some(PLUGIN_REGISTRY.create_plugins());
-        self.plugin_records = Some(PLUGIN_REGISTRY.available_plugin_names());
+        self.plugin_records = Some(PLUGIN_REGISTRY.available_plugin_names_by_category());
     }
 
     pub fn plugins(&mut self) -> &Vec<JsPerspectiveViewerPlugin> {
@@ -29,7 +30,7 @@ impl PluginStore {
         self.plugins.as_ref().unwrap()
     }
 
-    pub fn plugin_records(&mut self) -> &Vec<String> {
+    pub fn plugin_records(&mut self) -> &HashMap<String, Vec<String>> {
         if self.plugins.is_none() {
             self.init_lazy();
         }