SwanSpawner: Allow user to opt for JupyterLab interface

Allow users to choose whether to use the new JupyterLab interface or the classic one by selecing an option in the session startup form.
swan-cern · Jun 26, 2024 · 6f742b7 · 6f742b7
1 parent 5020753
commit 6f742b7
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 6 deletions.
diff --git a/SwanSpawner/swanspawner/swanspawner.py b/SwanSpawner/swanspawner/swanspawner.py
@@ -37,6 +37,8 @@ class SwanSpawner(base_class):
 
         user_memory = 'memory'
 
+        use_jupyterlab_field = 'use-jupyterlab'
+
         spark_cluster_field = 'spark-cluster'
 
         condor_pool = 'condor-pool'
@@ -86,6 +88,7 @@ def options_from_form(self, formdata):
             options[self.condor_pool]           = formdata[self.condor_pool][0]
             options[self.user_n_cores]          = int(formdata[self.user_n_cores][0])
             options[self.user_memory]           = formdata[self.user_memory][0] + 'G'
+            options[self.use_jupyterlab_field]  = formdata.get(self.use_jupyterlab_field, 'unchecked')[0]
 
             self.offload = options[self.spark_cluster_field] != 'none'
 
@@ -132,6 +135,12 @@ def get_env(self):
                     SERVER_HOSTNAME        = os.uname().nodename,
                 ))
 
+            # Enable JupyterLab interface
+            if self.user_options[self.use_jupyterlab_field] == 'checked':
+                env.update(dict(
+                    SWAN_USE_JUPYTERLAB = 'true'
+                ))
+
             # Enable configuration for CERN HTCondor pool
             if self.user_options[self.condor_pool] != 'none':
                 env['CERN_HTCONDOR'] = 'true'

diff --git a/SwanSpawner/swanspawner/templates/options_form_template.html b/SwanSpawner/swanspawner/templates/options_form_template.html
@@ -171,24 +171,48 @@
             selectCondor.add(selectCondorOption);
         }
 
-        adjust_spark();
+        adjust_options();
     }
 
     /**
-     * Modifies the selection of Spark clusters depending on the chosen platform
+     * Modifies the selection of Spark clusters and enables users to choose
+     * to use the JupyterLab interface depending on the chosen platform
      */
-    function adjust_spark() {
+    function adjust_options() {
         var platformOptions = document.getElementById('platformOptions');
         var clusterOptions  = document.getElementById('clusterOptions');
+        var jupyterLabOption = document.getElementById("use-jupyterlab");
+
+        /**
+         * Store the chosen platform in a hidden form field, as disabled fields
+         * are not sent in the request
+         */ 
+        var hiddenPlatformOptions = document.getElementById('hiddenPlatformOptions');
 
         var isAlma = platformOptions.selectedOptions[0].text.startsWith('AlmaLinux 9');
 
         if (isAlma) {
-            // On Alma9, make sure cluster selection is enabled
+            /* On Alma9, make sure cluster selection is enabled and that users can
+            select the JupyterLab interface */
             clusterOptions.removeAttribute('disabled');
+            jupyterLabOption.removeAttribute('disabled');
         } else {
             clusterOptions.setAttribute('disabled', '');
             clusterOptions.selectedIndex = 0;
+            jupyterLabOption.setAttribute('disabled', '');
+        }
+
+        hiddenPlatformOptions.value = platformOptions.value;
+    }
+
+    function adjust_platforms() {
+        var platformOptions = document.getElementById('platformOptions');
+        var jupyterLabOption = document.getElementById('use-jupyterlab');
+
+        if (jupyterLabOption.checked) {
+            platformOptions.setAttribute('disabled', '');
+        } else {
+            platformOptions.removeAttribute('disabled');
         }
     }
 
@@ -200,9 +224,25 @@
     <span class='nb' id="optionsHeader">Specify the configuration parameters for the SWAN container that will be created for you.</span>
     </label>
     <label for="alma9">
-    <span class='news' id="alma9">Try out our new experimental interface based on <b>JupyterLab</b>!</span>
+    <span class='news' id="alma9">Try out our new experimental interface based on <b>JupyterLab</b> and let us know your feedback!</span>
     </label>
     <br><br>
+    <label> User Interface <a href="#" onclick="toggle_visibility('userInterfaceDetails');"><span class='nbs'>more...</span></a></label>
+    <div style="display:none;" id="userInterfaceDetails">
+        <span class='nb'>JupyterLab is the latest web-based interactive development environment for notebooks, code and data. More information <a target="_blank" href="https://jupyterlab.readthedocs.io/en/stable/user/interface.html">here</a>.</span>
+    </div>
+    <div style="display: flex; align-items: center">
+      <input
+        id="use-jupyterlab"
+        type="checkbox"
+        name="use-jupyterlab"
+        value="checked"
+        style="display: inline; width: initial; margin: 0 8px 0 0"
+        onchange="adjust_platforms();"
+      />
+      <span> Try the new JupyterLab interface (experimental)</span>
+    </div>
+    <br>
     <label for="lcgReleaseOptions">Software stack <a href="#" onclick="toggle_visibility('lcgReleaseDetails');"><span class='nbs'>more...</span></a>
     <div style="display:none;" id="lcgReleaseDetails">
        <span class='nb'>The software stack to associate to the container. See the <a target="_blank" href="http://lcginfo.cern.ch/">LCG package info</a> page.</span>
@@ -216,7 +256,8 @@
        <span class='nb'>The combination of compiler version and flags.</span>
     </div>
     </label>
-    <select id="platformOptions" name="platform" onchange="adjust_spark();"></select>
+    <select id="platformOptions" onchange="adjust_options();"></select>
+    <input type="hidden" id="hiddenPlatformOptions" name="platform">
     <br>
     <label for="scriptenvOption">Environment script <a href="#" onclick="toggle_visibility('scriptenvDetails');"><span class='nbs'>more...</span></a>
     <div style="display:none;" id="scriptenvDetails">