Merge pull request #2960 from finos/fix-export-html

texodus · web-flow · commit b71d515b28d8 · 2025-03-25T13:29:14.000-04:00
Fix export-to-html in `perspective-viewer`
diff --git a/rust/perspective-viewer/test/html/superstore-single-threaded.html b/rust/perspective-viewer/test/html/superstore-single-threaded.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script type="module" src="http://localhost:6598/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
+        <script type="module" src="http://localhost:6598/node_modules/@finos/perspective-test/load-viewer-csv-single-threaded.js"></script>
+        <link rel="stylesheet" href="http://localhost:6598/node_modules/@finos/perspective-viewer/dist/css/pro.css" />
+        <link rel="stylesheet" href="http://localhost:6598/node_modules/@fontsource/roboto-mono/400.css" />
+        <style>
+            perspective-viewer {
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <perspective-viewer></perspective-viewer>
+    </body>
+</html>
diff --git a/rust/perspective-viewer/test/js/export_table.spec.ts b/rust/perspective-viewer/test/js/export_table.spec.ts
@@ -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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { test, expect } from "@finos/perspective-test";
+import * as path from "node:path";
+
+test.beforeEach(async ({ page }) => {
+    const p = path.resolve(
+        "rust/perspective-viewer/test/html/superstore-single-threaded.html"
+    );
+
+    await page.goto(`file://${p}`);
+    await page.evaluate(async () => {
+        while (!window["__TEST_PERSPECTIVE_READY__"]) {
+            await new Promise((x) => setTimeout(x, 10));
+        }
+    });
+
+    await page.evaluate(async () => {
+        await document.querySelector("perspective-viewer")!.restore({
+            plugin: "Debug",
+        });
+    });
+});
+
+test.describe("Export button", () => {
+    test("Single threaded engine mode works", async ({ page }) => {
+        await page.evaluate(async () => {
+            const viewer = document.querySelector("perspective-viewer")!;
+            await viewer.restore({
+                group_by: ["State"],
+                columns: ["Sales", "Profit"],
+                settings: true,
+            });
+        });
+
+        const value = await page.evaluate(async () => {
+            return document.querySelector("perspective-viewer")!.innerText
+                .length;
+        });
+
+        // Superstore as a CSV
+        expect(value).toEqual(836);
+    });
+});
diff --git a/tools/perspective-esbuild-plugin/worker.js b/tools/perspective-esbuild-plugin/worker.js
@@ -74,7 +74,9 @@ exports.WorkerPlugin = function WorkerPlugin(options = {}) {
                         import worker from ${JSON.stringify(args.path)};
                         function make_host(a, b) {
                             function addEventListener(type, callback) {
-                                a.push(callback);
+                                if (type === "message") {
+                                    a.push(callback);
+                                }
                             }
 
                             function removeEventListener(callback) {
@@ -84,9 +86,9 @@ exports.WorkerPlugin = function WorkerPlugin(options = {}) {
                                 }
                             }
 
-                            function postMessage(msg) {
+                            function postMessage(msg, ports) {
                                 for (const listener of b) {
-                                    listener({data: msg});
+                                    listener({data: msg, ports: ports});
                                 }
                             }
 
diff --git a/tools/perspective-test/load-viewer-csv-single-threaded.js b/tools/perspective-test/load-viewer-csv-single-threaded.js
@@ -0,0 +1,30 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 "http://localhost:6598/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js";
+import perspective from "http://localhost:6598/node_modules/@finos/perspective/dist/cdn/perspective.js";
+
+async function load() {
+    let resp = await fetch(
+        "http://localhost:6598/node_modules/@finos/perspective-test/assets/superstore.csv"
+    );
+
+    let csv = await resp.text();
+    const viewer = document.querySelector("perspective-viewer");
+    const worker = await perspective.worker();
+    const table = worker.table(csv, { index: "Row ID" });
+    await viewer.load(table);
+    window.__TEST_WORKER__ = worker;
+}
+
+await load();
+window.__TEST_PERSPECTIVE_READY__ = true;
diff --git a/tools/perspective-test/src/js/start_test_server.ts b/tools/perspective-test/src/js/start_test_server.ts
@@ -61,7 +61,10 @@ async function cwd_static_file_handler(
             let content = await read_promise(filePath);
             if (typeof content !== "undefined") {
                 console.log(`200 ${url}`);
-                response.writeHead(200, { "Content-Type": contentType });
+                response.writeHead(200, {
+                    "Content-Type": contentType,
+                    "Access-Control-Allow-Origin": "*",
+                });
                 if (extname === ".arrow" || extname === ".feather") {
                     response.end(content, "utf-8");
                 } else {

Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,9 @@ exports.WorkerPlugin = function WorkerPlugin(options = {}) {`
`74`	`74`	`import worker from ${JSON.stringify(args.path)};`
`75`	`75`	`function make_host(a, b) {`
`76`	`76`	`function addEventListener(type, callback) {`
`77`		`- a.push(callback);`
	`77`	`+ if (type === "message") {`
	`78`	`+ a.push(callback);`
	`79`	`+ }`
`78`	`80`	`}`
`79`	`81`
`80`	`82`	`function removeEventListener(callback) {`
`@@ -84,9 +86,9 @@ exports.WorkerPlugin = function WorkerPlugin(options = {}) {`
`84`	`86`	`}`
`85`	`87`	`}`
`86`	`88`
`87`		`- function postMessage(msg) {`
	`89`	`+ function postMessage(msg, ports) {`
`88`	`90`	`for (const listener of b) {`
`89`		`- listener({data: msg});`
	`91`	`+ listener({data: msg, ports: ports});`
`90`	`92`	`}`
`91`	`93`	`}`
`92`	`94`