@perspective-dev/viewer 4.2.0 → 4.3.0

package/src/less/config-selector.less

@@ -30,6 +30,44 @@
         }
     }
 
+    #top_panel.group-rollup-mode-total {
+        #group_by {
+            width: 100%;
+            // height: 26px;
+            .pivot-column {
+                .pivot-column-total {
+                    min-height: 24px;
+                    margin-bottom: 4px;
+                    &:before {
+                        background-color: var(--plugin--background);
+                    }
+                }
+
+                .column_name {
+                    color: var(--inactive--color);
+                }
+
+                .type-icon {
+                    background-color: var(--inactive--color);
+                }
+
+                &:hover .pivot-column-border {
+                    border-color: var(--inactive--color, #ababab);
+                }
+
+                // input {
+                //     background-color: var(--plugin--background);
+                //     pointer-events: none;
+                //     border: 1px solid var(--inactive--color);
+                //     color: var(--inactive--color) !important;
+                //     // &:placeholder {
+
+                //     // }
+                // }
+            }
+        }
+    }
+
     #top_panel {
         display: flex;
         flex-direction: column;
@@ -270,6 +308,30 @@
             display: inline-block;
         }
 
+        .pivot_controls {
+            display: flex;
+            justify-content: flex-end;
+            height: 15px;
+            margin-bottom: -24px;
+            margin-right: 28px;
+            margin-top: 9px;
+            select:hover {
+                color: var(--icon--color, inherit);
+            }
+        }
+
+        .group_rollup_wrapper {
+            width: 48px;
+            margin-bottom: -30px;
+            flex: 0 1 auto;
+            color: var(--inactive--color);
+            padding-top: 15px;
+            font-size: 9px;
+            select {
+                font-size: 9px !important;
+            }
+        }
+
         #transpose_button {
             cursor: pointer;
             flex-grow: 0;
@@ -278,12 +340,12 @@
             user-select: none;
             padding: 0;
             align-self: center;
-            margin-bottom: -23px;
-            margin-top: 11.5px;
-            align-self: flex-end;
+            // margin-bottom: -23px;
+            // margin-top: 11.5px;
+            // align-self: flex-end;
             z-index: 1;
             min-height: 0px;
-            margin-right: 30px;
+            // margin-right: 30px;
 
             &:hover:before {
                 color: var(--icon--color, inherit);

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

@@ -23,6 +23,7 @@ use super::filter_column::*;
 use super::pivot_column::*;
 use super::sort_column::*;
 use crate::components::containers::dragdrop_list::*;
+use crate::components::containers::select::{Select, SelectItem};
 use crate::components::style::LocalStyle;
 use crate::custom_elements::{ColumnDropDownElement, FilterDropDownElement};
 use crate::dragdrop::*;
@@ -32,7 +33,7 @@ use crate::session::*;
 use crate::utils::*;
 use crate::{PerspectiveProperties, css};
 
-#[derive(Properties, PerspectiveProperties!)]
+#[derive(Clone, Properties, PerspectiveProperties!)]
 pub struct ConfigSelectorProps {
     pub onselect: Callback<()>,
 
@@ -63,6 +64,7 @@ pub enum ConfigSelectorMsg {
     TransposePivots,
     ViewCreated,
     New(DragTarget, InPlaceColumn),
+    UpdateGroupRollupMode(GroupRollupMode),
 }
 
 #[derive(Clone)]
@@ -135,11 +137,9 @@ impl Component for ConfigSelector {
                 ctx.props().onselect.emit(());
                 false
             },
-            ConfigSelectorMsg::Close(index, DragTarget::GroupBy) => {
-                let mut group_by = ctx.props().session.get_view_config().group_by.clone();
-                group_by.remove(index);
+            ConfigSelectorMsg::UpdateGroupRollupMode(mode) => {
                 let config = ViewConfigUpdate {
-                    group_by: Some(group_by),
+                    group_rollup_mode: Some(mode),
                     ..ViewConfigUpdate::default()
                 };
 
@@ -148,9 +148,45 @@ impl Component for ConfigSelector {
                     .map(ApiFuture::spawn)
                     .unwrap_or_log();
 
-                ctx.props().onselect.emit(());
                 false
             },
+            ConfigSelectorMsg::Close(index, DragTarget::GroupBy) => {
+                if ctx.props().session.get_view_config().group_rollup_mode == GroupRollupMode::Total
+                {
+                    let requirements = ctx.props().renderer.metadata();
+
+                    let rollup_features = ctx
+                        .props()
+                        .session
+                        .metadata()
+                        .get_features()
+                        .map(|x| x.get_group_rollup_modes())
+                        .unwrap();
+
+                    let group_rollups = requirements.get_group_rollups(&rollup_features);
+
+                    ctx.link()
+                        .send_message(ConfigSelectorMsg::UpdateGroupRollupMode(
+                            group_rollups.first().cloned().unwrap(),
+                        ));
+                    false
+                } else {
+                    let mut group_by = ctx.props().session.get_view_config().group_by.clone();
+                    group_by.remove(index);
+                    let config = ViewConfigUpdate {
+                        group_by: Some(group_by),
+                        ..ViewConfigUpdate::default()
+                    };
+
+                    ctx.props()
+                        .update_and_render(config)
+                        .map(ApiFuture::spawn)
+                        .unwrap_or_log();
+
+                    ctx.props().onselect.emit(());
+                    false
+                }
+            },
             ConfigSelectorMsg::Close(index, DragTarget::SplitBy) => {
                 let mut split_by = ctx.props().session.get_view_config().split_by.clone();
                 split_by.remove(index);
@@ -227,6 +263,7 @@ impl Component for ConfigSelector {
                 ctx.props().onselect.emit(());
                 false
             },
+
             ConfigSelectorMsg::SetFilterValue(index, input) => {
                 let mut filter = ctx.props().session.get_view_config().filter.clone();
 
@@ -437,11 +474,15 @@ impl Component for ConfigSelector {
         let config = session.get_view_config();
         let transpose = ctx.link().callback(|_| ConfigSelectorMsg::TransposePivots);
         let column_dropdown = self.column_dropdown.clone();
-        let class = if dragdrop.get_drag_column().is_some() {
-            "dragdrop-highlight"
-        } else {
-            ""
-        };
+        let mut class = classes!();
+
+        if dragdrop.get_drag_column().is_some() {
+            class.push("dragdrop-highlight");
+        }
+
+        if config.group_rollup_mode == GroupRollupMode::Total {
+            class.push("group-rollup-mode-total");
+        }
 
         let dragend = Callback::from({
             let dragdrop = dragdrop.clone();
@@ -450,21 +491,52 @@ impl Component for ConfigSelector {
 
         let metadata = session.metadata();
         let features = metadata.get_features().unwrap();
+        let requirements = renderer.metadata();
+        let on_group_rollup_mode = ctx
+            .link()
+            .callback(ConfigSelectorMsg::UpdateGroupRollupMode);
+
+        let rollup_features = ctx
+            .props()
+            .session
+            .metadata()
+            .get_features()
+            .map(|x| x.get_group_rollup_modes())
+            .unwrap();
+
+        let group_rollups = requirements.get_group_rollups(&rollup_features);
 
         html! {
             <div slot="top_panel" id="top_panel" {class} ondragend={dragend}>
                 <LocalStyle href={css!("config-selector")} />
-                if !config.group_by.is_empty() && config.split_by.is_empty() {
-                    <span
-                        id="transpose_button"
-                        class="rrow centered"
-                        title="Transpose Pivots"
-                        onmousedown={transpose.clone()}
-                    />
-                }
+                <div class="pivot_controls">
+                    if group_rollups.len() > 1 {
+                        <Select<GroupRollupMode>
+                            id="group_rollup_mode_selector"
+                            wrapper_class="group_rollup_wrapper"
+                            values={Rc::new(
+                                group_rollups
+                                    .iter()
+                                    .map(|x| SelectItem::Option(*x))
+                                    .collect(),
+                            )}
+                            selected={config.group_rollup_mode}
+                            on_select={on_group_rollup_mode}
+                        />
+                    }
+                    if !config.group_by.is_empty() && config.split_by.is_empty() {
+                        <span
+                            id="transpose_button"
+                            class="rrow centered"
+                            title="Transpose Pivots"
+                            onmousedown={transpose.clone()}
+                        />
+                    }
+                </div>
                 if features.group_by {
                     <GroupBySelector
                         name="group_by"
+                        disabled={config.group_rollup_mode == GroupRollupMode::Total}
                         parent={ctx.link().clone()}
                         column_dropdown={column_dropdown.clone()}
                         exclude={config.group_by.iter().cloned().collect::<HashSet<_>>()}
@@ -477,7 +549,7 @@ impl Component for ConfigSelector {
                                         action={DragTarget::GroupBy}
                                         column={group_by.clone()}
                                         {dragdrop}
-                                        {session}
+                                        opt_session={session}
                                     >
                                     </PivotColumn>
                                 }
@@ -486,12 +558,14 @@ impl Component for ConfigSelector {
                 }
                 if features.split_by {
                     if !config.split_by.is_empty() {
-                        <span
-                            id="transpose_button"
-                            class="rrow centered"
-                            title="Transpose Pivots"
-                            onmousedown={transpose}
-                        />
+                        <div class="pivot_controls">
+                            <span
+                                id="transpose_button"
+                                class="rrow centered"
+                                title="Transpose Pivots"
+                                onmousedown={transpose}
+                            />
+                        </div>
                     }
                     <SplitBySelector
                         name="split_by"
@@ -506,9 +580,8 @@ impl Component for ConfigSelector {
                                 <PivotColumn
                                     action={ DragTarget::SplitBy }
                                     column={ split_by.clone() }
-
-                                     {dragdrop}
-                                    {session}>
+                                    {dragdrop}
+                                    opt_session={session}>
                                 </PivotColumn>
                             }
                         }) }

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

@@ -26,11 +26,15 @@ 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,
 
     // State
-    pub session: Session,
+    #[prop_or_default]
+    pub opt_session: Option<Session>,
     pub dragdrop: DragDrop,
 }
 
@@ -74,12 +78,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()
+                .opt_session
+                .as_ref()
+                .and_then(|x| x.metadata().get_column_table_type(&ctx.props().column))
+                .unwrap_or(ColumnType::Integer)
+        });
 
         html! {
             <div

package/src/rust/components/column_selector.rs

@@ -28,6 +28,7 @@ use std::rc::Rc;
 pub use empty_column::*;
 pub use invalid_column::*;
 use perspective_js::utils::ApiFuture;
+pub use pivot_column::*;
 use web_sys::*;
 use yew::prelude::*;
 
@@ -77,6 +78,7 @@ pub enum ColumnSelectorMsg {
     TableLoaded,
     ViewCreated,
     HoverActiveIndex(Option<usize>),
+    SetWidth(f64),
     Drag(DragEffect),
     DragEnd,
     Drop((String, DragTarget, DragEffect, usize)),
@@ -91,6 +93,7 @@ pub struct ColumnSelector {
     named_row_count: usize,
     drag_container: DragDropContainer,
     column_dropdown: ColumnDropDownElement,
+    viewport_width: f64,
     on_reset: Rc<PubSub<()>>,
 }
 
@@ -147,6 +150,7 @@ impl Component for ColumnSelector {
         Self {
             _subscriptions: [table_sub, view_sub, drop_sub, drag_sub, dragend_sub],
             named_row_count,
+            viewport_width: 0f64,
             drag_container,
             column_dropdown,
             on_reset: Default::default(),
@@ -157,6 +161,10 @@ impl Component for ColumnSelector {
         match msg {
             Drag(DragEffect::Move(DragTarget::Active)) => false,
             Drag(_) | DragEnd | TableLoaded => true,
+            SetWidth(w) => {
+                self.viewport_width = w;
+                false
+            },
             ViewCreated => {
                 let named = maybe! {
                     let plugin =
@@ -355,11 +363,7 @@ impl Component for ColumnSelector {
             })
             .collect();
 
-        let size = if !inactive_children.is_empty() {
-            56.0
-        } else {
-            28.0
-        };
+        let size = 28.0;
 
         let add_column = if ctx
             .props()
@@ -389,8 +393,8 @@ impl Component for ColumnSelector {
             inactive_children.insert(0, add_column);
         }
 
-        let selected_columns = html! {
-            <div id="selected-columns">
+        let mut selected_columns = vec![html! {
+            <div id="selected-columns" key="__active_columns__">
                 <ScrollPanel
                     id="active-columns"
                     class={active_classes}
@@ -398,13 +402,27 @@ impl Component for ColumnSelector {
                     dragenter={&self.drag_container.dragenter}
                     dragleave={&self.drag_container.dragleave}
                     viewport_ref={&self.drag_container.noderef}
+                    initial_width={self.viewport_width}
+                    on_auto_width={ctx.link().callback(ColumnSelectorMsg::SetWidth)}
                     drop={ondrop}
                     on_resize={&ctx.props().on_resize}
                     on_dimensions_reset={&self.on_reset}
                     children={std::iter::once(config_selector).chain(active_columns).collect::<Vec<_>>()}
                 />
             </div>
-        };
+        }];
+
+        if !inactive_children.is_empty() {
+            selected_columns.push(html! {
+                <ScrollPanel
+                    id="sub-columns"
+                    key="__sub_columns__"
+                    on_resize={&ctx.props().on_resize}
+                    on_dimensions_reset={&self.on_reset}
+                    children={inactive_children}
+                />
+            })
+        }
 
         html! {
             <>
@@ -415,15 +433,7 @@ impl Component for ColumnSelector {
                     skip_empty=true
                     orientation={Orientation::Vertical}
                 >
-                    { selected_columns }
-                    if !inactive_children.is_empty() {
-                        <ScrollPanel
-                            id="sub-columns"
-                            on_resize={&ctx.props().on_resize}
-                            on_dimensions_reset={&self.on_reset}
-                            children={inactive_children}
-                        />
-                    }
+                    { for selected_columns }
                 </SplitPanel>
             </>
         }

package/src/rust/components/containers/dragdrop_list.rs

@@ -14,11 +14,13 @@ use std::collections::HashSet;
 use std::marker::PhantomData;
 
 use derivative::Derivative;
+use perspective_client::proto::ColumnType;
 use web_sys::*;
 use yew::html::Scope;
 use yew::prelude::*;
 
 use crate::components::column_selector::{EmptyColumn, InPlaceColumn, InvalidColumn};
+use crate::components::type_icon::TypeIcon;
 use crate::custom_elements::ColumnDropDownElement;
 use crate::dragdrop::*;
 use crate::utils::DragTarget;
@@ -32,12 +34,16 @@ where
     <U as Component>::Properties: DragDropListItemProps,
 {
     pub parent: Scope<T>,
+
     pub dragdrop: DragDrop,
     pub name: &'static str,
     pub column_dropdown: ColumnDropDownElement,
     pub exclude: HashSet<String>,
     pub children: ChildrenWithProps<U>,
 
+    #[prop_or_default]
+    pub disabled: bool,
+
     #[prop_or_default]
     pub is_dragover: Option<(
         usize,
@@ -59,6 +65,7 @@ where
             && self.children == other.children
             && self.allow_duplicates == other.allow_duplicates
             && self.is_dragover == other.is_dragover
+            && self.disabled == other.disabled
     }
 }
 
@@ -283,20 +290,34 @@ where
         let column_dropdown = ctx.props().column_dropdown.clone();
         let exclude = ctx.props().exclude.clone();
         let on_select = ctx.props().parent.callback(V::create);
+        let class = classes!("rrow");
+        let is_enabled = true;
+
         html! {
-            <div ref={&self.elem} class="rrow">
+            <div ref={&self.elem} {class}>
                 <div
                     id={ctx.props().name}
-                    ondragover={dragover}
-                    ondragenter={drag_container.dragenter}
-                    ondragleave={drag_container.dragleave}
+                    ondragover={is_enabled.then_some(dragover)}
+                    ondragenter={is_enabled.then_some(drag_container.dragenter)}
+                    ondragleave={is_enabled.then_some(drag_container.dragleave)}
                     ref={drag_container.noderef}
-                    ondrop={drop}
+                    ondrop={is_enabled.then_some(drop)}
                 >
                     <div class="psp-text-field">
                         <ul class="psp-text-field__input" for={ctx.props().name}>
                             { columns_html }
-                            if ctx.props().is_dragover.is_none() | (!invalid_drag && valid_duplicate_drag) {
+                            if ctx.props().disabled && ctx.props().is_dragover.is_none() {
+                                <div class="pivot-column">
+                                    <div class="pivot-column-border pivot-column-total">
+                                        <TypeIcon ty={ColumnType::Integer} />
+                                        <span class="column_name">{ "TOTAL" }</span>
+                                    </div>
+                                    <span
+                                        class="toggle-mode is_column_active"
+                                        onmousedown={ctx.props().parent.callback(move |_| V::close(0))}
+                                    />
+                                </div>
+                            } else if ctx.props().is_dragover.is_none() | (!invalid_drag && valid_duplicate_drag) {
                                 <EmptyColumn {column_dropdown} {exclude} {on_select} />
                             } else if invalid_drag {
                                 <InvalidColumn />

package/src/rust/components/containers/scroll_panel.rs

@@ -34,6 +34,9 @@ pub struct ScrollPanelProps {
     #[prop_or_default]
     pub viewport_ref: Option<NodeRef>,
 
+    #[prop_or_default]
+    pub initial_width: Option<f64>,
+
     #[prop_or_default]
     pub class: Classes,
 
@@ -52,6 +55,9 @@ pub struct ScrollPanelProps {
     #[prop_or_default]
     pub on_resize: Option<Rc<PubSub<()>>>,
 
+    #[prop_or_default]
+    pub on_auto_width: Callback<f64>,
+
     #[prop_or_default]
     pub on_dimensions_reset: Option<Rc<PubSub<()>>>,
 
@@ -125,7 +131,7 @@ impl Component for ScrollPanel {
         Self {
             viewport_ref: Default::default(),
             viewport_height: 0f64,
-            viewport_width: 0f64,
+            viewport_width: ctx.props().initial_width.unwrap_or_default(),
             content_window: None,
             needs_rerender: true,
             total_height,
@@ -150,6 +156,7 @@ impl Component for ScrollPanel {
 
                 self.viewport_height = rect.height() - 8.0;
                 self.viewport_width = self.viewport_width.max(rect.width() - 6.0);
+                ctx.props().on_auto_width.emit(self.viewport_width);
                 re_render
             },
             ScrollPanelMsg::CalculateWindowContent => self.calculate_window_content(ctx),

package/src/rust/components/containers/select.rs

@@ -220,9 +220,9 @@ where
         };
 
         let value = if ctx.props().is_autosize {
-            self.selected.to_string()
+            Some(self.selected.to_string())
         } else {
-            "".to_owned()
+            None
         };
 
         html! {
@@ -230,7 +230,7 @@ where
                 <label>
                     { ctx.props().label.as_ref().map(|x| x.to_string()).unwrap_or_default() }
                 </label>
-                <div class={wrapper_class} data-value={value.clone()}>{ select }</div>
+                <div class={wrapper_class} data-value={value}>{ select }</div>
             } else {
                 <div class={wrapper_class} data-value={value}>{ select }</div>
             }

package/src/rust/components/containers/split_panel.rs

@@ -201,11 +201,11 @@ impl Component for SplitPanel {
         let count = iter.len();
         let contents = html! {
             <>
-                <LocalStyle key=0 href={css!("containers/split-panel")} />
+                <LocalStyle href={css!("containers/split-panel")} />
                 for (i, x) in iter {
                     if i == 0 {
                         if count == 1 {
-                            <key={i}>
+                            <key=0>
                                 {x}
                             </>
                         } else {

package/src/rust/components/plugin_selector.rs

@@ -83,11 +83,21 @@ impl Component for PluginSelector {
                     let metadata =
                         renderer.get_next_plugin_metadata(&PluginUpdate::Update(plugin_name));
 
-                    let mut update = ViewConfigUpdate::default();
-                    session.set_update_column_defaults(
-                        &mut update,
-                        metadata.as_ref().unwrap_or(&*renderer.metadata()),
-                    );
+                    let prev_metadata = renderer.metadata();
+                    let requirements = metadata.as_ref().unwrap_or(&*prev_metadata);
+                    let rollup_features = session
+                        .metadata()
+                        .get_features()
+                        .map(|x| x.get_group_rollup_modes())
+                        .unwrap();
+
+                    let group_rollups = requirements.get_group_rollups(&rollup_features);
+                    let mut update = ViewConfigUpdate {
+                        group_rollup_mode: group_rollups.first().cloned(),
+                        ..ViewConfigUpdate::default()
+                    };
+
+                    session.set_update_column_defaults(&mut update, requirements);
 
                     if let Ok(task) = ctx.props().update_and_render(update) {
                         ApiFuture::spawn(task);

package/src/rust/components/status_indicator.rs

@@ -164,6 +164,9 @@ impl Reducible for StatusIconState {
                 StatusIconStateAction::Increment | StatusIconStateAction::Decrement,
             ) => StatusIconState::Loading,
             (_, StatusIconStateAction::Increment) => Self::Updating(1),
+            (StatusIconState::Errored(x, y, z), _) => {
+                StatusIconState::Errored(x.clone(), y.clone(), z)
+            },
             (_, StatusIconStateAction::Decrement) => StatusIconState::Normal,
         };