From 39d3338b6c82e2f7559db9bc7cb06714d43a3dd5 Mon Sep 17 00:00:00 2001 From: Andrew Stein Date: Mon, 9 Oct 2023 02:18:13 -0400 Subject: [PATCH 1/2] Style datagrid rows full width of the container --- .../src/less/pro.less | 10 ++++++- .../src/less/regular_table.less | 30 +++++++++++++++++++ .../src/less/row-hover.less | 5 ++-- .../src/themes/pro-dark.less | 4 --- 4 files changed, 42 insertions(+), 7 deletions(-) diff --git a/packages/perspective-viewer-datagrid/src/less/pro.less b/packages/perspective-viewer-datagrid/src/less/pro.less index 1d41cdbb68..1c4dd52279 100644 --- a/packages/perspective-viewer-datagrid/src/less/pro.less +++ b/packages/perspective-viewer-datagrid/src/less/pro.less @@ -70,10 +70,19 @@ perspective-viewer-datagrid:not(.sub-cell-scroll-disabled) regular-table table { 200% var(--regular-table--clip-y, 0) ); } + + thead tr:last-child:after { + transform: translate(var(--regular-table--transform-x, 0px)); + } + + tbody tr:not(:first-child):after { + transform: translate(var(--regular-table--transform-x, 0px)); + } } regular-table { font-family: inherit; + --rt-hover--border-color: #c5c9d080; div[tabindex] { outline: none; @@ -175,7 +184,6 @@ regular-table { table { position: absolute; - overflow: hidden; color: #666; outline: none; } diff --git a/packages/perspective-viewer-datagrid/src/less/regular_table.less b/packages/perspective-viewer-datagrid/src/less/regular_table.less index fcb3a1ca75..d334393321 100644 --- a/packages/perspective-viewer-datagrid/src/less/regular_table.less +++ b/packages/perspective-viewer-datagrid/src/less/regular_table.less @@ -258,6 +258,36 @@ regular-table table { } } +regular-table table thead tr:last-child:after { + width: 10000px; + box-sizing: border-box; + display: block; + height: 23px; + content: " "; + border-bottom: 1px solid var(--inactive--border-color); +} + +regular-table table tbody tr:after { + width: 10000px; + box-sizing: border-box; + display: block; + height: 23px; + content: " "; + border-top: 1px solid transparent; +} + +regular-table table tbody tr:not(:first-child):after { + border-top: 1px solid var(--inactive--border-color); +} + +regular-table table tbody tr:hover:not(:first-child):after { + border-top: 1px solid var(--rt-hover--border-color); +} + +regular-table table tbody tr:hover + tr:after { + border-top: 1px solid var(--rt-hover--border-color); +} + @keyframes pulse_pos { 0% { background-color: var( diff --git a/packages/perspective-viewer-datagrid/src/less/row-hover.less b/packages/perspective-viewer-datagrid/src/less/row-hover.less index 4d40da0c71..316759a1ab 100644 --- a/packages/perspective-viewer-datagrid/src/less/row-hover.less +++ b/packages/perspective-viewer-datagrid/src/less/row-hover.less @@ -16,7 +16,8 @@ regular-table { th.psp-tree-leaf:not(.psp-row-selected):not(.psp-row-subselected), tr:hover th.psp-tree-label:not(.psp-row-selected):not(.psp-row-subselected), - tr:hover td:not(.psp-row-selected):not(.psp-row-subselected) { + tr:hover td:not(.psp-row-selected):not(.psp-row-subselected), + tr:hover:after { border-color: var(--rt-hover--border-color, #c5c9d080) !important; background-color: transparent; box-shadow: // 0px -2px 0px rgba(0,0,0,0.05), @@ -46,7 +47,7 @@ regular-table { th:last-child, td:last-child { - border-right-width: 1px; + border-right-width: 0px; border-right-color: transparent; } } diff --git a/rust/perspective-viewer/src/themes/pro-dark.less b/rust/perspective-viewer/src/themes/pro-dark.less index 3a423708d7..fd53f8e98c 100644 --- a/rust/perspective-viewer/src/themes/pro-dark.less +++ b/rust/perspective-viewer/src/themes/pro-dark.less @@ -125,11 +125,7 @@ perspective-string-column-style[theme="Pro Dark"] { table tbody tr { - td, - th { --rt-hover--border-color: #61656e; - border-top-color: #3b3f46; - } } } From 075967e6e42983f50ce4232960a90159d5baf6ad Mon Sep 17 00:00:00 2001 From: Andrew Stein Date: Mon, 9 Oct 2023 21:59:53 -0400 Subject: [PATCH 2/2] Refactoring cleanup --- examples/blocks/src/file/index.html | 2 +- packages/perspective-viewer-datagrid/build.js | 2 + .../src/less/pro.less | 87 +------------------ .../src/less/regular_table.less | 2 + .../src/less/scrollbar.less | 37 ++++++++ .../src/less/sub-cell-scroll.less | 80 +++++++++++++++++ rust/perspective-viewer/Cargo.lock | 4 +- .../src/themes/monokai.less | 6 +- .../src/themes/pro-dark.less | 6 +- .../src/themes/solarized.less | 7 +- .../src/themes/vaporwave.less | 10 +-- tools/perspective-scripts/publish.mjs | 13 ++- 12 files changed, 140 insertions(+), 116 deletions(-) create mode 100644 packages/perspective-viewer-datagrid/src/less/scrollbar.less create mode 100644 packages/perspective-viewer-datagrid/src/less/sub-cell-scroll.less diff --git a/examples/blocks/src/file/index.html b/examples/blocks/src/file/index.html index c50b489b56..96aaef9f13 100644 --- a/examples/blocks/src/file/index.html +++ b/examples/blocks/src/file/index.html @@ -19,7 +19,7 @@

Upload a CSV/Arrow file by dragging from your desktop and dropping onto the dashed region.

(Data is processed in browser, and never sent to any server).

- +
diff --git a/packages/perspective-viewer-datagrid/build.js b/packages/perspective-viewer-datagrid/build.js index f81bfeadaf..0df1bbd758 100644 --- a/packages/perspective-viewer-datagrid/build.js +++ b/packages/perspective-viewer-datagrid/build.js @@ -60,6 +60,8 @@ async function compile_css() { add(builder1, "./pro.less"); add(builder1, "./mitered-headers.less"); add(builder1, "./row-hover.less"); + add(builder1, "./sub-cell-scroll.less"); + add(builder1, "./scrollbar.less"); add(builder1, "./regular_table.less"); fs.writeFileSync( "dist/css/perspective-viewer-datagrid.css", diff --git a/packages/perspective-viewer-datagrid/src/less/pro.less b/packages/perspective-viewer-datagrid/src/less/pro.less index 1c4dd52279..e1e2533e4b 100644 --- a/packages/perspective-viewer-datagrid/src/less/pro.less +++ b/packages/perspective-viewer-datagrid/src/less/pro.less @@ -15,74 +15,8 @@ regular-table { padding: 0; margin: 12px 0 0 12px; - - // firefox scrollbar styling - scrollbar-color: transparent transparent; - scrollbar-width: thin; - outline: none; -} - -regular-table:hover { - scrollbar-color: rgba(0, 0, 0, 0.3) transparent; -} - -perspective-viewer-datagrid:not(.sub-cell-scroll-disabled) regular-table table { - tbody td, - thead th:not(.rt-group-corner) { - transform: translate(var(--regular-table--transform-x, 0px)); - } - - tbody { - transform: translate(0, var(--regular-table--transform-y, 0px)); - } - - tbody tr:first-child { - td, - th { - clip-path: polygon( - 0 var(--regular-table--clip-y, 0), - 0 200%, - 200% 200%, - 200% var(--regular-table--clip-y, 0) - ); - } - } - - thead th.rt-group-corner { - background: var(--plugin--background, white); - z-index: 1; - } - - tbody tr td:first-of-type { - clip-path: polygon( - var(--regular-table--clip-x, 0) 0, - var(--regular-table--clip-x, 0) 200%, - 200% 200%, - 200% 0 - ); - } - - tbody tr:first-child td:first-of-type { - clip-path: polygon( - var(--regular-table--clip-x, 0) var(--regular-table--clip-y, 0), - var(--regular-table--clip-x, 0) 200%, - 200% 200%, - 200% var(--regular-table--clip-y, 0) - ); - } - - thead tr:last-child:after { - transform: translate(var(--regular-table--transform-x, 0px)); - } - - tbody tr:not(:first-child):after { - transform: translate(var(--regular-table--transform-x, 0px)); - } -} - -regular-table { font-family: inherit; - --rt-hover--border-color: #c5c9d080; + --rt-hover--border-color: var(--inactive--color, #c5c9d080); div[tabindex] { outline: none; @@ -263,23 +197,4 @@ regular-table { a:visited { color: var(--active--color); } - - // webkit (chrome, safari, etc) scrollbar styling - - &::-webkit-scrollbar, - &::-webkit-scrollbar-corner { - background-color: transparent; - height: 12px; - width: 12px; - } - - &::-webkit-scrollbar-thumb { - background-clip: content-box; - background: var(--icon--color); - border: 5.5px solid var(--plugin--background); - max-height: 50%; - max-width: 50%; - min-width: 10%; - min-height: 10%; - } } diff --git a/packages/perspective-viewer-datagrid/src/less/regular_table.less b/packages/perspective-viewer-datagrid/src/less/regular_table.less index d334393321..3c9020a69e 100644 --- a/packages/perspective-viewer-datagrid/src/less/regular_table.less +++ b/packages/perspective-viewer-datagrid/src/less/regular_table.less @@ -13,6 +13,8 @@ @import "./pro.less"; @import "./mitered-headers.less"; @import "./row-hover.less"; +@import "./sub-cell-scroll.less"; +@import "./scrollbar.less"; // Row Selection diff --git a/packages/perspective-viewer-datagrid/src/less/scrollbar.less b/packages/perspective-viewer-datagrid/src/less/scrollbar.less new file mode 100644 index 0000000000..c746f78039 --- /dev/null +++ b/packages/perspective-viewer-datagrid/src/less/scrollbar.less @@ -0,0 +1,37 @@ +// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ +// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ +// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ +// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ +// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ +// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ +// ┃ 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). ┃ +// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + +// Scrollbar styling +regular-table { + // firefox scrollbar styling + scrollbar-color: transparent transparent; + scrollbar-width: thin; + outline: none; + + // webkit (chrome, safari, etc) scrollbar styling + &::-webkit-scrollbar, + &::-webkit-scrollbar-corner { + background-color: transparent; + height: 12px; + width: 12px; + } + + &::-webkit-scrollbar-thumb { + background-clip: content-box; + background: var(--icon--color); + border: 5.5px solid var(--plugin--background); + max-height: 50%; + max-width: 50%; + min-width: 10%; + min-height: 10%; + } +} diff --git a/packages/perspective-viewer-datagrid/src/less/sub-cell-scroll.less b/packages/perspective-viewer-datagrid/src/less/sub-cell-scroll.less new file mode 100644 index 0000000000..18af3754a8 --- /dev/null +++ b/packages/perspective-viewer-datagrid/src/less/sub-cell-scroll.less @@ -0,0 +1,80 @@ +// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ +// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃ +// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃ +// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃ +// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃ +// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ +// ┃ 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). ┃ +// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ + +// Handles sub-cell scrolling via CSS transform offset by variables set during +// rendering. +perspective-viewer-datagrid:not(.sub-cell-scroll-disabled) regular-table table { + tbody td, + thead th:not(.rt-group-corner) { + transform: translate(var(--regular-table--transform-x, 0px)); + } + + tbody { + transform: translate(0, var(--regular-table--transform-y, 0px)); + } + + tbody tr:first-child { + td, + th { + clip-path: polygon( + 0 var(--regular-table--clip-y, 0), + 0 200%, + 200% 200%, + 200% var(--regular-table--clip-y, 0) + ); + } + } + + tbody tr td:first-of-type { + clip-path: polygon( + var(--regular-table--clip-x, 0) 0, + var(--regular-table--clip-x, 0) 200%, + 200% 200%, + 200% 0 + ); + } + + tbody tr:first-child td:first-of-type { + clip-path: polygon( + var(--regular-table--clip-x, 0) var(--regular-table--clip-y, 0), + var(--regular-table--clip-x, 0) 200%, + 200% 200%, + 200% var(--regular-table--clip-y, 0) + ); + } + + thead tr:last-child:after { + transform: translate(var(--regular-table--transform-x, 0px)); + } + + tbody tr:not(:first-child):after { + transform: translate(var(--regular-table--transform-x, 0px)); + } + + tbody tr:hover:first-child:after { + clip-path: polygon( + 0 var(--regular-table--clip-y, 0), + 0 200%, + 200% 200%, + 200% var(--regular-table--clip-y, 0) + ); + } + + thead tr th.rt-group-corner + th:not(.rt-group-corner) { + clip-path: polygon( + var(--regular-table--clip-x, 0) 0, + var(--regular-table--clip-x, 0) 200%, + 200% 200%, + 200% 0 + ); + } +} diff --git a/rust/perspective-viewer/Cargo.lock b/rust/perspective-viewer/Cargo.lock index a10809db4b..64f85cac9c 100644 --- a/rust/perspective-viewer/Cargo.lock +++ b/rust/perspective-viewer/Cargo.lock @@ -908,7 +908,7 @@ checksum = "d4fd5641d01c8f18a23da7b6fe29298ff4b55afcccdf78973b24cf3175fee32e" [[package]] name = "perspective" -version = "2.5.1" +version = "2.5.2" dependencies = [ "anyhow", "async-lock", @@ -941,7 +941,7 @@ dependencies = [ [[package]] name = "perspective-bundle" -version = "2.5.1" +version = "2.5.2" dependencies = [ "flate2", "wasm-bindgen-cli-support", diff --git a/rust/perspective-viewer/src/themes/monokai.less b/rust/perspective-viewer/src/themes/monokai.less index 357114da75..5d9a84713d 100644 --- a/rust/perspective-viewer/src/themes/monokai.less +++ b/rust/perspective-viewer/src/themes/monokai.less @@ -61,11 +61,7 @@ perspective-string-column-style[theme="Monokai"] { regular-table { --rt-pos-cell--color: #78dce8 !important; --rt-neg-cell--color: #ff6188 !important; - } - - regular-table table tbody tr td, - regular-table table tbody tr th { - border-top-color: #444444; + --rt--border-color: #444444; } regular-table table tbody th:empty { diff --git a/rust/perspective-viewer/src/themes/pro-dark.less b/rust/perspective-viewer/src/themes/pro-dark.less index fd53f8e98c..9ce7c0b2c9 100644 --- a/rust/perspective-viewer/src/themes/pro-dark.less +++ b/rust/perspective-viewer/src/themes/pro-dark.less @@ -114,6 +114,7 @@ perspective-string-column-style[theme="Pro Dark"] { regular-table { --rt-pos-cell--color: #7dc3f0; --rt-neg-cell--color: #ff9485; + --rt-hover--border-color: #61656e; table { color: white; @@ -122,11 +123,6 @@ perspective-string-column-style[theme="Pro Dark"] { table tr:hover { color: white; } - - table tbody tr { - - --rt-hover--border-color: #61656e; - } } tbody th:empty { diff --git a/rust/perspective-viewer/src/themes/solarized.less b/rust/perspective-viewer/src/themes/solarized.less index 332b2c50c0..e91e42755b 100644 --- a/rust/perspective-viewer/src/themes/solarized.less +++ b/rust/perspective-viewer/src/themes/solarized.less @@ -66,6 +66,8 @@ perspective-string-column-style[theme="Solarized"] { regular-table { --rt-pos-cell--color: #268bd2 !important; --rt-neg-cell--color: #cb4b16 !important; + --rt-hover--border-color: #CCC; + --rt--border-color: #93a1a1; } regular-table { @@ -74,11 +76,6 @@ perspective-string-column-style[theme="Solarized"] { } } - regular-table table tbody tr td, - regular-table table tbody tr th { - border-top-color: #93a1a1; - } - regular-table table tbody th:empty { background: linear-gradient(to right, transparent 9px, diff --git a/rust/perspective-viewer/src/themes/vaporwave.less b/rust/perspective-viewer/src/themes/vaporwave.less index d013f3bcb4..d0d72d9dbf 100644 --- a/rust/perspective-viewer/src/themes/vaporwave.less +++ b/rust/perspective-viewer/src/themes/vaporwave.less @@ -62,16 +62,8 @@ perspective-string-column-style[theme="Vaporwave"] { --pp-color-1: rgb(9, 33, 50); --pp-color-2: rgb(66, 182, 230); --rt-pos-cell--color: rgb(66, 182, 230) !important; - } - - regular-table td, - th { --rt-hover--border-color: var(--pp-color-1) !important; - } - - regular-table table tbody tr td, - regular-table table tbody tr th { - border-top-color: rgb(19, 33, 50) !important; + --rt--border-color: rgb(19, 33, 50) !important; } regular-table table tbody th:empty { diff --git a/tools/perspective-scripts/publish.mjs b/tools/perspective-scripts/publish.mjs index 56f00a43cf..155c04789d 100644 --- a/tools/perspective-scripts/publish.mjs +++ b/tools/perspective-scripts/publish.mjs @@ -64,14 +64,21 @@ async function download_release_assets(releases) { async function publish_release_assets(releases) { if (process.env.COMMIT) { for (const release of releases) { - if (release.name.endsWith("whl")) { + if ( + (release.name.endsWith("whl") || + release.name.endsWith("tar.gz")) && + release.name.indexOf("wasm") === -1 + ) { sh`twine upload ${release.name}`.runSync(); - } else { + } else if (release.name.endsWith(".tgz")) { sh`npm publish ${release.name}`.runSync(); } } - sh`cargo publish`.cwd("rust/perspective-viewer").runSync(); + // `node_modules` is considered dirty and we've already checked git status below. + sh`cargo publish --allow-dirty` + .cwd("rust/perspective-viewer") + .runSync(); } else { console.warn(`COMMIT not specified, aborting`); }