@perspective-dev/viewer 4.2.0 → 4.4.0

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

@@ -16,9 +16,9 @@ use perspective_client::config::Expression;
 use web_sys::*;
 use yew::prelude::*;
 
+use crate::components::column_dropdown::ColumnDropDownElement;
 use crate::components::style::LocalStyle;
 use crate::css;
-use crate::custom_elements::ColumnDropDownElement;
 
 #[derive(Properties)]
 pub struct EmptyColumnProps {
@@ -38,7 +38,7 @@ impl PartialEq for EmptyColumnProps {
     }
 }
 
-#[derive(Clone, Debug)]
+#[derive(Clone, Debug, PartialEq)]
 pub enum InPlaceColumn {
     Column(String),
     Expression(Expression<'static>),

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

@@ -27,6 +27,10 @@ pub struct ExprEditButtonProps {
 
     /// Is the expression/config panel open?
     pub is_editing: bool,
+
+    /// Is the expression/config panel enabled? If not, show an invisible
+    /// square in the same dimensions (so the layout does not jump around).
+    pub is_disabled: bool,
 }
 
 /// A button that goes into a column-list for a custom expression
@@ -42,11 +46,13 @@ pub fn ExprEditButton(p: &ExprEditButtonProps) -> Html {
         p.on_open_expr_panel.emit(name)
     });
 
-    let class = if p.is_editing {
+    let class = if p.is_disabled {
+        "expression-edit-button disabled"
+    } else if p.is_editing {
         "expression-edit-button is-editing"
     } else {
         "expression-edit-button"
     };
 
-    html! { <span {onmousedown} {class} /> }
+    html! { <span {onmousedown} {class}><span class="icon" /></span> }
 }

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

@@ -15,7 +15,6 @@ use std::rc::Rc;
 
 use chrono::{Datelike, NaiveDate, TimeZone, Utc};
 use perspective_client::config::*;
-use perspective_client::utils::PerspectiveResultExt;
 use perspective_js::utils::ApiFuture;
 use wasm_bindgen::JsCast;
 use web_sys::*;
@@ -23,23 +22,27 @@ use yew::prelude::*;
 
 use crate::components::containers::dragdrop_list::*;
 use crate::components::containers::select::*;
+use crate::components::filter_dropdown::FilterDropDownElement;
 use crate::components::style::LocalStyle;
 use crate::components::type_icon::TypeIcon;
-use crate::custom_elements::*;
 use crate::dragdrop::*;
-use crate::model::*;
 use crate::renderer::*;
 use crate::session::*;
 use crate::utils::*;
-use crate::*;
+use crate::{css, maybe};
 
-#[derive(Clone, Properties, PerspectiveProperties!)]
+#[derive(Clone, Properties)]
 pub struct FilterColumnProps {
     pub filter: Filter,
     pub idx: usize,
     pub filter_dropdown: FilterDropDownElement,
     pub on_keydown: Callback<String>,
 
+    /// Session metadata snapshot — threaded from `SessionProps`.
+    pub metadata: SessionMetadataRc,
+    /// Current view config threaded as a value prop.
+    pub view_config: PtrEqRc<ViewConfig>,
+
     // State
     pub session: Session,
     pub renderer: Renderer,
@@ -48,7 +51,11 @@ pub struct FilterColumnProps {
 
 impl PartialEq for FilterColumnProps {
     fn eq(&self, rhs: &Self) -> bool {
-        self.idx == rhs.idx && self.filter == rhs.filter && self.on_keydown == rhs.on_keydown
+        self.idx == rhs.idx
+            && self.filter == rhs.filter
+            && self.on_keydown == rhs.on_keydown
+            && self.metadata == rhs.metadata
+            && self.view_config == rhs.view_config
     }
 }
 
@@ -95,7 +102,7 @@ impl Component for FilterColumn {
 
         this.filter_ops = Rc::new(
             maybe! {
-                Some(get_filter_ops(ctx.props().session(), col_type?)?
+                Some(get_filter_ops(&ctx.props().metadata, col_type?)?
                     .into_iter()
                     .map(SelectItem::Option)
                     .collect::<Vec<_>>())
@@ -183,7 +190,7 @@ impl Component for FilterColumn {
             changed = true;
             self.filter_ops = Rc::new(
                 maybe! {
-                    Some(get_filter_ops(&ctx.props().session, col_type?)?
+                    Some(get_filter_ops(&ctx.props().metadata, col_type?)?
                         .into_iter()
                         .map(SelectItem::Option)
                         .collect::<Vec<_>>())
@@ -204,11 +211,7 @@ impl Component for FilterColumn {
         let idx = ctx.props().idx;
         let filter = ctx.props().filter.clone();
         let column = filter.column().to_owned();
-        let col_type = ctx
-            .props()
-            .session
-            .metadata()
-            .get_column_table_type(&column);
+        let col_type = ctx.props().metadata.get_column_table_type(&column);
         let select = ctx.link().callback(FilterColumnMsg::FilterOpSelect);
         let noderef = &self.input_ref;
         let input = ctx.link().callback({
@@ -347,6 +350,7 @@ impl Component for FilterColumn {
             >
                 <LocalStyle href={css!("filter-item")} />
                 <div class="pivot-column-border">
+                    <span class="drag-handle icon" />
                     // <TypeIcon ty={ColumnType::String} />
                     <TypeIcon ty={final_col_type} />
                     <span class="column_name">{ filter.column().to_owned() }</span>
@@ -377,8 +381,7 @@ impl Component for FilterColumn {
 }
 
 /// Get the allowed `FilterOp`s for this filter.
-fn get_filter_ops(session: &Session, col_type: ColumnType) -> Option<Vec<String>> {
-    let metadata = session.metadata();
+fn get_filter_ops(metadata: &SessionMetadata, col_type: ColumnType) -> Option<Vec<String>> {
     let features = metadata.get_features()?;
     features
         .filter_ops
@@ -404,9 +407,7 @@ impl FilterColumnProps {
 
     /// Get this filter's type, e.g. the type of the column.
     fn get_filter_type(&self, filter: &Filter) -> Option<ColumnType> {
-        self.session
-            .metadata()
-            .get_column_table_type(filter.column())
+        self.metadata.get_column_table_type(filter.column())
     }
 
     // Get the string value, suitable for the `value` field of a `FilterColumns`'s
@@ -442,7 +443,7 @@ impl FilterColumnProps {
     /// # Arguments
     /// - `op` The new `FilterOp`.
     fn update_filter_op(&self, idx: usize, op: String) {
-        let mut filter = self.session.get_view_config().filter.clone();
+        let mut filter = self.view_config.filter.clone();
         let filter_column = &mut filter.get_mut(idx).expect("Filter on no column");
         *filter_column.op_mut() = op;
         let update = ViewConfigUpdate {
@@ -450,9 +451,14 @@ impl FilterColumnProps {
             ..ViewConfigUpdate::default()
         };
 
-        self.update_and_render(update)
-            .map(ApiFuture::spawn)
-            .unwrap_or_log();
+        if self.session.update_view_config(update).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
+            });
+        }
     }
 
     /// Update the filter value from the string input read from the DOM.
@@ -460,7 +466,7 @@ impl FilterColumnProps {
     /// # Arguments
     /// - `val` The new filter value.
     fn update_filter_input(&self, val: String) {
-        let mut filters = self.session.get_view_config().filter.clone();
+        let mut filters = self.view_config.filter.clone();
         let filter_column = &mut filters.get_mut(self.idx).expect("Filter on no column");
 
         // TODO This belongs in the Features API.
@@ -523,9 +529,14 @@ impl FilterColumnProps {
                 ..ViewConfigUpdate::default()
             };
 
-            self.update_and_render(update)
-                .map(ApiFuture::spawn)
-                .unwrap_or_log();
+            if self.session.update_view_config(update).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/inactive_column.rs

@@ -12,7 +12,6 @@
 
 use itertools::Itertools;
 use perspective_client::config::*;
-use perspective_client::utils::PerspectiveResultExt;
 use perspective_js::utils::ApiFuture;
 use web_sys::*;
 use yew::prelude::*;
@@ -21,14 +20,12 @@ use super::expr_edit_button::*;
 use crate::components::type_icon::TypeIcon;
 use crate::dragdrop::*;
 use crate::js::plugin::*;
-use crate::model::*;
 use crate::presentation::ColumnLocator;
 use crate::renderer::*;
 use crate::session::*;
 use crate::utils::*;
-use crate::*;
 
-#[derive(Clone, Properties, PerspectiveProperties!)]
+#[derive(Clone, Properties)]
 pub struct InactiveColumnProps {
     /// This column's index in its list.
     pub idx: usize,
@@ -42,6 +39,18 @@ pub struct InactiveColumnProps {
     /// Is the expression/config panel open for this column?
     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,
+
+    /// Session metadata snapshot — threaded from `SessionProps`.
+    pub metadata: SessionMetadataRc,
+
+    /// View config snapshot — threaded from parent so we avoid
+    /// `session.get_view_config()` calls.
+    pub view_config: PtrEqRc<ViewConfig>,
+
     /// `dragend` event`.
     pub ondragend: Callback<()>,
 
@@ -58,11 +67,14 @@ pub struct InactiveColumnProps {
 }
 
 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
+    fn eq(&self, rhs: &Self) -> bool {
+        self.idx == rhs.idx
+            && self.visible == rhs.visible
+            && self.name == rhs.name
+            && self.is_editing == rhs.is_editing
+            && self.is_expression == rhs.is_expression
+            && self.metadata == rhs.metadata
+            && self.view_config == rhs.view_config
     }
 }
 
@@ -112,8 +124,7 @@ impl Component for InactiveColumn {
     fn view(&self, ctx: &Context<Self>) -> Html {
         let col_type = ctx
             .props()
-            .session
-            .metadata()
+            .metadata
             .get_column_table_type(&ctx.props().name)
             .unwrap_or(ColumnType::String);
 
@@ -128,7 +139,7 @@ impl Component for InactiveColumn {
             move |event: DragEvent| {
                 dragdrop.set_drag_image(&event).unwrap();
                 dragdrop.notify_drag_start(event_name.to_string(), DragEffect::Copy);
-                MouseLeave(false)
+                MouseLeave(true)
             }
         });
 
@@ -137,11 +148,7 @@ impl Component for InactiveColumn {
             .link()
             .callback(|event: MouseEvent| MouseEnter(event.which() == 0));
 
-        let is_expression = ctx
-            .props()
-            .session
-            .metadata()
-            .is_column_expression(&ctx.props().name);
+        let is_expression = ctx.props().is_expression;
 
         let is_active_class = ctx.props().renderer.metadata().mode.css();
         let mut class = classes!("column-selector-column");
@@ -164,17 +171,17 @@ impl Component for InactiveColumn {
                     {ondragend}
                 >
                     <div class="column-selector-column-border">
+                        <span class="drag-handle icon" />
                         <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}
-                            />
-                        }
+                        <ExprEditButton
+                            name={ctx.props().name.clone()}
+                            on_open_expr_panel={&ctx.props().on_open_expr_panel}
+                            {is_expression}
+                            is_disabled={!is_expression}
+                            is_editing={ctx.props().is_editing}
+                        />
                     </div>
                 </div>
             </div>
@@ -191,7 +198,7 @@ impl InactiveColumnProps {
     ///   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 mut columns = self.view_config.columns.clone();
         let max_cols = self
             .renderer
             .metadata()
@@ -229,8 +236,13 @@ impl InactiveColumnProps {
             ..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/invalid_column.rs

@@ -15,23 +15,12 @@ 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>
-        }
+#[function_component(InvalidColumn)]
+pub fn invalid_column() -> 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

@@ -19,24 +19,33 @@ use crate::components::type_icon::TypeIcon;
 use crate::dragdrop::*;
 use crate::session::*;
 use crate::utils::*;
-use crate::*;
 
-#[derive(Properties, PerspectiveProperties!)]
+#[derive(Properties)]
 pub struct PivotColumnProps {
     /// Column name.
     pub column: String,
 
+    #[prop_or_default]
+    pub column_type: Option<ColumnType>,
+
     /// The drag starte of this column, if applicable.
     pub action: DragTarget,
 
+    /// Session metadata snapshot — threaded from `SessionProps`.
+    #[prop_or_default]
+    pub metadata: Option<SessionMetadataRc>,
+
     // State
-    pub session: Session,
+    #[prop_or_default]
+    pub opt_session: Option<Session>,
     pub dragdrop: DragDrop,
 }
 
 impl PartialEq for PivotColumnProps {
     fn eq(&self, other: &Self) -> bool {
-        self.column == other.column && self.action == other.action
+        self.column == other.column
+            && self.action == other.action
+            && self.metadata == other.metadata
     }
 }
 
@@ -74,12 +83,13 @@ impl Component for PivotColumn {
             move |_event| dragdrop.notify_drag_end()
         });
 
-        let col_type = ctx
-            .props()
-            .session
-            .metadata()
-            .get_column_table_type(&ctx.props().column)
-            .unwrap_or(ColumnType::Integer);
+        let col_type = ctx.props().column_type.unwrap_or_else(|| {
+            ctx.props()
+                .metadata
+                .as_ref()
+                .and_then(|x| x.get_column_table_type(&ctx.props().column))
+                .unwrap_or(ColumnType::Integer)
+        });
 
         html! {
             <div
@@ -89,6 +99,7 @@ impl Component for PivotColumn {
                 ondragend={dragend}
             >
                 <div class="pivot-column-border">
+                    <span class="drag-handle icon" />
                     <TypeIcon ty={col_type} />
                     <span class="column_name">{ ctx.props().column.clone() }</span>
                 </div>

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

@@ -11,7 +11,6 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 use perspective_client::config::*;
-use perspective_client::utils::PerspectiveResultExt;
 use perspective_js::utils::ApiFuture;
 use web_sys::*;
 use yew::prelude::*;
@@ -19,17 +18,21 @@ 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::utils::*;
-use crate::*;
 
-#[derive(Properties, PerspectiveProperties!)]
+#[derive(Properties)]
 pub struct SortColumnProps {
     pub sort: Sort,
     pub idx: usize,
 
+    /// Session metadata snapshot — threaded from `SessionProps`.
+    pub metadata: SessionMetadataRc,
+
+    /// Current view config — threaded as a value prop.
+    pub view_config: PtrEqRc<ViewConfig>,
+
     // State
     pub session: Session,
     pub renderer: Renderer,
@@ -38,7 +41,10 @@ pub struct SortColumnProps {
 
 impl PartialEq for SortColumnProps {
     fn eq(&self, other: &Self) -> bool {
-        self.sort == other.sort && self.idx == other.idx
+        self.sort == other.sort
+            && self.idx == other.idx
+            && self.metadata == other.metadata
+            && self.view_config == other.view_config
     }
 }
 
@@ -69,8 +75,8 @@ impl Component for SortColumn {
     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 is_split = ctx.props().view_config.split_by.is_empty();
+                let mut sort = ctx.props().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 {
@@ -78,10 +84,14 @@ impl Component for SortColumn {
                     ..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
+                    });
+                }
 
                 false
             },
@@ -110,8 +120,7 @@ impl Component for SortColumn {
 
         let col_type = ctx
             .props()
-            .session
-            .metadata()
+            .metadata
             .get_column_table_type(&ctx.props().sort.0.to_owned())
             .unwrap_or(ColumnType::Integer);
 
@@ -123,6 +132,7 @@ impl Component for SortColumn {
                 ondragend={dragend}
             >
                 <div class="pivot-column-border">
+                    <span class="drag-handle icon" />
                     <TypeIcon ty={col_type} />
                     // <TypeIcon ty={ColumnType::String} />
                     <span class="column_name">{ ctx.props().sort.0.to_owned() }</span>