@perspective-dev/viewer 4.0.0

package/src/rust/components/column_selector/inactive_column.rs

@@ -0,0 +1,221 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 itertools::Itertools;
+use perspective_client::config::{ColumnType, *};
+use perspective_client::utils::PerspectiveResultExt;
+use web_sys::*;
+use yew::prelude::*;
+
+use super::expression_toolbar::*;
+use crate::components::type_icon::TypeIcon;
+use crate::components::viewer::ColumnLocator;
+use crate::dragdrop::*;
+use crate::js::plugin::*;
+use crate::model::*;
+use crate::presentation::Presentation;
+use crate::renderer::*;
+use crate::session::*;
+use crate::*;
+
+#[derive(Properties, Clone)]
+pub struct InactiveColumnProps {
+    pub idx: usize,
+    pub visible: bool,
+    pub name: String,
+    pub dragdrop: DragDrop,
+    pub session: Session,
+    pub renderer: Renderer,
+    pub presentation: Presentation,
+    pub is_editing: bool,
+    pub ondragend: Callback<()>,
+    pub onselect: Callback<()>,
+    pub on_open_expr_panel: Callback<ColumnLocator>,
+}
+
+impl PartialEq for InactiveColumnProps {
+    /// Equality for `InactiveColumnProps` determines when it should re-render,
+    /// which is only when it has changed.
+    /// TODO Aggregates
+    fn eq(&self, _rhs: &Self) -> bool {
+        false
+    }
+}
+
+derive_model!(Renderer, Session for InactiveColumnProps);
+
+impl InactiveColumnProps {
+    /// Add a column to the active columns, which corresponds to the `columns`
+    /// field of the `JsPerspectiveViewConfig`.
+    ///
+    /// # Arguments
+    /// - `name` The name of the column to de-activate, which is a unique ID
+    ///   with respect to `columns`.
+    /// - `shift` whether to toggle or select this column.
+    pub fn activate_column(&self, name: String, shift: bool) {
+        let mut columns = self.session.get_view_config().columns.clone();
+        let max_cols = self
+            .renderer
+            .metadata()
+            .names
+            .as_ref()
+            .map_or(0, |x| x.len());
+
+        // Don't treat `None` at the end of the column list as columns, we'll refill
+        // these later
+        if let Some(last_filled) = columns.iter().rposition(|x| !x.is_none()) {
+            columns.truncate(last_filled + 1);
+
+            let mode = self.renderer.metadata().mode;
+            if (mode == ColumnSelectMode::Select) ^ shift {
+                columns.clear();
+            } else {
+                columns.retain(|x| x.as_ref() != Some(&name));
+            }
+
+            columns.push(Some(name));
+        }
+
+        // Do this outside the loop so errors dont just become noops
+        self.apply_columns(
+            columns
+                .into_iter()
+                .pad_using(max_cols, |_| None)
+                .collect::<Vec<_>>(),
+        );
+    }
+
+    fn apply_columns(&self, columns: Vec<Option<String>>) {
+        let config = ViewConfigUpdate {
+            columns: Some(columns),
+            ..ViewConfigUpdate::default()
+        };
+
+        self.update_and_render(config)
+            .map(ApiFuture::spawn)
+            .unwrap_or_log();
+    }
+}
+
+pub enum InactiveColumnMsg {
+    ActivateColumn(bool),
+    MouseEnter(bool),
+    MouseLeave(bool),
+}
+
+use InactiveColumnMsg::*;
+
+#[derive(Default)]
+pub struct InactiveColumn {
+    add_expression_ref: NodeRef,
+    mouseover: bool,
+}
+
+impl Component for InactiveColumn {
+    type Message = InactiveColumnMsg;
+    type Properties = InactiveColumnProps;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self::default()
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: InactiveColumnMsg) -> bool {
+        match msg {
+            ActivateColumn(shift_key) => {
+                ctx.props()
+                    .activate_column(ctx.props().name.to_owned(), shift_key);
+                ctx.props().onselect.emit(());
+                false
+            },
+            MouseEnter(is_render) => {
+                self.mouseover = is_render;
+                is_render
+            },
+            MouseLeave(is_render) => {
+                self.mouseover = false;
+                is_render
+            },
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let col_type = ctx
+            .props()
+            .session
+            .metadata()
+            .get_column_table_type(&ctx.props().name)
+            .unwrap_or(ColumnType::String);
+
+        let add_column = ctx
+            .link()
+            .callback(|event: MouseEvent| InactiveColumnMsg::ActivateColumn(event.shift_key()));
+
+        let ondragend = ctx.props().ondragend.reform(|_| {});
+        let ondragstart = ctx.link().callback({
+            let event_name = ctx.props().name.to_owned();
+            let dragdrop = ctx.props().dragdrop.clone();
+            move |event: DragEvent| {
+                dragdrop.set_drag_image(&event).unwrap();
+                dragdrop.notify_drag_start(event_name.to_string(), DragEffect::Copy);
+                MouseLeave(false)
+            }
+        });
+
+        let onmouseout = ctx.link().callback(|_| MouseLeave(true));
+        let onmouseover = ctx
+            .link()
+            .callback(|event: MouseEvent| MouseEnter(event.which() == 0));
+
+        let is_expression = ctx
+            .props()
+            .session
+            .metadata()
+            .is_column_expression(&ctx.props().name);
+
+        let is_active_class = ctx.props().renderer.metadata().mode.css();
+        let mut class = classes!("column-selector-column");
+        if !ctx.props().visible {
+            class.push("column-selector-column-hidden");
+        }
+
+        if self.mouseover {
+            class.push("dragdrop-hover");
+        }
+
+        html! {
+            <div {class} {onmouseover} {onmouseout} data-index={ctx.props().idx.to_string()}>
+                <span class={is_active_class} onmousedown={add_column} />
+                <div
+                    class="column-selector-draggable column-selector-column-title"
+                    draggable="true"
+                    ref={&self.add_expression_ref}
+                    {ondragstart}
+                    {ondragend}
+                >
+                    <div class="column-selector-column-border">
+                        <TypeIcon ty={col_type} />
+                        <span class="column_name">{ ctx.props().name.clone() }</span>
+                        <span class="column-selector--spacer" />
+                        if is_expression {
+                            <ExprEditButton
+                                name={ctx.props().name.clone()}
+                                on_open_expr_panel={&ctx.props().on_open_expr_panel}
+                                is_expression=true
+                                is_editing={ctx.props().is_editing}
+                            />
+                        }
+                    </div>
+                </div>
+            </div>
+        }
+    }
+}

package/src/rust/components/column_selector/invalid_column.rs

@@ -0,0 +1,37 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 crate::components::style::LocalStyle;
+use crate::css;
+
+#[derive(Default)]
+pub struct InvalidColumn {}
+
+impl Component for InvalidColumn {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self::default()
+    }
+
+    fn view(&self, _ctx: &Context<Self>) -> Html {
+        html! {
+            <div class="pivot-column column-empty column-invalid">
+                <LocalStyle href={css!("empty-column")} />
+                <div class="column-invalid-input" />
+            </div>
+        }
+    }
+}

package/src/rust/components/column_selector/pivot_column.rs

@@ -0,0 +1,93 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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::ColumnType;
+// use perspective_client::ColumnType;
+use web_sys::*;
+use yew::prelude::*;
+
+use crate::components::containers::dragdrop_list::*;
+use crate::components::type_icon::TypeIcon;
+use crate::dragdrop::*;
+use crate::session::*;
+
+pub struct PivotColumn {}
+
+#[derive(Properties)]
+pub struct PivotColumnProps {
+    pub session: Session,
+    pub column: String,
+    pub dragdrop: DragDrop,
+    pub action: DragTarget,
+}
+
+impl PartialEq for PivotColumnProps {
+    fn eq(&self, other: &Self) -> bool {
+        self.column == other.column && self.action == other.action
+    }
+}
+
+impl DragDropListItemProps for PivotColumnProps {
+    type Item = String;
+
+    fn get_item(&self) -> String {
+        self.column.clone()
+    }
+}
+
+impl Component for PivotColumn {
+    type Message = ();
+    type Properties = PivotColumnProps;
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let dragstart = Callback::from({
+            let event_name = ctx.props().column.to_owned();
+            let dragdrop = ctx.props().dragdrop.clone();
+            let action = ctx.props().action;
+            move |event: DragEvent| {
+                dragdrop.set_drag_image(&event).unwrap();
+                dragdrop.notify_drag_start(event_name.to_string(), DragEffect::Move(action))
+            }
+        });
+
+        let dragend = Callback::from({
+            let dragdrop = ctx.props().dragdrop.clone();
+            move |_event| dragdrop.notify_drag_end()
+        });
+
+        let col_type = ctx
+            .props()
+            .session
+            .metadata()
+            .get_column_table_type(&ctx.props().column)
+            .unwrap_or(ColumnType::Integer);
+
+        html! {
+            <div
+                class="pivot-column-draggable"
+                draggable="true"
+                ondragstart={dragstart}
+                ondragend={dragend}
+            >
+                <div class="pivot-column-border">
+                    <TypeIcon ty={col_type} />
+                    // <TypeIcon ty={ColumnType::String} />
+                    <span class="column_name">{ ctx.props().column.clone() }</span>
+                </div>
+            </div>
+        }
+    }
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {}
+    }
+}

package/src/rust/components/column_selector/sort_column.rs

@@ -0,0 +1,135 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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::*;
+use perspective_client::utils::PerspectiveResultExt;
+use web_sys::*;
+use yew::prelude::*;
+
+use crate::components::containers::dragdrop_list::*;
+use crate::components::type_icon::TypeIcon;
+use crate::dragdrop::*;
+use crate::model::*;
+use crate::renderer::*;
+use crate::session::*;
+use crate::*;
+
+/// A `SortColumn` includes the column name and `SortDir` arrow, a clickable
+/// button which cycles through the available `SortDir` states.
+pub struct SortColumn {}
+
+#[derive(Properties)]
+pub struct SortColumnProps {
+    pub sort: Sort,
+    pub idx: usize,
+    pub session: Session,
+    pub renderer: Renderer,
+    pub dragdrop: DragDrop,
+}
+
+impl PartialEq for SortColumnProps {
+    fn eq(&self, other: &Self) -> bool {
+        self.sort == other.sort && self.idx == other.idx
+    }
+}
+
+derive_model!(Renderer, Session for SortColumnProps);
+
+impl DragDropListItemProps for SortColumnProps {
+    type Item = Sort;
+
+    fn get_item(&self) -> Sort {
+        self.sort.clone()
+    }
+}
+
+pub enum SortColumnMsg {
+    SortDirClick(bool),
+}
+
+impl Component for SortColumn {
+    type Message = SortColumnMsg;
+    type Properties = SortColumnProps;
+
+    fn create(_ctx: &Context<Self>) -> Self {
+        Self {}
+    }
+
+    fn update(&mut self, ctx: &Context<Self>, msg: SortColumnMsg) -> bool {
+        match msg {
+            SortColumnMsg::SortDirClick(shift_key) => {
+                let is_split = ctx.props().session.get_view_config().split_by.is_empty();
+                let mut sort = ctx.props().session.get_view_config().sort.clone();
+                let sort_column = &mut sort.get_mut(ctx.props().idx).expect("Sort on no column");
+                sort_column.1 = sort_column.1.cycle(!is_split, shift_key);
+                let update = ViewConfigUpdate {
+                    sort: Some(sort),
+                    ..ViewConfigUpdate::default()
+                };
+
+                ctx.props()
+                    .update_and_render(update)
+                    .map(ApiFuture::spawn)
+                    .unwrap_or_log();
+
+                false
+            },
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let onclick = ctx
+            .link()
+            .callback(|event: MouseEvent| SortColumnMsg::SortDirClick(event.shift_key()));
+
+        let dragstart = Callback::from({
+            let event_name = ctx.props().sort.0.to_owned();
+            let dragdrop = ctx.props().dragdrop.clone();
+            move |event: DragEvent| {
+                dragdrop.set_drag_image(&event).unwrap();
+                dragdrop
+                    .notify_drag_start(event_name.to_string(), DragEffect::Move(DragTarget::Sort))
+            }
+        });
+
+        let dragend = Callback::from({
+            let dragdrop = ctx.props().dragdrop.clone();
+            move |_event| dragdrop.notify_drag_end()
+        });
+
+        let col_type = ctx
+            .props()
+            .session
+            .metadata()
+            .get_column_table_type(&ctx.props().sort.0.to_owned())
+            .unwrap_or(ColumnType::Integer);
+
+        html! {
+            <div
+                class="pivot-column-draggable"
+                draggable="true"
+                ondragstart={dragstart}
+                ondragend={dragend}
+            >
+                <div class="pivot-column-border">
+                    <TypeIcon ty={col_type} />
+                    // <TypeIcon ty={ColumnType::String} />
+                    <span class="column_name">{ ctx.props().sort.0.to_owned() }</span>
+                    <span
+                        class={format!("sort-icon {}", ctx.props().sort.1)}
+                        onmousedown={onclick}
+                    />
+                </div>
+            </div>
+        }
+    }
+}