Persistent variable name value

src/cellfactory.ts

@@ -2,14 +2,14 @@ import { CellChange, ISharedCodeCell } from '@jupyter/ydoc';
 import { Cell, CodeCell, ICellHeader, ICellModel } from '@jupyterlab/cells';
 import { IChangedArgs } from '@jupyterlab/coreutils';
 import { Notebook, NotebookPanel } from '@jupyterlab/notebook';
-import { ReactWidget, ReactiveToolbar } from '@jupyterlab/ui-components';
+import { ReactiveToolbar } from '@jupyterlab/ui-components';
 import { Message } from '@lumino/messaging';
 import { SingletonLayout, Widget } from '@lumino/widgets';
 
-import { MAGIC } from './common';
+import { ICustomCodeCell, MAGIC } from './common';
 import { IKernelInjection } from './kernelInjection';
 import { IDatabasesPanel } from './sidepanel';
-import { DatabaseSelect, variableName } from './widgets';
+import { DatabaseSelect, VariableName } from './widgets';
 
 /**
  * The class of the header.
@@ -63,7 +63,7 @@ export class NotebookContentFactory
 /**
  * A custom code cell to copy the output in a variable when the cell is executed.
  */
-class CustomCodeCell extends CodeCell {
+class CustomCodeCell extends CodeCell implements ICustomCodeCell {
   constructor(options: CustomCodeCell.IOptions) {
     super(options);
     this._kernelInjection = options.kernelInjection;
@@ -80,8 +80,11 @@ class CustomCodeCell extends CodeCell {
   }
 
   /**
-   * Set the name of the variable whose copy cell output.
+   * Getter and setter of the name of the variable to copy the cell output to.
    */
+  get variable(): string | null {
+    return this._variable;
+  }
   set variable(name: string | null) {
     this._variable = name;
   }
@@ -110,6 +113,9 @@ class CustomCodeCell extends CodeCell {
  * The namespace for custom code cell.
  */
 namespace CustomCodeCell {
+  /**
+   * The custom code cell options.
+   */
   export interface IOptions extends CodeCell.IOptions {
     /**
      * The kernel injection, whether the kernel can handle sql magics or not.
@@ -174,8 +180,13 @@ export class CellHeader extends Widget implements ICellHeader {
    *
    * It adds a listener on the cell content to display or not the toolbar.
    */
-  set cell(model: CustomCodeCell | null) {
-    this._cell = model;
+  set cell(customCodeCell: CustomCodeCell | null) {
+    this._cell = customCodeCell;
+
+    if (!this._cell) {
+      return;
+    }
+
     this._cell?.model.sharedModel.changed.connect(
       this._onSharedModelChanged,
       this
@@ -187,10 +198,9 @@ export class CellHeader extends Widget implements ICellHeader {
     });
 
     this._toolbar.addItem('select', databaseSelect);
-    this._toolbar.addItem(
-      'variable',
-      ReactWidget.create(variableName(this.setVariable))
-    );
+
+    const variableName = new VariableName({ cell: this._cell });
+    this._toolbar.addItem('variable', variableName);
 
     this._checkSource();
   }

src/common.ts

@@ -7,3 +7,17 @@ export const LOAD_MAGIC = '%load_ext sql';
  * The expected magic.
  */
 export const MAGIC = '%%sql';
+
+/**
+ * Custom code cell interface.
+ */
+export interface ICustomCodeCell {
+  /**
+   * The SQL status.
+   */
+  isSQL: boolean;
+  /**
+   * The name of the variable to copy the cell output to.
+   */
+  variable: string | null;
+}

src/widgets.tsx

@@ -2,7 +2,7 @@ import { ICellModel } from '@jupyterlab/cells';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import React from 'react';
 
-import { MAGIC } from './common';
+import { ICustomCodeCell, MAGIC } from './common';
 import { Database } from './databases';
 import { IDatabasesPanel } from './sidepanel';
 
@@ -39,26 +39,24 @@ export class DatabaseSelect extends ReactWidget {
       }
     });
     return (
-      <div>
-        <label>
-          Database:&nbsp;
-          <select
-            onChange={this.onChange}
-            className={'jp-sqlcell-select'}
-            disabled={this._cellModel?.type !== 'code'}
-          >
-            <option disabled selected={currentDatabase === defaultValue}>
-              {defaultValue}
-            </option>
-            ;
-            {aliases.map(alias => {
-              return (
-                <option selected={currentDatabase === alias}>{alias}</option>
-              );
-            })}
-          </select>
-        </label>
-      </div>
+      <label>
+        Database:&nbsp;
+        <select
+          onChange={this.onChange}
+          className={'jp-sqlcell-select'}
+          disabled={this._cellModel?.type !== 'code'}
+        >
+          <option disabled selected={currentDatabase === defaultValue}>
+            {defaultValue}
+          </option>
+          ;
+          {aliases.map(alias => {
+            return (
+              <option selected={currentDatabase === alias}>{alias}</option>
+            );
+          })}
+        </select>
+      </label>
     );
   }
 
@@ -71,12 +69,31 @@ export class DatabaseSelect extends ReactWidget {
  *
  * @param fn : the callback function.
  */
-export function variableName(fn: (variable: string) => void) {
-  const onChange = (event: React.ChangeEvent) => {
-    fn((event.target as HTMLInputElement).value);
+export class VariableName extends ReactWidget {
+  constructor(options: { cell: ICustomCodeCell }) {
+    super();
+    this._cell = options.cell;
+    this._value = this._cell.variable ?? '';
+  }
+
+  private _onChange = (event: React.ChangeEvent) => {
+    this._value = (event.target as HTMLInputElement).value;
+    this._cell.variable = this._value;
   };
 
-  return <input type={'text'} onChange={onChange}></input>;
+  render() {
+    return (
+      <input
+        type={'text'}
+        onChange={this._onChange}
+        title={'The variable where to copy the cell output'}
+        defaultValue={this._value}
+      ></input>
+    );
+  }
+
+  private _cell: ICustomCodeCell;
+  private _value: string;
 }
 
 /**