Core workspace functionality for managing multiple perspective-viewer instances with docking, tabbing, and layout coordination.
The main entry point for workspace functionality through a custom HTML element.
/**
* Main custom element for workspace coordination
* Extends HTMLElement to provide declarative HTML interface
*/
class HTMLPerspectiveWorkspaceElement extends HTMLElement {
/** Persists workspace to serializable token for later restoration */
save(): PerspectiveWorkspaceConfig<string>;
/** Restores workspace from previously saved configuration */
restore(layout: PerspectiveWorkspaceConfig<string>): Promise<void>;
/** Clears workspace to empty state, removing all viewers and layout */
clear(): Promise<void>;
/** Adds new viewer to workspace with configuration */
addViewer(config: ViewerConfigUpdateExt): Promise<void>;
/** Adds table by name for sharing across viewers */
addTable(name: string, table: Promise<psp.Table>): Promise<void>;
/** Retrieves table by name */
getTable(name: string): psp.Table | Promise<psp.Table>;
/** Replaces existing table with new one */
replaceTable(name: string, table: Promise<psp.Table>): Promise<void>;
/** Removes table by name from workspace */
removeTable(name: string): boolean;
/** Awaits all async tasks for all viewers */
flush(): Promise<void>;
/** Invalidates dimensions and recalculates layout */
resize(): Promise<void>;
/** Sets auto-sizing behavior for responsive layouts */
setAutoSize(is_auto_size: boolean): void;
/** Map of perspective Tables by name */
readonly tables: ObservableMap<string, psp.Table | Promise<psp.Table>>;
}Usage Examples:
import { HTMLPerspectiveWorkspaceElement } from "@finos/perspective-workspace";
// Create workspace element
const workspace = document.createElement("perspective-workspace") as HTMLPerspectiveWorkspaceElement;
document.body.appendChild(workspace);
// Save workspace state
const config = workspace.save();
// Clear and restore
await workspace.clear();
await workspace.restore(config);The underlying workspace implementation providing programmatic control.
/**
* Core workspace implementation class extending Lumino SplitPanel
* Provides low-level workspace management functionality
*/
class PerspectiveWorkspace extends SplitPanel {
/** Save complete workspace configuration including layout and viewer states */
save(): Promise<PerspectiveWorkspaceConfig<string>>;
/** Restore workspace from configuration */
restore(value: PerspectiveWorkspaceConfig<string>): Promise<void>;
/** Duplicate an existing widget with same configuration */
duplicate(widget: PerspectiveViewerWidget): Promise<void>;
/** Toggle global filter mode for widget (master-detail relationship) */
toggleMasterDetail(widget: PerspectiveViewerWidget): void;
/** Toggle maximize mode for widget (single document interface) */
toggleSingleDocument(widget: PerspectiveViewerWidget): void;
/** Make widget a global filter source (master view) */
makeMaster(widget: PerspectiveViewerWidget): void;
/** Make widget a detail view that responds to global filters */
makeDetail(widget: PerspectiveViewerWidget): void;
/** Show context menu for workspace or widget */
showContextMenu(widget: PerspectiveViewerWidget | null, event: MouseEvent): void;
/** Create context menu for widget */
createContextMenu(widget: PerspectiveViewerWidget | null): WorkspaceMenu;
/** Clear the entire workspace layout */
clearLayout(): void;
/** Get widget by its assigned name */
getWidgetByName(name: string): PerspectiveViewerWidget | null;
/** Get all widgets in the workspace */
getAllWidgets(): PerspectiveViewerWidget[];
/** Add table by name for sharing across viewers */
addTable(name: string, table: Promise<psp.Table>): void;
/** Retrieve table by name */
getTable(name: string): psp.Table | Promise<psp.Table>;
/** Replace existing table with new one */
replaceTable(name: string, table: Promise<psp.Table>): void;
/** Remove table by name from workspace */
removeTable(name: string): boolean;
/** Add new viewer to workspace with configuration */
addViewer(config: ViewerConfigUpdateExt, is_global_filter?: boolean): void;
/** Map of perspective Tables available to the workspace */
readonly tables: ObservableMap<string, psp.Table | Promise<psp.Table>>;
/** Host HTML element */
readonly element: HTMLElement;
/** Menu container element */
readonly menu_elem: HTMLElement;
}Usage Examples:
import { PerspectiveWorkspace } from "@finos/perspective-workspace";
// Create workspace programmatically
const workspace = new PerspectiveWorkspace();
// Duplicate a viewer
const widget = workspace.getWidgetByName("myViewer");
if (widget) {
await workspace.duplicate(widget);
}
// Set up master-detail relationship
const masterWidget = workspace.getWidgetByName("master");
const detailWidget = workspace.getWidgetByName("detail");
if (masterWidget && detailWidget) {
workspace.makeMaster(masterWidget);
workspace.makeDetail(detailWidget);
}Custom dock panel providing enhanced widget management for the workspace.
/**
* Enhanced DockPanel for workspace with utility methods for widget extraction
* Extends Lumino DockPanel with perspective-specific functionality
*/
class PerspectiveDockPanel extends DockPanel {
/** Extract all widgets from a dock layout configuration */
static getWidgets(layout: DockPanel.ILayoutConfig): PerspectiveViewerWidget[];
/** Extract widgets from an area configuration */
static getAreaWidgets(layout: DockLayout.AreaConfig): PerspectiveViewerWidget[];
/** Map function over all widgets in layout configuration */
static mapWidgets(
widgetFunc: (widget: any) => any,
layout: any
): DockPanel.ILayoutConfig;
/** Map function over all widgets in area configuration */
static mapAreaWidgets(
widgetFunc: (widget: any) => any,
layout: DockLayout.AreaConfig
): DockLayout.AreaConfig;
/** Iterator over all widgets in the dock panel */
widgets(): IterableIterator<PerspectiveViewerWidget>;
}interface PerspectiveWorkspaceConfig<T> {
/** Sizes of main split panel sections */
sizes: number[];
/** Layout configuration for master (filter) area */
master: PerspectiveLayout<T>;
/** Layout configuration for detail area */
detail: PerspectiveLayout<T>;
/** Individual viewer configurations by name */
viewers: Record<string, ViewerConfigUpdateExt>;
}
interface PerspectiveLayout<T> {
/** Child layout nodes for nested splits */
children?: PerspectiveLayout<T>[];
/** Widgets at this layout level */
widgets?: T[];
/** Relative sizes of children or widgets */
sizes: number[];
}