@perspective-dev/viewer 4.3.0 → 4.4.0

package/src/rust/components/column_dropdown.rs

@@ -10,153 +10,263 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+use std::cell::RefCell;
+use std::collections::HashSet;
+use std::rc::Rc;
+
+use perspective_client::clone;
+use perspective_client::config::Expression;
 use web_sys::*;
+use yew::html::ImplicitClone;
 use yew::prelude::*;
 
 use super::column_selector::InPlaceColumn;
-use super::modal::*;
-use crate::utils::WeakScope;
+use super::portal::PortalModal;
+use crate::session::Session;
+use crate::utils::*;
+use crate::*;
 
 static CSS: &str = include_str!(concat!(env!("OUT_DIR"), "/css/column-dropdown.css"));
 
-#[derive(Properties, PartialEq)]
-pub struct ColumnDropDownProps {
-    #[prop_or_default]
-    pub weak_link: WeakScope<ColumnDropDown>,
-}
-
-impl ModalLink<ColumnDropDown> for ColumnDropDownProps {
-    fn weak_link(&self) -> &'_ WeakScope<ColumnDropDown> {
-        &self.weak_link
-    }
+/// Shared state for the column dropdown, updated imperatively.
+#[derive(Default)]
+pub struct ColumnDropDownState {
+    pub values: Vec<InPlaceColumn>,
+    pub selected: usize,
+    pub width: f64,
+    pub on_select: Option<Callback<InPlaceColumn>>,
+    pub target: Option<HtmlElement>,
+    pub no_results: bool,
 }
 
-pub enum ColumnDropDownMsg {
-    SetValues(Vec<InPlaceColumn>, f64),
-    SetCallback(Callback<InPlaceColumn>),
-    ItemDown,
-    ItemUp,
-    ItemSelect,
+/// A clonable handle for the column dropdown shared state.
+#[derive(Clone)]
+pub struct ColumnDropDownElement {
+    state: Rc<RefCell<ColumnDropDownState>>,
+    session: Session,
+    notify: Rc<PubSub<()>>,
 }
 
-pub struct ColumnDropDown {
-    values: Option<Vec<InPlaceColumn>>,
-    selected: usize,
-    width: f64,
-    on_select: Option<Callback<InPlaceColumn>>,
+impl PartialEq for ColumnDropDownElement {
+    fn eq(&self, other: &Self) -> bool {
+        Rc::ptr_eq(&self.state, &other.state)
+    }
 }
 
-impl Component for ColumnDropDown {
-    type Message = ColumnDropDownMsg;
-    type Properties = ColumnDropDownProps;
+impl ImplicitClone for ColumnDropDownElement {}
 
-    fn create(ctx: &Context<Self>) -> Self {
-        ctx.set_modal_link();
+impl ColumnDropDownElement {
+    pub fn new(session: Session) -> Self {
         Self {
-            values: Some(vec![]),
-            selected: 0,
-            width: 0.0,
-            on_select: None,
+            state: Default::default(),
+            session,
+            notify: Rc::default(),
         }
     }
 
-    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
-        match msg {
-            ColumnDropDownMsg::SetCallback(callback) => {
-                self.on_select = Some(callback);
-                false
-            },
-            ColumnDropDownMsg::SetValues(values, width) => {
-                self.values = Some(values);
-                self.selected = 0;
-                self.width = width;
-                true
-            },
-            ColumnDropDownMsg::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
-                }
-            },
-            ColumnDropDownMsg::ItemDown => {
-                self.selected += 1;
-                if let Some(ref values) = self.values
-                    && self.selected >= values.len()
-                {
-                    self.selected = 0;
-                }
+    pub fn autocomplete(
+        &self,
+        target: HtmlInputElement,
+        exclude: HashSet<String>,
+        callback: Callback<InPlaceColumn>,
+    ) -> Option<()> {
+        let input = target.value();
+        let metadata = self.session.metadata();
+        let mut values: Vec<InPlaceColumn> = vec![];
+        let small_input = input.to_lowercase();
+        for col in metadata.get_table_columns()? {
+            if !exclude.contains(col) && col.to_lowercase().contains(&small_input) {
+                values.push(InPlaceColumn::Column(col.to_owned()));
+            }
+        }
+
+        for col in self.session.metadata().get_expression_columns() {
+            if !exclude.contains(col) && col.to_lowercase().contains(&small_input) {
+                values.push(InPlaceColumn::Column(col.to_owned()));
+            }
+        }
 
-                true
-            },
-            ColumnDropDownMsg::ItemUp => {
-                if let Some(ref values) = self.values
-                    && self.selected < 1
-                {
-                    self.selected = values.len();
+        clone!(self.state, self.session, self.notify);
+        let target_elem: HtmlElement = target.clone().into();
+        let width = target.get_bounding_client_rect().width();
+        ApiFuture::spawn(async move {
+            if !exclude.contains(&input) {
+                let is_expr = session.validate_expr(&input).await?.is_none();
+                if is_expr {
+                    values.push(InPlaceColumn::Expression(Expression::new(
+                        None,
+                        input.into(),
+                    )));
                 }
+            }
+
+            let no_results = values.is_empty();
+            {
+                let mut s = state.borrow_mut();
+                s.values = values;
+                s.selected = 0;
+                s.width = width;
+                s.on_select = Some(callback);
+                s.target = Some(target_elem);
+                s.no_results = no_results;
+            }
+            notify.emit(());
+            Ok(())
+        });
+
+        Some(())
+    }
 
-                self.selected -= 1;
-                true
-            },
+    pub fn item_select(&self) {
+        let state = self.state.borrow();
+        if let Some(value) = state.values.get(state.selected)
+            && let Some(ref cb) = state.on_select
+        {
+            cb.emit(value.clone());
         }
     }
 
-    fn changed(&mut self, _ctx: &Context<Self>, _old: &Self::Properties) -> bool {
-        false
+    pub fn item_down(&self) {
+        let mut state = self.state.borrow_mut();
+        state.selected += 1;
+        if state.selected >= state.values.len() {
+            state.selected = 0;
+        }
+
+        drop(state);
+        self.notify.emit(());
     }
 
-    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()
-                                });
-
-                                let row = match value {
-                                    InPlaceColumn::Column(col) => html! {
-                                        <span>{ col }</span>
-                                    },
-                                    InPlaceColumn::Expression(col) =>  html! {
-                                        <span id="add-expression">{ col.name.clone() }</span>
-                                    },
-                                };
-
-                                html! {
-                                    if idx == self.selected {
-                                        <span onmousedown={ click } class="selected">{ row }</span>
-                                    } else {
-                                        <span onmousedown={ click }>{ row }</span>
-                                    }
-                                }
-                            }) }
-                } else {
-                    <span class="no-results" />
-                }
-            }
+    pub fn item_up(&self) {
+        let mut state = self.state.borrow_mut();
+        if state.selected < 1 {
+            state.selected = state.values.len();
+        }
+
+        state.selected -= 1;
+        drop(state);
+        self.notify.emit(());
+    }
+
+    pub fn hide(&self) -> ApiResult<()> {
+        self.state.borrow_mut().target = None;
+        self.notify.emit(());
+        Ok(())
+    }
+}
+
+/// A portal component that renders the column dropdown. Should be placed in
+/// the view of the component that creates the `ColumnDropDownElement`.
+#[derive(Properties, PartialEq)]
+pub struct ColumnDropDownPortalProps {
+    pub element: ColumnDropDownElement,
+    pub theme: String,
+}
+
+pub struct ColumnDropDownPortal {
+    _sub: Subscription,
+}
+
+impl Component for ColumnDropDownPortal {
+    type Message = ();
+    type Properties = ColumnDropDownPortalProps;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        let link = ctx.link().clone();
+        let sub = ctx
+            .props()
+            .element
+            .notify
+            .add_listener(move |()| link.send_message(()));
+        Self { _sub: sub }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, _msg: ()) -> bool {
+        true
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let state = ctx.props().element.state.borrow();
+        let target = state.target.clone();
+        let on_close = {
+            let element = ctx.props().element.clone();
+            Callback::from(move |()| {
+                let _ = element.hide();
+            })
         };
 
-        let position = format!(
-            ":host{{min-width:{}px;max-width:{}px}}",
-            self.width, self.width
-        );
+        if target.is_some() {
+            let values = state.values.clone();
+            let selected = state.selected;
+            let width = state.width;
+            let on_select = state.on_select.clone();
+            drop(state);
 
-        html! { <><style>{ CSS }</style><style>{ position }</style>{ body }</> }
+            html! {
+                <PortalModal
+                    tag_name="perspective-dropdown"
+                    {target}
+                    own_focus=false
+                    {on_close}
+                    theme={ctx.props().theme.clone()}
+                >
+                    <ColumnDropDownView {values} {selected} {width} {on_select} />
+                </PortalModal>
+            }
+        } else {
+            html! {}
+        }
     }
 }
+
+/// Pure view component for the column dropdown content.
+#[derive(Properties, PartialEq)]
+struct ColumnDropDownViewProps {
+    values: Vec<InPlaceColumn>,
+    selected: usize,
+    width: f64,
+    on_select: Option<Callback<InPlaceColumn>>,
+}
+
+#[function_component]
+fn ColumnDropDownView(props: &ColumnDropDownViewProps) -> Html {
+    let body = html! {
+        if !props.values.is_empty() {
+            { for props.values
+                    .iter()
+                    .enumerate()
+                    .map(|(idx, value)| {
+                        let click = props.on_select.as_ref().unwrap().reform({
+                            let value = value.clone();
+                            move |_: MouseEvent| value.clone()
+                        });
+
+                        let row = match value {
+                            InPlaceColumn::Column(col) => html! {
+                                <span>{ col }</span>
+                            },
+                            InPlaceColumn::Expression(col) => html! {
+                                <span id="add-expression"><span class="icon" />{ col.name.clone() }</span>
+                            },
+                        };
+
+                        html! {
+                            if idx == props.selected {
+                                <span onmousedown={click} class="selected">{ row }</span>
+                            } else {
+                                <span onmousedown={click}>{ row }</span>
+                            }
+                        }
+                    }) }
+        } else {
+            <span class="no-results" />
+        }
+    };
+
+    let position = format!(
+        ":host{{min-width:{}px;max-width:{}px}}",
+        props.width, props.width
+    );
+
+    html! { <><style>{ CSS }</style><style>{ position }</style>{ body }</> }
+}

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

@@ -13,7 +13,6 @@
 use std::collections::HashSet;
 
 use perspective_client::config::*;
-use perspective_client::utils::PerspectiveResultExt;
 use perspective_js::utils::ApiFuture;
 use web_sys::*;
 use yew::prelude::*;
@@ -21,19 +20,18 @@ use yew::prelude::*;
 use super::InPlaceColumn;
 use super::aggregate_selector::*;
 use super::expr_edit_button::*;
-use crate::PerspectiveProperties;
+use crate::components::column_dropdown::ColumnDropDownElement;
 use crate::components::column_selector::{EmptyColumn, InvalidColumn};
 use crate::components::type_icon::TypeIcon;
-use crate::custom_elements::ColumnDropDownElement;
 use crate::dragdrop::*;
 use crate::js::plugin::*;
-use crate::model::*;
 use crate::presentation::ColumnLocator;
 use crate::renderer::*;
 use crate::session::*;
+use crate::tasks::*;
 use crate::utils::*;
 
-#[derive(Clone, Properties, PerspectiveProperties!)]
+#[derive(Clone, Properties)]
 pub struct ActiveColumnProps {
     /// The column's index in the list.
     pub idx: usize,
@@ -64,6 +62,27 @@ pub struct ActiveColumnProps {
     /// Is this column's expression/config side panel open?
     pub is_editing: bool,
 
+    /// Whether this column is an expression column.  Computed by the parent
+    /// so that changes to session metadata trigger a re-render via prop diff.
+    #[prop_or_default]
+    pub is_expression: bool,
+
+    /// Whether the expression/config edit button should be shown.  Computed
+    /// by the parent (`is_expression || can_render_column_styles`).
+    #[prop_or_default]
+    pub show_edit_btn: bool,
+
+    /// The resolved table column type, if available.  Computed by the parent
+    /// from session metadata so that metadata updates trigger re-renders.
+    #[prop_or_default]
+    pub col_type: Option<ColumnType>,
+
+    /// Session metadata snapshot — threaded from `SessionProps`.
+    pub metadata: SessionMetadataRc,
+
+    /// View config snapshot — threaded from parent as a value prop.
+    pub view_config: PtrEqRc<ViewConfig>,
+
     /// State
     pub session: Session,
     pub dragdrop: DragDrop,
@@ -71,8 +90,16 @@ pub struct ActiveColumnProps {
 }
 
 impl PartialEq for ActiveColumnProps {
-    fn eq(&self, _rhs: &Self) -> bool {
-        false
+    fn eq(&self, rhs: &Self) -> bool {
+        self.idx == rhs.idx
+            && self.name == rhs.name
+            && self.is_aggregated == rhs.is_aggregated
+            && self.is_editing == rhs.is_editing
+            && self.is_expression == rhs.is_expression
+            && self.show_edit_btn == rhs.show_edit_btn
+            && self.col_type == rhs.col_type
+            && self.metadata == rhs.metadata
+            && self.view_config == rhs.view_config
     }
 }
 
@@ -121,7 +148,7 @@ impl Component for ActiveColumn {
                 is_render
             },
             New(InPlaceColumn::Column(col)) => {
-                let mut view_config = ctx.props().session.get_view_config().clone();
+                let mut view_config = (*ctx.props().view_config).clone();
                 if ctx.props().idx >= view_config.columns.len() {
                     view_config.columns.push(Some(col));
                 } else {
@@ -133,15 +160,21 @@ impl Component for ActiveColumn {
                     ..ViewConfigUpdate::default()
                 };
 
-                ctx.props()
-                    .update_and_render(update)
-                    .map(ApiFuture::spawn)
-                    .unwrap_or_log();
+                {
+                    let session = ctx.props().session.clone();
+                    let renderer = ctx.props().renderer.clone();
+                    if session.update_view_config(update).is_ok() {
+                        ApiFuture::spawn(async move {
+                            renderer.apply_pending_plugin()?;
+                            renderer.draw(session.validate().await?.create_view()).await
+                        });
+                    }
+                }
 
                 true
             },
             New(InPlaceColumn::Expression(col)) => {
-                let mut view_config = ctx.props().session.get_view_config().clone();
+                let mut view_config = (*ctx.props().view_config).clone();
                 if ctx.props().idx >= view_config.columns.len() {
                     view_config.columns.push(Some(col.name.as_ref().to_owned()));
                 } else {
@@ -155,10 +188,16 @@ impl Component for ActiveColumn {
                     ..ViewConfigUpdate::default()
                 };
 
-                ctx.props()
-                    .update_and_render(update)
-                    .map(ApiFuture::spawn)
-                    .unwrap_or_log();
+                {
+                    let session = ctx.props().session.clone();
+                    let renderer = ctx.props().renderer.clone();
+                    if session.update_view_config(update).is_ok() {
+                        ApiFuture::spawn(async move {
+                            renderer.apply_pending_plugin()?;
+                            renderer.draw(session.validate().await?.create_view()).await
+                        });
+                    }
+                }
 
                 true
             },
@@ -234,7 +273,7 @@ impl Component for ActiveColumn {
             })
             .collect();
 
-        let col_type = ctx.props().get_table_type(&ctx.props().name);
+        let col_type = ctx.props().col_type;
         match (name, col_type) {
             ((label, ColumnState::Empty), _) => {
                 classes.push("empty-named");
@@ -242,8 +281,7 @@ impl Component for ActiveColumn {
                 let on_select = ctx.link().callback(ActiveColumnMsg::New);
                 let exclude = ctx
                     .props()
-                    .session
-                    .get_view_config()
+                    .view_config
                     .columns
                     .iter()
                     .flatten()
@@ -292,7 +330,7 @@ impl Component for ActiveColumn {
                     }))
                 };
 
-                let ondragend = &ctx.props().ondragend.reform(|_| {});
+                let ondragend = &ctx.props().ondragend.reform(|_| ());
                 let ondragstart = ctx.link().callback({
                     let event_name = name.to_owned();
                     let dragdrop = ctx.props().dragdrop.clone();
@@ -312,17 +350,12 @@ impl Component for ActiveColumn {
                     .link()
                     .callback(|event: MouseEvent| MouseEnter(event.which() == 0));
 
-                let is_expression = ctx.props().session.metadata().is_column_expression(&name);
+                let is_expression = ctx.props().is_expression;
+                let show_edit_btn = ctx.props().show_edit_btn;
                 let mut class = ctx.props().renderer.metadata().mode.css();
                 if is_required {
                     class.push("required");
                 };
-
-                let can_render_styles = ctx
-                    .props()
-                    .can_render_column_styles(&name)
-                    .unwrap_or_default();
-                let show_edit_btn = is_expression || can_render_styles;
                 html! {
                     <div
                         class={outer_classes}
@@ -342,11 +375,14 @@ impl Component for ActiveColumn {
                             {ondragend}
                         >
                             <div class="column-selector-column-border">
+                                <span class="drag-handle icon" />
                                 <TypeIcon ty={col_type} />
                                 if ctx.props().is_aggregated {
                                     <AggregateSelector
                                         column={name.clone()}
                                         aggregate={ctx.props().get_aggregate(&name)}
+                                        view_config={ctx.props().view_config.clone()}
+                                        metadata={ctx.props().metadata.clone()}
                                         renderer={&ctx.props().renderer}
                                         session={&ctx.props().session}
                                     />
@@ -359,14 +395,13 @@ impl Component for ActiveColumn {
                                 if !ctx.props().is_aggregated {
                                     <span class="column-selector--spacer" />
                                 }
-                                if show_edit_btn {
-                                    <ExprEditButton
-                                        name={name.clone()}
-                                        on_open_expr_panel={&ctx.props().on_open_expr_panel}
-                                        {is_expression}
-                                        is_editing={ctx.props().is_editing}
-                                    />
-                                }
+                                <ExprEditButton
+                                    name={name.clone()}
+                                    on_open_expr_panel={&ctx.props().on_open_expr_panel}
+                                    {is_expression}
+                                    is_disabled={!show_edit_btn}
+                                    is_editing={ctx.props().is_editing}
+                                />
                             </div>
                         </div>
                     </div>
@@ -390,27 +425,6 @@ impl Component for ActiveColumn {
 }
 
 impl ActiveColumnProps {
-    fn get_name(&self, defn: &ActiveColumnState) -> Option<String> {
-        match &defn.state {
-            ActiveColumnStateData::DragOver => Some(self.dragdrop.get_drag_column().unwrap()),
-            ActiveColumnStateData::Column(name) => Some(name.to_owned()),
-            ActiveColumnStateData::Required => None,
-            ActiveColumnStateData::Invalid => None,
-        }
-    }
-
-    fn get_table_type(&self, defn: &ActiveColumnState) -> Option<ColumnType> {
-        self.get_name(defn)
-            .as_ref()
-            .and_then(|x| self.session.metadata().get_column_table_type(x))
-    }
-
-    fn _get_view_type(&self, defn: &ActiveColumnState) -> Option<ColumnType> {
-        self.get_name(defn)
-            .as_ref()
-            .and_then(|x| self.session.metadata().get_column_view_type(x))
-    }
-
     /// Remove an active column from `columns`, or alternatively make this
     /// column the only column in `columns` if the shift key is set (via the
     /// `shift` flag).
@@ -420,7 +434,7 @@ impl ActiveColumnProps {
     ///   with respect to `columns`.
     /// - `shift` whether to toggle or select this column.
     fn deactivate_column(&self, name: String, shift: bool) {
-        let mut columns = self.session.get_view_config().columns.clone();
+        let mut columns = self.view_config.columns.clone();
         let max_cols = self
             .renderer
             .metadata()
@@ -457,7 +471,7 @@ impl ActiveColumnProps {
     }
 
     fn get_aggregate(&self, name: &str) -> Option<Aggregate> {
-        self.session.get_view_config().aggregates.get(name).cloned()
+        self.view_config.aggregates.get(name).cloned()
     }
 
     fn apply_columns(&self, columns: Vec<Option<String>>) {
@@ -466,8 +480,13 @@ impl ActiveColumnProps {
             ..ViewConfigUpdate::default()
         };
 
-        self.update_and_render(config)
-            .map(ApiFuture::spawn)
-            .unwrap_or_log();
+        if self.session.update_view_config(config).is_ok() {
+            let session = self.session.clone();
+            let renderer = self.renderer.clone();
+            ApiFuture::spawn(async move {
+                renderer.apply_pending_plugin()?;
+                renderer.draw(session.validate().await?.create_view()).await
+            });
+        }
     }
 }

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

@@ -58,6 +58,7 @@ pub fn AddExpressionButton(p: &AddExpressionButtonProps) -> Html {
 
     html! {
         <div id="add-expression" data-index="-1" {class} {onmouseover} {onmouseout} {onmousedown}>
+            <span class="icon" />
             <span id="add-expression-button" />
         </div>
     }