New GitHub Pages site

.gitignore

@@ -196,3 +196,4 @@ docs/static/features
 results.debug.json
 
 tools/perspective-build/lib
+docs/.docusaurus

README.md

@@ -6,31 +6,27 @@
 [![Build Status](https://github.com/finos/perspective/actions/workflows/build.yml/badge.svg?branch=master&event=push)](https://github.com/finos/perspective/actions/workflows/build.yml)
 
 Perspective is an <i>interactive</i> analytics and data visualization component,
-which is especially well-suited for <i>large</i> and/or <i>streaming</i> datasets.
-Originally developed at J.P. Morgan and open-sourced through the
-[Fintech Open Source Foundation (FINOS)](https://www.finos.org/),
-Perspective makes it simple to build user-configurable
-analytics entirely in the browser, or in concert with Python and
-[Jupyterlab](https://jupyterlab.readthedocs.io/en/stable/).
-Use it to create reports, dashboards, notebooks and applications, with static
-data or streaming updates via [Apache Arrow](https://arrow.apache.org/).
-
-- A fast, memory efficient streaming query engine, written in
-  C++ and compiled for both [WebAssembly](https://webassembly.org/) and
-  [Python](https://www.python.org/) with support for (read/write/stream)ing
-  [Apache Arrow](https://arrow.apache.org/), and a high-performance columnar
-  expression language based on [ExprTK](https://github.com/ArashPartow/exprtk).
-
-- A framework-agnostic User Interface
-  [Custom Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements),
-  powered either in-browser via WebWorker (WebAssembly) or virtually via
-  WebSocket server (Python/Node), as well as a suite of Datagrid and
-  [D3FC](https://d3fc.io/) Chart plugins.
-
-- A [JupyterLab](https://jupyter.org/) widget and Python client library, for
-  interactive data analysis in a notebook, as well as _scalable_ production
-  [Voila](https://github.com/voila-dashboards/voila) and
-  [Holoviz](https://panel.holoviz.org/) applications.
+which is especially well-suited for <i>large</i> and/or <i>streaming</i>
+datasets. Use it to create user-configurable reports, dashboards, notebooks and
+applications, then deploy stand-alone in the browser, or in concert with Python
+and/or [Jupyterlab](https://jupyterlab.readthedocs.io/en/stable/).
+
+### Features
+
+-   A fast, memory efficient streaming query engine, written in
+    C++ and compiled for both [WebAssembly](https://webassembly.org/) and
+    [Python](https://www.python.org/), with read/write/streaming for
+    [Apache Arrow](https://arrow.apache.org/), and a high-performance columnar
+    expression language based on [ExprTK](https://github.com/ArashPartow/exprtk).
+
+-   A framework-agnostic User Interface packaged as a
+    [Custom Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements),
+    powered either in-browser via WebAssembly or virtually via
+    WebSocket server (Python/Node).
+
+-   A [JupyterLab](https://jupyter.org/) widget and Python client library, for
+    interactive data analysis in a notebook, as well as _scalable_ production
+    [Voila](https://github.com/voila-dashboards/voila) applications.
 
 <br/>
 <img width="770" src="https://github.com/finos/perspective/blob/gh-pages/img/demo_large.gif?raw=true">

docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    presets: [require.resolve("@docusaurus/core/lib/babel/preset")],
+};

docs/build.js

@@ -0,0 +1,146 @@
+const puppeteer = require("puppeteer");
+const fs = require("fs");
+const cp = require("child_process");
+const EXAMPLES = require("./src/components/ExampleGallery/features.js").default;
+const {convert} = require("@finos/perspective-viewer/dist/cjs/migrate.js");
+
+const DEFAULT_VIEWPORT = {
+    width: 400,
+    height: 300,
+};
+
+function shuffle(array) {
+    let currentIndex = array.length,
+        randomIndex;
+
+    // While there remain elements to shuffle.
+    while (currentIndex != 0) {
+        // Pick a remaining element.
+        randomIndex = Math.floor(Math.random() * currentIndex);
+        currentIndex--;
+
+        // And swap it with the current element.
+        [array[currentIndex], array[randomIndex]] = [
+            array[randomIndex],
+            array[currentIndex],
+        ];
+    }
+
+    return array;
+}
+
+async function run_with_theme(page, is_dark = false) {
+    await page.goto("http://localhost:8080/");
+    await page.setContent(template(is_dark));
+    await page.setViewport(DEFAULT_VIEWPORT);
+    await page.evaluate(async function () {
+        const viewer = document.querySelector("perspective-viewer");
+        await viewer.flush();
+        await viewer.toggleConfig();
+    });
+
+    const files = [];
+    for (const idx in EXAMPLES) {
+        const {config, viewport} = EXAMPLES[idx];
+        await await page.setViewport(viewport || DEFAULT_VIEWPORT);
+        const new_config = convert(
+            Object.assign(
+                {
+                    plugin: "Datagrid",
+                    group_by: [],
+                    expressions: [],
+                    split_by: [],
+                    sort: [],
+                    aggregates: {},
+                },
+                config
+            )
+        );
+        console.log(JSON.stringify(new_config));
+        await page.evaluate(async (config) => {
+            const viewer = document.querySelector("perspective-viewer");
+            await viewer.reset();
+            await viewer.restore(config);
+        }, new_config);
+
+        await page.waitForSelector("perspective-viewer:not([updating])");
+        const screenshot = await page.screenshot({
+            captureBeyondViewport: false,
+            fullPage: true,
+        });
+
+        const name = `static/features/feature_${idx}${
+            is_dark ? "_dark" : ""
+        }.png`;
+
+        files.push(name);
+        fs.writeFileSync(name, screenshot);
+        cp.execSync(`convert ${name} -resize 200x150 ${name}`);
+    }
+
+    cp.execSync(
+        `montage -mode concatenate -tile 5x ${shuffle(files).join(
+            " "
+        )} static/features/montage${is_dark ? "_dark" : "_light"}.png`
+    );
+
+    // fs.writeFileSync("features/index.html", `<html><style>img{width:200px;height:150px;</style><body>${html.join("")}</body></html>`);
+}
+
+async function run() {
+    const browser = await puppeteer.launch({headless: true});
+    const page = await browser.newPage();
+    await run_with_theme(page);
+    await run_with_theme(page, true);
+    await browser.close();
+}
+
+function template(is_dark) {
+    return `
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+        <script src="/node_modules/@finos/perspective/dist/umd/perspective.js"></script>
+        <script src="/node_modules/@finos/perspective-viewer/dist/umd/perspective-viewer.js"></script>
+        <script src="/node_modules/@finos/perspective-viewer-datagrid/dist/umd/perspective-viewer-datagrid.js"></script>
+        <script src="/node_modules/@finos/perspective-viewer-d3fc/dist/umd/perspective-viewer-d3fc.js"></script>
+        <link rel='stylesheet' href="/node_modules/@finos/perspective-viewer/dist/css/material${
+            is_dark ? "-dark" : ""
+        }.css">
+        <style>
+            perspective-viewer {
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <perspective-viewer editable>
+        </perspective-viewer>
+        <script>
+            const WORKER = window.perspective.worker();
+            async function on_load() {
+                var el = document.getElementsByTagName('perspective-viewer')[0];
+                const plugin = await el.getPlugin("Heatmap");
+                plugin.render_warning = false;
+                const table = WORKER.table(this.response);
+                el.load(table);
+                el.toggleConfig();
+            }
+            window.addEventListener('DOMContentLoaded', function () {
+                var xhr = new XMLHttpRequest();
+                xhr.open('GET', '/node_modules/superstore-arrow/superstore.arrow', true);
+                xhr.responseType = "arraybuffer"
+                xhr.onload = on_load.bind(xhr);
+                xhr.send(null);
+            });
+        </script>
+    </body>
+    </html>`.trim();
+}
+
+run();

docs/md/development.md → docs/docs/development.md

@@ -27,11 +27,11 @@ automatically call the correct build and test tools.
 `Perspective.js` and `perspective-python` **require** the following system
 dependencies to be installed:
 
-- [CMake](https://cmake.org/) (version 3.15.4 or higher)
-- [Boost](https://www.boost.org/) (version 1.67 or higher, must be built - not
-  header-only)
-- [Flatbuffers](https://google.github.io/flatbuffers/flatbuffers_guide_building.html)
-- [wasm-pack](https://github.com/rustwasm/wasm-pack)
+-   [CMake](https://cmake.org/) (version 3.15.4 or higher)
+-   [Boost](https://www.boost.org/) (version 1.67 or higher, must be built - not
+    header-only)
+-   [Flatbuffers](https://google.github.io/flatbuffers/flatbuffers_guide_building.html)
+-   [wasm-pack](https://github.com/rustwasm/wasm-pack)
 
 **_This list may be non-exhaustive depending on your OS/environment; please open
 a thread in [Discussions](https://github.com/finos/perspective/discussions) if
@@ -258,9 +258,9 @@ pip install -vv perspective-python
 
 The most common culprits are:
 
-- CMake version too old
-- Boost headers are missing or too old
-- Flatbuffers not installed prior to installing Perspective
+-   CMake version too old
+-   Boost headers are missing or too old
+-   Flatbuffers not installed prior to installing Perspective
 
 #### Timezones in Python Tests
 

docs/md/expressions.md → docs/docs/expressions.md

@@ -3,8 +3,7 @@ id: expressions
 title: Expression Columns
 ---
 
-<script src="../../../../js/index.js"></script>
-<link rel="stylesheet" href="../../../../css/concepts/index.css">
+<style>{"#new_column_highlight perspective-viewer {--column-add--border:2px solid red}"}</style>
 
 Perspective supports _expression columns_, which are virtual columns calculated
 as part of the `View`, optionally using values from its underlying `Table`'s
@@ -16,11 +15,9 @@ language, an extended version of
 ## UI
 
 Expression columns can be created in `<perspective-viewer>` by clicking the
-"New Column" button at the bottom of the column list (in
-<span style="color:red">red</span> below), or via the API by adding the
+"New Column" button at the bottom of the column list (in <span style={{color:"red"}}>red</span> below), or via the API by adding the
 expression to the `expressions` config key when calling `restore()`.
 
-<style>#new_column_highlight perspective-viewer {--column-add--border:2px solid red}</style>
 <div id="new_column_highlight">
 <perspective-viewer></perspective-viewer>
 </div>
@@ -56,7 +53,7 @@ its own custom extensions and syntax.
 In addition to `float` values which ExprTK supports natively, Perspective's
 expression language also supports Perspective's other types `date`, `datetime`,
 `integer`, `boolean`; as well as rudimentary type-checking, which will report
-an <span style="color:red">error</span> when the values/columns supplied as
+an <span>error</span> when the values/columns supplied as
 arguments cannot be resolved to the expected type, e.g. `length(x)` expects an
 argument `x` of type `string` and is not a valid expression for an `x` of
 another type. Perspective supplies a set of _cast_ functions for converting