diff --git a/packages/perspective-viewer/src/js/computed_column.js b/packages/perspective-viewer/src/js/computed_column.js index 4ca0aecc7d..458b2163b1 100644 --- a/packages/perspective-viewer/src/js/computed_column.js +++ b/packages/perspective-viewer/src/js/computed_column.js @@ -212,6 +212,11 @@ class ComputedColumn extends HTMLElement { this._set_input_column(event, data.column_name, data.column_type); } + deselect_column(name) { + this.state.input_columns = this.state.input_columns.map(x => x && x.name === name ? undefined : x); + this._apply_state(this.state.input_columns, this.state.computation); + } + // Called when a column is dragged out of the computed column UI _remove_column(event) { event.currentTarget.classList.remove('dropping'); @@ -235,15 +240,18 @@ class ComputedColumn extends HTMLElement { const inputs = this._input_columns.children; for (let i = 0; i < this.state['input_columns'].length; i++) { - this._set_input_column( - { currentTarget: inputs[i] }, - this.state['input_columns'][i].name, - this.state['input_columns'][i].type); + if (this.state['input_columns'][i] !== undefined) { + this._set_input_column( + {currentTarget: inputs[i]}, + this.state['input_columns'][i].name, + this.state['input_columns'][i].type + ); + } } - this._column_name_input.innerText = name; + this._column_name_input.innerText = name || ""; this._set_column_name(); - this.state['name_edited'] = true; + this.state['name_edited'] = name !== undefined; } // error handling @@ -324,14 +332,10 @@ class ComputedColumn extends HTMLElement { type: type, }; - if (inputs[index]) { - inputs[index] = column; - } else { - inputs.push(column); - } + inputs[index] = column; this.state['input_columns'] = inputs; - if (inputs.length === computation.num_params) { + if (inputs.filter(x => x).length === computation.num_params) { this._auto_column_name(); } diff --git a/packages/perspective-viewer/src/js/view.js b/packages/perspective-viewer/src/js/view.js index 4cc93489a4..78f9c8e387 100755 --- a/packages/perspective-viewer/src/js/view.js +++ b/packages/perspective-viewer/src/js/view.js @@ -225,7 +225,8 @@ function column_visibility_clicked(ev) { } else { // check if we're manipulating computed column input if(ev.path[1].classList.contains('psp-cc-computation__input-column')) { - this._computed_column._register_inputs(); + // this._computed_column._register_inputs(); + this._computed_column.deselect_column(ev.currentTarget.getAttribute('name')); this._update_column_view(); return; } @@ -318,7 +319,7 @@ function _format_computed_data(cc) { }; } -async function loadTable(table) { +async function loadTable(table, redraw = true) { this.querySelector('#app').classList.add('hide_message'); this.setAttribute('updating', true); @@ -475,8 +476,7 @@ async function loadTable(table) { this.querySelector('#side_panel__actions').style.visibility = "visible"; this.filters = this.getAttribute('filters'); - - this._debounce_update(); + this._debounce_update(redraw); } function new_row(name, type, aggregate, filter, sort, computed) { @@ -576,7 +576,7 @@ class CancelTask { } -function update() { +function update(redraw = true) { if (!this._table) return; let row_pivots = this._view_columns('#row_pivots perspective-row'); let column_pivots = this._view_columns('#column_pivots perspective-row'); @@ -629,27 +629,34 @@ function update() { }); const timer = this._render_time(); - this._render_count = (this._render_count || 0) + 1; - if (this._task) { - this._task.cancel(); - } - const task = this._task = new CancelTask(() => { - this._render_count--; - }); - task.initial = true; - - this._plugin.create.call(this, this._datavis, this._view, task).catch(err => { - console.warn(err); - }).finally(() => { - if (!this.hasAttribute('render_time')) { - this.dispatchEvent(new Event('perspective-view-update')); + if (redraw) { + this._render_count = (this._render_count || 0) + 1; + if (this._task) { + this._task.cancel(); } + const task = this._task = new CancelTask(() => { + this._render_count--; + }); + task.initial = true; + + this._plugin.create.call(this, this._datavis, this._view, task).catch(err => { + console.warn(err); + }).finally(() => { + if (!this.hasAttribute('render_time')) { + this.dispatchEvent(new Event('perspective-view-update')); + } + timer(); + task.cancel(); + if (this._render_count === 0) { + this.removeAttribute('updating'); + } + }); + } else { timer(); - task.cancel(); if (this._render_count === 0) { this.removeAttribute('updating'); } - }); + } } /****************************************************************************** @@ -872,7 +879,7 @@ class ViewPrivate extends HTMLElement { }]; const table = this._table.add_computed(params); - loadTable.call(this, table).then(() => { + loadTable.call(this, table, false).then(() => { this._update_column_view(); //this.dispatchEvent(new Event('perspective-view-update')); this._computed_column._close_computed_column(); @@ -959,9 +966,9 @@ class ViewPrivate extends HTMLElement { _register_debounce_instance() { const _update = _.debounce(update.bind(this), 10); - this._debounce_update = () => { + this._debounce_update = (redraw) => { this.setAttribute('updating', true); - _update(); + _update(redraw); } } }