Add anchor attribute to choose between right sidebar or main area

examples/introduction.ipynb

@@ -25,21 +25,49 @@
    "source": [
     "sc = Sidecar(title='Sidecar Output')\n",
     "sl = IntSlider(description='Some slider')\n",
+    "\n",
     "with sc:\n",
     "    display(sl)"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Sidecar as main area panel"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
    "metadata": {},
    "outputs": [],
-   "source": []
+   "source": [
+    "sl = IntSlider(description='Some slider')\n",
+    "\n",
+    "with Sidecar(title='Sidecar Output Main', anchor='split-right'):\n",
+    "    display(sl)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "`anchor` can take one of the following value: \n",
+    "\n",
+    "- 'split-right': main panel right of the notebook,\n",
+    "- 'split-left': main panel left of the notebook,\n",
+    "- 'split-top': main panel above the notebook,\n",
+    "- 'split-bottom': main panel below the notebook, \n",
+    "- 'tab-before': main panel stacked before the tab notebook,\n",
+    "- 'tab-after': main panel stacked after the tab notebook,\n",
+    "- 'right': [default] right sidebar panel."
+   ]
   }
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "Python 3",
+   "display_name": "Python [default]",
    "language": "python",
    "name": "python3"
   },
@@ -53,9 +81,9 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.6.4"
+   "version": "3.6.5"
   }
  },
  "nbformat": 4,
  "nbformat_minor": 2
-}
+}

sidecar/sidecar.py

@@ -9,7 +9,7 @@
 """
 
 from ipywidgets import Output
-from traitlets import Unicode
+from traitlets import Unicode, CaselessStrEnum
 from ._version import EXTENSION_SPEC_VERSION
 
 module_name = "@jupyter-widgets/jupyterlab-sidecar"
@@ -23,3 +23,8 @@ class Sidecar(Output):
     _view_module = Unicode(module_name).tag(sync=True)
     _view_module_version = Unicode(EXTENSION_SPEC_VERSION).tag(sync=True)
     title = Unicode('Sidecar').tag(sync=True)
+    anchor = CaselessStrEnum(
+        ['split-right', 'split-left', 'split-top', 'split-bottom', 'tab-before', 'tab-after', 'right'],
+        default_value='right', 
+        allow_none=True
+    ).tag(sync=True)

src/plugin.ts

@@ -69,7 +69,12 @@ function activateWidgetExtension(app: JupyterLab, registry: IJupyterWidgetRegist
               }
             });
           } else {
-            app.shell.add(w, 'right');
+            let anchor = this.model.get('anchor') || 'right';
+            if(anchor === 'right'){
+              app.shell.add(w, 'right');
+            } else {
+              app.shell.add(w, 'main', {mode: anchor});
+            }
             app.shell.activateById(w.id);
           }
         }

src/widget.ts

@@ -22,7 +22,8 @@ class SidecarModel extends output.OutputModel {
       _view_name: SidecarModel.view_name,
       _view_module: SidecarModel.view_module,
       _view_module_version: SidecarModel.view_module_version,
-      title: 'Sidecar'
+      title: 'Sidecar',
+      anchor: 'right'
     };
   }