visualpython · minjk-bl · Oct 13, 2023 · Oct 13, 2023 · Oct 13, 2023 · Oct 13, 2023
diff --git a/jupyterlab/.gitignore b/jupyterlab/.gitignore
@@ -1,9 +1,15 @@
 *.bundle.*
 node_modules/
+*.log
+.eslintcache
+.stylelintcache
 *.egg-info/
 .ipynb_checkpoints
 *.tsbuildinfo
 visualpython/labextension
+jupyterlab-visualpython/labextension
+# Version file is handled by hatchling
+jupyterlab-visualpython/_version.py
 
 # Created by https://www.gitignore.io/api/python
 # Edit at https://www.gitignore.io/?templates=python
@@ -54,6 +60,7 @@ htmlcov/
 .coverage.*
 .cache
 nosetests.xml
+coverage/
 coverage.xml
 *.cover
 .hypothesis/
@@ -108,3 +115,6 @@ dmypy.json
 
 # OSX files
 .DS_Store
+
+# Yarn cache
+.yarn/
diff --git a/jupyterlab/.yarnrc.yml b/jupyterlab/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/jupyterlab/binder/postBuild b/jupyterlab/binder/postBuild
@@ -1,5 +1,5 @@
 #!/usr/bin/env python3
-""" perform a development install of visualpython
+""" perform a development install of jupyterlab-visualpython
 
     On Binder, this will run _after_ the environment has been fully created from
     the environment.yml in this directory.
@@ -31,6 +31,7 @@ _(sys.executable, "-m", "pip", "check")
 
 # install the labextension
 _(sys.executable, "-m", "pip", "install", "-e", ".")
+_(sys.executable, "-m", "jupyter", "labextension", "develop", "--overwrite", ".")
 
 # verify the environment the extension didn't break anything
 _(sys.executable, "-m", "pip", "check")
@@ -42,5 +43,5 @@ _("jupyter", "server", "extension", "list")
 _("jupyter", "labextension", "list")
 
 
-print("JupyterLab with visualpython is ready to run with:\n")
+print("JupyterLab with jupyterlab-visualpython is ready to run with:\n")
 print("\tjupyter lab\n")
diff --git a/jupyterlab/lib/VpPanel.js b/jupyterlab/lib/VpPanel.js
@@ -8,7 +8,7 @@ define([
 	'jquery-ui', 
 	'jquery-ui-css',
 	'codemirror/lib/codemirror', 
-	// __VP_CSS_LOADER__('codemirror/lib/codemirror'), // INTEGRATION: unified version of css loader 
+	'vp_base/lib/codemirror/lib/codemirror.css', // INTEGRATION: unified version of css loader 
 	'vp_base/js/loadVisualpython',
 	'vp_base/js/com/com_Config'
 ], function(
@@ -17,7 +17,7 @@ define([
 	text, css, $, 
 	ui, uiCss,
 	codemirror, 
-	// cmCss, 
+	cmCss, 
 	loadVisualpython, com_Config) {
 
 	const { 
@@ -41,9 +41,9 @@ define([
 			this.app = app;
 			this.vpFrame = loadVisualpython.initVisualpython();
 
-			this.id = 'visualpython_vpPanel';
+			this.id = 'jupyterlab-visualpython:panel';
 			// LabIcon with svg : @jupyterlab/ui-components/lib/icon/labicon.js
-			this.title.icon = new LabIcon({ name: 'visualpython:toggle', svgstr: vpIcon.default });
+			this.title.icon = new LabIcon({ name: 'jupyterlab-visualpython:toggle-icon', svgstr: vpIcon });
 			this.title.caption = 'Visual Python';
 
 			// register node using jquery to element

diff --git a/jupyterlab/lib/index.js b/jupyterlab/lib/index.js
@@ -14,12 +14,17 @@ global.__VP_RAW_LOADER__ = function(path) {
     return path;
 }
 
+const vpId = 'jupyterlab-visualpython:plugin';
+
+const { ICommandPalette } = require('@jupyterlab/apputils');
+
 global.$ = $;
 global.vpBase = path.resolve(__dirname, "lib") + '/';
 module.exports = [{
-    id: 'visualpython:entry',
+    id: vpId,
     autoStart: true,
-    activate: function (app) {
+    requires: [ICommandPalette],
+    activate: function (app, palette) {
         console.log(
             'JupyterLab extension visualpython is activated!'
         );
@@ -35,5 +40,30 @@ module.exports = [{
         // Add vp to the right area:
         var vpPanel = new VpPanel(app);
         app.shell.add(vpPanel, 'right', { rank: 900, type: 'Visual Python' });
+
+        // Add toggle button
+        let isVpVisible = app.name !== 'JupyterLab'; // compatible for notebook 7.x (hidden for jupyterlab)
+        let toggleCommand = 'jupyterlab-visualpython:toggle-panel';
+        let vpLabel = isVpVisible?'Toggle Visual Python':'';
+        app.commands.addCommand(toggleCommand, {
+            isEnabled: () => isVpVisible,
+            isVisible: () => isVpVisible,
+            iconClass: 'jp-vp-icon',
+            iconLabel: vpLabel,
+            execute: () => {
+                if (app.shell.rightCollapsed === true || $('#vp_wrapper').is(':visible') === false) {
+                    app.shell.activateById('vp_wrapper');
+                } else {
+                    app.shell.collapseRight();
+                }
+            }
+        });
+
+        // Add command palette
+        palette.addItem({
+            command: toggleCommand,
+            category: 'Visual Python',
+            label: 'Toggle Visual Python'
+        });
     }
 }];