@perspective-dev/viewer 4.0.0

package/src/rust/components/export_dropdown.rs

@@ -0,0 +1,153 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 presentation::Presentation;
+use yew::prelude::*;
+
+use super::containers::dropdown_menu::*;
+use super::modal::{ModalLink, SetModalLink};
+use super::style::StyleProvider;
+use crate::model::*;
+use crate::renderer::*;
+use crate::utils::*;
+use crate::*;
+
+pub type ExportDropDownMenuItem = DropDownMenuItem<ExportFile>;
+
+#[derive(Properties, PartialEq)]
+pub struct ExportDropDownMenuProps {
+    pub renderer: Renderer,
+    pub presentation: Presentation,
+    pub callback: Callback<ExportFile>,
+    pub root: web_sys::HtmlElement,
+
+    #[prop_or_default]
+    weak_link: WeakScope<ExportDropDownMenu>,
+}
+
+impl ModalLink<ExportDropDownMenu> for ExportDropDownMenuProps {
+    fn weak_link(&self) -> &'_ utils::WeakScope<ExportDropDownMenu> {
+        &self.weak_link
+    }
+}
+
+#[derive(Default)]
+pub struct ExportDropDownMenu {
+    title: String,
+    _sub: Option<Subscription>,
+    input_ref: NodeRef,
+    invalid: bool,
+}
+
+pub enum ExportDropDownMenuMsg {
+    TitleChange,
+}
+
+fn get_menu_items(name: &str, is_chart: bool) -> Vec<ExportDropDownMenuItem> {
+    vec![
+        ExportDropDownMenuItem::OptGroup(
+            "Current View".into(),
+            if is_chart {
+                vec![
+                    ExportMethod::Csv.new_file(name, is_chart),
+                    ExportMethod::Json.new_file(name, is_chart),
+                    ExportMethod::Ndjson.new_file(name, is_chart),
+                    ExportMethod::Arrow.new_file(name, is_chart),
+                    ExportMethod::Html.new_file(name, is_chart),
+                    ExportMethod::Plugin.new_file(name, is_chart),
+                ]
+            } else {
+                vec![
+                    ExportMethod::Csv.new_file(name, is_chart),
+                    ExportMethod::Json.new_file(name, is_chart),
+                    ExportMethod::Ndjson.new_file(name, is_chart),
+                    ExportMethod::Arrow.new_file(name, is_chart),
+                    ExportMethod::Html.new_file(name, is_chart),
+                ]
+            },
+        ),
+        ExportDropDownMenuItem::OptGroup("All".into(), vec![
+            ExportMethod::CsvAll.new_file(name, is_chart),
+            ExportMethod::JsonAll.new_file(name, is_chart),
+            ExportMethod::NdjsonAll.new_file(name, is_chart),
+            ExportMethod::ArrowAll.new_file(name, is_chart),
+        ]),
+        ExportDropDownMenuItem::OptGroup("Config".into(), vec![
+            ExportMethod::JsonConfig.new_file(name, is_chart),
+        ]),
+    ]
+}
+
+impl Component for ExportDropDownMenu {
+    type Message = ExportDropDownMenuMsg;
+    type Properties = ExportDropDownMenuProps;
+
+    fn view(&self, ctx: &Context<Self>) -> yew::virtual_dom::VNode {
+        let callback = ctx.link().callback(|_| ExportDropDownMenuMsg::TitleChange);
+        let plugin = ctx.props().renderer.get_active_plugin().unwrap();
+        // let has_render = js_sys::Reflect::has(&plugin,
+        // js_intern::js_intern!("render")).unwrap();
+        let is_chart = plugin.name().as_str() != "Datagrid";
+        html! {
+            <StyleProvider root={ctx.props().root.clone()}>
+                <span class="dropdown-group-label">{ "Save as" }</span>
+                <input
+                    class={if self.invalid { "invalid" } else { "" }}
+                    oninput={callback}
+                    ref={&self.input_ref}
+                    value={self.title.to_owned()}
+                />
+                <DropDownMenu<ExportFile>
+                    values={Rc::new(get_menu_items(&self.title, is_chart))}
+                    callback={&ctx.props().callback}
+                />
+            </StyleProvider>
+        }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            ExportDropDownMenuMsg::TitleChange => {
+                self.title = self
+                    .input_ref
+                    .cast::<web_sys::HtmlInputElement>()
+                    .unwrap()
+                    .value();
+
+                self.invalid = self.title.is_empty();
+                true
+            },
+        }
+    }
+
+    fn create(ctx: &Context<Self>) -> Self {
+        ctx.set_modal_link();
+        let _sub = Some(
+            ctx.props()
+                .renderer
+                .plugin_changed
+                .add_listener(ctx.link().callback(|_| ExportDropDownMenuMsg::TitleChange)),
+        );
+
+        Self {
+            title: ctx
+                .props()
+                .presentation
+                .get_title()
+                .unwrap_or_else(|| "untitled".to_owned()),
+            _sub,
+            ..Default::default()
+        }
+    }
+}

package/src/rust/components/expression_editor.rs

@@ -0,0 +1,153 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 perspective_client::{ExprValidationError, clone};
+use yew::prelude::*;
+
+use super::form::code_editor::*;
+use super::style::LocalStyle;
+use crate::session::Session;
+use crate::*;
+
+#[derive(Debug)]
+pub enum ExpressionEditorMsg {
+    SetExpr(Rc<String>),
+    ValidateComplete(Option<ExprValidationError>),
+}
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct ExpressionEditorProps {
+    pub session: Session,
+    pub on_save: Callback<()>,
+    pub on_validate: Callback<bool>,
+    pub on_input: Callback<Rc<String>>,
+    pub alias: Option<String>,
+    pub disabled: bool,
+    #[prop_or_default]
+    pub reset_count: u8,
+}
+
+impl ExpressionEditorProps {
+    fn initial_expr(&self) -> Rc<String> {
+        self.alias
+            .as_ref()
+            .and_then(|alias| self.session.metadata().get_expression_by_alias(alias))
+            .unwrap_or_default()
+            .into()
+    }
+}
+
+/// Expression editor component `CodeEditor` and a button toolbar.
+pub struct ExpressionEditor {
+    expr: Rc<String>,
+    error: Option<ExprValidationError>,
+    oninput: Callback<Rc<String>>,
+}
+
+impl Component for ExpressionEditor {
+    type Message = ExpressionEditorMsg;
+    type Properties = ExpressionEditorProps;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        let oninput = ctx.link().callback(ExpressionEditorMsg::SetExpr);
+        let expr = ctx.props().initial_expr();
+        ctx.link()
+            .send_message(Self::Message::SetExpr(expr.clone()));
+
+        Self {
+            error: None,
+            expr,
+            oninput,
+        }
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            ExpressionEditorMsg::SetExpr(val) => {
+                ctx.props().on_input.emit(val.clone());
+                self.expr = val.clone();
+                clone!(ctx.props().session);
+                ctx.link().send_future(async move {
+                    match session.validate_expr(&val).await {
+                        Ok(x) => ExpressionEditorMsg::ValidateComplete(x),
+                        Err(err) => {
+                            web_sys::console::error_1(&format!("{err:?}").into());
+                            ExpressionEditorMsg::ValidateComplete(None)
+                        },
+                    }
+                });
+
+                true
+            },
+            ExpressionEditorMsg::ValidateComplete(err) => {
+                self.error = err;
+                if self.error.is_none() {
+                    maybe!({
+                        let alias = ctx.props().alias.as_ref()?;
+                        let session = &ctx.props().session;
+                        let old = session.metadata().get_expression_by_alias(alias)?;
+                        let is_edited = *self.expr != old;
+                        session
+                            .metadata_mut()
+                            .set_edit_by_alias(alias, self.expr.to_string());
+                        Some(is_edited)
+                    });
+
+                    ctx.props().on_validate.emit(true);
+                } else {
+                    ctx.props().on_validate.emit(false);
+                }
+                true
+            },
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let disabled_class = ctx.props().disabled.then_some("disabled");
+        clone!(ctx.props().disabled);
+        html! {
+            <>
+                <LocalStyle href={css!("expression-editor")} />
+                <label class="item_title">{ "Expression" }</label>
+                <div id="editor-container" class={disabled_class}>
+                    <CodeEditor
+                        autofocus=true
+                        expr={&self.expr}
+                        autosuggest=true
+                        error={self.error.clone().map(|x| x.into())}
+                        {disabled}
+                        oninput={self.oninput.clone()}
+                        onsave={ctx.props().on_save.clone()}
+                    />
+                    <div id="psp-expression-editor-meta">
+                        <div class="error">
+                            { &self.error.clone().map(|e| e.error_message).unwrap_or_default() }
+                        </div>
+                    </div>
+                </div>
+            </>
+        }
+    }
+
+    fn changed(&mut self, ctx: &Context<Self>, old_props: &Self::Properties) -> bool {
+        if ctx.props().alias != old_props.alias || ctx.props().reset_count != old_props.reset_count
+        {
+            ctx.link()
+                .send_message(ExpressionEditorMsg::SetExpr(ctx.props().initial_expr()));
+            false
+        } else {
+            true
+        }
+    }
+}

package/src/rust/components/filter_dropdown.rs

@@ -0,0 +1,144 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 web_sys::*;
+use yew::prelude::*;
+
+use super::modal::*;
+use crate::utils::WeakScope;
+
+static CSS: &str = include_str!(concat!(env!("OUT_DIR"), "/css/filter-dropdown.css"));
+
+pub enum FilterDropDownMsg {
+    SetValues(Vec<String>),
+    SetCallback(Callback<String>),
+    ItemDown,
+    ItemUp,
+    ItemSelect,
+}
+
+pub struct FilterDropDown {
+    values: Option<Vec<String>>,
+    selected: usize,
+    on_select: Option<Callback<String>>,
+}
+
+#[derive(Properties, PartialEq)]
+pub struct FilterDropDownProps {
+    #[prop_or_default]
+    pub weak_link: WeakScope<FilterDropDown>,
+}
+
+impl ModalLink<FilterDropDown> for FilterDropDownProps {
+    fn weak_link(&self) -> &'_ WeakScope<FilterDropDown> {
+        &self.weak_link
+    }
+}
+
+impl Component for FilterDropDown {
+    type Message = FilterDropDownMsg;
+    type Properties = FilterDropDownProps;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        ctx.set_modal_link();
+        Self {
+            values: Some(vec![]),
+            selected: 0,
+            on_select: None,
+        }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            FilterDropDownMsg::SetCallback(callback) => {
+                self.on_select = Some(callback);
+                false
+            },
+            FilterDropDownMsg::SetValues(values) => {
+                self.values = Some(values);
+                self.selected = 0;
+                true
+            },
+            FilterDropDownMsg::ItemSelect => {
+                if let Some(ref values) = self.values {
+                    match values.get(self.selected) {
+                        None => {
+                            console::error_1(&"Selected out-of-bounds".into());
+                            false
+                        },
+                        Some(x) => {
+                            self.on_select.as_ref().unwrap().emit(x.clone());
+                            false
+                        },
+                    }
+                } else {
+                    console::error_1(&"No Values".into());
+                    false
+                }
+            },
+            FilterDropDownMsg::ItemDown => {
+                self.selected += 1;
+                if let Some(ref values) = self.values
+                    && self.selected >= values.len()
+                {
+                    self.selected = 0;
+                };
+
+                true
+            },
+            FilterDropDownMsg::ItemUp => {
+                if let Some(ref values) = self.values
+                    && self.selected < 1
+                {
+                    self.selected = values.len();
+                }
+
+                self.selected -= 1;
+                true
+            },
+        }
+    }
+
+    fn changed(&mut self, _ctx: &Context<Self>, _old: &Self::Properties) -> bool {
+        false
+    }
+
+    fn view(&self, _ctx: &Context<Self>) -> Html {
+        let body = html! {
+            if let Some(ref values) = self.values {
+                if !values.is_empty() {
+                    { for values
+                            .iter()
+                            .enumerate()
+                            .map(|(idx, value)| {
+                                let click = self.on_select.as_ref().unwrap().reform({
+                                    let value = value.clone();
+                                    move |_: MouseEvent| value.clone()
+                                });
+
+                                html! {
+                                    if idx == self.selected {
+                                        <span onmousedown={ click } class="selected">{ value }</span>
+                                    } else {
+                                        <span onmousedown={ click }>{ value }</span>
+                                    }
+                                }
+                            }) }
+                } else {
+                    <span class="no-results">{ "No Completions" }</span>
+                }
+            }
+        };
+
+        html! { <><style>{ &CSS }</style>{ body }</> }
+    }
+}