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

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Perspective Workspace

Name: tessl/npm-finos--perspective-workspace
Author: tessl

Perspective Workspace is a TypeScript library that provides a sophisticated workspace component for coordinating multiple <perspective-viewer> instances. Built on Lumino.js, it offers advanced UI management features including drag-and-drop docking, tabbed interfaces, global filtering, and complete state serialization for building interactive analytics dashboards.

Package Information

Package Name: @finos/perspective-workspace
Package Type: npm
Language: TypeScript
Installation: npm install @finos/perspective-workspace

Core Imports

import { HTMLPerspectiveWorkspaceElement } from "@finos/perspective-workspace";

For additional components:

import { 
  PerspectiveWorkspace, 
  PerspectiveViewerWidget
} from "@finos/perspective-workspace";

Basic Usage

import { HTMLPerspectiveWorkspaceElement } from "@finos/perspective-workspace";

// Create workspace element
const workspace = document.createElement("perspective-workspace") as HTMLPerspectiveWorkspaceElement;
document.body.appendChild(workspace);

// Add a table
import * as perspective from "@finos/perspective";
const table = await perspective.table([
  { name: "Alice", age: 25, city: "New York" },
  { name: "Bob", age: 30, city: "London" }
]);
await workspace.addTable("users", Promise.resolve(table));

// Add a viewer
await workspace.addViewer({
  table: "users",
  columns: ["name", "age"],
  group_by: ["city"]
});

// Save and restore workspace state
const config = workspace.save();
// Later...
workspace.restore(config);

Architecture

Perspective Workspace is built around several key components:

Custom Element Interface: HTMLPerspectiveWorkspaceElement provides a simple HTML-based API
Core Workspace: PerspectiveWorkspace class handles layout management and coordination
Widget System: PerspectiveViewerWidget wraps individual perspective-viewer instances
State Management: Complete serialization/deserialization of workspace configurations
Global Filtering: Master-detail relationships where one viewer filters others
Docking System: Built on Lumino.js for professional-grade panel management

Capabilities

Workspace Management

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

class HTMLPerspectiveWorkspaceElement extends HTMLElement {
  /** Persists workspace to serializable token */
  save(): PerspectiveWorkspaceConfig<string>;
  /** Restores workspace from configuration */
  restore(layout: PerspectiveWorkspaceConfig<string>): Promise<void>;
  /** Clears workspace to empty state */
  clear(): Promise<void>;
  /** 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;
}

Workspace Management

Table Management

Table sharing and coordination system for managing perspective Tables across multiple viewers.

interface HTMLPerspectiveWorkspaceElement {
  /** 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;
  /** Map of perspective Tables by name */
  readonly tables: ObservableMap<string, psp.Table | Promise<psp.Table>>;
}

Table Management

Viewer Management

System for adding, configuring, and managing individual perspective-viewer instances within the workspace.

interface HTMLPerspectiveWorkspaceElement {
  /** Adds new viewer to workspace with configuration */
  addViewer(config: ViewerConfigUpdateExt): Promise<void>;
  /** Awaits all async tasks for all viewers */
  flush(): Promise<void>;
}

interface ViewerConfigUpdateExt extends ViewerConfigUpdate {
  table: string;
}

Viewer Management

Layout and Sizing

Layout management capabilities including auto-sizing, manual resizing, and responsive behavior.

interface HTMLPerspectiveWorkspaceElement {
  /** Invalidates dimensions and recalculates layout */
  resize(): Promise<void>;
  /** Sets auto-sizing behavior for responsive layouts */
  setAutoSize(is_auto_size: boolean): void;
}

Layout and Sizing

Types

interface PerspectiveWorkspaceConfig<T> {
  sizes: number[];
  master: PerspectiveLayout<T>;
  detail: PerspectiveLayout<T>;
  viewers: Record<string, ViewerConfigUpdateExt>;
}

interface PerspectiveLayout<T> {
  children?: PerspectiveLayout<T>[];
  widgets?: T[];
  sizes: number[];
}

interface ViewerConfigUpdateExt extends ViewerConfigUpdate {
  table: string;
}