or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdlayout-sizing.mdtable-management.mdviewer-management.mdworkspace-management.md
tile.json

workspace-management.mddocs/

Workspace Management

Core workspace functionality for managing multiple perspective-viewer instances with docking, tabbing, and layout coordination.

Capabilities

Custom Element Interface

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);

Core Workspace Class

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);
}

Enhanced Dock Panel

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>;
}

Configuration Types

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[];
}