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.

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

Move styles to sidebar #2366

Merged
merged 4 commits into from
Sep 22, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { restore } from "../plugin/restore.js";
import { connectedCallback } from "../plugin/connected";
import { save } from "../plugin/save";
import { draw } from "../plugin/draw";
import getDefaultConfig from "../default_config.js";

/**
* The custom element class for this plugin. The interface methods for this
Expand Down Expand Up @@ -66,6 +67,11 @@ export class HTMLPerspectiveViewerDatagridPluginElement extends HTMLElement {
return 1;
}

/** opt-in to column styling */
get default_config() {
return getDefaultConfig.call(this);
}

async draw(view) {
return await draw.call(this, view);
}
Expand Down
54 changes: 54 additions & 0 deletions packages/perspective-viewer-datagrid/src/js/default_config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃
// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
// ┃ Copyright (c) 2017, the Perspective Authors. ┃
// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
// ┃ This file is part of the Perspective library, distributed under the terms ┃
// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

/**
* Gets the default column configurations used for styling.
* @returns The default configuration per type.
*/
export default function getDefaultConfig() {
const get_type_default = (column_type) => {
let type_default;
if (column_type === "integer" || column_type === "float") {
type_default = {
fg_gradient: 0,
pos_fg_color: this.model._pos_fg_color[0],
neg_fg_color: this.model._neg_fg_color[0],
number_fg_mode: "color",
bg_gradient: 0,
pos_bg_color: this.model._pos_bg_color[0],
neg_bg_color: this.model._neg_bg_color[0],
number_bg_mode: "disabled",
fixed: column_type === "float" ? 2 : 0,
};
} else {
// date, datetime, string, boolean
type_default = {
color: this.model._color[0],
bg_color: this.model._color[0],
};
}
return type_default;
};

let default_config = {};
for (let val of [
"string",
"float",
"integer",
"bool",
"date",
"datetime",
]) {
default_config[val] = get_type_default(val);
}
return default_config;
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,9 @@
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

import { sortHandler } from "./sort.js";
import { activate_plugin_menu } from "../style_menu.js";
import { expandCollapseHandler } from "./expand_collapse.js";

export async function mousedown_listener(regularTable, event) {
export async function mousedown_listener(regularTable, viewer, event) {
if (event.which !== 1) {
return;
}
Expand All @@ -38,27 +37,9 @@ export async function mousedown_listener(regularTable, event) {
}

if (target.classList.contains("psp-menu-enabled")) {
target.classList.add("psp-menu-open");
const meta = regularTable.getMeta(target);
const column_name = meta.column_header?.[this._config.split_by.length];
const column_type = this._schema[column_name];
this._open_column_styles_menu.unshift(meta._virtual_x);
if (
column_type === "string" ||
column_type === "date" ||
column_type === "datetime"
) {
activate_plugin_menu.call(this, regularTable, target);
} else {
const [min, max] = await this._view.get_min_max(column_name);
let bound = Math.max(Math.abs(min), Math.abs(max));
if (bound > 1) {
bound = Math.round(bound * 100) / 100;
}

activate_plugin_menu.call(this, regularTable, target, bound);
}

await viewer.toggleColumnSettings(column_name);
event.preventDefault();
event.stopImmediatePropagation();
} else if (target.classList.contains("psp-sort-enabled")) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,6 @@ export async function createModel(regular, table, view, extend = {}) {
_num_rows: num_rows,
_schema,
_ids: [],
_open_column_styles_menu: [],
_plugin_background,
_color,
_pos_fg_color,
Expand Down
25 changes: 23 additions & 2 deletions packages/perspective-viewer-datagrid/src/js/plugin/activate.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@
// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

import { column_header_style_listener } from "../style_handlers/column_header.js";
import {
column_header_style_listener,
style_selected_column,
} from "../style_handlers/column_header.js";
import { group_header_style_listener } from "../style_handlers/group_header.js";
import { table_cell_style_listener } from "../style_handlers/table_cell";
import {
Expand Down Expand Up @@ -68,7 +71,7 @@ export async function activate(view) {

this.regular_table.addEventListener(
"mousedown",
mousedown_listener.bind(this.model, this.regular_table)
mousedown_listener.bind(this.model, this.regular_table, viewer)
);

// Row selection
Expand Down Expand Up @@ -153,6 +156,24 @@ export async function activate(view) {
)
);

// viewer event listeners
viewer.addEventListener(
"perspective-toggle-column-settings",
(event) => {
style_selected_column(
this.regular_table,
event.detail.column_name
);
if (!event.detail.open) {
this.model._column_settings_selected_column = null;
return;
}

this.model._column_settings_selected_column =
event.detail.column_name;
}
);

this._initialized = true;
} else {
await createModel.call(
Expand Down
7 changes: 0 additions & 7 deletions packages/perspective-viewer-datagrid/src/js/plugin/restore.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,6 @@ export function restore(token) {
}

const datagrid = this.regular_table;
try {
datagrid._resetAutoSize();
} catch (e) {
// Do nothing; this may fail if no auto size info has been read.
// TODO fix this regular-table API
}

restore_column_size_overrides.call(this, overrides, true);
datagrid[PRIVATE_PLUGIN_SYMBOL] = token.columns;
}
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,61 @@ function get_psp_type(metadata) {
}
}

export function style_selected_column(regularTable, selectedColumn) {
const group_header_trs = Array.from(
regularTable.children[0].children[0].children
);
const len = group_header_trs.length;
if (len <= 1) {
group_header_trs[0]?.setAttribute("id", "psp-column-edit-buttons");
} else {
group_header_trs.forEach((tr, i) => {
let id =
i === len - 2
? "psp-column-titles"
: i === len - 1
? "psp-column-edit-buttons"
: null;
id ? tr.setAttribute("id", id) : tr.removeAttribute("id");
});
}

const settings_open =
regularTable.parentElement.parentElement.hasAttribute("settings");
if (settings_open) {
// if settings_open, you will never have less than 2 trs but possibly more e.g. with group-by.
// edit and title are guaranteed to be the last two rows
let titles = Array.from(group_header_trs[len - 2].children);
let editBtns = Array.from(group_header_trs[len - 1].children);
if (titles && editBtns) {
// clear any sticky styles from tr changes
group_header_trs.slice(0, len - 2).forEach((tr) => {
Array.from(tr.children).forEach((th) => {
th.classList.toggle("psp-menu-open", false);
});
});
let zipped = titles.map((title, i) => [title, editBtns[i]]);
zipped.forEach(([title, editBtn]) => {
let open = title.innerText === selectedColumn;
title.classList.toggle("psp-menu-open", open);
editBtn.classList.toggle("psp-menu-open", open);
});
}
}
}

export function column_header_style_listener(regularTable) {
let group_header_trs = Array.from(
regularTable.children[0].children[0].children
);

if (group_header_trs.length > 0) {
style_selected_column.call(
this,
regularTable,
this._column_settings_selected_column
);

let [col_headers] = group_header_trs.splice(
this._config.split_by.length,
1
Expand All @@ -48,6 +97,7 @@ export function column_header_style_listener(regularTable) {
}

function style_column_header_row(regularTable, col_headers, is_menu_row) {
// regular header styling
const header_depth = regularTable._view_cache.config.row_pivots.length - 1;
for (const td of col_headers?.children) {
const metadata = regularTable.getMeta(td);
Expand Down Expand Up @@ -88,10 +138,6 @@ function style_column_header_row(regularTable, col_headers, is_menu_row) {
const is_datetime = type === "datetime";
td.classList.toggle("psp-align-right", is_numeric);
td.classList.toggle("psp-align-left", !is_numeric);
td.classList.toggle(
"psp-menu-open",
this._open_column_styles_menu[0] === metadata._virtual_x
);

td.classList.toggle(
"psp-menu-enabled",
Expand Down
Loading
Loading