@perspective-dev/viewer 4.2.0 → 4.4.0

package/src/themes/themes.css

@@ -0,0 +1,22 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ */
+
+@import "./pro.css";
+@import "./pro-dark.css";
+@import "./monokai.css";
+@import "./solarized.css";
+@import "./solarized-dark.css";
+@import "./vaporwave.css";
+@import "./gruvbox.css";
+@import "./gruvbox-dark.css";
+@import "./dracula.css";
+@import "./botanical.css";

package/src/themes/vaporwave.css

@@ -0,0 +1,256 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ */
+
+@import "./defaults.css";
+
+perspective-viewer,
+perspective-viewer[theme="Vaporwave"] {
+    --psp-theme-name: "Vaporwave";
+}
+
+perspective-viewer[theme="Vaporwave"] {
+    /* perspective-viewer-pro-dark--colors (overrides) */
+    background-color: #242526;
+    color: white;
+    --psp--color: white;
+    --psp-active--color: #2770a9;
+    --psp-error--color: #ff9485;
+    --psp-inactive--color: #61656e;
+    --psp-inactive--border-color: #4c505b;
+    --psp--background-color: #242526;
+    --psp-active--background: rgba(39, 113, 170, 0.5);
+    --psp-expression--operator--color: #c5c9d0;
+    --psp-expression--function--color: #22a0ce;
+    --psp-expression--psp-error--color: rgb(255, 136, 136);
+    --psp-calendar--filter: invert(1);
+    --psp-warning--color: #242526;
+    --psp-warning--background: var(--psp--color);
+
+    --psp-icon--select-arrow--mask-image: var(
+        --psp-icon--select-arrow-light--mask-image
+    );
+
+    --psp-icon--select-arrow-hover--mask-image: var(
+        --psp-icon--select-arrow-dark--mask-image
+    );
+
+    --psp-code-editor--symbol--color: white;
+    --psp-code-editor--literal--color: #7dc3f0;
+    --psp-code-editor--operator--color: rgb(23, 166, 123);
+    --psp-code-editor--comment--color: rgb(204, 120, 48);
+    --psp-code-editor--column--color: #e18ee1;
+
+    /* perspective-viewer-pro-dark--datagrid */
+    --psp-datagrid--pos-cell--color: #7dc3f0;
+    --psp-datagrid--neg-cell--color: #ff9485;
+
+    /* perspective-viewer-pro-dark--d3fc (overrides) */
+    --psp-d3fc--legend--color: #c5c9d0;
+    --psp-d3fc--treemap--labels: white;
+    --psp-d3fc--treemap--hover-highlight: white;
+    --psp-d3fc--tooltip--color: white;
+    --psp-d3fc--axis-ticks--color: #c5c9d0;
+    --psp-d3fc--axis-lines--color: #61656e;
+    --psp-d3fc--gridline--color: #3b3f46;
+    --psp-d3fc--tooltip--background: rgba(42, 44, 47, 1);
+    --psp-d3fc--tooltip--border-color: #242526;
+    --psp-d3fc--legend--background: var(--psp--background-color);
+    --psp-d3fc--series--color: rgb(71, 120, 194);
+    --psp-d3fc--series-1--color: rgb(71, 120, 194);
+    --psp-d3fc--series-2--color: rgb(204, 120, 48);
+    --psp-d3fc--series-3--color: rgb(158, 84, 192);
+    --psp-d3fc--series-4--color: rgb(51, 150, 153);
+    --psp-d3fc--series-5--color: rgb(102, 114, 143);
+    --psp-d3fc--series-6--color: rgb(211, 103, 189);
+    --psp-d3fc--series-7--color: rgb(109, 124, 77);
+    --psp-d3fc--series-8--color: rgb(221, 99, 103);
+    --psp-d3fc--series-9--color: rgb(120, 104, 206);
+    --psp-d3fc--series-10--color: rgb(23, 166, 123);
+    --psp-d3fc--full-gradient--background: linear-gradient(
+        #dd6367 0%,
+        #242526 50%,
+        #3289c8 100%
+    );
+    --psp-d3fc--pos-gradient--background: linear-gradient(
+        #242526 0%,
+        #3289c8 100%
+    );
+    --psp-d3fc--neg-gradient--background: linear-gradient(
+        #dd6367 0%,
+        #242526 100%
+    );
+
+    /* perspective-viewer-pro-dark--openlayers (overrides) */
+    --psp-openlayers--tile-url: "http://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png";
+    --psp-openlayers--attribution--filter: invert(1) hue-rotate(180deg);
+    --psp-openlayers--element--background: #212c2f;
+    --psp-openlayers--category-1--color: rgb(71, 120, 194);
+    --psp-openlayers--category-2--color: rgb(204, 120, 48);
+    --psp-openlayers--category-3--color: rgb(158, 84, 192);
+    --psp-openlayers--category-4--color: rgb(51, 150, 153);
+    --psp-openlayers--category-5--color: rgb(102, 114, 143);
+    --psp-openlayers--category-6--color: rgb(211, 103, 189);
+    --psp-openlayers--category-7--color: rgb(109, 124, 77);
+    --psp-openlayers--category-8--color: rgb(221, 99, 103);
+    --psp-openlayers--category-9--color: rgb(120, 104, 206);
+    --psp-openlayers--category-10--color: rgb(23, 166, 123);
+    --psp-openlayers--gradient--background: linear-gradient(
+        #dd6367 0%,
+        #242526 50%,
+        #3289c8 100%
+    );
+
+    /* perspective-viewer-vaporwave--colors */
+    color: #49acff;
+    background-color: rgb(7, 8, 29) !important;
+    --psp--color: #49acff;
+    --psp-inactive--color: rgb(19, 33, 50) !important;
+    --psp-inactive--border-color: var(--psp-inactive--color);
+    --psp--background-color: rgb(7, 8, 29) !important;
+
+    /* perspective-viewer-vaporwave--animation */
+    --psp-status-icon--updating-keyframes-start--filter: opacity(1);
+    --psp-status-icon--updating-keyframes-end--filter: opacity(0);
+    --psp-status-icon--updating-keyframes-start--transform: scale(1);
+    --psp-status-icon--updating-keyframes-end--transform: scale(0.5);
+    --psp-status-icon--keyframes-start--transform: scale(1.25);
+    --psp-status-icon--keyframes-end--transform: scale(1);
+
+    /* perspective-viewer-vaporwave--datagrid */
+    --pp-color-1: #092132;
+    --pp-color-2: #42b6e6;
+    --psp-datagrid--pos-cell--color: #42b6e6 !important;
+    --psp-datagrid--hover--border-color: var(--pp-color-1) !important;
+
+    /* FIXME: broken in shadow DOM */
+    regular-table table tbody th:empty {
+        background: linear-gradient(
+            to right,
+            transparent 9px,
+            rgb(19, 33, 50) 10px,
+            transparent 11px
+        );
+        background-repeat: no-repeat;
+        background-position: 0px -10px;
+    }
+
+    /* perspective-viewer-vaporwave--d3fc */
+    --psp-d3fc--axis-ticks--color: #49acff;
+    --psp-d3fc--gridline--color: rgb(19, 33, 50);
+    --psp-d3fc--series--color: #01cdfe;
+    --psp-d3fc--series-1--color: #01cdfe;
+    --psp-d3fc--series-2--color: #ff71ce;
+    --psp-d3fc--series-3--color: #05ffa1;
+    --psp-d3fc--series-4--color: #b967ff;
+    --psp-d3fc--series-5--color: #fffb96;
+
+    --psp-d3fc--series-6--color: hsl(192, 99%, 25%);
+    --psp-d3fc--series-7--color: hsl(321, 100%, 36%);
+    --psp-d3fc--series-8--color: hsl(192, 99%, 25%);
+    --psp-d3fc--series-9--color: hsl(157, 100%, 25%);
+    --psp-d3fc--series-10--color: hsl(272, 100%, 35%);
+
+    --psp-d3fc--neg-gradient--background: linear-gradient(
+        #f3d431,
+        #efb92d,
+        #ed9c25,
+        #eb7e20,
+        #e75d1e,
+        #d14632,
+        #b03e38,
+        #8c3a36,
+        #643633,
+        #07081d
+    ) !important;
+
+    --psp-d3fc--pos-gradient--background: linear-gradient(
+        #07081d,
+        #2e4463,
+        #1e588a,
+        #086da7,
+        #0082b9,
+        #039ac7,
+        #12b1d4,
+        #2bc8e2,
+        #3ddff0,
+        #61f4fb
+    ) !important;
+
+    --psp-d3fc--full-gradient--background: linear-gradient(
+        #f3d431,
+        #efb92d,
+        #ed9c25,
+        #eb7e20,
+        #e75d1e,
+        #d14632,
+        #b03e38,
+        #8c3a36,
+        #643633,
+        #07081d,
+        #2e4463,
+        #1e588a,
+        #086da7,
+        #0082b9,
+        #039ac7,
+        #12b1d4,
+        #2bc8e2,
+        #3ddff0,
+        #61f4fb
+    ) !important;
+}
+
+perspective-copy-menu[theme="Vaporwave"],
+perspective-export-menu[theme="Vaporwave"],
+perspective-dropdown[theme="Vaporwave"],
+perspective-date-column-style[theme="Vaporwave"],
+perspective-datetime-column-style[theme="Vaporwave"],
+perspective-number-column-style[theme="Vaporwave"],
+perspective-string-column-style[theme="Vaporwave"] {
+    /* perspective-viewer-pro-dark--colors (overrides) */
+    background-color: #242526;
+    color: white;
+    --psp--color: white;
+    --psp-active--color: #2770a9;
+    --psp-error--color: #ff9485;
+    --psp-inactive--color: #61656e;
+    --psp-inactive--border-color: #4c505b;
+    --psp--background-color: #242526;
+    --psp-active--background: rgba(39, 113, 170, 0.5);
+    --psp-expression--operator--color: #c5c9d0;
+    --psp-expression--function--color: #22a0ce;
+    --psp-expression--psp-error--color: rgb(255, 136, 136);
+    --psp-calendar--filter: invert(1);
+    --psp-warning--color: #242526;
+    --psp-warning--background: var(--psp--color);
+    --psp-icon--select-arrow--mask-image: var(
+        --psp-icon--select-arrow-light--mask-image
+    );
+    --psp-icon--select-arrow-hover--mask-image: var(
+        --psp-icon--select-arrow-dark--mask-image
+    );
+    --psp-code-editor--symbol--color: white;
+    --psp-code-editor--literal--color: #7dc3f0;
+    --psp-code-editor--operator--color: rgb(23, 166, 123);
+    --psp-code-editor--comment--color: rgb(204, 120, 48);
+    --psp-code-editor--column--color: #e18ee1;
+
+    border: 1px solid #4c505b;
+
+    /* perspective-viewer-vaporwave--colors */
+    color: #49acff;
+    --psp--color: #49acff;
+    --psp-inactive--color: rgb(19, 33, 50) !important;
+    --psp-inactive--border-color: var(--psp-inactive--color);
+    --psp--background-color: rgb(7, 8, 29) !important;
+
+    background-color: #07081d;
+}

package/src/ts/extensions.ts

@@ -14,7 +14,41 @@ import type { HTMLPerspectiveViewerPluginElement } from "./plugin";
 import type { PerspectiveViewerElement } from "../../dist/wasm/perspective-viewer.js";
 import type React from "react";
 import type { ViewerConfigUpdate } from "./ts-rs/ViewerConfigUpdate.js";
-import type { ViewWindow } from "@perspective-dev/client";
+import type {
+    ViewWindow,
+    ViewConfigUpdate,
+    Filter,
+} from "@perspective-dev/client";
+
+export class PerspectiveSelectDetail {
+    selected: boolean;
+    row: Record<string, unknown>;
+    column_names?: string[];
+    removeConfigs: ViewConfigUpdate[];
+    insertConfigs: ViewConfigUpdate[];
+
+    constructor(
+        selected: boolean,
+        row: Record<string, unknown>,
+        column_names: string[],
+        removeConfigs: ViewConfigUpdate[],
+        insertConfigs: ViewConfigUpdate[],
+    ) {
+        this.selected = selected;
+        this.row = row;
+        this.column_names = column_names;
+        this.removeConfigs = removeConfigs;
+        this.insertConfigs = insertConfigs;
+    }
+
+    get removeFilters(): Filter[] {
+        return this.removeConfigs.flatMap((x) => x.filter ?? []);
+    }
+
+    get insertFilters(): Filter[] {
+        return this.insertConfigs.flatMap((x) => x.filter ?? []);
+    }
+}
 import type {
     ExportDropDownMenuElement,
     CopyDropDownMenuElement,
@@ -48,11 +82,15 @@ export type PerspectiveSelectEventDetail = {
 
 type ReactPerspectiveViewerAttributes<T> = React.HTMLAttributes<T>;
 
-type JsxPerspectiveViewerElement = { class?: string } & React.DetailedHTMLProps<
+type JsxPerspectiveViewerElement = {
+    class?: string;
+} & React.DetailedHTMLProps<
     ReactPerspectiveViewerAttributes<HTMLPerspectiveViewerElement>,
     HTMLPerspectiveViewerElement
 >;
 
+// React <19
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -61,6 +99,39 @@ declare global {
     }
 }
 
+// React >=19
+
+// Why are these `ts-ignore`? React 19 makes choice of JSX runtime in `tsconfig`
+// the determination of which runtime this needs to be, but this is chosen
+// by the user ... so I'm not sure what the React authors want from me here
+// exactly. Divination?
+
+// @ts-ignore
+declare module "react/jsx-runtime" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "perspective-viewer": JsxPerspectiveViewerElement;
+        }
+    }
+}
+
+// @ts-ignore
+declare module "react/jsx-dev-runtime" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "perspective-viewer": JsxPerspectiveViewerElement;
+        }
+    }
+}
+
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "perspective-viewer": JsxPerspectiveViewerElement;
+        }
+    }
+}
+
 // Custom Elements extensions
 
 declare global {

package/src/ts/perspective-viewer.ts

@@ -35,6 +35,7 @@ export { IPerspectiveViewerPlugin } from "./plugin";
 export { HTMLPerspectiveViewerPluginElement } from "./plugin";
 
 export type * from "./extensions.ts";
+export { PerspectiveSelectDetail } from "./extensions.ts";
 export type * from "./ts-rs/ViewerConfigUpdate.d.ts";
 export type * from "./ts-rs/ColumnConfigValues.d.ts";
 export type * from "./ts-rs/Filter.d.ts";

package/src/ts/ts-rs/GroupRollupMode.ts

@@ -0,0 +1,3 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type GroupRollupMode = "rollup" | "flat" | "total";

package/src/ts/ts-rs/ViewerConfigUpdate.ts

@@ -4,6 +4,7 @@ import type { ColumnConfigValues } from "./ColumnConfigValues.js";
 import type { Expressions } from "./Expressions.js";
 import type { Filter } from "./Filter.js";
 import type { FilterReducer } from "./FilterReducer.js";
+import type { GroupRollupMode } from "./GroupRollupMode.js";
 import type { OptionalUpdate } from "./OptionalUpdate.js";
 import type { PluginConfig } from "./PluginConfig.js";
 import type { Sort } from "./Sort.js";
@@ -87,4 +88,4 @@ expressions?: Expressions,
  * applied to columns in the `View` constructor using a dictionary of
  * column name to aggregate function name.
  */
-aggregates?: { [key in string]?: Aggregate }, group_by_depth?: number, filter_op?: FilterReducer, };
+aggregates?: { [key in string]?: Aggregate }, group_by_depth?: number, filter_op?: FilterReducer, group_rollup_mode?: GroupRollupMode, };

package/tsconfig.json

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "jsx": "preserve",
         "strict": true,
         "module": "ESNext",
         "target": "ESNext",

package/src/less/column-dropdown.less

@@ -1,95 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-@import "dom/scrollbar.less";
-
-@mixin icon {
-    background-repeat: no-repeat;
-    background-color: var(--icon--color);
-    content: "";
-    display: inline-block;
-    -webkit-mask-size: cover;
-    mask-size: cover;
-}
-
-:host {
-    box-sizing: border-box;
-    position: fixed;
-    z-index: 10000;
-    outline: none;
-    font-size: 0.75em;
-    border: inherit;
-    // box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
-    user-select: none;
-    background-color: var(--icon--color, #fff) !important;
-    color: var(--plugin--background, #333) !important;
-    // padding: 6px 8px;
-    border: 1px solid var(--icon--color) !important;
-    max-width: 300px;
-    overflow: hidden;
-    max-height: 600px;
-    overflow: auto;
-    @include scrollbar;
-
-    display: flex;
-    flex-direction: column;
-
-    .selected {
-        background-color: var(--plugin--background) !important;
-        color: var(--icon--color) !important;
-    }
-
-    span {
-        cursor: pointer;
-        padding: 4px 5px;
-    }
-
-    .no-results {
-        padding: 3px 24px 6px 11px;
-        color: var(--error--color);
-        font-size: 8px;
-    }
-
-    .no-results:before {
-        content: var(--no-results--content, "Invalid Column");
-    }
-
-    #add-expression {
-        &:before {
-            @include icon;
-            width: 14px;
-            height: 12px;
-            margin-right: 5px;
-            -webkit-mask-image: var(--add-expression-icon--mask-image);
-            mask-image: var(--add-expression-icon--mask-image);
-        }
-    }
-}
-
-:host(:hover) {
-    .selected {
-        background-color: var(--icon--color, #fff) !important;
-        color: var(--plugin--background, #333) !important;
-    }
-
-    span:hover,
-    span.selected:hover {
-        background-color: var(--plugin--background) !important;
-        color: var(--icon--color) !important;
-    }
-}
-
-:host(.no-results) {
-    overflow: hidden;
-    background-color: transparent !important;
-    border: none !important;
-}