CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-finos--perspective-workspace

Perspective Workspace - A Custom Element for coordinating multiple perspective-viewer instances with docking, tabbing, filtering, and state management capabilities for interactive analytics dashboards

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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

docs

index.md

layout-sizing.md

table-management.md

viewer-management.md

workspace-management.md

tile.json