Cell factory (#8)

* Adds cells factory to handle SQL cells with mimetype

* Adds some doc string

* Add class only for SQL cell

* Adds test

* Remove leftover trials

Author: brichet

package.json

@@ -61,6 +61,7 @@
         "@jupyterlab/apputils": "^4.0.0",
         "@jupyterlab/cell-toolbar": "^4.0.0",
         "@jupyterlab/cells": "^4.0.0",
+        "@jupyterlab/codeeditor": "^4.0.0",
         "@jupyterlab/coreutils": "^6.0.0",
         "@jupyterlab/filebrowser": "^4.0.0",
         "@jupyterlab/notebook": "^4.0.0",
@@ -121,7 +122,10 @@
         },
         "extension": true,
         "outputDir": "jupyter_sql_cell/labextension",
-        "schemaDir": "schema"
+        "schemaDir": "schema",
+        "disabledExtensions": [
+            "@jupyterlab/notebook-extension:factory"
+        ]
     },
     "eslintIgnore": [
         "node_modules",

src/cellfactory.ts

@@ -0,0 +1,82 @@
+import { CellModel, RawCell } from '@jupyterlab/cells';
+import { IEditorMimeTypeService } from '@jupyterlab/codeeditor';
+import { Notebook, NotebookPanel } from '@jupyterlab/notebook';
+
+import { SQL_MIMETYPE } from './common';
+import { IMapChange } from '@jupyter/ydoc';
+
+/**
+ * The class of the custom raw cell.
+ */
+const SQL_CELL_CLASS = 'jp-SqlCell';
+
+/**
+ * The cell content factory.
+ */
+export class CustomContentFactory
+  extends Notebook.ContentFactory
+  implements NotebookPanel.IContentFactory
+{
+  /**
+   * Create a new content area for the panel.
+   */
+  createNotebook(options: Notebook.IOptions): Notebook {
+    return new Notebook(options);
+  }
+
+  /**
+   * Create raw/SQL cell.
+   */
+  createRawCell(options: RawCell.IOptions): RawCell {
+    return new RawSqlCell(options).initializeState();
+  }
+}
+
+/**
+ * The raw/SQL cell.
+ */
+export class RawSqlCell extends RawCell {
+  /**
+   * The constructor method.
+   */
+  constructor(options: RawCell.IOptions) {
+    super(options);
+    if (this.model.getMetadata('format') === SQL_MIMETYPE) {
+      this._sqlCell();
+    }
+  }
+
+  /**
+   * Handle changes in the metadata.
+   */
+  protected onMetadataChanged(model: CellModel, args: IMapChange<any>): void {
+    super.onMetadataChanged(model, args);
+    if (args.key === 'format') {
+      if (this.model.getMetadata('format') === SQL_MIMETYPE) {
+        this._sqlCell();
+      } else {
+        this._rawCell();
+      }
+    }
+  }
+
+  /**
+   * Switch to raw cell type.
+   */
+  private _rawCell() {
+    this.removeClass(SQL_CELL_CLASS);
+    const trans = this.translator.load('jupyterlab');
+    this.node.setAttribute('aria-label', trans.__('Raw Cell Content'));
+    this.model.mimeType = IEditorMimeTypeService.defaultMimeType;
+  }
+
+  /**
+   * Switch to SQL cell type, using codemirror SQL mimetype.
+   */
+  private _sqlCell() {
+    this.addClass(SQL_CELL_CLASS);
+    const trans = this.translator.load('jupyterlab');
+    this.node.setAttribute('aria-label', trans.__('SQL Cell Content'));
+    this.model.mimeType = SQL_MIMETYPE;
+  }
+}

src/common.ts

@@ -1,26 +1,49 @@
 import { ICellModel } from '@jupyterlab/cells';
 
+/**
+ * The command IDs of the extensions.
+ */
 export namespace CommandIDs {
+  /**
+   * Switch cell type between rax and SQL.
+   */
   export const switchSQL = 'jupyter-sql-cell:switch';
+  /**
+   * Execute the query on the server.
+   */
   export const run = 'jupyter-sql-cell:execute';
 }
 
-export const METADATA_SQL_FORMAT = 'application/sql';
+/**
+ * The SQL mimetype used by codemirror.
+ */
+export const SQL_MIMETYPE = 'text/x-sql';
 
+/**
+ * The SqlCell namespace.
+ */
 export namespace SqlCell {
+  /**
+   * Whether the cell is a raw cell.
+   *
+   * @param model - the cell model.
+   */
   export function isRaw(model: ICellModel | undefined) {
     if (!model) {
       return false;
     }
     return model.type === 'raw';
   }
+
+  /**
+   * Whether the cell is an SQL cell.
+   *
+   * @param model - the cell model.
+   */
   export function isSqlCell(model: ICellModel | undefined) {
     if (!model) {
       return false;
     }
-    return (
-      model.type === 'raw' &&
-      model.getMetadata('format') === METADATA_SQL_FORMAT
-    );
+    return model.type === 'raw' && model.getMetadata('format') === SQL_MIMETYPE;
   }
 }

src/index.ts

@@ -4,14 +4,16 @@ import {
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 import { ICommandPalette, IToolbarWidgetRegistry } from '@jupyterlab/apputils';
+import { IEditorServices } from '@jupyterlab/codeeditor';
 import { IDefaultFileBrowser } from '@jupyterlab/filebrowser';
 import { INotebookTracker, NotebookPanel } from '@jupyterlab/notebook';
 import { Contents, ContentsManager } from '@jupyterlab/services';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { runIcon } from '@jupyterlab/ui-components';
 
+import { CustomContentFactory } from './cellfactory';
 import { requestAPI } from './handler';
-import { CommandIDs, METADATA_SQL_FORMAT, SqlCell } from './common';
+import { CommandIDs, SQL_MIMETYPE, SqlCell } from './common';
 import { SqlWidget } from './widget';
 
 /**
@@ -79,11 +81,12 @@ const plugin: JupyterFrontEndPlugin<void> = {
         if (!model || model.type !== 'raw') {
           return;
         }
-        if (model.getMetadata('format') !== METADATA_SQL_FORMAT) {
-          model.setMetadata('format', METADATA_SQL_FORMAT);
-        } else if (model.getMetadata('format') === METADATA_SQL_FORMAT) {
+        if (model.getMetadata('format') !== SQL_MIMETYPE) {
+          model.setMetadata('format', SQL_MIMETYPE);
+        } else if (model.getMetadata('format') === SQL_MIMETYPE) {
           model.deleteMetadata('format');
         }
+
         app.commands.notifyCommandChanged(CommandIDs.switchSQL);
         app.commands.notifyCommandChanged(CommandIDs.run);
       },
@@ -100,6 +103,21 @@ const plugin: JupyterFrontEndPlugin<void> = {
   }
 };
 
+/**
+ * The notebook cell factory provider, to handle SQL cells.
+ */
+const cellFactory: JupyterFrontEndPlugin<NotebookPanel.IContentFactory> = {
+  id: '@jupyter/sql-cell:content-factory',
+  description: 'Provides the notebook cell factory.',
+  provides: NotebookPanel.IContentFactory,
+  requires: [IEditorServices],
+  autoStart: true,
+  activate: (app: JupyterFrontEnd, editorServices: IEditorServices) => {
+    const editorFactory = editorServices.factoryService.newInlineEditor;
+    return new CustomContentFactory({ editorFactory });
+  }
+};
+
 /**
  * The notebook toolbar widget.
  */
@@ -143,7 +161,7 @@ const notebookToolbarWidget: JupyterFrontEndPlugin<void> = {
   }
 };
 
-export default [notebookToolbarWidget, plugin];
+export default [cellFactory, notebookToolbarWidget, plugin];
 
 namespace Private {
   /**

ui-tests/tests/jupyter_sql_cell.spec.ts

@@ -69,3 +69,63 @@ test.describe('cell toolbar', () => {
     ).toBeEnabled();
   });
 });
+
+test.describe('cell factory', () => {
+  test.beforeEach(async ({ page, request, tmpPath }) => {
+    const contents = galata.newContentsHelper(request);
+    await contents.uploadFile(
+      path.resolve(__dirname, `./notebooks/${fileName}`),
+      `${tmpPath}/${fileName}`
+    );
+    await page.notebook.openByPath(`${tmpPath}/${fileName}`);
+    await page.notebook.activate(fileName);
+  });
+
+  test.afterEach(async ({ request, tmpPath }) => {
+    const contents = galata.newContentsHelper(request);
+    await contents.deleteDirectory(tmpPath);
+  });
+
+  test('SQL cells only should have jp-SqlCell class', async ({ page }) => {
+    const cells = page.locator('.jp-Notebook .jp-Cell');
+
+    await expect(cells).toHaveCount(3);
+
+    await expect(cells.nth(0)).not.toHaveClass(/jp-SqlCell/);
+    await expect(cells.nth(1)).not.toHaveClass(/jp-SqlCell/);
+    await expect(cells.nth(2)).not.toHaveClass(/jp-SqlCell/);
+
+    await (await page.notebook.getCellInput(2))?.click();
+    await page
+      .locator('.jp-cell-toolbar [data-command="jupyter-sql-cell:switch"]')
+      .click();
+
+    await expect(cells.nth(2)).toHaveClass(/jp-SqlCell/);
+  });
+
+  test('SQL cells should have SQL mimetype', async ({ page }) => {
+    const cells = page.locator('.jp-Notebook .jp-Cell');
+
+    // SQl cells should have SQL language.
+    await (await page.notebook.getCellInput(2))?.click();
+    await page
+      .locator('.jp-cell-toolbar [data-command="jupyter-sql-cell:switch"]')
+      .click();
+
+    await expect(
+      cells.nth(2).locator('div[contenteditable="true"]')
+    ).toHaveAttribute('data-language', 'sql');
+
+    // Raw cells not have codemirror language.
+    await page
+      .locator('.jp-cell-toolbar [data-command="jupyter-sql-cell:switch"]')
+      .click();
+
+    expect(
+      await cells
+        .nth(2)
+        .locator('div[contenteditable="true"]')
+        .getAttribute('data-language')
+    ).toBe(null);
+  });
+});

yarn.lock

@@ -2067,6 +2067,7 @@ __metadata:
     "@jupyterlab/builder": ^4.0.0
     "@jupyterlab/cell-toolbar": ^4.0.0
     "@jupyterlab/cells": ^4.0.0
+    "@jupyterlab/codeeditor": ^4.0.0
     "@jupyterlab/coreutils": ^6.0.0
     "@jupyterlab/filebrowser": ^4.0.0
     "@jupyterlab/notebook": ^4.0.0
@@ -2287,7 +2288,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jupyterlab/codeeditor@npm:^4.0.6":
+"@jupyterlab/codeeditor@npm:^4.0.0, @jupyterlab/codeeditor@npm:^4.0.6":
   version: 4.0.6
   resolution: "@jupyterlab/codeeditor@npm:4.0.6"
   dependencies: