Apply new toolbar definition on DSV viewer

jupyterlab · Jul 5, 2021 · 473479a · 473479a
1 parent 23d6dde
commit 473479a
Show file tree

Hide file tree

Showing 10 changed files with 261 additions and 31 deletions.
diff --git a/packages/csvviewer-extension/package.json b/packages/csvviewer-extension/package.json
@@ -26,6 +26,7 @@
     "lib/*.d.ts",
     "lib/*.js.map",
     "lib/*.js",
+    "schema/*.json",
     "style/**/*.css",
     "style/index.js"
   ],
@@ -43,6 +44,7 @@
     "@jupyterlab/docregistry": "^3.1.0-beta.0",
     "@jupyterlab/documentsearch": "^3.1.0-beta.0",
     "@jupyterlab/mainmenu": "^3.1.0-beta.0",
+    "@jupyterlab/settingregistry": "^3.1.0-beta.0",
     "@jupyterlab/translation": "^3.1.0-beta.0",
     "@lumino/datagrid": "^0.20.0",
     "@lumino/signaling": "^1.4.3",
@@ -57,7 +59,8 @@
     "access": "public"
   },
   "jupyterlab": {
-    "extension": true
+    "extension": true,
+    "schemaDir": "schema"
   },
   "styleModule": "style/index.js"
 }
diff --git a/packages/csvviewer-extension/schema/csv.json b/packages/csvviewer-extension/schema/csv.json
@@ -0,0 +1,68 @@
+{
+  "title": "CSV Viewer",
+  "description": "CSV Viewer settings.",
+  "jupyter.lab.toolbars": {
+    "CSVTable": [{ "name": "delimiter", "rank": 10 }]
+  },
+  "jupyter.lab.transform": true,
+  "properties": {
+    "toolbar": {
+      "title": "CSV viewer toolbar items",
+      "description": "Note: To disable a toolbar item,\ncopy it to User Preferences and add the\n\"disabled\" key. The following example will disable the delimiter selector item:\n{\n  \"toolbar\": [\n    {\n      \"name\": \"delimiter\",\n      \"disabled\": true\n    }\n  ]\n}\n\nToolbar description:",
+      "items": {
+        "$ref": "#/definitions/toolbarItem"
+      },
+      "type": "array",
+      "default": []
+    }
+  },
+  "additionalProperties": false,
+  "type": "object",
+  "definitions": {
+    "toolbarItem": {
+      "properties": {
+        "name": {
+          "title": "Unique name",
+          "type": "string"
+        },
+        "args": {
+          "title": "Command arguments",
+          "type": "object"
+        },
+        "command": {
+          "title": "Command id",
+          "type": "string",
+          "default": ""
+        },
+        "disabled": {
+          "title": "Whether the item is disabled or not",
+          "type": "boolean",
+          "default": false
+        },
+        "icon": {
+          "title": "Item icon id",
+          "description": "If defined, it will override the command icon",
+          "type": "string"
+        },
+        "label": {
+          "title": "Item icon label",
+          "description": "If defined, it will override the command label",
+          "type": "string"
+        },
+        "type": {
+          "title": "Item type",
+          "type": "string",
+          "enum": ["command", "spacer"]
+        },
+        "rank": {
+          "title": "Item rank",
+          "type": "number",
+          "minimum": 0
+        }
+      },
+      "required": ["name"],
+      "additionalProperties": false,
+      "type": "object"
+    }
+  }
+}
diff --git a/packages/csvviewer-extension/schema/tsv.json b/packages/csvviewer-extension/schema/tsv.json
@@ -0,0 +1,68 @@
+{
+  "title": "TSV Viewer",
+  "description": "TSV Viewer settings.",
+  "jupyter.lab.toolbars": {
+    "TSVTable": [{ "name": "delimiter", "rank": 10 }]
+  },
+  "jupyter.lab.transform": true,
+  "properties": {
+    "toolbar": {
+      "title": "TSV viewer toolbar items",
+      "description": "Note: To disable a toolbar item,\ncopy it to User Preferences and add the\n\"disabled\" key. The following example will disable the delimiter selector item:\n{\n  \"toolbar\": [\n    {\n      \"name\": \"delimiter\",\n      \"disabled\": true\n    }\n  ]\n}\n\nToolbar description:",
+      "items": {
+        "$ref": "#/definitions/toolbarItem"
+      },
+      "type": "array",
+      "default": []
+    }
+  },
+  "additionalProperties": false,
+  "type": "object",
+  "definitions": {
+    "toolbarItem": {
+      "properties": {
+        "name": {
+          "title": "Unique name",
+          "type": "string"
+        },
+        "args": {
+          "title": "Command arguments",
+          "type": "object"
+        },
+        "command": {
+          "title": "Command id",
+          "type": "string",
+          "default": ""
+        },
+        "disabled": {
+          "title": "Whether the item is disabled or not",
+          "type": "boolean",
+          "default": false
+        },
+        "icon": {
+          "title": "Item icon id",
+          "description": "If defined, it will override the command icon",
+          "type": "string"
+        },
+        "label": {
+          "title": "Item icon label",
+          "description": "If defined, it will override the command label",
+          "type": "string"
+        },
+        "type": {
+          "title": "Item type",
+          "type": "string",
+          "enum": ["command", "spacer"]
+        },
+        "rank": {
+          "title": "Item rank",
+          "type": "number",
+          "minimum": 0
+        }
+      },
+      "required": ["name"],
+      "additionalProperties": false,
+      "type": "object"
+    }
+  }
+}
diff --git a/packages/csvviewer-extension/src/index.ts b/packages/csvviewer-extension/src/index.ts
@@ -11,19 +11,23 @@ import {
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 import {
+  createToolbarFactory,
   InputDialog,
   IThemeManager,
+  IToolbarWidgetRegistry,
   WidgetTracker
 } from '@jupyterlab/apputils';
 import {
+  CSVDelimiter,
   CSVViewer,
   CSVViewerFactory,
   TextRenderConfig,
   TSVViewerFactory
 } from '@jupyterlab/csvviewer';
-import { IDocumentWidget } from '@jupyterlab/docregistry';
+import { DocumentRegistry, IDocumentWidget } from '@jupyterlab/docregistry';
 import { ISearchProviderRegistry } from '@jupyterlab/documentsearch';
 import { IEditMenu, IMainMenu } from '@jupyterlab/mainmenu';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { ITranslator } from '@jupyterlab/translation';
 import { DataGrid } from '@lumino/datagrid';
 import { CSVSearchProvider } from './searchprovider';
@@ -45,7 +49,9 @@ const csv: JupyterFrontEndPlugin<void> = {
     ILayoutRestorer,
     IThemeManager,
     IMainMenu,
-    ISearchProviderRegistry
+    ISearchProviderRegistry,
+    ISettingRegistry,
+    IToolbarWidgetRegistry
   ],
   autoStart: true
 };
@@ -61,7 +67,9 @@ const tsv: JupyterFrontEndPlugin<void> = {
     ILayoutRestorer,
     IThemeManager,
     IMainMenu,
-    ISearchProviderRegistry
+    ISearchProviderRegistry,
+    ISettingRegistry,
+    IToolbarWidgetRegistry
   ],
   autoStart: true
 };
@@ -100,13 +108,42 @@ function activateCsv(
   restorer: ILayoutRestorer | null,
   themeManager: IThemeManager | null,
   mainMenu: IMainMenu | null,
-  searchregistry: ISearchProviderRegistry | null
+  searchregistry: ISearchProviderRegistry | null,
+  settingRegistry: ISettingRegistry | null,
+  toolbarRegistry: IToolbarWidgetRegistry | null
 ): void {
+  let toolbarFactory:
+    | ((widget: IDocumentWidget<CSVViewer>) => DocumentRegistry.IToolbarItem[])
+    | undefined;
+
+  if (toolbarRegistry) {
+    toolbarRegistry.registerFactory<IDocumentWidget<CSVViewer>>(
+      FACTORY_CSV,
+      'delimiter',
+      widget =>
+        new CSVDelimiter({
+          widget: widget.content,
+          translator
+        })
+    );
+
+    if (settingRegistry) {
+      toolbarFactory = createToolbarFactory(
+        toolbarRegistry,
+        settingRegistry,
+        FACTORY_CSV,
+        csv.id,
+        translator
+      );
+    }
+  }
+
   const factory = new CSVViewerFactory({
     name: FACTORY_CSV,
     fileTypes: ['csv'],
     defaultFor: ['csv'],
     readOnly: true,
+    toolbarFactory,
     translator
   });
   const tracker = new WidgetTracker<IDocumentWidget<CSVViewer>>({
@@ -182,13 +219,42 @@ function activateTsv(
   restorer: ILayoutRestorer | null,
   themeManager: IThemeManager | null,
   mainMenu: IMainMenu | null,
-  searchregistry: ISearchProviderRegistry | null
+  searchregistry: ISearchProviderRegistry | null,
+  settingRegistry: ISettingRegistry | null,
+  toolbarRegistry: IToolbarWidgetRegistry | null
 ): void {
+  let toolbarFactory:
+    | ((widget: IDocumentWidget<CSVViewer>) => DocumentRegistry.IToolbarItem[])
+    | undefined;
+
+  if (toolbarRegistry) {
+    toolbarRegistry.registerFactory<IDocumentWidget<CSVViewer>>(
+      FACTORY_TSV,
+      'delimiter',
+      widget =>
+        new CSVDelimiter({
+          widget: widget.content,
+          translator
+        })
+    );
+
+    if (settingRegistry) {
+      toolbarFactory = createToolbarFactory(
+        toolbarRegistry,
+        settingRegistry,
+        FACTORY_TSV,
+        tsv.id,
+        translator
+      );
+    }
+  }
+
   const factory = new TSVViewerFactory({
     name: FACTORY_TSV,
     fileTypes: ['tsv'],
     defaultFor: ['tsv'],
     readOnly: true,
+    toolbarFactory,
     translator
   });
   const tracker = new WidgetTracker<IDocumentWidget<CSVViewer>>({

diff --git a/packages/csvviewer-extension/tsconfig.json b/packages/csvviewer-extension/tsconfig.json
@@ -4,7 +4,9 @@
     "outDir": "lib",
     "rootDir": "src"
   },
-  "include": ["src/*"],
+  "include": [
+    "src/*"
+  ],
   "references": [
     {
       "path": "../application"
@@ -24,6 +26,9 @@
     {
       "path": "../mainmenu"
     },
+    {
+      "path": "../settingregistry"
+    },
     {
       "path": "../translation"
     }

diff --git a/packages/csvviewer/src/toolbar.ts b/packages/csvviewer/src/toolbar.ts
@@ -7,6 +7,7 @@ import { each } from '@lumino/algorithm';
 import { Message } from '@lumino/messaging';
 import { ISignal, Signal } from '@lumino/signaling';
 import { Widget } from '@lumino/widgets';
+import { CSVViewer } from './widget';
 
 /**
  * The class name added to a csv toolbar widget.
@@ -28,12 +29,17 @@ export class CSVDelimiter extends Widget {
    * Construct a new csv table widget.
    */
   constructor(options: CSVToolbar.IOptions) {
-    super({ node: Private.createNode(options.selected, options.translator) });
+    super({
+      node: Private.createNode(options.widget.delimiter, options.translator)
+    });
+    this._widget = options.widget;
     this.addClass(CSV_DELIMITER_CLASS);
   }
 
   /**
    * A signal emitted when the delimiter selection has changed.
+   *
+   * @deprecated since 3.1
    */
   get delimiterChanged(): ISignal<this, string> {
     return this._delimiterChanged;
@@ -60,6 +66,7 @@ export class CSVDelimiter extends Widget {
     switch (event.type) {
       case 'change':
         this._delimiterChanged.emit(this.selectNode.value);
+        this._widget.delimiter = this.selectNode.value;
         break;
       default:
         break;
@@ -81,6 +88,7 @@ export class CSVDelimiter extends Widget {
   }
 
   private _delimiterChanged = new Signal<this, string>(this);
+  protected _widget: CSVViewer;
 }
 
 /**
@@ -92,9 +100,9 @@ export namespace CSVToolbar {
    */
   export interface IOptions {
     /**
-     * The initially selected delimiter.
+     * Document widget for this toolbar
      */
-    selected: string;
+    widget: CSVViewer;
 
     /**
      * The application language translator.