Drag/drop UX for invalid positions

packages/perspective-jupyterlab/package.json

@@ -48,7 +48,7 @@
         "@finos/perspective-esbuild-plugin": "^2.7.0",
         "@finos/perspective-test": "^2.7.0",
         "@jupyterlab/builder": "^3.4.0",
-        "@prospective.co/procss": "^0.1.14",
+        "@prospective.co/procss": "^0.1.15",
         "cpy": "^9.0.1"
     },
     "jupyterlab": {

packages/perspective-viewer-d3fc/package.json

@@ -56,6 +56,6 @@
     "devDependencies": {
         "@finos/perspective-esbuild-plugin": "^2.7.0",
         "@finos/perspective-test": "^2.7.0",
-        "@prospective.co/procss": "^0.1.14"
+        "@prospective.co/procss": "^0.1.15"
     }
 }

packages/perspective-workspace/package.json

@@ -41,7 +41,7 @@
         "lodash": "^4.17.4"
     },
     "devDependencies": {
-        "@prospective.co/procss": "^0.1.14",
+        "@prospective.co/procss": "^0.1.15",
         "@finos/perspective-esbuild-plugin": "^2.7.0",
         "@finos/perspective-test": "^2.7.0"
     }

rust/perspective-viewer/Cargo.toml

@@ -49,7 +49,7 @@ strip = true
 
 [build-dependencies]
 serde_json = { version = "1.0.59", features = ["raw_value"] }
-procss = { version = "0.1.14" }
+procss = { version = "0.1.15" }
 glob = "0.3.0"
 anyhow = "1.0.66"
 

rust/perspective-viewer/src/less/empty-column.less

@@ -11,14 +11,41 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 :host {
+    --invalid-column-pattern: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 24'><path d='M100 0 L0 24 ' stroke='black' stroke-width='1'/><path d='M0 0 L100 24 ' stroke='black' stroke-width='1'/></svg>");
     .column-empty {
         width: 100%;
     }
 
+    #top_panel .column-invalid.pivot-column,
+    .column-invalid.pivot-column {
+        .column-invalid-input {
+            mask-image: var(--invalid-column-pattern);
+            -webkit-mask-image: var(--invalid-column-pattern);
+            background-color: var(--icon--color);
+            mask-size: cover;
+            -webkit-mask-size: cover;
+            width: 100%;
+            height: 22px;
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 100% 100%, auto;
+        }
+
+        position: relative;
+        box-sizing: border-box;
+        width: calc(100% - 7px);
+        background-color: #8b868045;
+        border: 1px solid var(--icon--color);
+        border-radius: 2px;
+        margin-right: 6px;
+        margin-bottom: 4px;
+        min-height: 22px;
+        width: calc(100% - 7px);
+        outline: none;
+    }
+
     .column-empty-input {
         position: relative;
-        width: calc(100% - 27px);
-        min-height: 28px;
         display: flex;
         align-items: stretch;
         cursor: auto;

rust/perspective-viewer/src/rust/components/column_selector.rs

@@ -18,13 +18,15 @@ mod empty_column;
 mod expression_toolbar;
 mod filter_column;
 mod inactive_column;
+mod invalid_column;
 mod pivot_column;
 mod sort_column;
 
 use std::iter::*;
 use std::rc::Rc;
 
 pub use empty_column::*;
+pub use invalid_column::*;
 use web_sys::*;
 use yew::prelude::*;
 
@@ -161,43 +163,28 @@ impl Component for ColumnSelector {
                 self.named_row_count = named.unwrap_or_default();
                 true
             },
-            HoverActiveIndex(Some(to_index)) => {
-                let min_cols = ctx.props().renderer.metadata().min;
-                let config = ctx.props().session.get_view_config();
-                let is_to_empty = !config
-                    .columns
-                    .get(to_index)
-                    .map(|x| x.is_some())
-                    .unwrap_or_default();
-
-                let from_index = ctx
-                    .props()
-                    .dragdrop
-                    .get_drag_column()
-                    .and_then(|x| config.columns.iter().position(|z| z.as_ref() == Some(&x)));
-
-                if min_cols
-                    .and_then(|x| from_index.map(|from_index| from_index < x))
-                    .unwrap_or_default()
-                    && is_to_empty
-                    || from_index
-                        .map(|from_index| {
-                            from_index == config.columns.len() - 1 && to_index > from_index
-                        })
-                        .unwrap_or_default()
-                {
-                    ctx.props().dragdrop.notify_drag_leave(DragTarget::Active);
-                    true
-                } else {
-                    ctx.props()
-                        .dragdrop
-                        .notify_drag_enter(DragTarget::Active, to_index)
-                }
-            },
+            HoverActiveIndex(Some(to_index)) => ctx
+                .props()
+                .dragdrop
+                .notify_drag_enter(DragTarget::Active, to_index),
             HoverActiveIndex(_) => {
                 ctx.props().dragdrop.notify_drag_leave(DragTarget::Active);
                 true
             },
+            Drop((column, DragTarget::Active, DragEffect::Move(DragTarget::Active), index)) => {
+                if !ctx.props().is_invalid_columns_column(&column, index) {
+                    let update = ctx.props().session.create_drag_drop_update(
+                        column,
+                        index,
+                        DragTarget::Active,
+                        DragEffect::Move(DragTarget::Active),
+                        &ctx.props().renderer.metadata(),
+                    );
+
+                    ApiFuture::spawn(ctx.props().update_and_render(update));
+                }
+                true
+            },
             Drop((column, DragTarget::Active, effect, index)) => {
                 let update = ctx.props().session.create_drag_drop_update(
                     column,
@@ -273,26 +260,29 @@ impl Component for ColumnSelector {
                     .get_name()
                     .map(|x| x.to_owned())
                     .unwrap_or_else(|| format!("__auto_{}__", idx));
+
                 let column_dropdown = self.column_dropdown.clone();
                 let is_editing = matches!(
                     &ctx.props().selected_column,
                     Some(ColumnLocator::Plain(x)) | Some(ColumnLocator::Expr(Some(x))) if x == &key
                 );
+
+                let on_open_expr_panel = &ctx.props().on_open_expr_panel;
                 html_nested! {
                     <ScrollPanelItem key={ key } { size_hint }>
                         <ActiveColumn
+                            { column_dropdown }
                             { idx }
-                            { name }
                             { is_aggregated }
                             { is_editing }
-                            { column_dropdown }
+                            { name }
+                            { on_open_expr_panel }
                             dragdrop={ &ctx.props().dragdrop }
                             session={ &ctx.props().session }
                             renderer={ &ctx.props().renderer }
                             ondragenter={ ondragenter }
                             ondragend={ &ondragend }
-                            onselect={ &onselect }
-                            on_open_expr_panel={ &ctx.props().on_open_expr_panel } />
+                            onselect={ &onselect }/>
                     </ScrollPanelItem>
                 }
             })

rust/perspective-viewer/src/rust/components/column_selector/active_column.rs

@@ -18,7 +18,7 @@ use yew::prelude::*;
 use super::aggregate_selector::*;
 use super::expression_toolbar::*;
 use super::InPlaceColumn;
-use crate::components::column_selector::EmptyColumn;
+use crate::components::column_selector::{EmptyColumn, InvalidColumn};
 use crate::components::viewer::ColumnLocator;
 use crate::config::*;
 use crate::custom_elements::ColumnDropDownElement;
@@ -30,6 +30,12 @@ use crate::session::*;
 use crate::utils::ApiFuture;
 use crate::*;
 
+enum ColumnState {
+    Empty,
+    Invalid,
+    Named(String),
+}
+
 #[derive(Properties, Clone)]
 pub struct ActiveColumnProps {
     pub idx: usize,
@@ -56,10 +62,11 @@ impl PartialEq for ActiveColumnProps {
 
 impl ActiveColumnProps {
     fn get_name(&self) -> Option<String> {
-        match &self.name {
-            ActiveColumnState::DragOver(_) => Some(self.dragdrop.get_drag_column().unwrap()),
-            ActiveColumnState::Column(_, name) => Some(name.to_owned()),
-            ActiveColumnState::Required(_) => None,
+        match &self.name.state {
+            ActiveColumnStateData::DragOver => Some(self.dragdrop.get_drag_column().unwrap()),
+            ActiveColumnStateData::Column(name) => Some(name.to_owned()),
+            ActiveColumnStateData::Required => None,
+            ActiveColumnStateData::Invalid => None,
         }
     }
 
@@ -237,18 +244,31 @@ impl Component for ActiveColumn {
         }
 
         let name = match &ctx.props().name {
-            ActiveColumnState::DragOver(label) => {
+            ActiveColumnState {
+                label,
+                state: ActiveColumnStateData::DragOver,
+            } => {
                 classes.push("dragover");
                 outer_classes.push("dragover-container");
                 classes.push("empty-named");
 
                 (
                     label.clone(),
-                    Some(ctx.props().dragdrop.get_drag_column().unwrap()),
+                    ColumnState::Named(ctx.props().dragdrop.get_drag_column().unwrap()),
                 )
             },
-            ActiveColumnState::Column(label, name) => (label.clone(), Some(name.to_owned())),
-            ActiveColumnState::Required(label) => (label.clone(), None),
+            ActiveColumnState {
+                label,
+                state: ActiveColumnStateData::Column(name),
+            } => (label.clone(), ColumnState::Named(name.to_owned())),
+            ActiveColumnState {
+                label,
+                state: ActiveColumnStateData::Required,
+            } => (label.clone(), ColumnState::Empty),
+            ActiveColumnState {
+                label,
+                state: ActiveColumnStateData::Invalid,
+            } => (label.clone(), ColumnState::Invalid),
         };
 
         let ondragenter = ctx.props().ondragenter.reform(move |event: DragEvent| {
@@ -263,7 +283,7 @@ impl Component for ActiveColumn {
 
         let col_type = self.column_type;
         match (name, col_type) {
-            ((label, None), _) => {
+            ((label, ColumnState::Empty), _) => {
                 classes.push("empty-named");
                 let column_dropdown = ctx.props().column_dropdown.clone();
                 let on_select = ctx.link().callback(ActiveColumnMsg::New);
@@ -284,11 +304,24 @@ impl Component for ActiveColumn {
                         data-index={ ctx.props().idx.to_string() }
                         ondragenter={ ondragenter.clone() }>
 
-                        <EmptyColumn { column_dropdown }  { exclude } { on_select } />
+                        <EmptyColumn { column_dropdown } { exclude } { on_select }/>
+                    </div>
+                }
+            },
+            ((label, ColumnState::Invalid), _) => {
+                classes.push("empty-named");
+                html! {
+                    <div
+                        class={ outer_classes }
+                        data-label={ label }
+                        data-index={ ctx.props().idx.to_string() }
+                        ondragenter={ ondragenter.clone() }>
+
+                        <InvalidColumn />
                     </div>
                 }
             },
-            ((label, Some(name)), Some(col_type)) => {
+            ((label, ColumnState::Named(name)), Some(col_type)) => {
                 let remove_column = if self.is_required {
                     None
                 } else {

rust/perspective-viewer/src/rust/components/column_selector/empty_column.rs

@@ -28,7 +28,6 @@ pub struct EmptyColumn {
 #[derive(Clone, Debug)]
 pub enum InPlaceColumn {
     Column(String),
-    // ExpressionAlias(String),
     Expression(Expression<'static>),
 }
 

rust/perspective-viewer/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>
+            </div>
+        }
+    }
+}

rust/perspective-viewer/src/rust/components/containers/dragdrop_list.rs

@@ -18,7 +18,7 @@ use web_sys::*;
 use yew::html::Scope;
 use yew::prelude::*;
 
-use crate::components::column_selector::{EmptyColumn, InPlaceColumn};
+use crate::components::column_selector::{EmptyColumn, InPlaceColumn, InvalidColumn};
 use crate::custom_elements::ColumnDropDownElement;
 use crate::dragdrop::*;
 
@@ -199,6 +199,8 @@ where
         });
 
         let invalid_drag: bool;
+        let mut valid_duplicate_drag = false;
+
         let columns_html = {
             let mut columns = ctx
                 .props()
@@ -222,6 +224,7 @@ where
                     .iter()
                     .position(|x| x.1 .1.as_ref().unwrap().props.get_item() == *column);
 
+                valid_duplicate_drag = is_duplicate.is_some() && !ctx.props().allow_duplicates;
                 if let Some(duplicate) = is_duplicate {
                     if !is_append && (!ctx.props().allow_duplicates || is_self_move) {
                         columns.remove(duplicate);
@@ -304,11 +307,13 @@ where
                     <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 {
+                            if ctx.props().is_dragover.is_none() | (!invalid_drag && valid_duplicate_drag) {
                                 <EmptyColumn
                                     { column_dropdown }
                                     { exclude }
                                     { on_select } />
+                            } else if invalid_drag {
+                                <InvalidColumn />
                             }
                         </ul>
                         <label class="pivot-selector-label" for={ ctx.props().name }></label>