PerspectiveWorkspace React component #3044

sinistersnare · 2025-07-29T14:56:19Z

Hello! This PR adds onto our perspective-react package an API for the <perspective-workspace> custom element in the form of a <PerspectiveWorkspace /> React component. You can use it as such:

import * as Workspace from "@finos/perspective-workspace";
const tables = {a: client.table("a,b,c\n1,2,3\n4,5,6", { name: "a" })};
const base = { sizes: [1], detail: { main: null }, viewers: {});
const id = Workspace.genId(base);
const layout = Workspace.addViewer(base, { table: "a", title: "View A!"}, id);
<PerspectiveWorkspace tables={tables} layout={layout} />

You can see that this PR also adds some free functions (namely addViewer and genId) to assist in the functional style of React.

There are also callbacks that can be passed for the on-layout-update and on-new-view events.

The PerspectiveWorkspaceConfig interface was updated to better reflect the reality of the current workspace structure.

During the course of this, I encountered a bug of an internal engine message not being swallowed by the engine. That bug is tracked in #3039.

texodus · 2025-07-31T14:32:31Z

packages/perspective-react/src/workspace.tsx

+        widget: pspWorkspace.PerspectiveViewerWidget;
+        isGlobalFilter: boolean;
+    }) => void;
+    id?: string;


Use React.HTMLAttributes

texodus · 2025-07-31T14:37:32Z

packages/perspective-react/test/js/basic.story.tsx

+    PerspectiveWorkspace,
+} from "@finos/perspective-react";
+
+import "@finos/perspective-viewer/dist/css/themes.css";


Don't import themes.css for viewers within a workspace - use the specific theme pro.css (in this case)

This is for the <PerspectiveViewer /> tests, <PerspectiveWorkspace /> tests used themes.css as well though so I removed that line.

texodus · 2025-07-31T14:49:56Z

packages/perspective-react/test/js/react.spec.tsx

+        await new Promise((r) => setTimeout(r, delay));
+    }
+    return false;
+}


If every one of Perspective's tests did this, the test suite would run ~2hrs. You have multiple options available:

Listen for perspective-config-update

Remove the button click from the tests and just await the workspace calls directly (through an imperative handle for testing only).

Await workspace.flush()

texodus · 2025-07-31T14:51:45Z

packages/perspective-workspace/src/ts/perspective-workspace.ts

-            master: { sizes: [] },
-            detail: { sizes: [] },
+            master: undefined,
+            detail: { main: null },


This does not look right

texodus · 2025-07-31T14:54:08Z

packages/perspective-workspace/src/ts/workspace/workspace.ts

+    };
+}
+
+export function genId(workspace: PerspectiveWorkspaceConfig) {


Please remove this - IDs are an internal implementation detail, there is no reason to expose this in the public API.

texodus · 2025-07-31T15:09:56Z

packages/perspective-workspace/src/ts/workspace/workspace.ts

+        const exists = document.querySelector("body > perspective-indicator");
+        if (exists) {
+            return exists as HTMLElement;
+        }


This smells like a previous <perspective-workspace> that was disconnected leaked this element, not the responsibility of this method to correct.

Sure, I set the constructed indicator to be a child of <perspective-workspace> so that the element is cleaned up when the workspace is unmounted.

texodus · 2025-07-31T15:12:15Z

packages/perspective-workspace/src/ts/workspace/workspace.ts

 }

-export interface PerspectiveWorkspaceConfig<T> {
+// TODO: I have made some changes to this interface because it seemed to not reflect reality.


Lumino's DockPanel.saveLayout() does not return string identifiers for widgets field, ergo the types for e.g. workspace.save() is now not PerspectiveWorkspaceConfig (it's an anonymous struct type). Add the explicit returns types to save() will show this error.

texodus · 2025-07-31T15:13:24Z

packages/perspective-workspace/src/ts/workspace/workspace.ts

+            if (!newTables[t]) {
+                await viewer.eject();
+            } else {
+                await viewer.load(newTables[t]);


Please batch these and await them all at the end using Promise.all(), so the user does not have to watch a slide show of these elements updating.

texodus · 2025-07-31T15:18:00Z

packages/perspective-workspace/src/ts/workspace/workspace.ts

-    async restore(value: PerspectiveWorkspaceConfig<string>) {
+    async restore(value: PerspectiveWorkspaceConfig) {
+        // bail out early if there is nothing to restore.
+        const layout = await this.save();


Why is this necessary? This operation is not free and both perspective-viewer and lumino DockPanel should do this internally already.

texodus · 2025-07-31T15:25:49Z

packages/perspective-react/src/workspace.tsx

+
+interface PerspectiveWorkspaceProps {
+    tables: Record<string, Promise<psp.Table>>;
+    layout: PerspectiveWorkspaceConfig;


This is called a config in the API docs, examples and the type name itself. Layout is the type of the layout field within this struct.

tomjakubowski · 2025-08-26T19:12:54Z

packages/perspective-workspace/src/ts/workspace/workspace.ts

        if (viewer) {
            widget = starting_widgets.find((x) => x.viewer === viewer);
            if (widget) {
+                console.warn("DDD Restore load??? ");


stray debug print

tomjakubowski · 2025-08-26T19:12:58Z

packages/perspective-workspace/src/ts/workspace/workspace.ts

        this.getAllWidgets().forEach((widget) => {
            const psp_widget = widget as PerspectiveViewerWidget;
            if (psp_widget.viewer.getAttribute("table") === name) {
+                console.warn("DDD Loading...?", table);


stray debug print

tomjakubowski · 2025-08-26T19:13:02Z

packages/perspective-workspace/src/ts/workspace/workspace.ts

        const widget = new PerspectiveViewerWidget({ node, viewer });
        widget.task = (async () => {
            if (table) {
+                console.warn("DDD Loading B?", table);


stray debug print

tomjakubowski · 2025-08-26T19:17:38Z

examples/workspace-repro/build.js

@@ -0,0 +1,38 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓


if this workspace-repro example is to repro a bug case, I imagine you want to remove this for the final PR

The ObservableMap's delete listener used to be able to "reject" deletions by returning false. This is no longer the case; the listener in Workspace always returns undefined now. Account for this in observable map's delete method. Co-authored by: Davis Silverman <[email protected]> Signed-off-by: Tom Jakubowski <[email protected]>

Signed-off-by: Davis Silverman <[email protected]>

sinistersnare force-pushed the feature/react-workspace branch 3 times, most recently from 90b0462 to b60ab32 Compare July 29, 2025 18:18

texodus reviewed Jul 31, 2025

View reviewed changes

sinistersnare force-pushed the feature/react-workspace branch from b60ab32 to 2401842 Compare August 5, 2025 20:02

tomjakubowski reviewed Aug 26, 2025

View reviewed changes

sinistersnare force-pushed the feature/react-workspace branch from d9095a1 to e65f89c Compare August 27, 2025 17:46

sinistersnare marked this pull request as draft August 27, 2025 17:47

sinistersnare force-pushed the feature/react-workspace branch from e65f89c to 95403a5 Compare August 27, 2025 17:55

tomjakubowski and others added 2 commits August 28, 2025 11:44

PerspectiveWorkspace React component

141ace2

Signed-off-by: Davis Silverman <[email protected]>

sinistersnare force-pushed the feature/react-workspace branch from 95403a5 to 141ace2 Compare September 2, 2025 18:22

texodus mentioned this pull request Oct 30, 2025

perspective-workspace: safer isVisible() callbacks #3076

Closed

7 tasks

		@@ -0,0 +1,38 @@
		// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓

PerspectiveWorkspace React component #3044

Are you sure you want to change the base?

PerspectiveWorkspace React component #3044

Conversation

sinistersnare commented Jul 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tomjakubowski Aug 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

sinistersnare commented Jul 29, 2025 •

edited

Loading

tomjakubowski Aug 26, 2025 •

edited

Loading