Use TypeScript for @finos/perspective-viewer

examples/react/package.json

@@ -22,7 +22,6 @@
         "@types/react": "^16.8.6",
         "@types/react-dom": "^16.9.4",
         "source-map-loader": "^0.2.4",
-        "ts-loader": "^6.2.1",
-        "typescript": "^3.7.4"
+        "ts-loader": "^6.2.1"
     }
 }

examples/react/src/index.css

@@ -6,12 +6,14 @@
  * the Apache License 2.0.  The full license can be found in the LICENSE file.
  *
  */
+
+ @import "~@finos/perspective-viewer/dist/umd/material-dense.css";
 
- perspective-viewer { 
+perspective-viewer { 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
-   }
+}
 

examples/react/src/index.tsx

@@ -9,43 +9,43 @@
 
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import {useEffect, useRef} from "react";
-import perspective, {Table} from "@finos/perspective";
+import * as perspective from "@finos/perspective";
+
 import "@finos/perspective-viewer";
 import "@finos/perspective-viewer-datagrid";
 import "@finos/perspective-viewer-d3fc";
+import {PerspectiveViewerConfig, PerspectiveViewerElement} from "@finos/perspective-viewer";
+
 import "./index.css";
-import "@finos/perspective-viewer/dist/umd/material.css";
-import {HTMLPerspectiveViewerElement, PerspectiveViewerOptions} from "@finos/perspective-viewer";
 
-const worker = perspective.shared_worker();
+const worker = perspective.default.shared_worker();
 
-const getTable = async (): Promise<Table> => {
+const getTable = async (): Promise<perspective.Table> => {
     const req = fetch("./superstore.arrow");
     const resp = await req;
     const buffer = await resp.arrayBuffer();
     return await worker.table(buffer as any);
 };
 
-const config: PerspectiveViewerOptions = {
-    "row-pivots": ["State"]
+const config: PerspectiveViewerConfig = {
+    row_pivots: ["State"]
 };
 
 const App = (): React.ReactElement => {
-    const viewer = useRef<HTMLPerspectiveViewerElement>(null);
+    const viewer = React.useRef<PerspectiveViewerElement>(null);
 
-    useEffect(() => {
+    React.useEffect(() => {
         getTable().then(table => {
             if (viewer.current) {
-                viewer.current.load(table);
+                viewer.current.load(Promise.resolve(table));
                 viewer.current.restore(config);
             }
         });
     }, []);
 
-    // You can also the use the stringified config values as attributes
-    return <perspective-viewer ref={viewer} /*row-pivots='["State"]'*/></perspective-viewer>;
+    return <perspective-viewer ref={viewer}></perspective-viewer>;
 };
+
 window.addEventListener("load", () => {
     ReactDOM.render(<App />, document.getElementById("root"));
 });

examples/react/webpack.config.js

@@ -35,12 +35,12 @@ module.exports = {
             },
             {
                 test: /\.css$/,
+                exclude: /node_modules/,
                 use: [{loader: "style-loader"}, {loader: "css-loader"}]
             }
         ]
     },
     devServer: {
-        // superstore.arrow is served from here
         contentBase: [path.join(__dirname, "dist"), path.join(__dirname, "../../node_modules/superstore-arrow")]
     }
 };

package.json

@@ -32,6 +32,7 @@
         "@babel/preset-env": "^7.8.4",
         "@rollup/plugin-babel": "^5.2.3",
         "@rollup/plugin-node-resolve": "^11.1.1",
+        "@rollup/plugin-typescript": "^8.2.5",
         "@types/ws": "^7.2.2",
         "@typescript-eslint/eslint-plugin": "^2.4.0",
         "@typescript-eslint/parser": "^2.4.0",
@@ -72,11 +73,7 @@
         "npm-pack-here": "^1.2.0",
         "npm-run-all": "^4.1.3",
         "postcss": "^8.2.6",
-        "postcss-copy-assets": "^0.3.1",
-        "postcss-easy-import": "^3.0.0",
-        "postcss-font-grabber": "^3.0.2",
         "postcss-loader": "^4.1.0",
-        "postcss-url": "^10.1.3",
         "pre-commit": "^1.2.2",
         "prettier": "^1.19.1",
         "puppeteer": "^10.2.0",
@@ -91,7 +88,10 @@
         "term-img": "^4.1.0",
         "ts-jest": "^25.1.0",
         "ts-loader": "^6.2.0",
-        "typescript": "^3.7.4",
+        "typedoc": "^0.21.9",
+        "typedoc-plugin-markdown": "^3.10.4",
+        "typedoc-plugin-no-inherit": "^1.3.0",
+        "typescript": "4.3.3",
         "webfontloader": "^1.6.28",
         "webpack": "^5.14.0",
         "webpack-cli": "^4.3.1",

packages/perspective-jupyterlab/package.json

@@ -53,8 +53,7 @@
         "isomorphic-fetch": "^2.2.1",
         "jest-transform-css": "^2.0.0",
         "source-map-support": "^0.5.9",
-        "ts-jest": "^25.1.0",
-        "typescript": "^3.7.4"
+        "ts-jest": "^25.1.0"
     },
     "jupyterlab": {
         "extension": true

packages/perspective-jupyterlab/src/ts/psp_widget.ts

@@ -9,16 +9,16 @@
 
 import "@finos/perspective-viewer";
 
-import {Table, TableData} from "@finos/perspective";
+import {Table, TableData, Aggregate, Sort, Expression, Filter, ColumnName} from "@finos/perspective";
 import {Message} from "@lumino/messaging";
 import {Widget} from "@lumino/widgets";
 import {MIME_TYPE, PSP_CLASS, PSP_CONTAINER_CLASS, PSP_CONTAINER_CLASS_DARK} from "./utils";
 
-import {HTMLPerspectiveViewerElement, Pivots, Aggregates, Sort, Expressions, PerspectiveViewerOptions, Filters, Columns} from "@finos/perspective-viewer";
+import {PerspectiveViewerElement, PerspectiveViewerConfig} from "@finos/perspective-viewer";
 
 let _increment = 0;
 
-export interface PerspectiveWidgetOptions extends PerspectiveViewerOptions {
+export interface PerspectiveWidgetOptions extends PerspectiveViewerConfig {
     dark?: boolean;
     client?: boolean;
     server?: boolean;
@@ -27,9 +27,9 @@ export interface PerspectiveWidgetOptions extends PerspectiveViewerOptions {
 
     // these shouldn't exist, PerspectiveViewerOptions should be sufficient e.g.
     // ["row-pivots"]
-    column_pivots?: Pivots;
-    row_pivots?: Pivots;
-    expressions?: Expressions;
+    column_pivots?: Array<ColumnName>;
+    row_pivots?: Array<ColumnName>;
+    expressions?: Array<Expression>;
     editable?: boolean;
 }
 
@@ -56,21 +56,21 @@ export class PerspectiveWidget extends Widget {
      *
      * @param options
      */
-    _set_attributes(options: PerspectiveViewerOptions & PerspectiveWidgetOptions): void {
+    _set_attributes(options: PerspectiveViewerConfig & PerspectiveWidgetOptions): void {
         const plugin: string = options.plugin || "datagrid";
-        const columns: Columns = options.columns || [];
-        const row_pivots: Pivots = options.row_pivots || options.row_pivots || [];
-        const column_pivots: Pivots = options.column_pivots || options.column_pivots || [];
-        const aggregates: Aggregates = options.aggregates || {};
-        const sort: Sort = options.sort || [];
-        const filter: Filters = options.filter || [];
-        const expressions: Expressions = options.expressions || options.expressions || [];
+        const columns: ColumnName[] = options.columns || [];
+        const row_pivots: ColumnName[] = options.row_pivots || options.row_pivots || [];
+        const column_pivots: ColumnName[] = options.column_pivots || options.column_pivots || [];
+        const aggregates: {[column: string]: Aggregate} = options.aggregates || {};
+        const sort: Sort[] = options.sort || [];
+        const filter: Filter[] = options.filter || [];
+        const expressions: Expression[] = options.expressions || options.expressions || [];
         const plugin_config: object = options.plugin_config || {};
         const dark: boolean = options.dark || false;
         const editable: boolean = options.editable || false;
         const server: boolean = options.server || false;
         const client: boolean = options.client || false;
-        const selectable: boolean = options.selectable || false;
+        // const selectable: boolean = options.selectable || false;
 
         this.server = server;
         this.client = client;
@@ -89,7 +89,7 @@ export class PerspectiveWidget extends Widget {
         };
 
         // this.plugin_config = plugin_config;
-        this.selectable = selectable;
+        // this.selectable = selectable;
     }
 
     /**********************/
@@ -122,22 +122,18 @@ export class PerspectiveWidget extends Widget {
     }
 
     async notifyResize(): Promise<void> {
-        if (this.isVisible) {
-            await this.viewer.notifyResize();
-        }
+        await this.viewer.notifyResize();
     }
 
     async toggleConfig(): Promise<void> {
-        if (this.isVisible) {
-            await this.viewer.toggleConfig();
-        }
+        await this.viewer.toggleConfig();
     }
 
-    async save(): Promise<PerspectiveViewerOptions> {
+    async save(): Promise<PerspectiveViewerConfig> {
         return await this.viewer.save();
     }
 
-    async restore(config: PerspectiveViewerOptions): Promise<void> {
+    async restore(config: PerspectiveViewerConfig): Promise<void> {
         return await this.viewer.restore(config);
     }
 
@@ -156,15 +152,17 @@ export class PerspectiveWidget extends Widget {
      *
      * @param data
      */
-    _update(data: TableData): void {
-        this.viewer.table.update(data);
+    async _update(data: TableData): Promise<void> {
+        const table = await this.viewer.getTable();
+        await table.update(data);
     }
 
     /**
      * Removes all rows from the viewer's table. Does not reset viewer state.
      */
     async clear(): Promise<void> {
-        await this.viewer.table.clear();
+        const table = await this.viewer.getTable();
+        await table.clear();
     }
 
     /**
@@ -174,7 +172,8 @@ export class PerspectiveWidget extends Widget {
      * @param data
      */
     async replace(data: TableData): Promise<void> {
-        await this.viewer.table.replace(data);
+        const table = await this.viewer.getTable();
+        await table.replace(data);
     }
 
     /**
@@ -194,8 +193,8 @@ export class PerspectiveWidget extends Widget {
         return await this.viewer.getEditPort();
     }
 
-    get table(): Table {
-        return this.viewer.table;
+    async getTable(): Promise<Table> {
+        return await this.viewer.getTable();
     }
 
     /***************************************************************************
@@ -209,7 +208,7 @@ export class PerspectiveWidget extends Widget {
      *
      * @returns {PerspectiveViewer} The widget's viewer instance.
      */
-    get viewer(): HTMLPerspectiveViewerElement {
+    get viewer(): PerspectiveViewerElement {
         return this._viewer;
     }
 
@@ -306,7 +305,7 @@ export class PerspectiveWidget extends Widget {
         }
     }
 
-    static createNode(node: HTMLDivElement): HTMLPerspectiveViewerElement {
+    static createNode(node: HTMLDivElement): PerspectiveViewerElement {
         node.classList.add("p-Widget");
         node.classList.add(PSP_CONTAINER_CLASS);
         const viewer = document.createElement("perspective-viewer");
@@ -342,11 +341,11 @@ export class PerspectiveWidget extends Widget {
         return viewer;
     }
 
-    private _viewer: HTMLPerspectiveViewerElement;
+    private _viewer: PerspectiveViewerElement;
     private _plugin_config: object;
     private _client: boolean;
     private _server: boolean;
     private _dark: boolean;
     private _editable: boolean;
-    private _viewer_config: PerspectiveViewerOptions;
+    private _viewer_config: PerspectiveViewerConfig;
 }

packages/perspective-jupyterlab/src/ts/renderer.ts

@@ -83,7 +83,10 @@ export class PerspectiveDocumentWidget extends DocumentWidget<PerspectiveWidget>
                 throw "Not handled";
             }
 
-            if (this._psp.viewer.table === undefined) {
+            try {
+                const table = await this._psp.viewer.getTable();
+                table.replace(data);
+            } catch (e) {
                 // construct new table
                 const table_promise = WORKER.table(data);
 
@@ -109,10 +112,7 @@ export class PerspectiveDocumentWidget extends DocumentWidget<PerspectiveWidget>
                         this.context.model.fromJSON(result);
                         this.context.save();
                     }
-                });
-            } else {
-                // replace existing table for whatever reason
-                this._psp.replace(data);
+                });               
             }
         } catch (e) {
             baddialog();

packages/perspective-jupyterlab/src/ts/widget.ts

@@ -10,7 +10,7 @@
 import {Message} from "@lumino/messaging";
 import {DOMWidgetView} from "@jupyter-widgets/base";
 
-import {PerspectiveViewerOptions} from "@finos/perspective-viewer";
+import {PerspectiveViewerConfig} from "@finos/perspective-viewer";
 import {PerspectiveWidget, PerspectiveWidgetOptions} from "./psp_widget";
 
 export type PerspectiveJupyterWidgetOptions = {
@@ -21,7 +21,7 @@ export type PerspectiveJupyterWidgetOptions = {
  * PerspectiveJupyterWidget is the ipywidgets front-end for the Perspective Jupyterlab plugin.
  */
 export class PerspectiveJupyterWidget extends PerspectiveWidget {
-    constructor(name = "Perspective", options: PerspectiveViewerOptions & PerspectiveJupyterWidgetOptions & PerspectiveWidgetOptions) {
+    constructor(name = "Perspective", options: PerspectiveViewerConfig & PerspectiveJupyterWidgetOptions & PerspectiveWidgetOptions) {
         const view = options.view;
         delete options.view;
         super(name, options);