add perspectiveEditor.ts implementation and rework data view enums (#65)

RandomFractals · RandomFractals · commit 3f614c423288 · 2022-01-16T01:38:56.000-06:00
diff --git a/src/extension.ts b/src/extension.ts
@@ -8,6 +8,7 @@ import { statusBar } from './views/statusBar';
 
 import { TableEditor } from './views/tableEditor';
 import { TableViewSerializer } from './views/tableViewSerializer';
+import { PerspectiveEditor } from './views/perspectiveEditor';
 
 /**
  * Activates this extension per rules set in package.json.
@@ -29,8 +30,9 @@ export function activate(context: ExtensionContext) {
 	// register table view serializer for restore on vscode reload
 	context.subscriptions.push(TableViewSerializer.register(context));
 
-	// register custom table editor
+	// register custom tabular data editors
 	context.subscriptions.push(TableEditor.register(context));
+	context.subscriptions.push(PerspectiveEditor.register(context));
 
 	window.onDidChangeActiveTextEditor((textEditor: TextEditor | undefined) => {
 		// hide tabular data stats display on active editor change
diff --git a/src/views/dataViewTypes.ts b/src/views/dataViewTypes.ts
@@ -1,7 +1,9 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
 /**
  * Defines tabular data view types for pluggable tabular.data.view config options.
  */
 export const enum DataViewTypes {
-	tabulatorTable = 'Tabulator',
-	perspectiveViewer = 'Perspective'
+	TabulatorTable = 'Tabulator',
+	PerspectiveViewer = 'Perspective'
 }
diff --git a/src/views/fileTypes.ts b/src/views/fileTypes.ts
@@ -1,8 +1,10 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
 /**
  * Supported tabular data file types.
  */
 export enum FileTypes {
-  csv = '.csv',
-  tsv = '.tsv',
-  tab = '.tab'
+	Csv = '.csv',
+	Tsv = '.tsv',
+	Tab = '.tab'
 }
diff --git a/src/views/perspectiveEditor.ts b/src/views/perspectiveEditor.ts
@@ -0,0 +1,67 @@
+import {
+	window,
+	CancellationToken,
+	CustomTextEditorProvider,
+	Disposable,
+	ExtensionContext,
+	TextDocument,
+	WebviewPanel
+} from 'vscode';
+
+import { TableView } from './tableView';
+import { ViewTypes } from './viewTypes';
+import { DataViewTypes } from './dataViewTypes';
+
+/**
+ * Defines custom tabular data text editor provider for Perspective viewer.
+ * 
+ * @see https://github.com/finos/perspective
+ * @see https://code.visualstudio.com/api/references/vscode-api#CustomTextEditorProvider
+ */
+export class PerspectiveEditor implements CustomTextEditorProvider {
+
+	/**
+	 * Registers custom Table editor.
+	 * 
+	 * @see https://code.visualstudio.com/api/references/vscode-api#window.registerCustomEditorProvider
+	 * 
+	 * @param context Extension context.
+	 * @returns Disposable object for this editor.
+	 */
+	public static register(context: ExtensionContext): Disposable {
+		return window.registerCustomEditorProvider(
+			ViewTypes.PerspectiveEditor, new PerspectiveEditor(context), {
+			webviewOptions: {
+				enableFindWidget: true,
+				retainContextWhenHidden: true
+			}
+		});
+	}
+
+	/**
+	 * Creates new Perspective editor instance.
+	 * 
+	 * @param context Extension context.
+	 */
+	constructor(private readonly context: ExtensionContext) {
+	}
+
+	/**
+	 * Resolves a custom text eidtor for a given tabular data text document source,
+	 * and creates new TableView for that table data display.
+	 * 
+	 * @param document Text document for the tabular data source to resolve.
+	 * @param webviewPanel Webview panel used to display the editor UI for this resource.
+	 * @param token A cancellation token that indicates the result is no longer needed.
+	 */
+	public async resolveCustomTextEditor(
+		document: TextDocument,
+		webviewPanel: WebviewPanel,
+		token: CancellationToken
+	): Promise<void> {
+		// create new table view for the given tabular text data document and render it
+		TableView.render(this.context.extensionUri,	document.uri,	webviewPanel, {
+			view: DataViewTypes.PerspectiveViewer.toLowerCase()
+		});
+	}
+}
diff --git a/src/views/tableEditor.ts b/src/views/tableEditor.ts
@@ -1,11 +1,11 @@
 import {
-  window,
-  CancellationToken,
-  CustomTextEditorProvider,
-  Disposable,
-  ExtensionContext,
-  TextDocument,
-  WebviewPanel
+	window,
+	CancellationToken,
+	CustomTextEditorProvider,
+	Disposable,
+	ExtensionContext,
+	TextDocument,
+	WebviewPanel
 } from 'vscode';
 
 import { TableView } from './tableView';
@@ -18,46 +18,46 @@ import { ViewTypes } from './viewTypes';
  */
 export class TableEditor implements CustomTextEditorProvider {
 
-  /**
-   * Registers custom Table editor.
-   * 
-   * @see https://code.visualstudio.com/api/references/vscode-api#window.registerCustomEditorProvider
-   * 
-   * @param context Extension context.
-   * @returns Disposable object for this editor.
-   */
-  public static register(context: ExtensionContext): Disposable {
-    return window.registerCustomEditorProvider(
-      ViewTypes.tableEditor, new TableEditor(context), {
-      webviewOptions: {
-        enableFindWidget: true,
-        retainContextWhenHidden: true
-      }
-    });
-  }
+	/**
+	 * Registers custom Table editor.
+	 * 
+	 * @see https://code.visualstudio.com/api/references/vscode-api#window.registerCustomEditorProvider
+	 * 
+	 * @param context Extension context.
+	 * @returns Disposable object for this editor.
+	 */
+	public static register(context: ExtensionContext): Disposable {
+		return window.registerCustomEditorProvider(
+			ViewTypes.TableEditor, new TableEditor(context), {
+			webviewOptions: {
+				enableFindWidget: true,
+				retainContextWhenHidden: true
+			}
+		});
+	}
 
-  /**
-   * Creates new Table editor instance.
-   * 
-   * @param context Extension context.
-   */
-  constructor(private readonly context: ExtensionContext) {
-  }
+	/**
+	 * Creates new Table editor instance.
+	 * 
+	 * @param context Extension context.
+	 */
+	constructor(private readonly context: ExtensionContext) {
+	}
 
-  /**
-   * Resolves a custom text eidtor for a given tabular data text document source,
-   * and creates new TableView for that table data display.
-   * 
-   * @param document Text document for the tabular data source to resolve.
-   * @param webviewPanel Webview panel used to display the editor UI for this resource.
-   * @param token A cancellation token that indicates the result is no longer needed.
-   */
-  public async resolveCustomTextEditor(
-    document: TextDocument,
-    webviewPanel: WebviewPanel,
-    token: CancellationToken
-  ): Promise<void> {
-    // create new table view for the given tabular text data document and render it
-    TableView.render(this.context.extensionUri, document.uri, webviewPanel);
-  }
+	/**
+	 * Resolves a custom text eidtor for a given tabular data text document source,
+	 * and creates new TableView for that table data display.
+	 * 
+	 * @param document Text document for the tabular data source to resolve.
+	 * @param webviewPanel Webview panel used to display the editor UI for this resource.
+	 * @param token A cancellation token that indicates the result is no longer needed.
+	 */
+	public async resolveCustomTextEditor(
+		document: TextDocument,
+		webviewPanel: WebviewPanel,
+		token: CancellationToken
+	): Promise<void> {
+		// create new table view for the given tabular text data document and render it
+		TableView.render(this.context.extensionUri, document.uri, webviewPanel);
+	}
 }
diff --git a/src/views/tableView.ts b/src/views/tableView.ts
@@ -115,7 +115,7 @@ export class TableView {
   private static createWebviewPanel(documentUri: Uri): WebviewPanel {
     // create new webview panel for the table view
     return window.createWebviewPanel(
-      ViewTypes.tableView, // webview panel view type
+      ViewTypes.TableView, // webview panel view type
       fileUtils.getFileName(documentUri), // webview panel title
       {
         viewColumn: ViewColumn.Active, // use active view column for display
@@ -155,7 +155,7 @@ export class TableView {
     statusBar.showFileStats(this._fileInfo);
 
     // configure webview panel
-    this.configure();
+    this.configure(this._tableConfig);
 
     // add it to the tracked table webviews
     TableView._views.set(this.viewUri.toString(true), this);
@@ -201,11 +201,14 @@ export class TableView {
 
   /**
    * Configures webview html for tabular data view display,
-   * and adds webview message request handlers for data updates.
+   * and registers webview message request handlers for data updates.
+   * 
+   * @param tableConfig Table view config.
    */
-  public configure(): void {
+  public configure(tableConfig: any): void {
     // set table view html content for the webview panel
-    this.webviewPanel.webview.html = this.getWebviewContent(this.webviewPanel.webview, this._extensionUri);
+    this.webviewPanel.webview.html =
+      this.getWebviewContent(this.webviewPanel.webview, this._extensionUri, tableConfig);
 
     // process webview messages
     this.webviewPanel.webview.onDidReceiveMessage((message: any) => {
@@ -554,11 +557,11 @@ export class TableView {
   get delimiter(): string {
     let delimiter: string = '';
     switch (this._fileInfo.fileExtension) {
-      case FileTypes.csv:
+      case FileTypes.Csv:
         delimiter = ',';
         break;
-      case FileTypes.tsv:
-      case FileTypes.tab:
+      case FileTypes.Tsv:
+      case FileTypes.Tab:
         delimiter = '\t';
         break;
     }
@@ -605,9 +608,11 @@ export class TableView {
    * 
    * @param webview Reference to the extensions webview.
    * @param extensionUri Extension directory Uri.
-   * @returns Html string for the webview content.
+   * @param tableConfig Table view config.
+   * 
+   * @returns Html string for the webview content display.
    */
-  private getWebviewContent(webview: Webview, extensionUri: Uri): string {
+  private getWebviewContent(webview: Webview, extensionUri: Uri, tableConfig: any): string {
     // create webview UI toolkit Uri
     const webviewUiToolkitUri: Uri =
       fileUtils.getWebviewUri(webview, extensionUri, ['web', 'scripts', 'toolkit.min.js']);
@@ -618,8 +623,14 @@ export class TableView {
     const tableViewStylesUri: Uri =
       fileUtils.getWebviewUri(webview, extensionUri, ['web', 'styles', 'table-view.css']);
 
+    // determine tabular data view type from config
+    let viewType = this.dataViewType.toLowerCase();
+    if (tableConfig?.view === 'perspective') {
+      // user perspective data view type override
+      viewType = 'perspective';
+    }
+
     // create data view script and styles Uris
-    const viewType = this.dataViewType.toLowerCase();
     const viewImports = config.viewImports[viewType];
     const dataViewScriptUri: Uri =
       fileUtils.getWebviewUri(webview, extensionUri, ['web', 'scripts', `${viewType}.js`]);
diff --git a/src/views/tableViewSerializer.ts b/src/views/tableViewSerializer.ts
@@ -22,7 +22,7 @@ export class TableViewSerializer implements WebviewPanelSerializer {
    * @returns Disposable object for this webview panel serializer.
    */
   public static register(context: ExtensionContext): Disposable {
-    return window.registerWebviewPanelSerializer(ViewTypes.tableView,
+    return window.registerWebviewPanelSerializer(ViewTypes.TableView,
       new TableViewSerializer(context.extensionUri));
   }
 
diff --git a/src/views/viewTypes.ts b/src/views/viewTypes.ts
@@ -1,7 +1,10 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
 /**
  * Tabular data view types.
  */
 export const enum ViewTypes {
-  tableView = 'tabular.data.tableView',
-  tableEditor = 'tabular.data.tableEditor'
+	TableView = 'tabular.data.tableView',
+	TableEditor = 'tabular.data.tableEditor',
+	PerspectiveEditor = 'tabular.data.perspectiveEditor'
 }

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ export class TableViewSerializer implements WebviewPanelSerializer {`
`22`	`22`	`* @returns Disposable object for this webview panel serializer.`
`23`	`23`	`*/`
`24`	`24`	`public static register(context: ExtensionContext): Disposable {`
`25`		`- return window.registerWebviewPanelSerializer(ViewTypes.tableView,`
	`25`	`+ return window.registerWebviewPanelSerializer(ViewTypes.TableView,`
`26`	`26`	`new TableViewSerializer(context.extensionUri));`
`27`	`27`	`}`
`28`	`28`