Merge pull request #1318 from finos/column-selector-refactor

Fix for layout jitter in the Column Selector

.gitattributes

@@ -2,4 +2,5 @@
 docs/* linguist-documentation
 python/perspective/notebooks/* linguist-documentation
 python/perspective/docs/* linguist-documentation
+results/*.json linguist-documentation
 *.js text eol=lf

packages/perspective-jupyterlab/test/results/linux.docker.json

@@ -1,6 +1,6 @@
 {
-    "resize_Basic_widget_functions": "9bedb88dbdd3a4ca64a0a80315d58708",
-    "resize_Resize_the_container_causes_the_widget_to_resize": "9bedb88dbdd3a4ca64a0a80315d58708",
-    "resize_row_pivots_traitlet_works": "071abf470f52a6d8f2a37e4fd8c9044f",
-    "__GIT_COMMIT__": "0bbadd6fceef32de925ad4e12f1bbac852e9e264"
+    "resize_Basic_widget_functions": "c6e48990276aac3539482d01e0a491f9",
+    "resize_Resize_the_container_causes_the_widget_to_resize": "c6e48990276aac3539482d01e0a491f9",
+    "resize_row_pivots_traitlet_works": "e0d5a93b55cf3008f8c4b103ef6675cd",
+    "__GIT_COMMIT__": "053769dd92a8efc508da0645cda1cab8cc8bb34e"
 }

packages/perspective-viewer-datagrid/test/results/linux.docker.json

@@ -1,20 +1,20 @@
 {
     "superstore_shows_a_grid_without_any_settings_applied_": "7e269a544b300a204b82806f32bef31b",
-    "superstore_pivots_by_a_row_": "45732744b55570c0d6ae259995314993",
-    "superstore_pivots_by_two_rows_": "9299f948162b52456632c15e5557f0ad",
-    "superstore_pivots_by_a_column_": "8f064a78e0b77f505632df053317a806",
-    "superstore_pivots_by_a_row_and_a_column_": "c3cd66b434ae463f556fd3ab429d4f2a",
-    "superstore_pivots_by_two_rows_and_two_columns_": "ddbfbcb81e6fda2fbba7405f5ab00443",
-    "superstore_sorts_by_a_hidden_column_": "a4b2f7179bdb07728465f5f2a510c512",
-    "superstore_sorts_by_a_numeric_column_": "880ea680df9bc48415450553735c2a6c",
-    "superstore_filters_by_a_numeric_column_": "45d824114c57a56b990fe637f5514330",
-    "superstore_filters_by_a_datetime_column_": "4ebf21eead875f46e1470714ef79ba3d",
-    "superstore_highlights_invalid_filter_": "452e3d6d1fb9fcb18bfc6a3b6ef021ff",
-    "superstore_sorts_by_an_alpha_column_": "7d4a5cde8d795e020eec5e27763eacbd",
-    "superstore_displays_visible_columns_": "e2f92ee6e81b832b526e4d262577eb4e",
-    "superstore_resets_viewable_area_when_the_logical_size_expands_": "e0dcc4db517a7ff5471f27301aaceb29",
+    "superstore_pivots_by_a_row_": "1631d8ccb1a745cef6b93b83eade683b",
+    "superstore_pivots_by_two_rows_": "ebca34287d1680db62838cc1056fcbfd",
+    "superstore_pivots_by_a_column_": "78f86b4bed33662ee7742af482512e9b",
+    "superstore_pivots_by_a_row_and_a_column_": "40af1e99096ae5efc1a256d5e1edacb9",
+    "superstore_pivots_by_two_rows_and_two_columns_": "be9dc15efde96162ded407860552dd8e",
+    "superstore_sorts_by_a_hidden_column_": "68f2d0a99801f5084625dd1991ed6874",
+    "superstore_sorts_by_a_numeric_column_": "6812127dfd6def6d25f5f54c546d5d59",
+    "superstore_filters_by_a_numeric_column_": "1f96a3e58aade0342eafaa893d6e3f7a",
+    "superstore_filters_by_a_datetime_column_": "29321a445a55f495b96e50631c7e342a",
+    "superstore_highlights_invalid_filter_": "8a76ca4d4aa77c8f4b23e93197ffe675",
+    "superstore_sorts_by_an_alpha_column_": "f29e89849792370b2409836c8217a363",
+    "superstore_displays_visible_columns_": "02ccc166d2b9d338d5423384e9c730b2",
+    "superstore_resets_viewable_area_when_the_logical_size_expands_": "4ad35b6ee46eb6da2bfbcc80aaf88508",
     "superstore_resets_viewable_area_when_the_physical_size_expands_": "7e269a544b300a204b82806f32bef31b",
     "superstore_perspective_dispatches_perspective-click_event_with_correct_details": "7e269a544b300a204b82806f32bef31b",
-    "superstore_perspective_dispatches_perspective-click_event_with_correct_details_when_filter_is_set": "797a084f6e159cc9dc2f62dcd8b50609",
-    "__GIT_COMMIT__": "9d639ae6762c8c55c998a623cbc6ef5b68f98ef7"
+    "superstore_perspective_dispatches_perspective-click_event_with_correct_details_when_filter_is_set": "e7bffd0197c3b26fef31439c1dcc8bb0",
+    "__GIT_COMMIT__": "053769dd92a8efc508da0645cda1cab8cc8bb34e"
 }

packages/perspective-viewer/src/html/viewer.html

@@ -81,11 +81,12 @@
 
         <div id="config_button" class="noselect button" title="Right click for additional options"></div>
 
-        <div id='drop_target'>
+        <div style="display:none" id='drop_target'>
             <div id='drop_target_inner'>
 
             </div>
         </div>
+
     </div>
 
 </template>

packages/perspective-viewer/src/js/viewer/dom_element.js

@@ -159,7 +159,6 @@ export class DomElement extends PerspectiveElement {
 
         row.addEventListener("row-drag", () => {
             this.classList.add("dragging");
-            this._active_columns.style.overflow = "hidden";
             this._original_index = Array.prototype.slice.call(this._active_columns.children).findIndex(x => x.getAttribute("name") === name);
             if (this._original_index !== -1) {
                 this._drop_target_hover = this._active_columns.children[this._original_index];
@@ -169,7 +168,6 @@ export class DomElement extends PerspectiveElement {
             }
         });
         row.addEventListener("row-dragend", () => {
-            this._active_columns.style.overflow = "auto";
             this.classList.remove("dragging");
         });
 
@@ -229,8 +227,8 @@ export class DomElement extends PerspectiveElement {
             this._update_column_view(attr, true);
         } else {
             // Remove collapse so that new inactive columns show up
-            if (added_count > 0 && this._inactive_columns.parentElement.classList.contains("collapse")) {
-                this._inactive_columns.parentElement.classList.remove("collapse");
+            if (added_count > 0 && this._columns_container.classList.contains("collapse")) {
+                this._columns_container.classList.remove("collapse");
             }
         }
     }
@@ -295,9 +293,9 @@ export class DomElement extends PerspectiveElement {
         const lis = this._get_view_inactive_columns();
 
         if (pop_cols.length === lis.length) {
-            this._inactive_columns.parentElement.classList.add("collapse");
+            this._columns_container.classList.add("collapse");
         } else {
-            this._inactive_columns.parentElement.classList.remove("collapse");
+            this._columns_container.classList.remove("collapse");
         }
     }
 
@@ -319,9 +317,9 @@ export class DomElement extends PerspectiveElement {
         const pop_cols = columns.filter(x => typeof x !== "undefined" && x !== null);
         const lis = this._get_view_inactive_columns();
         if (pop_cols.length === lis.length) {
-            this._inactive_columns.parentElement.classList.add("collapse");
+            this._columns_container.classList.add("collapse");
         } else {
-            this._inactive_columns.parentElement.classList.remove("collapse");
+            this._columns_container.classList.remove("collapse");
         }
         lis.forEach(x => {
             const index = pop_cols.indexOf(x.getAttribute("name"));
@@ -519,6 +517,7 @@ export class DomElement extends PerspectiveElement {
         this._plugin_information_action = this.shadowRoot.querySelector(".plugin_information__action");
         this._plugin_information_message = this.shadowRoot.querySelector("#plugin_information_count");
         this._resize_bar = this.shadowRoot.querySelector("#resize_bar");
+        this._columns_container = this.shadowRoot.querySelector("#columns_container");
     }
 
     // sets state, manipulates DOM

packages/perspective-viewer/src/js/viewer/perspective_element.js

@@ -263,9 +263,9 @@ export class PerspectiveElement extends StateElement {
         }
 
         if (cols.length === shown.filter(x => cols.indexOf(x) > -1).length) {
-            this._inactive_columns.parentElement.classList.add("collapse");
+            this._columns_container.classList.add("collapse");
         } else {
-            this._inactive_columns.parentElement.classList.remove("collapse");
+            this._columns_container.classList.remove("collapse");
         }
 
         this._show_column_container();

packages/perspective-viewer/src/less/computed_expression_widget.less

@@ -12,9 +12,7 @@
 :host {
     display: none;
     flex-direction: column;
-    max-height: 35%;
-    margin-top: 34px;
-    margin-bottom: 24px;
+    margin-top: 12px;
     width: 100%;
 
     flex: 0 0 auto !important;
@@ -68,7 +66,7 @@
             display: flex;
             font-size: 12px;
             display: flex;
-            margin-left: 34px;
+            margin-left: 24px;
             margin-top: 3px;
             font-size: 12px;
             color: var(--color, @darkgray);

packages/perspective-viewer/src/less/default.less

@@ -44,6 +44,7 @@
 }
 
 .psp-text-field__input + label {
+    width: 0px;
     height: var(--column--height, auto);
     line-height: 17px;
     box-sizing: border-box;
@@ -134,12 +135,11 @@
         #inactive_columns {
             display: flex;
             flex-direction: column;
-            flex: 0 1 auto;
             width: 100%;
         }
 
-        #inactive_columns {
-            flex: 1 1 auto;
+        #active_columns {
+            flex: 0 1 50%;
         }
 
         #sub_columns {
@@ -196,10 +196,7 @@
             }
 
             perspective-row:last-child {
-                --row_draggable-border-width: var(
-                    --row_draggable-border-last-child-width,
-                    0 0 1px 0
-                );
+                --row_draggable-border-color: var(--row_draggable-last-child-border-color, var(--inactive--color, #ccc));
             }
 
             perspective-row[drop-target] {
@@ -210,9 +207,7 @@
                 --row_draggable_children-opacity: 0;
                 pointer-events: none;
             }
-        }
-
-        #active_columns {
+
             &.one_lock,
             &.two_lock {
                 perspective-row:first-child {
@@ -227,15 +222,19 @@
                     --is_visible--cursor: normal;
                 }
             }
-        }
-
-        #active_columns {
+
             perspective-row:only-child {
                 --active--color: #ccc;
                 --is_visible--cursor: normal;
             }
         }
 
+        #inactive_columns perspective-row:not(.active) {
+            --row_draggable-border-width: 0 0 1px 0;
+            margin-bottom: 2px;
+            --row_draggable-border-color: transparent;
+        }
+
         #active_columns,
         #inactive_columns {
             border: none !important;
@@ -259,7 +258,6 @@
         position: relative;
         overflow-y: hidden;
         width: 100%;
-        padding-top: 20px;
         margin: var(--column-container--margin, 8px);
         min-height: 36px;
 

packages/perspective-viewer/src/less/row.less

@@ -268,7 +268,7 @@
             --drop-target--animation,
             var(--row_draggable--animation, expand3 0.5s ease-out)
         );
-        border: var(--active--border, solid #1078d1) !important;
+        box-shadow: inset 0px 0px 0px 3px #1078d1 !important;
     }
 }
 

packages/perspective-viewer/src/less/viewer.less

@@ -81,7 +81,6 @@
         display: none;
     }
     .psp-icon {
-        color: #999;
         &:hover {
             cursor: pointer;
         }
@@ -100,10 +99,9 @@
     }
     .psp-title__columnName {
         display: flex;
-        margin-left: 34px;
+        margin-left: 24px;
         margin-top: 3px;
         font-size: 12px;
-        color: #666;
     }
     .side_panel-action:hover {
         cursor: pointer;
@@ -141,7 +139,7 @@
     #filters #psp_row {
         display: inline;
     }
-    ul {
+    .psp-text-field ul {
         min-height: 20px;
     }
     #active_columns perspective-row {
@@ -178,7 +176,6 @@
             opacity: var(--inactive-column--opacity, 1);
             transition: opacity 0.3s; // --row_draggable--transition: margin-left 0.5s;
             &.active {
-                --row_draggable--margin: 0px 0px 0px 10px;
                 opacity: 0;
                 height: 0 !important;
                 overflow: hidden;
@@ -188,21 +185,36 @@
     .columns_horizontal #sub_columns.collapse #side_panel__actions {
         margin-top: 0px;
     }
+    .columns_horizontal .collapse #sub_columns #side_panel__actions {
+        margin-top: 0px;
+    }
     #sub_columns {
-        min-height: 33.3%;
-        flex-shrink: 100000;
         display: flex;
         flex-direction: column;
         overflow-x: hidden;
         width: 100%;
+        flex: 0 1 auto;
+        min-height: 35px;
         &.collapse {
-            #inactive_columns {
-                display: none;
-            }
+            flex: 0 1 auto;
             flex-shrink: 0;
-            min-height: 64px;
+            min-height: 0px;
         }
     }
+    #app.columns_horizontal #sub_columns {
+        flex: 0 1 50%;
+        #inactive_columns {
+            flex: 0 1 auto;
+        }
+    }
+    #app:not(.columns_horizontal) #columns_container:not(.collapse) #active_columns {
+        max-height: 60%;
+    }
+    #columns_container.collapse #sub_columns {
+        flex: 0 1 auto;
+        flex-shrink: 0;
+        min-height: 0px;
+    }
     .column {
         display: flex;
         list-style: none;

packages/perspective-viewer/src/themes/material.less

@@ -42,7 +42,7 @@ perspective-viewer, .perspective-viewer-material {
     --copy_button--before: "file_copy";
     --download_button--before: "save_alt";
     --reset_button--before: "refresh";
-    --row_draggable-border-last-child-width: 0;
+    --row_draggable-last-child-border-color: transparent;
 
     --row_pivots--before: "Group By";
     --column_pivots--before: "Split By";