From 39d37df77727657d48773b4762fe2605ad0b68a6 Mon Sep 17 00:00:00 2001
From: Jeremy Tuloup <jeremy.tuloup@gmail.com>
Date: Mon, 31 Jul 2023 14:38:37 +0200
Subject: [PATCH] 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 <leductrungxf@gmail.com>
---
 docs/source/customize.rst                | 15 +++++++++++++++
 packages/jupyterlab-preview/package.json |  1 +
 packages/jupyterlab-preview/src/index.ts |  5 ++---
 yarn.lock                                |  5 +++--
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/docs/source/customize.rst b/docs/source/customize.rst
index 6c0cbe0aa..e11b844d8 100755
--- 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
index 9f1182b62..fb305b49f 100644
--- 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
index b61cae2a7..69eabea66 100644
--- 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
index c7e160f1a..6f96b3d39 100644
--- 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