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

@finos/perspective-viewer-datagrid Bug Fixes #997

Merged
merged 2 commits into from
Mar 31, 2020
Merged

@finos/perspective-viewer-datagrid Bug Fixes #997

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
68c8121
Fixed datagrid re-attach logic
texodus Mar 30, 2020
c2f1c42
Make row height and padding configurable, auto-size columns after upd…
texodus Mar 30, 2020
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
13 changes: 7 additions & 6 deletions examples/simple/superstore-custom-grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@

<script src="perspective-viewer.js"></script>
<script src="perspective-viewer-datagrid.js"></script>
<script src="perspective-viewer-d3fc.js"></script>

<link rel='stylesheet' href="index.css">
<link rel='stylesheet' href="material-dense.dark.css" is="custom-style">
Expand Down Expand Up @@ -143,9 +144,9 @@
for (const td of datagrid.get_tds()) {
const metadata = datagrid.get_meta(td);
const clean_name = metadata.value && metadata.value.trim && metadata.value.trim();
if (td.classList.contains("float")) {
if (metadata.type === "float") {
make_led_cell(td, metadata);
} else if (td.classList.contains("integer")) {
} else if (metadata.type === "integer") {
max = make_bar_chart(td, metadata, max);
} else if (clean_name in states) {
make_flag(td, metadata, cache, clean_name);
Expand Down Expand Up @@ -223,7 +224,7 @@
}

tbody:hover tr {
opacity: 0.5;
opacity: 0.7;
transition: opacity 0.2s ease-in;
}

Expand Down Expand Up @@ -257,13 +258,13 @@
background: rgba(0, 0, 0, 0.1);
}

td.float {
td.pd-float {
text-align: center !important;
font-family: Orbitron;
}

th.integer,
td.integer {
th.pd-integer,
td.pd-integer {
width: 100px;
}
</style>
Expand Down
2 changes: 0 additions & 2 deletions packages/perspective-viewer-datagrid/src/js/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ export const METADATA_MAP = new WeakMap();
// Output runtime debug info like FPS.
export const DEBUG = false;

export const ROW_HEIGHT = 19;

// Double buffer when the viewport scrolls columns, rows or when the
// view is recreated. Reduces render draw-in on some browsers, at the
// expense of performance.
Expand Down
7 changes: 7 additions & 0 deletions packages/perspective-viewer-datagrid/src/js/datagrid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,13 @@ export class DatagridViewModel extends DatagridViewEventModel {
*/
clear() {
this._sticky_container.innerHTML = "<table></table>";
if (this._render_element) {
if (this._render_element !== this.table_model.table.parentElement) {
this._render_element.appendChild(this._sticky_container);
}
} else {
this.appendChild(this.table_model.table);
}
}

reset_viewport() {
Expand Down
2 changes: 1 addition & 1 deletion packages/perspective-viewer-datagrid/src/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ class DatagridPlugin {
if (this.view && VIEWER_MAP.has(this._datavis)) {
const datagrid = VIEWER_MAP.get(this._datavis);
datagrid.reset_size();
await datagrid.draw();
await datagrid.draw({invalid_viewport: true});
}
}
}
Expand Down
40 changes: 17 additions & 23 deletions packages/perspective-viewer-datagrid/src/js/scroll_panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import CONTAINER_STYLE from "../less/container.less";
import MATERIAL_STYLE from "../less/material.less";

import {log_perf, html} from "./utils";
import {DEBUG, BROWSER_MAX_HEIGHT, ROW_HEIGHT, DOUBLE_BUFFER_RECREATE, DOUBLE_BUFFER_ROW, DOUBLE_BUFFER_COLUMN} from "./constants";
import {DEBUG, BROWSER_MAX_HEIGHT, DOUBLE_BUFFER_RECREATE, DOUBLE_BUFFER_ROW, DOUBLE_BUFFER_COLUMN} from "./constants";

/**
* Handles the virtual scroll pane, as well as the double buffering
Expand Down Expand Up @@ -83,9 +83,10 @@ export class DatagridVirtualTableViewModel extends HTMLElement {
</div>
`;

const stick_container = document.createElement("div");
const [, scroll_container] = this.shadowRoot.children;
const [virtual_panel, table_clip, table_staging] = scroll_container.children;
this._sticky_container = document.createElement("div");
this._sticky_container = stick_container;
this._table_clip = table_clip;
this._table_staging = table_staging;
this._scroll_container = scroll_container;
Expand Down Expand Up @@ -151,24 +152,15 @@ export class DatagridVirtualTableViewModel extends HTMLElement {
*/
_calculate_row_range(nrows, reset_scroll_position) {
const {height} = this._container_size;
const row_height = this._column_sizes.row_height || 19;
const header_levels = this._view_cache.config.column_pivots.length + 1;
const total_scroll_height = Math.max(1, this._virtual_panel.offsetHeight - height);
const total_scroll_height = Math.max(1, this._virtual_panel.offsetHeight - this._scroll_container.offsetHeight);
const percent_scroll = this._scroll_container.scrollTop / total_scroll_height;
const virtual_panel_row_height = Math.floor(height / ROW_HEIGHT);
const virtual_panel_row_height = Math.floor(height / row_height);
const relative_nrows = !reset_scroll_position ? this._nrows || 0 : nrows;
const scroll_rows = Math.max(0, relative_nrows + (header_levels - virtual_panel_row_height));
let start_row = Math.floor(scroll_rows * percent_scroll);
let start_row = Math.round(scroll_rows * percent_scroll);
let end_row = start_row + virtual_panel_row_height;
if (end_row - 1 > nrows) {
const offset = end_row - header_levels - nrows;
if (start_row - offset < 0) {
end_row = nrows;
start_row = 0;
} else {
start_row -= offset;
end_row -= offset;
}
}
return {start_row, end_row};
}

Expand Down Expand Up @@ -268,10 +260,10 @@ export class DatagridVirtualTableViewModel extends HTMLElement {
_swap_in(args) {
if (!this._virtual_scrolling_disabled) {
if (this._needs_swap(args)) {
if (this._table_staging !== this.table_model.table.parentElement) {
if (this._sticky_container === this.table_model.table.parentElement) {
this._sticky_container.replaceChild(this.table_model.table.cloneNode(true), this.table_model.table);
this._table_staging.appendChild(this.table_model.table);
}
this._table_staging.appendChild(this.table_model.table);
} else {
if (this._sticky_container !== this.table_model.table.parentElement) {
this._sticky_container.replaceChild(this.table_model.table, this._sticky_container.children[0]);
Expand Down Expand Up @@ -325,8 +317,9 @@ export class DatagridVirtualTableViewModel extends HTMLElement {
* @memberof DatagridVirtualTableViewModel
*/
_update_virtual_panel_height(nrows) {
const header_levels = this._view_cache.config.column_pivots.length + 1;
const virtual_panel_px_size = Math.min(BROWSER_MAX_HEIGHT, (nrows + header_levels) * ROW_HEIGHT);
const {row_height = 19} = this._column_sizes;
//const header_levels = this._view_cache.config.column_pivots.length + 1;
const virtual_panel_px_size = Math.min(BROWSER_MAX_HEIGHT, nrows * row_height);
this._virtual_panel.style.height = `${virtual_panel_px_size}px`;
}

Expand Down Expand Up @@ -383,9 +376,9 @@ export class DatagridVirtualTableViewModel extends HTMLElement {
if (this._virtual_scrolling_disabled) {
this._container_size = {width: Infinity, height: Infinity};
} else {
this._container_size = this._container_size || {
width: this._scroll_container.offsetWidth,
height: this._scroll_container.offsetHeight
this._container_size = (!this._invalid_schema && this._container_size) || {
width: this._sticky_container.offsetWidth,
height: this._sticky_container.offsetHeight
};
}

Expand All @@ -396,8 +389,9 @@ export class DatagridVirtualTableViewModel extends HTMLElement {

if (this._invalid_schema || invalid_row || invalid_column || invalid_viewport) {
this._swap_in(swap_args);
await this.table_model.draw(this._container_size, this._view_cache, this._selected_id, preserve_width, viewport);
const last_cells = await this.table_model.draw(this._container_size, this._view_cache, this._selected_id, preserve_width, viewport);
this._swap_out(swap_args);
this.table_model.autosize_cells(last_cells);
if (!preserve_width) {
this._update_virtual_panel_width(this._invalid_schema || invalid_column || invalid_viewport);
}
Expand Down
18 changes: 12 additions & 6 deletions packages/perspective-viewer-datagrid/src/js/table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,11 @@ export class DatagridTableViewModel {
* @param {*} {columns, column_pivots}
* @memberof DatagridTableViewModel
*/
_autosize_columns(last_cells) {
autosize_cells(last_cells) {
while (last_cells.length > 0) {
const [cell, metadata] = last_cells.shift();
const offsetWidth = cell.offsetWidth;
this._column_sizes.row_height = this._column_sizes.row_height || cell.offsetHeight;
this._column_sizes.indices[metadata.cidx] = offsetWidth;
const is_override = this._column_sizes.override.hasOwnProperty(metadata.size_key);
if (offsetWidth && !is_override) {
Expand All @@ -67,6 +68,7 @@ export class DatagridTableViewModel {
const columns_data = await view.to_columns(viewport);
const {start_col: sidx} = viewport;
const id_column = columns_data["__ID__"];
let row_height = this._column_sizes.row_height;
let cont_body,
cont_head,
cidx = 0,
Expand All @@ -76,11 +78,12 @@ export class DatagridTableViewModel {
const alias = config.row_pivots.join(",");
const types = config.row_pivots.map(x => table_schema[x]);
cont_head = this.header.draw(config, alias, "", types);
cont_body = this.body.draw(container_height, alias, 0, columns_data["__ROW_PATH__"], id_column, selected_id, types, config.row_pivots.length, viewport.start_row, 0);
cont_body = this.body.draw(container_height, alias, 0, columns_data["__ROW_PATH__"], id_column, selected_id, types, config.row_pivots.length, viewport.start_row, 0, row_height);
selected_id = false;
if (!is_resize) {
last_cells.push([cont_body.td || cont_head.th, cont_body.metadata || cont_head.metadata]);
}
row_height = row_height || cont_body.row_height;
width += this._column_sizes.indices[0] || cont_body.td?.offsetWidth || cont_head.th.offsetWidth;
cidx++;
}
Expand All @@ -96,25 +99,28 @@ export class DatagridTableViewModel {
if (!(column_name in new_col)) {
new_col[column_name] = [];
}

columns_data[column_name] = new_col[column_name];
}

const column_data = columns_data[column_name];
const type = column_path_2_type(schema, column_name);

cont_head = this.header.draw(config, undefined, column_name, type, config.sort, cont_head);
cont_body = this.body.draw(container_height, column_name, cidx, column_data, id_column, selected_id, type, undefined, viewport.start_row, sidx);
cont_body = this.body.draw(container_height, column_name, cidx, column_data, id_column, selected_id, type, undefined, viewport.start_row, sidx, cont_body?.row_height);
selected_id = false;
width += this._column_sizes.indices[cidx + sidx] || cont_body.td?.offsetWidth || cont_head.th.offsetWidth;
if (!is_resize) {
last_cells.push([cont_body.td || cont_head.th, cont_body.metadata || cont_head.metadata]);
}
cidx++;

row_height = row_height || cont_body.row_height;
cidx++;
if (width > container_width) {
break;
}
}
this._autosize_columns(last_cells, config);

return last_cells;
} finally {
this.body.clean({ridx: cont_body?.ridx || 0, cidx});
if (cont_head) {
Expand Down
9 changes: 4 additions & 5 deletions packages/perspective-viewer-datagrid/src/js/tbody.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@

import isEqual from "lodash/isEqual";
import {ViewModel} from "./view_model";
import {ROW_HEIGHT} from "./constants";

/**
* <tbody> view model.
Expand Down Expand Up @@ -63,7 +62,7 @@ export class DatagridBodyViewModel extends ViewModel {
return {td, metadata};
}

draw(container_height, column_name, cidx, column_data, id_column, selected_id, type, depth, ridx_offset, cidx_offset) {
draw(container_height, column_name, cidx, column_data, id_column, selected_id, type, depth, ridx_offset, cidx_offset, row_height) {
let ridx = 0;
let td, metadata;
for (const val of column_data) {
Expand All @@ -72,13 +71,13 @@ export class DatagridBodyViewModel extends ViewModel {
const obj = this._draw_td(ridx++, cidx, column_name, val, id, selected_id, type, depth, next?.length > val?.length, ridx_offset, cidx_offset);
td = obj.td;
metadata = obj.metadata;

if (ridx * ROW_HEIGHT > container_height) {
row_height = row_height || td.offsetHeight;
if (ridx * row_height > container_height) {
break;
}
}
this._clean_rows(ridx);
return {td, cidx, ridx, metadata};
return {td, cidx, ridx, metadata, row_height};
}

clean({ridx, cidx}) {
Expand Down
4 changes: 2 additions & 2 deletions packages/perspective-viewer-datagrid/src/js/tree_row_header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,9 @@ export function tree_header(td, path, types, is_leaf, is_open) {

td.classList.add("pd-group-header");
td.innerHTML = html`
<div style="display:flex;align-items:stretch">
<span class="pd-tree-container">
${tree_levels}
<span class="${header_classes}">${header_text}</span>
</div>
</span>
`;
}
14 changes: 10 additions & 4 deletions packages/perspective-viewer-datagrid/src/less/container.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@

div.pd-scroll-container {
position:absolute;
top: 12px;
left: 12px;
right: 12px;
bottom: 12px;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
overflow:auto;
-webkit-overflow-scrolling: auto;
}
Expand All @@ -35,6 +35,12 @@ div.pd-scroll-table-clip {
height:100%
}

div.pd-tree-container {
display:flex;
align-items:center;
height:100%;
}

slot {
position:absolute;
overflow:hidden;
Expand Down
Loading