New plugin API, viewer-charts features, replace @perspective-dev/viewer-openlayers

.github/workflows/build.yaml

@@ -28,7 +28,7 @@ on:
             - docs/
             - examples/
             - rust/perspective-python/README.md
-    pull_request:
+    pull_request_target:
         branches:
             - master
     workflow_dispatch:
@@ -152,7 +152,7 @@ jobs:
             - name: WebAssembly Build
               run: pnpm run build --ci
               env:
-                  PACKAGE: "server,client,viewer,viewer-datagrid,viewer-charts,viewer-openlayers,workspace,react"
+                  PACKAGE: "server,client,viewer,viewer-datagrid,viewer-charts,workspace,react"
                   # PSP_USE_CCACHE: 1
 
             - uses: actions/upload-artifact@v4
@@ -166,7 +166,6 @@ jobs:
                       rust/perspective-viewer/src
                       packages/viewer-charts/dist
                       packages/viewer-datagrid/dist
-                      packages/viewer-openlayers/dist
                       packages/workspace/dist
                       packages/react/dist
 
@@ -649,14 +648,24 @@ jobs:
                   path: .
 
             - name: Run Tests
+              id: run_tests
               run: pnpm run test -- --fetch-snapshots
               env:
-                  PACKAGE: "server,client,viewer,viewer-datagrid,viewer-charts,viewer-openlayers,workspace,react"
+                  PACKAGE: "server,client,viewer,viewer-datagrid,viewer-charts,workspace,react"
                   PSP_SNAPSHOT_REPO: ${{ vars.PSP_SNAPSHOT_REPO }}
                   PSP_SNAPSHOT_TOKEN: ${{ secrets.PSP_SNAPSHOT_TOKEN }}
                   PSP_SNAPSHOT_REF: ${{ github.head_ref || github.ref_name }}
                   # PSP_USE_CCACHE: 1
 
+            - name: Upload Test Failures
+              if: ${{ failure() && steps.run_tests.outcome == 'failure' }}
+              uses: actions/upload-artifact@v4
+              with:
+                  name: perspective-js-test-results
+                  path: tools/test/dist/results
+                  if-no-files-found: ignore
+                  overwrite: true
+
     # ,--,--'      .   .-,--.     .  .
     # `- | ,-. ,-. |-   '|__/ . . |- |-. ,-. ,-.
     #  , | |-' `-. |    ,|    | | |  | | | | | |
@@ -1020,9 +1029,6 @@ jobs:
             - run: pnpm pack --pack-destination=../..
               working-directory: ./packages/viewer-charts
 
-            - run: pnpm pack --pack-destination=../..
-              working-directory: ./packages/viewer-openlayers
-
             - run: pnpm pack --pack-destination=../..
               working-directory: ./packages/workspace
 

docs/md/how_to/javascript/installation.md

@@ -13,16 +13,14 @@ which modules they need. The main modules are:
   includes the core data engine module as a dependency.
 
 `<perspective-viewer>` by itself only implements a trivial debug renderer, which
-prints the currently configured `view()` as a CSV. Plugin modules for popular
-JavaScript libraries, such as [d3fc](https://d3fc.io/), are packaged separately
-and must be imported individually.
+prints the currently configured `view()` as a CSV. Plugin modules are packaged
+separately and must be imported individually.
 
 - `@perspective-dev/viewer-datagrid`
   A custom high-performance data-grid component based on HTML `<table>`.
 
 - `@perspective-dev/viewer-charts`
-  A `<perspective-viewer>` plugin for the [d3fc](https://d3fc.io) charting
-  library.
+  A set of charting components base on WebGL.
 
 When imported after `@perspective-dev/viewer`, the plugin modules will register
 themselves automatically, and the renderers they export will be available in the
@@ -44,7 +42,7 @@ installed separately. All Plugins are optional - but a `<perspective-viewer>`
 without Plugins would be rather boring!
 
 ```bash
-$ npm add @perspective-dev/viewer-charts @perspective-dev/viewer-datagrid @perspective-dev/viewer-openlayers
+$ npm add @perspective-dev/viewer-charts @perspective-dev/viewer-datagrid
 ```
 
 ## Node.js

docs/src/components/gallery.ts

@@ -11,7 +11,7 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import EXAMPLES from "../data/features.js";
-import { SUPERSTORE_TABLE } from "../data/superstore.js";
+import { WORKER, SUPERSTORE_TABLE } from "../data/superstore.js";
 import { getColorMode, getPerspectiveTheme } from "./theme.js";
 
 function showOverlay(index: number) {
@@ -31,9 +31,10 @@ function showOverlay(index: number) {
     document.body.appendChild(overlay);
 
     SUPERSTORE_TABLE.then((table: any) => {
-        viewer.load(table);
+        viewer.load(WORKER);
         viewer.restore({
             plugin: "Datagrid",
+            table: "superstore",
             group_by: [],
             expressions: {},
             split_by: [],
@@ -61,9 +62,7 @@ export async function initGallery(container: HTMLElement) {
     img.alt = "Perspective feature gallery";
     img.src = `/features/montage${isDark ? "_dark" : "_light"}.png`;
     img.addEventListener("click", (event: MouseEvent) => {
-        const col = Math.floor(
-            (event.offsetX / img.offsetWidth) * map.columns,
-        );
+        const col = Math.floor((event.offsetX / img.offsetWidth) * map.columns);
         const row = Math.floor((event.offsetY / img.offsetHeight) * rows);
         const tileIndex = row * map.columns + col;
         const featureIndex = map.order[tileIndex];

docs/src/data/superstore.ts

@@ -14,9 +14,12 @@ import { worker } from "./worker.js";
 // @ts-ignore
 import SUPERSTORE_URL from "superstore-arrow/superstore.lz4.arrow";
 
+export const WORKER = worker();
+
 export const SUPERSTORE_TABLE = (async function () {
-    const w = await worker();
     const req = await fetch(SUPERSTORE_URL);
     const arrow = await req.arrayBuffer();
-    return await w.table(arrow.slice());
+    return await WORKER.then((w) =>
+        w.table(arrow.slice(), { name: "superstore" }),
+    );
 })();

docs/test/js/examples.spec.mts

@@ -67,8 +67,6 @@ test.describe("Examples", () => {
             let selector = "";
             if (new_config.plugin === "Datagrid") {
                 selector = "perspective-viewer-datagrid";
-            } else if (new_config.plugin === "Map Scatter") {
-                selector = "perspective-viewer-openlayers-scatter";
             } else {
                 const plugin = new_config.plugin
                     .replace(/[-\/\s]/gi, "")

eslint.config.mjs

@@ -0,0 +1,101 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 tseslint from "typescript-eslint";
+// import globals from "globals";
+
+export default tseslint.config(
+    {
+        ignores: [
+            "docs/**",
+            "tools/**",
+            "rust/**",
+            "examples/**",
+            "packages/cli/**/*",
+            "packages/jupyterlab/**/*",
+            // "packages/viewer-charts/**/*",
+            // "packages/viewer-datagrid/**/*",
+            "packages/workspace/**/*",
+            "packages/react/**/*",
+
+            ".emsdk/**",
+            "**/py_modules/**",
+            "**/node_modules/**",
+            "**/dist/**",
+            "**/build/**",
+            "**/target/**",
+            "**/pkg/**",
+        ],
+    },
+    ...tseslint.configs.recommended,
+    {
+        files: ["**/*.{ts,mts,tsx}"],
+        languageOptions: {
+            parserOptions: {
+                projectService: true,
+                tsconfigRootDir: import.meta.dirname,
+            },
+            // globals: {
+            //     ...globals.browser,
+            //     ...globals.node,
+            // },
+        },
+        rules: {
+            "@typescript-eslint/no-explicit-any": "off",
+            curly: "warn",
+            "padding-line-between-statements": [
+                "warn",
+                { blankLine: "always", prev: "block-like", next: "*" },
+            ],
+            "@typescript-eslint/no-unused-vars": [
+                "warn",
+                {
+                    args: "none",
+                    varsIgnorePattern: "^_",
+                    caughtErrorsIgnorePattern: "^_",
+                },
+            ],
+
+            // // This is why we can't have nice things. I like this rule, but
+            // // `prettier` doesn't, so we conform or perish.
+            //
+            // "lines-around-comment": [
+            //     "warn",
+            //     {
+            //         beforeLineComment: true,
+            //         beforeBlockComment: true,
+            //     },
+            // ],
+            "@typescript-eslint/no-empty-object-type": "off",
+            "@typescript-eslint/no-unused-expressions": "off",
+            "@typescript-eslint/no-this-alias": "off",
+            "@typescript-eslint/no-require-imports": "off",
+            "@typescript-eslint/ban-ts-comment": "off",
+            "@typescript-eslint/no-namespace": "off",
+            "@typescript-eslint/no-wrapper-object-types": "off",
+            "@typescript-eslint/no-unsafe-function-type": "off",
+            "no-empty": "off",
+            "no-prototype-builtins": "off",
+            "no-control-regex": "off",
+            "no-useless-escape": "off",
+            "no-async-promise-executor": "off",
+            "no-cond-assign": "off",
+            "no-misleading-character-class": "off",
+        },
+    },
+    {
+        files: ["examples/**/*.{ts,mts,tsx}", "tools/bench/**/*.{ts,mts,tsx}"],
+        rules: {
+            "@typescript-eslint/no-unused-vars": "warn",
+        },
+    },
+);

examples/blocks/package.json

@@ -16,7 +16,6 @@
         "@perspective-dev/viewer": "workspace:",
         "@perspective-dev/viewer-charts": "workspace:",
         "@perspective-dev/viewer-datagrid": "workspace:",
-        "@perspective-dev/viewer-openlayers": "workspace:",
         "@perspective-dev/workspace": "workspace:",
         "superstore-arrow": "catalog:"
     },

examples/blocks/src/dataset/index.html

@@ -182,6 +182,13 @@
                 if (state.table) {
                     // await viewer.eject();
                     // await window.psp_workspace.removeTable("superstore");
+                    for (const viewer of window.psp_workspace.children) {
+                        const cfg = await viewer.save();
+                        if (cfg.table === "superstore") {
+                            await viewer.eject();
+                        }
+                    }
+
                     await state.table.then((x) => x.delete({ lazy: true }));
                     state.table = undefined;
                 }

examples/blocks/src/evictions/index.html

@@ -10,7 +10,6 @@
             import "/node_modules/@perspective-dev/viewer/dist/cdn/perspective-viewer.js";
             import "/node_modules/@perspective-dev/viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js";
             import "/node_modules/@perspective-dev/viewer-charts/dist/cdn/perspective-viewer-charts.js";
-            import "/node_modules/@perspective-dev/viewer-openlayers/dist/cdn/perspective-viewer-openlayers.js";
 
             import { worker } from "/node_modules/@perspective-dev/client/dist/cdn/perspective.js";
 

examples/blocks/src/file/file.js

@@ -13,7 +13,6 @@
 import "/node_modules/@perspective-dev/viewer/dist/cdn/perspective-viewer.js";
 import "/node_modules/@perspective-dev/viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js";
 import "/node_modules/@perspective-dev/viewer-charts/dist/cdn/perspective-viewer-charts.js";
-import "/node_modules/@perspective-dev/viewer-openlayers/dist/cdn/perspective-viewer-openlayers.js";
 
 import perspective from "/node_modules/@perspective-dev/client/dist/cdn/perspective.js";
 

examples/blocks/src/fractal/index.css

@@ -19,8 +19,9 @@ perspective-viewer {
 
 perspective-viewer[theme="Pro Light"],
 perspective-viewer[theme="Pro Dark"] {
-    --psp-d3fc--pos-gradient--background: linear-gradient(
-        #94d0ff,
+    --psp-charts--gradient--background: linear-gradient(
+        #000 0%,
+        #94d0ff 50%,
         #8795e8,
         #966bff,
         #ad8cff,
@@ -80,8 +81,9 @@ perspective-viewer[theme="Pro Dark"] {
 span,
 input,
 button {
-    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
-        "Consolas", "Liberation Mono", monospace;
+    font-family:
+        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+        "Liberation Mono", monospace;
     font-size: 12px;
     background: none;
     margin: 0px;
@@ -104,8 +106,9 @@ input {
 }
 
 input[type="number"] {
-    font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo",
-        "Consolas", "Liberation Mono", monospace;
+    font-family:
+        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+        "Liberation Mono", monospace;
 }
 
 input:focus {
@@ -157,6 +160,7 @@ input[type="range"]::-webkit-slider-thumb {
 
 input[type="range"]::-moz-range-thumb {
     -webkit-appearance: none;
+    appearance: none;
     pointer-events: all;
     width: 6px;
     height: 24px;
@@ -171,8 +175,12 @@ input[type="range"]::-webkit-slider-thumb:hover {
 }
 
 input[type="range"]::-webkit-slider-thumb:active {
-    box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
-    -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
+    box-shadow:
+        inset 0 0 3px #387bbe,
+        0 0 9px #387bbe;
+    -webkit-box-shadow:
+        inset 0 0 3px #387bbe,
+        0 0 9px #387bbe;
 }
 /* 
 input[type="number"] {

examples/blocks/src/fractal/index.js

@@ -150,8 +150,6 @@ function set_runnable() {
     window.run.disabled = false;
 }
 
-const heatmap_plugin = await window.viewer.getPlugin("Heatmap");
-heatmap_plugin.max_cells = 100000;
 make_range(xmin, xmax, "X");
 make_range(ymin, ymax, "Y");
 window.resolution.addEventListener("input", set_runnable);

examples/blocks/src/market/layouts.json

@@ -39,12 +39,7 @@
         "split_by": ["if(\"status\"!='open'){\"status\"}else{\"side\"}"],
         "columns": ["price"],
         "filter": [],
-        "sort": [
-            [
-                "if(\"status\"=='closed'){1}else if(\"status\"=='expired'){2}else{0}",
-                "col desc"
-            ]
-        ],
+        "sort": [],
         "expressions": {
             "if(\"status\"=='closed'){1}else if(\"status\"=='expired'){2}else{0}": "if(\"status\"=='closed'){1}else if(\"status\"=='expired'){2}else{0}",
             "if(\"status\"!='open'){\"status\"}else{\"side\"}": "if(\"status\"!='open'){\"status\"}else{\"side\"}",
@@ -64,12 +59,7 @@
             "if(\"status\"!='open'){\"status\"}else{\"side\"}"
         ],
         "filter": [],
-        "sort": [
-            [
-                "if(\"status\"=='closed'){1}else if(\"status\"=='expired'){2}else{0}",
-                "desc"
-            ]
-        ],
+        "sort": [],
         "expressions": {
             "if(\"status\"!='open'){\"status\"}else{\"side\"}": "if(\"status\"!='open'){\"status\"}else{\"side\"}",
             "if(\"status\"=='closed'){1}else if(\"status\"=='expired'){2}else{0}": "if(\"status\"=='closed'){1}else if(\"status\"=='expired'){2}else{0}"

examples/blocks/src/nypd/index.js

@@ -14,7 +14,6 @@ import "/node_modules/@perspective-dev/viewer/dist/cdn/perspective-viewer.js";
 import "/node_modules/@perspective-dev/workspace/dist/cdn/perspective-workspace.js";
 import "/node_modules/@perspective-dev/viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js";
 import "/node_modules/@perspective-dev/viewer-charts/dist/cdn/perspective-viewer-charts.js";
-import "/node_modules/@perspective-dev/viewer-openlayers/dist/cdn/perspective-viewer-openlayers.js";
 
 import perspective from "/node_modules/@perspective-dev/client/dist/cdn/perspective.js";