Document how to customize the Voila Preview widget shell area (#1327)

* Add `type` option when opening the preview * Normalize factory name * Add docs --------- Co-authored-by: Duc Trung Le <[email protected]>
voila-dashboards · Jul 31, 2023 · 39d37df · 39d37df
1 parent b2bbd52
commit 39d37df
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/docs/source/customize.rst b/docs/source/customize.rst
@@ -584,3 +584,18 @@ By default, Voilà does not have an execution timeout, meaning there is no limit
     voila --VoilaExecutor.timeout=30 your_notebook.ipynb
 
 With this setting, if any cell takes longer than 30 seconds to run, a ``TimeoutError`` will be raised.  You can further customize this behavior using the ``VoilaExecutor.timeout_func`` and ``VoilaExecutor.interrupt_on_timeout`` options.
+
+Customizing the Voila Preview widget
+=========================================
+
+By using the `layout customization system <https://jupyterlab.readthedocs.io/en/latest/user/interface_customization.html>`_ of JupyterLab, users can configure the position of the Voila preview widget to open it in a different area than `main`.
+
+``Voila Preview`` is the setting key of the preview widget. For example, the following configuration will open this widget in the right panel of JupyterLab
+
+.. code-block:: javascript
+
+   "layout": {
+      "multiple": {
+         "Voila Preview": { "area": "right" }
+      }
+   }
diff --git a/packages/jupyterlab-preview/package.json b/packages/jupyterlab-preview/package.json
@@ -67,6 +67,7 @@
     "@jupyterlab/testutils": "^4.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "npm-run-all": "^4.1.5",
     "rimraf": "^2.6.1",
     "source-map-loader": "~1.0.2",
     "typescript": "~5.0.2"

diff --git a/packages/jupyterlab-preview/src/index.ts b/packages/jupyterlab-preview/src/index.ts
@@ -106,7 +106,6 @@ const extension: JupyterFrontEndPlugin<IVoilaPreviewTracker> = {
     const tracker = new WidgetTracker<VoilaPreview>({
       namespace: 'voila-preview'
     });
-
     if (restorer) {
       restorer.restore(tracker, {
         command: 'docmanager:open',
@@ -143,7 +142,7 @@ const extension: JupyterFrontEndPlugin<IVoilaPreviewTracker> = {
     }
 
     const factory = new VoilaPreviewFactory(getVoilaUrl, {
-      name: 'Voila-preview',
+      name: 'Voila Preview',
       fileTypes: ['notebook'],
       modelName: 'notebook'
     });
@@ -191,7 +190,7 @@ const extension: JupyterFrontEndPlugin<IVoilaPreviewTracker> = {
           }
           commands.execute('docmanager:open', {
             path: context.path,
-            factory: 'Voila-preview',
+            factory: 'Voila Preview',
             options: {
               mode: 'split-right'
             }

diff --git a/yarn.lock b/yarn.lock
@@ -5157,6 +5157,7 @@ __metadata:
     "@lumino/signaling": ^2.0.0
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
+    npm-run-all: ^4.1.5
     react: ^18.2.0
     react-dom: ^18.2.0
     rimraf: ^2.6.1
@@ -15978,11 +15979,11 @@ __metadata:
 
 "typescript@patch:typescript@~5.0.2#~builtin<compat/typescript>":
   version: 5.0.4
-  resolution: "typescript@patch:typescript@npm%3A5.0.4#~builtin<compat/typescript>::version=5.0.4&hash=85af82"
+  resolution: "typescript@patch:typescript@npm%3A5.0.4#~builtin<compat/typescript>::version=5.0.4&hash=b5f058"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: bb309d320c59a26565fb3793dba550576ab861018ff3fd1b7fccabbe46ae4a35546bc45f342c0a0b6f265c801ccdf64ffd68f548f117ceb7f0eac4b805cd52a9
+  checksum: d26b6ba97b6d163c55dbdffd9bbb4c211667ebebc743accfeb2c8c0154aace7afd097b51165a72a5bad2cf65a4612259344ff60f8e642362aa1695c760d303ac
   languageName: node
   linkType: hard