Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Column chooser #9

Merged
merged 13 commits into from
Jan 22, 2018
Merged

Column chooser #9

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
3559d82
Clean up hypergrid plugin API.
texodus Jan 10, 2018
4cd780a
Changed column selector to "active" and "inactive" sections
texodus Jan 16, 2018
30c505c
Drag & drop for column selection.
texodus Jan 16, 2018
6f96bed
Added drag & drop indicator animation.
texodus Jan 17, 2018
11fe565
Fixed CSS jitter bug in column drag & drop.
texodus Jan 17, 2018
92979c0
Modified drag behavior to remove dragged column when in the active co…
texodus Jan 19, 2018
c6a1ca3
Cleanup.
texodus Jan 20, 2018
83f2f19
Refined plugin behavior for new column selector.
texodus Jan 21, 2018
5cd4ba8
Updated tests.
texodus Jan 21, 2018
2c73e09
Fixed performance bug which caused a dragged node to be inserted befo…
texodus Jan 21, 2018
64bf6f4
Added drag animation.
texodus Jan 21, 2018
ffa17bb
Update test regression.
texodus Jan 22, 2018
2d07b2d
Fix CSS issues for large column sets which trigger scroll.
texodus Jan 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Cleanup.
  • Loading branch information
@texodus
texodus committed Jan 20, 2018
commit c6a1ca3c90fd2bab77e8af77c1b2bb49e7f80423
1 change: 0 additions & 1 deletion packages/perspective-viewer/src/js/row.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,6 @@ registerElement(template, {
this.dispatchEvent(new CustomEvent('row-drag'));
});
li.addEventListener('dragend', ev => {
//ev.currentTarget.classList.remove('dropping');
this.dispatchEvent(new CustomEvent('row-dragend'));
});
let visible = this.querySelector('.is_visible');
Expand Down
55 changes: 25 additions & 30 deletions packages/perspective-viewer/src/js/view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,14 +53,14 @@ global.registerPlugin = function registerPlugin(name, plugin) {
*/

function undrag(event) {
let div = event.target.parentElement;
if (div) {
let parent = div.parentElement.parentElement;
let idx = Array.prototype.slice.call(parent.children).indexOf(div);
let attr_name = parent.getAttribute('id').replace('_', '-');
let pivots = JSON.parse(this.getAttribute(attr_name));
pivots.splice(idx, 1);
this.setAttribute(attr_name, JSON.stringify(pivots));
let div = event.target.parentElement.parentElement;
let parent = div.parentElement;
let idx = Array.prototype.slice.call(parent.children).indexOf(div);
let attr_name = parent.getAttribute('id').replace('_', '-');
let pivots = JSON.parse(this.getAttribute(attr_name));
pivots.splice(idx, 1);
this.setAttribute(attr_name, JSON.stringify(pivots));
if (event.dataTransfer.dropEffect !== 'move') {
this._update();
}
}
Expand All @@ -73,30 +73,28 @@ function column_undrag(event) {
let data = event.target.parentElement.parentElement;
Array.prototype.slice.call(this._active_columns.children).map(x => {x.className = '';});
if (this._visible_column_count() > 1 && event.dataTransfer.dropEffect !== 'move') {

this._active_columns.removeChild(data);
this._update_column_view();
this._update();
}
this._active_columns.classList.remove('dropping');
this._update_column_view();
this._update();
}

function column_dragleave(event) {
let src = event.relatedTarget;
while (src && src !== this._active_columns) {
src = src.parentElement;
}
if (src) {
return;
}
this._active_columns.classList.remove('dropping');
if (this._drop_target_hover.parentElement === this._active_columns) {
this._active_columns.removeChild(this._drop_target_hover);
}
if (this._original_index !== -1) {
this._active_columns.insertBefore(this._drop_target_hover, this._active_columns.children[this._original_index]);
if (src === null) {
this._active_columns.classList.remove('dropping');
if (this._drop_target_hover.parentElement === this._active_columns) {
this._active_columns.removeChild(this._drop_target_hover);
}
if (this._original_index !== -1) {
this._active_columns.insertBefore(this._drop_target_hover, this._active_columns.children[this._original_index]);
}
this._drop_target_hover.removeAttribute('drop-target');
}
this._drop_target_hover.removeAttribute('drop-target');
}

function column_dragover(event) {
Expand Down Expand Up @@ -186,7 +184,7 @@ function column_visibility_clicked(ev) {
);
this._active_columns.appendChild(row);
}
let cols = this._view_columns('#active_columns perspective-row:not(.off)');
let cols = this._view_columns('#active_columns perspective-row');
this.setAttribute('columns', JSON.stringify(cols));
this._update_column_view(cols);
this._update();
Expand Down Expand Up @@ -285,12 +283,10 @@ async function loadTable(table) {
.filter(a => a.column === x)
.map(a => a.op)[0];
let row = new_row.call(this, x, schema[x], aggregate);
row.className = 'off';
this._inactive_columns.appendChild(row);
if (shown.indexOf(x) !== -1) {
row.style.display = 'none';
let active_row = new_row.call(this, x, schema[x], aggregate);
active_row.className = 'visible_' + (shown.indexOf(x) + 1);
this._active_columns.appendChild(active_row);
}
}
Expand Down Expand Up @@ -344,8 +340,8 @@ function new_row(name, type, aggregate) {

function update() {
if (!this._table) return;
let row_pivots = this._view_columns('#row_pivots perspective-row:not(.off)');
let column_pivots = this._view_columns('#column_pivots perspective-row:not(.off)');
let row_pivots = this._view_columns('#row_pivots perspective-row');
let column_pivots = this._view_columns('#column_pivots perspective-row');
let filters = JSON.parse(this.getAttribute('filters'));
let aggregates = this._get_view_aggregates();
if (aggregates.length === 0) return;
Expand All @@ -354,7 +350,7 @@ function update() {
column_pivots = [];
}
let hidden = [];
let sort = this._view_columns("#sort perspective-row:not(.off)");
let sort = this._view_columns("#sort perspective-row");
for (let s of sort) {
if (aggregates.map(function(agg) { return agg.column }).indexOf(s) === -1) {
let all = this._get_view_aggregates('#inactive_columns perspective-row');
Expand Down Expand Up @@ -516,7 +512,7 @@ registerElement(template, {

_get_view_aggregates: {
value: function (selector) {
selector = selector || '#active_columns perspective-row:not(.off)';
selector = selector || '#active_columns perspective-row';
return this._view_columns(selector, true);
}
},
Expand All @@ -540,8 +536,7 @@ registerElement(template, {
_visible_column_count: {
value: function() {
let cols = Array.prototype.slice.call(this.querySelectorAll("#active_columns perspective-row"));
let off_cols = Array.prototype.slice.call(this.querySelectorAll("#active_columns perspective-row.off"));
return (cols.length - off_cols.length);
return cols.length;
}
},

Expand Down
17 changes: 7 additions & 10 deletions packages/perspective-viewer/src/less/row.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
display: inline-block;
}

#side_panel perspective-row[drop-target]:not(.off) {
#side_panel #active_columns perspective-row[drop-target] {
.row_draggable {
background: none;
border: 1px solid rgba(0,0,0,0);
Expand Down Expand Up @@ -104,7 +104,7 @@ perspective-row li {
padding-left: 5px;
}

#side_panel perspective-row:not(.off) div {
#side_panel #active_columns perspective-row div {
.bordered();
background-color: white;
}
Expand All @@ -119,7 +119,7 @@ perspective-row li {
margin-top: -2px;
}

#side_panel perspective-row.off .is_visible::before {
#side_panel #inactive_columns perspective-row .is_visible::before {
content: "\25CB";
}

Expand Down Expand Up @@ -206,9 +206,6 @@ perspective-row .row_draggable select:focus {

perspective-viewer[view=scatter], perspective-viewer[view=line] {
#active_columns {
.off .is_visible::before {
content: "\25CB";
}
:nth-child(1) .is_visible::before {
.selected_indicator();
content: "X";
Expand All @@ -228,17 +225,17 @@ perspective-viewer[view=scatter], perspective-viewer[view=line] {
}
}

perspective-viewer:not([row-pivots='[]']) #side_panel perspective-row:not(.off) #column_aggregate,
perspective-viewer:not([column-pivots='[]']) #side_panel perspective-row:not(.off) #column_aggregate {
perspective-viewer:not([row-pivots='[]']) #side_panel #active_columns perspective-row #column_aggregate,
perspective-viewer:not([column-pivots='[]']) #side_panel #active_columns perspective-row #column_aggregate {
display: inline-block;
}

perspective-viewer:not([row-pivots='[]']) #side_panel,
perspective-viewer:not([column-pivots='[]']) #side_panel {
perspective-row .row_draggable {
#active_columns perspective-row .row_draggable {
height: 41px;
}
perspective-row.off .row_draggable {
#inactive_columns perspective-row .row_draggable {
height: 21px;
}
}