Expression Names in Column Settings Header + Refactors

packages/perspective/index.d.ts

@@ -143,7 +143,7 @@ declare module "@finos/perspective" {
     };
 
     export type ColumnName = string | null;
-    export type Expression = { name: string; expr: string };
+    export type Expressions = Record<string, string>;
     export type Filter = [
         ColumnName,
         FilterOp,
@@ -164,7 +164,7 @@ declare module "@finos/perspective" {
         aggregates?: { [column_name: string]: Aggregate };
         sort?: Array<Sort>;
         filter?: Array<Filter>;
-        expressions?: Array<Expression>;
+        expressions?: Expressions;
     };
 
     export type Table = {
@@ -174,7 +174,7 @@ declare module "@finos/perspective" {
         delete(): Promise<void>;
         on_delete(callback: () => void): void;
         validate_expressions(
-            expressions: Array<Expression>
+            expressions: Expressions
         ): Promise<ValidatedExpressions>;
         schema(): Promise<Schema>;
         size(): Promise<number>;

rust/perspective-viewer/src/less/aggregate-selector.less

@@ -16,7 +16,7 @@
     .aggregate-selector-wrapper {
         height: 19px;
         display: flex;
-        padding-left: 23px;
+        padding-left: 5px;
         width: 85px;
         min-width: 85px;
         max-width: 85px;

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

@@ -33,8 +33,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
         flex: 0 1 auto;
-        padding-left: 23px;
-        padding-right: 5px;
+        padding-left: 5px;
         display: inline-block;
         align-items: center;
 
@@ -73,52 +72,6 @@
     }
 }
 
-// Column type icons
-:host {
-    .column_name:before {
-        height: 13px;
-        width: 13px;
-        position: absolute;
-        left: 15px;
-        top: 4.5px;
-        @include icon;
-    }
-
-    .none:before {
-        content: none;
-    }
-
-    .integer:before {
-        -webkit-mask-image: var(--column-type-integer--mask-image);
-        mask-image: var(--column-type-integer--mask-image);
-    }
-
-    .float:before {
-        -webkit-mask-image: var(--column-type-float--mask-image);
-        mask-image: var(--column-type-float--mask-image);
-    }
-
-    .string:before {
-        -webkit-mask-image: var(--column-type-string--mask-image);
-        mask-image: var(--column-type-string--mask-image);
-    }
-
-    .boolean:before {
-        -webkit-mask-image: var(--column-type-boolean--mask-image);
-        mask-image: var(--column-type-boolean--mask-image);
-    }
-
-    .date:before {
-        -webkit-mask-image: var(--column-type-date--mask-image);
-        mask-image: var(--column-type-date--mask-image);
-    }
-
-    .datetime:before {
-        -webkit-mask-image: var(--column-type-datetime--mask-image);
-        mask-image: var(--column-type-datetime--mask-image);
-    }
-}
-
 :host {
     #add-expression {
         border: var(--column-add--border, 1px solid transparent);

rust/perspective-viewer/src/less/column-settings-panel.less

@@ -18,14 +18,6 @@
         text-overflow: ellipsis;
     }
 
-    #column_settings_icon:before {
-        @include icon;
-        height: 14px;
-        width: 14px;
-        -webkit-mask-image: var(--column-settings-icon--mask-image);
-        mask-image: var(--column-settings-icon--mask-image);
-    }
-
     // NOTE: These should probably make their way to global form styling eventually.
     .errored {
         outline-color: var(--error--color);
@@ -55,4 +47,46 @@
             border-radius: 2px;
         }
     }
+
+    .sidebar_header_contents {
+        display: flex;
+        margin: 8px;
+        align-items: center;
+        border-radius: 3px;
+        outline-width: 1px;
+        outline-color: var(--inactive--color);
+
+        &.editable {
+            &:hover {
+                outline-style: solid;
+                cursor: text;
+            }
+        }
+        &::focus {
+            outline-style: solid;
+            background: var(--plugin--background);
+        }
+        &.edited {
+            outline-style: dashed;
+        }
+        &.invalid {
+            outline-color: var(--error--color);
+        }
+
+        .sidebar_header_title {
+            line-height: normal;
+            margin: 0;
+            flex: 1;
+            padding-left: 5px;
+            background: none;
+            outline: none;
+            color: unset;
+
+            &:disabled {
+                background: none;
+                outline: none;
+                color: unset;
+            }
+        }
+    }
 }

rust/perspective-viewer/src/less/expression-editor.less

@@ -21,14 +21,11 @@
         overflow: hidden;
 
         .error {
-            flex: 1 1 auto;
-            width: 0px;
-            display: flex;
-            align-items: center;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
             font-size: 12px;
+            min-height: 1.5em;
             color: var(--error--color);
         }
 
@@ -95,17 +92,35 @@
 
     #psp-expression-editor-actions {
         display: flex;
+        gap: 0.5em;
         justify-content: flex-end;
         align-items: center;
-        height: 36px;
-        padding: 0 12px;
+    }
+
+    #psp-expression-editor-meta {
+        display: flex;
+        flex-direction: column;
+        padding: 0.5em;
+        gap: 0.25em;
+    }
+
+    #save-settings,
+    #danger-zone {
+        display: flex;
+        gap: 0.5em;
+    }
+    #save-settings-wrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5em;
     }
 
     .psp-expression-editor__button {
+        flex: 1;
+        justify-content: center;
         font-family: inherit;
         font-size: 12px;
         border: 1px solid var(--icon--color);
-        margin-left: 6px;
         height: 18px;
         padding: 2px 12px;
         display: flex;

rust/perspective-viewer/src/less/type-icon.less

@@ -0,0 +1,67 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+:host .type-icon {
+    height: 13px;
+    width: 13px;
+    // position: absolute;
+    // left: 15px;
+    // top: 4.5px;
+    // @include icon;
+    background-repeat: no-repeat;
+    background-color: var(--icon--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    margin-left: 5px;
+    flex-shrink: 0;
+
+    &.none {
+        content: none;
+    }
+
+    &.integer {
+        -webkit-mask-image: var(--column-type-integer--mask-image);
+        mask-image: var(--column-type-integer--mask-image);
+    }
+
+    &.float {
+        -webkit-mask-image: var(--column-type-float--mask-image);
+        mask-image: var(--column-type-float--mask-image);
+    }
+
+    &.string {
+        -webkit-mask-image: var(--column-type-string--mask-image);
+        mask-image: var(--column-type-string--mask-image);
+    }
+
+    &.boolean {
+        -webkit-mask-image: var(--column-type-boolean--mask-image);
+        mask-image: var(--column-type-boolean--mask-image);
+    }
+
+    &.date {
+        -webkit-mask-image: var(--column-type-date--mask-image);
+        mask-image: var(--column-type-date--mask-image);
+    }
+
+    &.datetime {
+        -webkit-mask-image: var(--column-type-datetime--mask-image);
+        mask-image: var(--column-type-datetime--mask-image);
+    }
+
+    &.expression {
+        -webkit-mask-image: var(--add-expression-icon--mask-image);
+        mask-image: var(--add-expression-icon--mask-image);
+    }
+}

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

@@ -42,6 +42,7 @@ use crate::components::containers::scroll_panel_item::ScrollPanelItem;
 use crate::custom_elements::ColumnDropDownElement;
 use crate::dragdrop::*;
 use crate::model::*;
+use crate::presentation::Presentation;
 use crate::renderer::*;
 use crate::session::*;
 use crate::utils::*;
@@ -52,6 +53,7 @@ pub struct ColumnSelectorProps {
     pub session: Session,
     pub renderer: Renderer,
     pub dragdrop: DragDrop,
+    pub presentation: Presentation,
 
     pub on_open_expr_panel: Callback<ColumnLocator>,
 
@@ -280,6 +282,7 @@ impl Component for ColumnSelector {
                             dragdrop={ &ctx.props().dragdrop }
                             session={ &ctx.props().session }
                             renderer={ &ctx.props().renderer }
+                            presentation = { &ctx.props().presentation }
                             ondragenter={ ondragenter }
                             ondragend={ &ondragend }
                             onselect={ &onselect }/>
@@ -305,6 +308,7 @@ impl Component for ColumnSelector {
                             dragdrop={ &ctx.props().dragdrop }
                             session={ &ctx.props().session }
                             renderer={ &ctx.props().renderer }
+                            presentation={ &ctx.props().presentation }
                             { is_editing }
                             onselect={ &onselect }
                             ondragend={ &ondragend }

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

@@ -19,12 +19,14 @@ use super::aggregate_selector::*;
 use super::expression_toolbar::*;
 use super::InPlaceColumn;
 use crate::components::column_selector::{EmptyColumn, InvalidColumn};
+use crate::components::type_icon::TypeIcon;
 use crate::components::viewer::ColumnLocator;
 use crate::config::*;
 use crate::custom_elements::ColumnDropDownElement;
 use crate::dragdrop::*;
 use crate::js::plugin::*;
 use crate::model::*;
+use crate::presentation::Presentation;
 use crate::renderer::*;
 use crate::session::*;
 use crate::utils::ApiFuture;
@@ -43,6 +45,7 @@ pub struct ActiveColumnProps {
     pub dragdrop: DragDrop,
     pub session: Session,
     pub renderer: Renderer,
+    pub presentation: Presentation,
     pub column_dropdown: ColumnDropDownElement,
     pub ondragenter: Callback<()>,
     pub ondragend: Callback<()>,
@@ -401,6 +404,8 @@ impl Component for ActiveColumn {
 
                             <div class="column-selector-column-border">
 
+                                <TypeIcon ty={col_type} />
+
                                 if ctx.props().is_aggregated {
                                     <AggregateSelector
                                         column={ name.clone() }
@@ -410,7 +415,7 @@ impl Component for ActiveColumn {
                                     </AggregateSelector>
                                 }
 
-                                <span class={ format!("column_name {}", col_type) }>
+                                <span class={"column_name"}>
                                     { name.clone() }
                                 </span>
 

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

@@ -20,6 +20,7 @@ use yew::prelude::*;
 use crate::components::containers::dragdrop_list::*;
 use crate::components::containers::select::*;
 use crate::components::style::LocalStyle;
+use crate::components::type_icon::TypeIcon;
 use crate::config::*;
 use crate::custom_elements::*;
 use crate::dragdrop::*;
@@ -479,7 +480,8 @@ impl Component for FilterColumn {
 
                 <LocalStyle href={ css!("filter-item") } />
                 <div class="pivot-column-border">
-                    <span class="column_name string">
+                    <TypeIcon ty={Type::String} />
+                    <span class="column_name">
                         { filter.0.to_owned() }
                     </span>
                     <FilterOpSelector