Add export menu to perspective-viewer with CSV, Arrow, PNG, HTML

finos · texodus · Mar 6, 2022 · Mar 6, 2022 · Mar 6, 2022 · Mar 6, 2022
commit dda829f1abc0d256ad52ab95615e2a713e22a6be
diff --git a/rust/perspective-viewer/build.js b/rust/perspective-viewer/build.js
@@ -29,6 +29,7 @@ const PREBUILD = [
         entryPoints: [
             "viewer",
             "column-style",
+            "dropdown-menu",
             "filter-dropdown",
             "expression-editor",
         ].map((x) => `src/less/${x}.less`),

diff --git a/rust/perspective-viewer/src/less/dropdown-menu.less b/rust/perspective-viewer/src/less/dropdown-menu.less
@@ -0,0 +1,71 @@
+/******************************************************************************
+ *
+ * Copyright (c) 2017, the Perspective Authors.
+ *
+ * This file is part of the Perspective library, distributed under the terms of
+ * the Apache License 2.0.  The full license can be found in the LICENSE file.
+ *
+ */
+
+:host {
+    position: fixed;
+    z-index: 10000;
+    outline: none;
+    font-family: "Open Sans", Arial;
+    font-size: 14px;
+    font-weight: 300;
+    border: inherit;
+    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    user-select: none;
+    background-color: white;
+    padding: 6px;
+
+    display: flex;
+    flex-direction: column;
+    min-width: 80px;
+
+    code {
+        font-family: var(--interface-monospace--font-family, "Roboto Mono"),
+            monospace;
+    }
+
+    .selected {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    .dropdown-group-label {
+        font-size: 10px;
+    }
+
+    .dropdown-group-container {
+        display: flex;
+        flex-direction: column;
+        margin-left: 12px;
+    }
+
+    span {
+        min-height: 21px;
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .dropdown-group-container span {
+        cursor: pointer;
+    }
+
+    .no-results {
+        font-style: italics;
+        padding: 6px 24px;
+        color: #ccc;
+    }
+}
+
+:host(:hover) {
+    .selected {
+        background-color: transparent;
+    }
+
+    .dropdown-group-container span:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+}
diff --git a/...perspective-viewer/src/less/dropdown.less → rust/perspective-viewer/src/less/select.less b/...perspective-viewer/src/less/dropdown.less → rust/perspective-viewer/src/less/select.less
diff --git a/rust/perspective-viewer/src/less/status-bar.less b/rust/perspective-viewer/src/less/status-bar.less
@@ -149,7 +149,8 @@
                 font-size: 14px;
             }
 
-            &:hover {
+            &:hover,
+            &.modal-target {
                 min-width: 75px;
                 color: inherit;
                 cursor: pointer;

diff --git a/rust/perspective-viewer/src/less/viewer.less b/rust/perspective-viewer/src/less/viewer.less
@@ -9,7 +9,7 @@
  */
 
 @import "./checkbox.less";
-@import "./dropdown.less";
+@import "./select.less";
 @import "./split-panel.less";
 @import "./status-bar.less";
 @import "./render-warning.less";

diff --git a/rust/perspective-viewer/src/rust/components/aggregate_selector.rs b/rust/perspective-viewer/src/rust/components/aggregate_selector.rs
@@ -6,7 +6,7 @@
 // of the Apache License 2.0.  The full license can be found in the LICENSE
 // file.
 
-use super::containers::dropdown::*;
+use super::containers::select::*;
 use crate::config::*;
 use crate::model::*;
 use crate::renderer::*;
@@ -36,7 +36,7 @@ pub enum AggregateSelectorMsg {
 }
 
 pub struct AggregateSelector {
-    aggregates: Vec<DropDownItem<Aggregate>>,
+    aggregates: Vec<SelectItem<Aggregate>>,
     aggregate: Option<Aggregate>,
 }
 
@@ -87,13 +87,13 @@ impl Component for AggregateSelector {
 
         html! {
             <div class="aggregate-selector-wrapper">
-                <DropDown<Aggregate>
+                <Select<Aggregate>
                     class={ "aggregate-selector" }
                     values={ values }
                     selected={ selected_agg }
                     on_select={ callback }>
 
-                </DropDown<Aggregate>>
+                </Select<Aggregate>>
             </div>
         }
     }
@@ -113,7 +113,7 @@ impl AggregateSelector {
     pub fn get_dropdown_aggregates(
         &self,
         ctx: &Context<Self>,
-    ) -> Vec<DropDownItem<Aggregate>> {
+    ) -> Vec<SelectItem<Aggregate>> {
         let aggregates = ctx
             .props()
             .session
@@ -129,7 +129,7 @@ impl AggregateSelector {
             .collect::<Vec<_>>();
 
         let multi_aggregates2 = if !multi_aggregates.is_empty() {
-            vec![DropDownItem::OptGroup("weighted mean", multi_aggregates)]
+            vec![SelectItem::OptGroup("weighted mean", multi_aggregates)]
         } else {
             vec![]
         };
@@ -138,7 +138,7 @@ impl AggregateSelector {
             .iter()
             .filter(|x| matches!(x, Aggregate::SingleAggregate(_)))
             .cloned()
-            .map(DropDownItem::Option)
+            .map(SelectItem::Option)
             .chain(multi_aggregates2);
 
         s.collect::<Vec<_>>()

diff --git a/rust/perspective-viewer/src/rust/components/containers/dropdown_menu.rs b/rust/perspective-viewer/src/rust/components/containers/dropdown_menu.rs
@@ -0,0 +1,127 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// Copyright (c) 2018, the Perspective Authors.
+//
+// This file is part of the Perspective library, distributed under the terms
+// of the Apache License 2.0.  The full license can be found in the LICENSE
+// file.
+
+use super::select::SelectItem;
+use crate::*;
+use std::marker::PhantomData;
+use std::rc::Rc;
+use web_sys::*;
+use yew::prelude::*;
+
+pub static CSS: &str = include_str!("../../../../build/css/dropdown-menu.css");
+
+pub type DropDownMenuItem<T> = SelectItem<T>;
+
+pub enum DropDownMenuMsg {
+    SetPos(i32, i32),
+}
+
+#[derive(Properties, Clone, PartialEq)]
+pub struct DropDownMenuProps<T>
+where
+    T: Into<Html> + Clone + PartialEq + 'static,
+{
+    pub values: Rc<Vec<DropDownMenuItem<T>>>,
+    pub callback: Callback<T>,
+}
+
+pub struct DropDownMenu<T>
+where
+    T: Into<Html> + Clone + PartialEq + 'static,
+{
+    top: i32,
+    left: i32,
+    _props: PhantomData<T>,
+}
+
+impl<T> Component for DropDownMenu<T>
+where
+    T: Into<Html> + Clone + PartialEq + 'static,
+{
+    type Message = DropDownMenuMsg;
+    type Properties = DropDownMenuProps<T>;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        DropDownMenu {
+            top: 0,
+            left: 0,
+            _props: Default::default(),
+        }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            DropDownMenuMsg::SetPos(top, left) => {
+                self.top = top;
+                self.left = left;
+                true
+            }
+        }
+    }
+
+    fn changed(&mut self, _ctx: &Context<Self>) -> bool {
+        false
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let values = &ctx.props().values;
+        let body = if !values.is_empty() {
+            values
+                .iter()
+                .map(|value| match value {
+                    DropDownMenuItem::Option(x) => {
+                        let click = ctx.props().callback.reform({
+                            let value = x.clone();
+                            move |_: MouseEvent| value.clone()
+                        });
+
+                        html! {
+                            <span onmousedown={ click }class="selected">
+                                { x.clone().into() }
+                            </span>
+                        }
+                    }
+                    DropDownMenuItem::OptGroup(name, xs) => {
+                        html_template! {
+                            <span class="dropdown-group-label">{ name }</span>
+                            <div class="dropdown-group-container">
+                                {
+                                    xs.iter().map(|x| {
+                                        let click = ctx.props().callback.reform({
+                                            let value = x.clone();
+                                            move |_: MouseEvent| value.clone()
+                                        });
+                                        html! {
+                                            <span onmousedown={ click }>
+                                                { x.clone().into() }
+                                            </span>
+                                        }
+                                    }).collect::<Html>()
+                                }
+                            </div>
+                        }
+                    }
+                })
+                .collect::<Html>()
+        } else {
+            html! {
+                <span class="no-results">{ "No Completions" }</span>
+            }
+        };
+
+        html! {
+            <>
+                <style>
+                    { &CSS }
+                    { format!(":host{{left:{}px;top:{}px;}}", self.left, self.top) }
+                </style>
+                { body }
+            </>
+        }
+    }
+}
diff --git a/rust/perspective-viewer/src/rust/components/containers/mod.rs b/rust/perspective-viewer/src/rust/components/containers/mod.rs
@@ -10,9 +10,10 @@
 //! `Component` types.
 
 pub mod dragdrop_list;
-pub mod dropdown;
+pub mod dropdown_menu;
 pub mod radio_list;
 pub mod scroll_panel;
+pub mod select;
 pub mod split_panel;
 
 #[cfg(test)]