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

Various fixes for layout, drag-and-drop #69

Merged
merged 10 commits into from
Mar 12, 2018
Merged

Various fixes for layout, drag-and-drop #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8b85f83
Fixed drag-and-drop behavior to accomadate padding in drag area.
texodus Mar 11, 2018
3c1d833
Changed column proportions to make large column sets more readable.
texodus Mar 11, 2018
d9903e1
Make update behavior scheduling asynchronous.
texodus Mar 11, 2018
23eb470
Fixed drag-and-drop bounds checking with respect to padding.
texodus Mar 11, 2018
ae180a3
Re-center color range on heatmaps when all values are the same sign; …
texodus Mar 12, 2018
6ffbbbd
Added esoteric timestamp parse candidate to perspective.
texodus Mar 12, 2018
ee69176
Fixed viewer task cancellation race condition.
texodus Mar 12, 2018
26c4964
Fixed chart race condition which caused some chart settings to not be…
texodus Mar 12, 2018
48bb025
Changed default sort order of inactive columns.
texodus Mar 12, 2018
dffffa9
Fixed tests.
texodus Mar 12, 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
28 changes: 14 additions & 14 deletions packages/perspective-viewer-highcharts/src/js/highcharts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,8 +223,6 @@ function* visible_rows(json, hidden) {
}
}



export function draw(mode) {
return async function(el, view, hidden, task) {
var row_pivots = this._view_columns('#row_pivots perspective-row:not(.off)');
Expand All @@ -233,6 +231,16 @@ export function draw(mode) {

let [js, schema] = await Promise.all([view.to_json(), view.schema()]);

if (this.hasAttribute('updating') && this._chart) {
chart = this._chart
this._chart = undefined;
try {
chart.destroy();
} catch (e) {
console.warn("Scatter plot destroy() call failed - this is probably leaking memory");
}
}

if (task.cancelled) {
return;
}
Expand Down Expand Up @@ -423,8 +431,10 @@ export function draw(mode) {
colorRange[1] = Math.max(colorRange[1], val);
}
}
let cmax = Math.max(Math.abs(colorRange[0]), Math.abs(colorRange[1]));
colorRange = [-cmax, cmax];
if (colorRange[0] * colorRange[1] < 0) {
let cmax = Math.max(Math.abs(colorRange[0]), Math.abs(colorRange[1]));
colorRange = [-cmax, cmax];
}

// Calculate ylabel nesting
let ylabels = series.map(function (s) { return s.name.split(','); })
Expand Down Expand Up @@ -541,16 +551,6 @@ export function draw(mode) {
});
}

if (this.hasAttribute('updating') && this._chart) {
chart = this._chart
this._chart = undefined;
try {
chart.destroy();
} catch (e) {
console.warn("Scatter plot destroy() call failed - this is probably leaking memory");
}
}

if (this._chart) {
if (mode === 'scatter') {
let new_radius = Math.min(8, Math.max(4, Math.floor((this._chart.chartWidth + this._chart.chartHeight) / 240)));
Expand Down
80 changes: 40 additions & 40 deletions packages/perspective-viewer-highcharts/test/results/results.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,44 +7,44 @@
"superstore.html/sorts by a numeric column.": "375062fbd50e09afa7b6df7e6b4a3a5f",
"superstore.html/sorts by an alpha column.": "2643e0b5787b6e8e85f122b1713d01cd",
"superstore.html/displays visible columns.": "1da296527f149393be8f3f99e34b3e4a",
"scatter.html/shows a grid without any settings applied.": "352854b8fa9466ddf9f884462f1fcfbf",
"scatter.html/pivots by a row.": "e3e380ffa3763064a29192ce8a3e046f",
"scatter.html/pivots by two rows.": "56c3f91873644211d4460bdb10f07bf5",
"scatter.html/pivots by a row and a column.": "668b12caea7f74f3e1ecf86a7aaa00a9",
"scatter.html/pivots by two rows and two columns.": "7ac5cca76f04cfdbb441d2a99d6ccfe6",
"scatter.html/sorts by a numeric column.": "bd7cf1c14f21445f82168217b9ff05a7",
"scatter.html/sorts by an alpha column.": "5932a47bf699a9a82dbdd227cbd504f7",
"scatter.html/displays visible columns.": "ce252df96a791bfa82d1bbd6756ac650",
"bar.html/shows a grid without any settings applied.": "fa9f33409c8409155b403c30e97b9397",
"bar.html/pivots by a row.": "3b2f3d8e31ff3807f693b3dd45b3a257",
"bar.html/pivots by two rows.": "733063b0f46c17724b8d7f64148d4460",
"bar.html/pivots by a row and a column.": "c94c7e9662c1dff8e97fdbb46fcf62c1",
"bar.html/pivots by two rows and two columns.": "0a4c73f2b08e46f32bf6afcebdcb2ac3",
"bar.html/sorts by a numeric column.": "eb2a8ccefeb526889b66d13cbc76158e",
"bar.html/sorts by an alpha column.": "a9847acbd15eb20ad5a4f2fd845fb521",
"line.html/shows a grid without any settings applied.": "5c7d75d2872635968019ef08bc505ff3",
"line.html/pivots by a row.": "994456c98b3ad7d2d430ba0873dbad5a",
"line.html/pivots by two rows.": "a4c0352b70834ff367d0720672729762",
"line.html/pivots by a row and a column.": "982d42f8b2271589266b6e2239ae9131",
"line.html/pivots by two rows and two columns.": "de275d6ba3cab37c0f87df0853135412",
"line.html/sorts by a numeric column.": "7557b1cc8beacf948024f87c3473bcad",
"line.html/sorts by an alpha column.": "d7060be53b755b713051ea8e64a12e22",
"line.html/displays visible columns.": "954531559f44fab50e62ba5c268d19dd",
"bar.html/displays visible columns.": "5ebba17d56de6a6b01d78c9e3277bf46",
"scatter.html/sorts by a hidden column.": "ba5250a8ddfca77e707b346569f7526d",
"line.html/sorts by a hidden column.": "b974f05e44029284eb40bfa06ff94a79",
"bar.html/sorts by a hidden column.": "cfc343b26f4d1b150b37bb8c8b0a4c62",
"scatter.html/filters by a numeric column.": "aeaf321f4ab75f1fcd1a4391ff45ba51",
"line.html/filters by a numeric column.": "49c51b795f82d528e5e2b0d28a1c8766",
"bar.html/filters by a numeric column.": "3e081336397807f1b5e92397d43dab6b",
"heatmap.html/shows a grid without any settings applied.": "4f67e3da9aec1fe59d204e4be8c9c592",
"heatmap.html/pivots by a row.": "a054ea84d07da02fe56acb2563e2a746",
"heatmap.html/pivots by two rows.": "9f6be703ce4ae36f38bd2f4e1a5532a9",
"heatmap.html/pivots by a row and a column.": "acfa97f53d548085bf7c3e1b474ebef9",
"heatmap.html/pivots by two rows and two columns.": "16a04e9d9cdf831f1c8e34e57fa95dff",
"heatmap.html/sorts by a hidden column.": "8edf2baf6304de2e87b3cfa6dc95e575",
"heatmap.html/sorts by a numeric column.": "c7d178fbcecd8401d43f55976a69c530",
"heatmap.html/filters by a numeric column.": "57f6e61d2f516f697b122fa0c44ce98a",
"heatmap.html/sorts by an alpha column.": "3e9f466ddc535b629412bdbf1f951fb6",
"heatmap.html/displays visible columns.": "4b75d7e2cd8754f4f81cbeac3c56de10"
"scatter.html/shows a grid without any settings applied.": "d06e736acfd0512d7edb77f226581565",
"scatter.html/pivots by a row.": "10b9610b3457b590b4836b975e03c068",
"scatter.html/pivots by two rows.": "41e6302d8087af19d3d2a0f09ae5aa0a",
"scatter.html/pivots by a row and a column.": "3b056b59fa8f765d8cf64e0850b2cd11",
"scatter.html/pivots by two rows and two columns.": "30d8e6c029ad7867ea5f1f0155222039",
"scatter.html/sorts by a numeric column.": "0ed4d9b8999afcc636926eda8858785b",
"scatter.html/sorts by an alpha column.": "27a0820e9bc3dfcca56690ca28da4e64",
"scatter.html/displays visible columns.": "aecfc8890cf0d63020f40235fe9329c5",
"bar.html/shows a grid without any settings applied.": "026d2eaebb0fbac962eff07e51aede89",
"bar.html/pivots by a row.": "f4a8a1d1c8ab73a8a0adc3ca2e3fafb7",
"bar.html/pivots by two rows.": "634600dbf1fbbc004c78b287c953c47e",
"bar.html/pivots by a row and a column.": "4995f03fc74be179f167ebf1da3e7c7f",
"bar.html/pivots by two rows and two columns.": "d14cc935e580378b2ce4779ef619a252",
"bar.html/sorts by a numeric column.": "b47f166724fc7e97067e6d8a2e166263",
"bar.html/sorts by an alpha column.": "0b31f47c7444a697958bc12654821da0",
"line.html/shows a grid without any settings applied.": "69b032000982706f67646c1c1ef201c0",
"line.html/pivots by a row.": "f21a42cc7cf5738a5ce2a1a3fcfb0606",
"line.html/pivots by two rows.": "53cb969255ae06da1a0556605301b6d9",
"line.html/pivots by a row and a column.": "2442174f460cbbecda83a26ff5ceaa5f",
"line.html/pivots by two rows and two columns.": "691ae4d482d3184ef464901d657bf97e",
"line.html/sorts by a numeric column.": "427924d39df02537b9e0ca2fe9653d90",
"line.html/sorts by an alpha column.": "cb5289fe91482191ff60a96c2b38fd1e",
"line.html/displays visible columns.": "58cffc507ef835e319616bca7243f735",
"bar.html/displays visible columns.": "60815e32387730d65b3b304e9faa1f7d",
"scatter.html/sorts by a hidden column.": "ca7bf4886caf2ea11b152101de74761a",
"line.html/sorts by a hidden column.": "c5fe3821967162ebd9a45aa4f6875cc4",
"bar.html/sorts by a hidden column.": "df74e27ca165fece457e36d9d72ba8d9",
"scatter.html/filters by a numeric column.": "4076e985f519a7d565de860eba47f533",
"line.html/filters by a numeric column.": "22c80d25e38429af1ce9456826fe917f",
"bar.html/filters by a numeric column.": "81c8f07989a6cd72726b584b395e9764",
"heatmap.html/shows a grid without any settings applied.": "8557a845ef78bea79ba024d6a5c1653e",
"heatmap.html/pivots by a row.": "c79f43f43f42bf0cb3cad46165f85ef9",
"heatmap.html/pivots by two rows.": "502faa310008958f78531470197c66a4",
"heatmap.html/pivots by a row and a column.": "e04c79cf2518a02ff16e20695286fa3a",
"heatmap.html/pivots by two rows and two columns.": "b951a809ad09924fff2f44b391cfd4ff",
"heatmap.html/sorts by a hidden column.": "73a36c3a3ed876e8b2dab314dbe67980",
"heatmap.html/sorts by a numeric column.": "824dc104c7f71f46a13b4ecf8b09a9d6",
"heatmap.html/filters by a numeric column.": "8c928b868f1946a98ffe2ccaef955404",
"heatmap.html/sorts by an alpha column.": "d051fecba8e24d1607d9c96401201a9a",
"heatmap.html/displays visible columns.": "0a093f233b0bef85381d38126459e56f"
}
19 changes: 18 additions & 1 deletion packages/perspective-viewer-hypergrid/src/js/hypergrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -510,9 +510,20 @@ function is_subrange(sub, sup) {
return sup[0] <= sub[0] && sup[1] >= sub[1];
}


// How many rows to pad the cache by; TODO this should really be calculated
// from the parameters of the theme.
const OFFSET_SETTINGS = 5;

/**
* Estimate the visible range of a Hypergrid.
*
* @param {any} grid
* @returns
*/
function estimate_range(grid) {
let range = Object.keys(grid.renderer.visibleRowsByDataRowIndex);
return [parseInt(range[0]), parseInt(range[range.length - 1]) + 2];
return [parseInt(range[0]), parseInt(range[range.length - 1]) + OFFSET_SETTINGS];
}

import rectangular from 'rectangular';
Expand Down Expand Up @@ -776,6 +787,12 @@ global.registerPlugin("hypergrid", {
}
},
delete: function () {
if (this.hypergrid) {
// this.hypergrid.clearState();
this.hypergrid.behavior.reset();
this.hypergrid.renderer.reset();
this.hypergrid.canvas.resize();
}
}
});

Expand Down
4 changes: 2 additions & 2 deletions packages/perspective-viewer-hypergrid/test/results/results.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@
"superstore.html/pivots by two rows and two columns.": "5f6ac80fdf258f5b123038bd1292088f",
"superstore.html/sorts by a numeric column.": "35e4bfe4c57fb89e7690338111b9f10d",
"superstore.html/sorts by an alpha column.": "5d5db96298fe252204f995fbe56e3917",
"superstore.html/displays visible columns.": "28a382f1e65db9d48b0bbf8c80e0a3ef",
"superstore.html/displays visible columns.": "8dae6bbeb52605a40119f9bbb616845f",
"superstore.html/resets viewable area when the logical size expands.": "5c9a552eb2db9f59a7ce8bcfe3c968af",
"superstore.html/selecting a column does not log a context deleted error.": "2563581d3556c4576745443c8498bea9",
"superstore.html/resets viewable area when the physical size expands.": "b5e7dffa2272e6b6daf465a9af34e2bc",
"superstore.html/sorts by a hidden column.": "ad6676446dfbeab5b1b528663bd4868f",
"superstore.html/sorts by a hidden column.": "73a6207f32938dadb9d9493f860594d2",
"superstore.html/filters by a numeric column.": "afc5b9594776711cfc948bd92ab901f1"
}
81 changes: 49 additions & 32 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 @@ -66,8 +66,13 @@ function undrag(event) {
}

function calc_index(event) {
let height = this._active_columns.children[0].offsetHeight + 2;
return Math.floor((event.offsetY + this._active_columns.scrollTop) / height);
if (this._active_columns.children.length == 0) {
return 0;
} else {
let {offsetHeight, offsetTop} = this._active_columns.children[0];
let column_offset = offsetTop - this._active_columns.offsetTop;
return Math.max(0, Math.floor((event.offsetY + this._active_columns.scrollTop - column_offset) / offsetHeight));
}
}

function column_undrag(event) {
Expand Down Expand Up @@ -286,7 +291,7 @@ async function loadTable(table) {
this.setAttribute('columns', JSON.stringify(this._initial_col_order));
}

let type_order = {integer: 2, string: 0, float: 2, boolean: 1, date: 3};
let type_order = {integer: 2, string: 0, float: 3, boolean: 4, date: 1};

// Sort columns by type and then name
cols.sort((a, b) => {
Expand Down Expand Up @@ -350,7 +355,7 @@ async function loadTable(table) {
shown = JSON.parse(this.getAttribute('columns') || "[]").filter(x => cols.indexOf(x) > -1);
for (let x in cols) {
if (shown.indexOf(x) !== -1) {
this._inactive_columns.children[x].style.display = 'none';
this._inactive_columns.children[x].classList.add('active');
}
}
} else {
Expand All @@ -361,7 +366,7 @@ async function loadTable(table) {
let row = new_row.call(this, x, schema[x], aggregate);
this._inactive_columns.appendChild(row);
if (shown.indexOf(x) !== -1) {
row.style.display = 'none';
row.classList.add('active');
}
}

Expand Down Expand Up @@ -495,12 +500,14 @@ function update() {
this._task.cancel();
}
this._task = new CancelTask();
this._plugin.create.call(this, this._datavis, this._view, hidden, this._task).then(() => {
this.setAttribute('render_time', performance.now() - t);
this._task.cancel();
}).catch(err => {
console.error("Error rendering plugin.", err);
});
(task => {
this._plugin.create.call(this, this._datavis, this._view, hidden, task).then(() => {
this.setAttribute('render_time', performance.now() - t);
task.cancel();
}).catch(err => {
console.error("Error rendering plugin.", err);
});
})(this._task);
}, timeout || 0);
}
});
Expand All @@ -513,18 +520,21 @@ function update() {
this._task = new CancelTask(() => {
this._render_count--;
});
this._plugin.create.call(this, this._datavis, this._view, hidden, this._task).then(() => {
if (!this.hasAttribute('render_time')) {
this.dispatchEvent(new Event('loaded', {bubbles: true}));
}
this.setAttribute('render_time', performance.now() - t);
this._task.cancel();
if (this._render_count === 0) {
this.removeAttribute('updating');
}
}).catch(() => {
console.debug("View cancelled");
});

(task => {
this._plugin.create.call(this, this._datavis, this._view, hidden, task).then(() => {
if (!this.hasAttribute('render_time')) {
this.dispatchEvent(new Event('loaded', {bubbles: true}));
}
this.setAttribute('render_time', performance.now() - t);
task.cancel();
if (this._render_count === 0) {
this.removeAttribute('updating');
}
}).catch(() => {
console.debug("View cancelled");
});
})(this._task);
}

/******************************************************************************
Expand All @@ -549,7 +559,7 @@ registerElement(template, {

_plugin: {
get: function () {
return RENDERERS[this._vis_selector.value];
return RENDERERS[this._vis_selector.value || this.getAttribute('view') || Object.apply.keys(RENDERERS)[0] ];
}
},

Expand Down Expand Up @@ -592,11 +602,13 @@ registerElement(template, {

update: {
value: function (json) {
if (this._table === undefined) {
this.load(json);
} else {
this._table.update(json);
}
setTimeout(() => {
if (this._table === undefined) {
this.load(json);
} else {
this._table.update(json);
}
}, 0);
}
},

Expand Down Expand Up @@ -680,9 +692,9 @@ registerElement(template, {
lis.forEach(x => {
const index = columns.indexOf(x.getAttribute('name'));
if (index === -1) {
x.style.display = 'block';
x.classList.remove('active');
} else {
x.style.display = 'none';
x.classList.add('active');
}
});
if (reset) {
Expand Down Expand Up @@ -928,7 +940,12 @@ registerElement(template, {
this.setAttribute('column-pivots', JSON.stringify([]));
this.setAttribute('filters', JSON.stringify([]));
this.setAttribute('sort', JSON.stringify([]));
this.setAttribute('columns', JSON.stringify(this._initial_col_order));
this.removeAttribute('index');
if (this._initial_col_order) {
this.setAttribute('columns', JSON.stringify(this._initial_col_order || []));
} else {
this.removeAttribute('columns');
}
this.setAttribute('view', Object.keys(RENDERERS)[0]);
this.dispatchEvent(new Event('config-update'));
}
Expand Down
15 changes: 11 additions & 4 deletions packages/perspective-viewer/src/less/view.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,11 +79,11 @@ perspective-viewer {
}
.chart {
flex-grow: 1;
height: calc(~"100% - 10px");
height: calc(~"100% - 15px");
width: calc(~"100% - 20px");
position: absolute;
margin-right: 20px;
margin-top: 10px;
margin-top: 15px;
}
#pivot_chart {
position: relative;
Expand All @@ -92,17 +92,20 @@ perspective-viewer {
margin: 0px;
background-color: white;
}

.config {
display: flex;
}

#row_pivots li, #column_pivots li, #sort li {
display: inline;
}

ul {
min-height: 20px;
position: static !important;

}

#active_columns, #inactive_columns {
list-style: none;
padding: 5px;
Expand All @@ -113,8 +116,12 @@ perspective-viewer {
}

#inactive_columns {
min-height: 20%;
min-height: 33.3%;
flex-shrink: 1000;

.active {
display: none;
}
}

#divider {
Expand Down
Loading