Add ability to enable / disable collapsible notebook cells

Adds a setting in the Jupyter lab setting registry to enable/disable
the collapsing feature of ToC in notebooks. Removes the dropdown
feature in Toc but leaves the blue side pane, so some collapse behavior
is still present.

packages/toc/package.json

@@ -20,6 +20,7 @@
   "author": "Project Jupyter",
   "files": [
     "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+    "schema/*.json",
     "style/**/*.{css,eot,gif,html,jpg,json,png,svg,woff2,ttf}"
   ],
   "main": "lib/index.js",
@@ -74,6 +75,7 @@
     "access": "public"
   },
   "jupyterlab": {
-    "extension": "lib/extension.js"
+    "extension": "lib/extension.js",
+    "schemaDir": "schema"
   }
 }

packages/toc/schema/plugin.json

@@ -0,0 +1,25 @@
+{
+  "title": "Table of Contents",
+  "description": "Table of contents settings.",
+  "definitions": {
+    "tocConfig": {
+      "properties": {
+        "collapsibleNotebooks": {
+          "type": "boolean"
+        }
+      }
+    }
+  },
+  "properties": {
+    "tocConfig": {
+      "title": "ToC Configuration",
+      "description": "The configuration for the table of contents.",
+      "$ref": "#/definitions/tocConfig",
+      "default": {
+        "collapsibleNotebooks": true
+      }
+    }
+  },
+  "additionalProperties": false,
+  "type": "object"
+}

packages/toc/src/extension.ts

@@ -12,6 +12,10 @@ import { IEditorTracker } from '@jupyterlab/fileeditor';
 import { IMarkdownViewerTracker } from '@jupyterlab/markdownviewer';
 import { INotebookTracker } from '@jupyterlab/notebook';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+
+import { JSONObject } from '@lumino/coreutils';
+
 import { TableOfContents } from './toc';
 import {
   createLatexGenerator,
@@ -48,7 +52,8 @@ function activateTOC(
   restorer: ILayoutRestorer,
   markdownViewerTracker: IMarkdownViewerTracker,
   notebookTracker: INotebookTracker,
-  rendermime: IRenderMimeRegistry
+  rendermime: IRenderMimeRegistry,
+  settingRegistry: ISettingRegistry
 ): ITableOfContentsRegistry {
   // Create the ToC widget:
   const toc = new TableOfContents({ docmanager, rendermime });
@@ -65,13 +70,20 @@ function activateTOC(
   // Add the ToC widget to the application restorer:
   restorer.add(toc, 'juputerlab-toc');
 
-  // Create a notebook generator:
-  const notebookGenerator = createNotebookGenerator(
-    notebookTracker,
-    toc,
-    rendermime.sanitizer
-  );
-  registry.add(notebookGenerator);
+  // Load the configuration of whether to enable collapsing behavior
+  settingRegistry.load('@jupyterlab/toc:plugin').then(settings => {
+    const config = settings.get('tocConfig').composite as JSONObject;
+    const collapsibleNotebooks = config.collapsibleNotebooks as boolean;
+
+    // Create a notebook generator:
+    const notebookGenerator = createNotebookGenerator(
+      notebookTracker,
+      toc,
+      collapsibleNotebooks,
+      rendermime.sanitizer
+    );
+    registry.add(notebookGenerator);
+  });
 
   // Create a Markdown generator:
   const markdownGenerator = createMarkdownGenerator(
@@ -141,7 +153,8 @@ const extension: JupyterFrontEndPlugin<ITableOfContentsRegistry> = {
     ILayoutRestorer,
     IMarkdownViewerTracker,
     INotebookTracker,
-    IRenderMimeRegistry
+    IRenderMimeRegistry,
+    ISettingRegistry
   ],
   activate: activateTOC
 };

packages/toc/src/generators/notebook/index.ts

@@ -31,10 +31,12 @@ import { toolbar } from './toolbar_generator';
 function createNotebookGenerator(
   tracker: INotebookTracker,
   widget: TableOfContents,
+  collapsibleNotebooks: boolean,
   sanitizer: ISanitizer
 ): Registry.IGenerator<NotebookPanel> {
   const options = new OptionsManager(widget, tracker, {
     numbering: false,
+    collapsibleNotebooks: collapsibleNotebooks,
     sanitizer: sanitizer
   });
   return {

packages/toc/src/generators/notebook/options_manager.ts

@@ -21,6 +21,11 @@ interface Options {
    */
   sanitizer: ISanitizer;
 
+  /**
+   * Boolean indicating whether notebook cells collapsible
+   */
+  collapsibleNotebooks: boolean;
+
   /**
    * Tag tool component.
    */
@@ -50,6 +55,7 @@ class OptionsManager extends Registry.IOptionsManager {
     this._numbering = options.numbering;
     this._widget = widget;
     this._notebook = notebook;
+    this._collapsible = options.collapsibleNotebooks;
     this.sanitizer = options.sanitizer;
     this.storeTags = [];
   }
@@ -92,6 +98,13 @@ class OptionsManager extends Registry.IOptionsManager {
     return this._numbering;
   }
 
+  /**
+   * Gets ToC configuration of whether to enable collapsible cells
+   */
+  get collapsibleNotebooks() {
+    return this._collapsible;
+  }
+
   /**
    * Toggles whether to show code previews in the table of contents.
    */
@@ -195,6 +208,7 @@ class OptionsManager extends Registry.IOptionsManager {
   private _showMarkdown = false;
   private _showTags = false;
   private _notebook: INotebookTracker;
+  private _collapsible = false;
   private _widget: TableOfContents;
   private _tagTool: TagsToolComponent | null = null;
   public storeTags: string[];

packages/toc/src/generators/notebook/render.tsx

@@ -49,19 +49,24 @@ function render(
           'toc-hr-collapsed'
         ) as boolean;
 
-        // Render the twist button:
-        let button = twistButton(item.cellRef, collapsed || false, onClick);
-
         // Update the collapsed state of the corresponding notebook cell:
         setCollapsedState(tracker, item.cellRef, collapsed);
 
-        // Render the heading item:
-        jsx = (
-          <div className="toc-entry-holder">
-            {button}
-            {jsx}
-          </div>
-        );
+        // Only render the twist button if configured to enable collapsing behavior:
+        if (options.collapsibleNotebooks) {
+          let button = twistButton(item.cellRef, collapsed || false, onClick);
+
+          // Render the heading item:
+          jsx = (
+            <div className="toc-entry-holder">
+              {button}
+              {jsx}
+            </div>
+          );
+        } else {
+          // Render the heading item without the dropdown button:
+          jsx = <div className="toc-entry-holder">{jsx}</div>;
+        }
       }
       return jsx;
     }
@@ -76,14 +81,20 @@ function render(
         let collapsed = item.cellRef!.model.metadata.get(
           'toc-hr-collapsed'
         ) as boolean;
-        let button = twistButton(item.cellRef, collapsed || false, onClick);
-        setCollapsedState(tracker, item.cellRef, collapsed);
-        jsx = (
-          <div className="toc-entry-holder">
-            {button}
-            {jsx}
-          </div>
-        );
+
+        if (options.collapsibleNotebooks) {
+          let button = twistButton(item.cellRef, collapsed || false, onClick);
+          setCollapsedState(tracker, item.cellRef, collapsed);
+          jsx = (
+            <div className="toc-entry-holder">
+              {button}
+              {jsx}
+            </div>
+          );
+        } else {
+          // Render the heading item without the dropdown button:
+          jsx = <div className="toc-entry-holder">{jsx}</div>;
+        }
       }
       return jsx;
     }