Skip to content

Commit afa7438

Browse files
texodustexodus
authored
Merge pull request #2366 from ada-x64/move-datagrid-styles-to-sidebar
Move styles to sidebar
2 parents 8b6ba0a + 9f0b64d commit afa7438

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+2840
-1224
lines changed

‎packages/perspective-viewer-datagrid/src/js/custom_elements/datagrid.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { restore } from "../plugin/restore.js";
1515
import { connectedCallback } from "../plugin/connected";
1616
import { save } from "../plugin/save";
1717
import { draw } from "../plugin/draw";
18+
import getDefaultConfig from "../default_config.js";
1819

1920
/**
2021
* The custom element class for this plugin. The interface methods for this
@@ -66,6 +67,11 @@ export class HTMLPerspectiveViewerDatagridPluginElement extends HTMLElement {
6667
return 1;
6768
}
6869

70+
/** opt-in to column styling */
71+
get default_config() {
72+
return getDefaultConfig.call(this);
73+
}
74+
6975
async draw(view) {
7076
return await draw.call(this, view);
7177
}

‎packages/perspective-viewer-datagrid/src/js/default_config.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
2+
// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃
3+
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃
4+
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃
5+
// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃
6+
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
7+
// ┃ Copyright (c) 2017, the Perspective Authors. ┃
8+
// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
9+
// ┃ This file is part of the Perspective library, distributed under the terms ┃
10+
// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
11+
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
12+
13+
/**
14+
* Gets the default column configurations used for styling.
15+
* @returns The default configuration per type.
16+
*/
17+
export default function getDefaultConfig() {
18+
const get_type_default = (column_type) => {
19+
let type_default;
20+
if (column_type === "integer" || column_type === "float") {
21+
type_default = {
22+
fg_gradient: 0,
23+
pos_fg_color: this.model._pos_fg_color[0],
24+
neg_fg_color: this.model._neg_fg_color[0],
25+
number_fg_mode: "color",
26+
bg_gradient: 0,
27+
pos_bg_color: this.model._pos_bg_color[0],
28+
neg_bg_color: this.model._neg_bg_color[0],
29+
number_bg_mode: "disabled",
30+
fixed: column_type === "float" ? 2 : 0,
31+
};
32+
} else {
33+
// date, datetime, string, boolean
34+
type_default = {
35+
color: this.model._color[0],
36+
bg_color: this.model._color[0],
37+
};
38+
}
39+
return type_default;
40+
};
41+
42+
let default_config = {};
43+
for (let val of [
44+
"string",
45+
"float",
46+
"integer",
47+
"bool",
48+
"date",
49+
"datetime",
50+
]) {
51+
default_config[val] = get_type_default(val);
52+
}
53+
return default_config;
54+
}

‎packages/perspective-viewer-datagrid/src/js/event_handlers/header_click.js‎

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,9 @@
1111
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
1212

1313
import { sortHandler } from "./sort.js";
14-
import { activate_plugin_menu } from "../style_menu.js";
1514
import { expandCollapseHandler } from "./expand_collapse.js";
1615

17-
export async function mousedown_listener(regularTable, event) {
16+
export async function mousedown_listener(regularTable, viewer, event) {
1817
if (event.which !== 1) {
1918
return;
2019
}
@@ -38,27 +37,9 @@ export async function mousedown_listener(regularTable, event) {
3837
}
3938

4039
if (target.classList.contains("psp-menu-enabled")) {
41-
target.classList.add("psp-menu-open");
4240
const meta = regularTable.getMeta(target);
4341
const column_name = meta.column_header?.[this._config.split_by.length];
44-
const column_type = this._schema[column_name];
45-
this._open_column_styles_menu.unshift(meta._virtual_x);
46-
if (
47-
column_type === "string" ||
48-
column_type === "date" ||
49-
column_type === "datetime"
50-
) {
51-
activate_plugin_menu.call(this, regularTable, target);
52-
} else {
53-
const [min, max] = await this._view.get_min_max(column_name);
54-
let bound = Math.max(Math.abs(min), Math.abs(max));
55-
if (bound > 1) {
56-
bound = Math.round(bound * 100) / 100;
57-
}
58-
59-
activate_plugin_menu.call(this, regularTable, target, bound);
60-
}
61-
42+
await viewer.toggleColumnSettings(column_name);
6243
event.preventDefault();
6344
event.stopImmediatePropagation();
6445
} else if (target.classList.contains("psp-sort-enabled")) {

‎packages/perspective-viewer-datagrid/src/js/model/create.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,6 @@ export async function createModel(regular, table, view, extend = {}) {
129129
_num_rows: num_rows,
130130
_schema,
131131
_ids: [],
132-
_open_column_styles_menu: [],
133132
_plugin_background,
134133
_color,
135134
_pos_fg_color,

‎packages/perspective-viewer-datagrid/src/js/plugin/activate.js‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@
1010
// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
1111
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
1212

13-
import { column_header_style_listener } from "../style_handlers/column_header.js";
13+
import {
14+
column_header_style_listener,
15+
style_selected_column,
16+
} from "../style_handlers/column_header.js";
1417
import { group_header_style_listener } from "../style_handlers/group_header.js";
1518
import { table_cell_style_listener } from "../style_handlers/table_cell";
1619
import {
@@ -68,7 +71,7 @@ export async function activate(view) {
6871

6972
this.regular_table.addEventListener(
7073
"mousedown",
71-
mousedown_listener.bind(this.model, this.regular_table)
74+
mousedown_listener.bind(this.model, this.regular_table, viewer)
7275
);
7376

7477
// Row selection
@@ -153,6 +156,24 @@ export async function activate(view) {
153156
)
154157
);
155158

159+
// viewer event listeners
160+
viewer.addEventListener(
161+
"perspective-toggle-column-settings",
162+
(event) => {
163+
style_selected_column(
164+
this.regular_table,
165+
event.detail.column_name
166+
);
167+
if (!event.detail.open) {
168+
this.model._column_settings_selected_column = null;
169+
return;
170+
}
171+
172+
this.model._column_settings_selected_column =
173+
event.detail.column_name;
174+
}
175+
);
176+
156177
this._initialized = true;
157178
} else {
158179
await createModel.call(

‎packages/perspective-viewer-datagrid/src/js/plugin/restore.js‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,6 @@ export function restore(token) {
6868
}
6969

7070
const datagrid = this.regular_table;
71-
try {
72-
datagrid._resetAutoSize();
73-
} catch (e) {
74-
// Do nothing; this may fail if no auto size info has been read.
75-
// TODO fix this regular-table API
76-
}
77-
7871
restore_column_size_overrides.call(this, overrides, true);
7972
datagrid[PRIVATE_PLUGIN_SYMBOL] = token.columns;
8073
}

‎packages/perspective-viewer-datagrid/src/js/style_handlers/column_header.js‎

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,61 @@ function get_psp_type(metadata) {
1818
}
1919
}
2020

21+
export function style_selected_column(regularTable, selectedColumn) {
22+
const group_header_trs = Array.from(
23+
regularTable.children[0].children[0].children
24+
);
25+
const len = group_header_trs.length;
26+
if (len <= 1) {
27+
group_header_trs[0]?.setAttribute("id", "psp-column-edit-buttons");
28+
} else {
29+
group_header_trs.forEach((tr, i) => {
30+
let id =
31+
i === len - 2
32+
? "psp-column-titles"
33+
: i === len - 1
34+
? "psp-column-edit-buttons"
35+
: null;
36+
id ? tr.setAttribute("id", id) : tr.removeAttribute("id");
37+
});
38+
}
39+
40+
const settings_open =
41+
regularTable.parentElement.parentElement.hasAttribute("settings");
42+
if (settings_open) {
43+
// if settings_open, you will never have less than 2 trs but possibly more e.g. with group-by.
44+
// edit and title are guaranteed to be the last two rows
45+
let titles = Array.from(group_header_trs[len - 2].children);
46+
let editBtns = Array.from(group_header_trs[len - 1].children);
47+
if (titles && editBtns) {
48+
// clear any sticky styles from tr changes
49+
group_header_trs.slice(0, len - 2).forEach((tr) => {
50+
Array.from(tr.children).forEach((th) => {
51+
th.classList.toggle("psp-menu-open", false);
52+
});
53+
});
54+
let zipped = titles.map((title, i) => [title, editBtns[i]]);
55+
zipped.forEach(([title, editBtn]) => {
56+
let open = title.innerText === selectedColumn;
57+
title.classList.toggle("psp-menu-open", open);
58+
editBtn.classList.toggle("psp-menu-open", open);
59+
});
60+
}
61+
}
62+
}
63+
2164
export function column_header_style_listener(regularTable) {
2265
let group_header_trs = Array.from(
2366
regularTable.children[0].children[0].children
2467
);
2568

2669
if (group_header_trs.length > 0) {
70+
style_selected_column.call(
71+
this,
72+
regularTable,
73+
this._column_settings_selected_column
74+
);
75+
2776
let [col_headers] = group_header_trs.splice(
2877
this._config.split_by.length,
2978
1
@@ -48,6 +97,7 @@ export function column_header_style_listener(regularTable) {
4897
}
4998

5099
function style_column_header_row(regularTable, col_headers, is_menu_row) {
100+
// regular header styling
51101
const header_depth = regularTable._view_cache.config.row_pivots.length - 1;
52102
for (const td of col_headers?.children) {
53103
const metadata = regularTable.getMeta(td);
@@ -88,10 +138,6 @@ function style_column_header_row(regularTable, col_headers, is_menu_row) {
88138
const is_datetime = type === "datetime";
89139
td.classList.toggle("psp-align-right", is_numeric);
90140
td.classList.toggle("psp-align-left", !is_numeric);
91-
td.classList.toggle(
92-
"psp-menu-open",
93-
this._open_column_styles_menu[0] === metadata._virtual_x
94-
);
95141

96142
td.classList.toggle(
97143
"psp-menu-enabled",

0 commit comments

Comments
 (0)