From 78024cb6b906855e7f5d94f0fe0dd3076dc59ca5 Mon Sep 17 00:00:00 2001
From: martinRenou <martin.renou@gmail.com>
Date: Thu, 24 Nov 2022 15:39:06 +0100
Subject: [PATCH] Deprecate "classic" template

And allow for an alternative look which is "--template lab --show-margins"
---
 docs/source/customize.rst                     | 25 +++++++++++--------
 .../jupyter/voila/templates/lab/index.html.j2 | 21 ++++++++++++++++
 voila/app.py                                  |  8 +++++-
 voila/configuration.py                        |  7 ++++++
 voila/exporter.py                             | 22 ++++++++++++++--
 voila/notebook_renderer.py                    |  1 +
 6 files changed, 70 insertions(+), 14 deletions(-)

diff --git a/docs/source/customize.rst b/docs/source/customize.rst
index 6c43a6ee8..53d3595ff 100755
--- a/docs/source/customize.rst
+++ b/docs/source/customize.rst
@@ -86,6 +86,9 @@ System administrators who want to disable changing the theme, can pass ``--Voila
 .. note::
    Changing the template from the notebook metadata may change in the future if this features moves to nbconvert.
 
+.. warning::
+   The "classic" template is being deprecated and its support will be removed in Voilà 1.0.0, an alternative is to use ``voila --template lab --show-margins`` to get a similar look.
+
 
 Creating your own template
 ==========================
@@ -247,7 +250,7 @@ Here is an example of the configuration file. This file needs to be placed in th
       """Do your stuffs here"""
       return notebook
 
-   c.Voila.prelaunch_hook = hook_function 
+   c.Voila.prelaunch_hook = hook_function
 
 - Start Voila from a python script:
 
@@ -273,7 +276,7 @@ Here is an example of a custom `prelaunch-hook` to execute a notebook with `pape
             from papermill.parameterize import parameterize_notebook
 
             # setup for papermill
-            # 
+            #
             # these two blocks are done
             # to avoid triggering errors
             # in papermill's notebook
@@ -423,7 +426,7 @@ For more information about these options, check out the `Jupyter Server <https:/
 Preheated kernels
 ==================
 
-Since Voilà needs to start a new jupyter kernel and execute the requested notebook in this kernel for every connection, this would lead to a long waiting time before the widgets can be displayed in the browser. 
+Since Voilà needs to start a new jupyter kernel and execute the requested notebook in this kernel for every connection, this would lead to a long waiting time before the widgets can be displayed in the browser.
 To reduce this waiting time, especially for heavy notebooks, users can activate the preheating kernel option of Voilà.
 
 .. warning::
@@ -451,7 +454,7 @@ will set the variable "FOO" in all preheated kernels.
 
 If the pool size does not match the user's requirements, or some notebooks need to use specific environment variables..., additional settings are needed.  The easiest way to change these settings is to provide a file named `voila.json` in the same folder containing the notebooks. Settings for preheating kernel ( list of notebooks does not need preheated kernels, number of kernels in pool, refilling delay, environment variables for starting kernel...) can be set under the `VoilaKernelManager` class name.
 
-Here is an example of settings with explanations for preheating kernel option. 
+Here is an example of settings with explanations for preheating kernel option.
 
 .. code-block:: python
 
@@ -459,7 +462,7 @@ Here is an example of settings with explanations for preheating kernel option.
    {
       "VoilaConfiguration": {
          # Activate or deactivate preheat kernel option.
-         "preheat_kernel": true 
+         "preheat_kernel": true
       },
       "VoilaKernelManager": {
          # A list of notebook name or regex patterns to exclude notebooks from using preheat kernel.
@@ -467,9 +470,9 @@ Here is an example of settings with explanations for preheating kernel option.
             "notebook-does-not-need-preheat.ipynb",
             "^.*foo.*$",
             ...
-         ], 
+         ],
          # Configuration for kernel pools
-         "kernel_pools_config": { 
+         "kernel_pools_config": {
             # Setting for `voila.ipynb` notebook
             "voila.ipynb": {
                "pool_size": 3, # Size of pool
@@ -515,7 +518,7 @@ In normal mode, Voilà users can get the `query string` at run time through the
 .. code-block:: python
 
    import os
-   query_string = os.getenv('QUERY_STRING') 
+   query_string = os.getenv('QUERY_STRING')
 
 In preheating kernel mode, users can prepend with ``wait_for_request`` from ``voila.utils``
 
@@ -536,9 +539,9 @@ If the Voilà websocket handler is not started with the default protocol (`ws`),
    {
       ...
       "VoilaKernelManager": {
-         "kernel_pools_config": { 
+         "kernel_pools_config": {
             "foo.ipynb": {
-               "kernel_env_variables": { 
+               "kernel_env_variables": {
                   "VOILA_APP_IP": "192.168.1.1",
                   "VOILA_APP_PORT": "6789",
                   "VOILA_WS_PROTOCOL": "wss"
@@ -561,7 +564,7 @@ Hiding output and code cells based on cell tags
 Voilà uses `nbconvert <https://github.com/jupyter/nbconvert>`_ under the hood to render the notebooks so we can benefit from some of its advanced functionalities to hide code and output cells based on cell tags.
 
 To hide the cell output for every cell in your notebook that has been tagged (`how to tag <https://jupyter-notebook.readthedocs.io/en/stable/changelog.html#cell-tags>`_) with "hide" in Voilà::
-    
+
     voila --TagRemovePreprocessor.remove_all_outputs_tags='{"hide"}' your_notebook.ipynb
 
 To hide both the code cell and the output cell (if any) for every cell that has been tagged with "hide"::
diff --git a/share/jupyter/voila/templates/lab/index.html.j2 b/share/jupyter/voila/templates/lab/index.html.j2
index 7b299d59c..43f5a9307 100644
--- a/share/jupyter/voila/templates/lab/index.html.j2
+++ b/share/jupyter/voila/templates/lab/index.html.j2
@@ -27,6 +27,25 @@
       display: none;
     }
   </style>
+{% if resources.show_margins %}
+  <style>
+    body {
+      background: var(--jp-layout-color1);
+    }
+
+    #rendered_cells {
+      padding-left: calc(calc(100% - 1200px) * 0.5);
+      padding-right: calc( calc( 100% - 1200px - 20px ) * 0.5 );
+    }
+
+    #rendered_cells > div {
+      background: var(--jp-layout-color0);
+      padding: 6ex 12ex 8ex 12ex;
+      border-radius: var(--jp-border-radius);
+      box-shadow: var(--jp-elevation-z4);
+    }
+  </style>
+{% endif %}
 {%- endblock html_head_css -%}
 
 {# this overrides the default behaviour of rendering static widgets #}
@@ -42,6 +61,7 @@
 {{ spinner.html() }}
 {{ voila_setup_helper_functions() }}
 <div id="rendered_cells" style="display: none">
+  <div>
 {%- endblock body_header -%}
 
 {%- block body_loop -%}
@@ -73,6 +93,7 @@
 {%- endblock body_loop -%}
 
 {%- block body_footer -%}
+  </div>
 </div>
 <script type="text/javascript">
   (function() {
diff --git a/voila/app.py b/voila/app.py
index 8ce237121..9a6e588cd 100644
--- a/voila/app.py
+++ b/voila/app.py
@@ -83,7 +83,13 @@ class Voila(Application):
             },
             _("Set the log level to logging.DEBUG, and show exception tracebacks in output.")
         ),
-        'no-browser': ({'Voila': {'open_browser': False}}, _('Don\'t open the notebook in a browser after startup.'))
+        'no-browser': ({'Voila': {'open_browser': False}}, _('Don\'t open the notebook in a browser after startup.')),
+        'show-margins': (
+            {
+                'VoilaConfiguration': {'show_margins': True},
+            },
+            _('show left and right margins for the "lab" template, this gives a "classic" template look')
+        )
     }
 
     description = Unicode(
diff --git a/voila/configuration.py b/voila/configuration.py
index e22a7358e..977d8c275 100644
--- a/voila/configuration.py
+++ b/voila/configuration.py
@@ -37,6 +37,13 @@ class VoilaConfiguration(traitlets.config.Configurable):
         """
     )
     theme = Unicode('light', config=True)
+    show_margins = Bool(
+        False,
+        config=True,
+        help=(
+            'show left and right margins for the "lab" template, this gives a "classic" template look'
+        )
+    )
     strip_sources = Bool(True, config=True, help='Strip sources from rendered html')
     enable_nbextensions = Bool(False, config=True, help=('Set to True for Voilà to load notebook extensions'))
     nbextensions_path = Unicode('', config=True, help='Set to override default path provided by Jupyter Server')
diff --git a/voila/exporter.py b/voila/exporter.py
index 635d57539..df6b41a8e 100644
--- a/voila/exporter.py
+++ b/voila/exporter.py
@@ -46,15 +46,31 @@ class VoilaExporter(HTMLExporter):
     """Custom HTMLExporter that inlines the images using VoilaMarkdownRenderer"""
 
     base_url = traitlets.Unicode(help="Base url for resources").tag(config=True)
+
     markdown_renderer_class = traitlets.Type(VoilaMarkdownRenderer).tag(config=True)
+
     # Can be a ContentsManager from notebook or jupyter_server, so Any will have to do for now
     contents_manager = traitlets.Any()
 
-    # The voila exporter overrides the markdown renderer from the HTMLExporter
-    # to inline images.
+    show_margins = traitlets.Bool(
+        True,
+        help='show left and right margins for the "lab" template, this gives a "classic" template look'
+    ).tag(config=True)
+
+    @traitlets.validate("template_name")
+    def _validate_template_name(self, template_name):
+        if template_name.value == "classic":
+            self.log.warning(
+                "\"classic\" template support will be removed in Voila 1.0.0, "
+                "please use the \"lab\" template instead with the \"--show-margins\" "
+                "option for a similar look"
+            )
+        return template_name.value
 
     @pass_context
     def markdown2html(self, context, source):
+        # The voila exporter overrides the markdown renderer from the HTMLExporter
+        # to inline images.
         cell = context['cell']
         attachments = cell.get('attachments', {})
         cls = self.markdown_renderer_class
@@ -132,4 +148,6 @@ def _init_resources(self, resources):
 
         resources.update(include_assets_functions)
 
+        resources["show_margins"] = self.show_margins
+
         return resources
diff --git a/voila/notebook_renderer.py b/voila/notebook_renderer.py
index f00f75066..4a0848cdf 100644
--- a/voila/notebook_renderer.py
+++ b/voila/notebook_renderer.py
@@ -151,6 +151,7 @@ async def initialize(self, **kwargs) -> None:
             contents_manager=self.contents_manager,  # for the image inlining
             theme=self.theme,  # we now have the theme in two places
             base_url=self.base_url,
+            show_margins=self.voila_configuration.show_margins,
         )
 
         if self.voila_configuration.strip_sources: