@jupytergis/jupytergis-lab 0.2.1 → 0.4.0

package/lib/index.js

@@ -6,7 +6,7 @@ import { IMainMenu } from '@jupyterlab/mainmenu';
 import { IStateDB } from '@jupyterlab/statedb';
 import { ITranslator, nullTranslator } from '@jupyterlab/translation';
 import { Menu } from '@lumino/widgets';
-import { notebookRenderePlugin } from './notebookrenderer';
+import { notebookRendererPlugin } from './notebookrenderer';
 const NAME_SPACE = 'jupytergis';
 const plugin = {
     id: 'jupytergis:lab:main-menu',
@@ -29,6 +29,7 @@ const plugin = {
         const stateDbManager = GlobalStateDbManager.getInstance();
         stateDbManager.initialize(state);
         addCommands(app, tracker, translator, formSchemaRegistry, layerBrowserRegistry, state, completionProviderManager);
+        app.shell.addClass('data-jgis-keybinding');
         // SOURCES context menu
         const newSourceSubMenu = new Menu({ commands: app.commands });
         newSourceSubMenu.title.label = translator
@@ -71,21 +72,11 @@ const plugin = {
             rank: 1,
             command: CommandIDs.removeSource
         });
-        app.commands.addKeyBinding({
-            command: CommandIDs.removeSource,
-            keys: ['Delete'],
-            selector: '.jp-gis-source.jp-gis-sourceUnused'
-        });
         app.contextMenu.addItem({
             selector: '.jp-gis-source',
             rank: 1,
             command: CommandIDs.renameSource
         });
-        app.commands.addKeyBinding({
-            command: CommandIDs.renameSource,
-            keys: ['F2'],
-            selector: '.jp-gis-sourceItem'
-        });
         // LAYERS and LAYER GROUPS context menu
         app.contextMenu.addItem({
             command: CommandIDs.symbology,
@@ -103,20 +94,15 @@ const plugin = {
             selector: '.jp-gis-layerItem',
             rank: 2
         });
-        app.commands.addKeyBinding({
-            command: CommandIDs.removeLayer,
-            keys: ['Delete'],
-            selector: '.jp-gis-layerItem'
-        });
         app.contextMenu.addItem({
             command: CommandIDs.renameLayer,
             selector: '.jp-gis-layerItem',
             rank: 2
         });
-        app.commands.addKeyBinding({
-            command: CommandIDs.renameLayer,
-            keys: ['F2'],
-            selector: '.jp-gis-layerItem'
+        app.contextMenu.addItem({
+            command: CommandIDs.zoomToLayer,
+            selector: '.jp-gis-layerItem',
+            rank: 2
         });
         const moveLayerSubmenu = new Menu({ commands: app.commands });
         moveLayerSubmenu.title.label = translator
@@ -135,21 +121,11 @@ const plugin = {
             selector: '.jp-gis-layerGroupHeader',
             rank: 2
         });
-        app.commands.addKeyBinding({
-            command: CommandIDs.removeGroup,
-            keys: ['Delete'],
-            selector: '.jp-gis-layerGroupHeader'
-        });
         app.contextMenu.addItem({
             command: CommandIDs.renameGroup,
             selector: '.jp-gis-layerGroupHeader',
             rank: 2
         });
-        app.commands.addKeyBinding({
-            command: CommandIDs.renameGroup,
-            keys: ['F2'],
-            selector: '.jp-gis-layerGroupHeader'
-        });
         // Separator
         app.contextMenu.addItem({
             type: 'separator',
@@ -181,25 +157,13 @@ const plugin = {
             command: CommandIDs.newImageLayer,
             args: { from: 'contextMenu' }
         });
+        newLayerSubMenu.addItem({
+            command: CommandIDs.newHeatmapLayer,
+            args: { from: 'contextMenu' }
+        });
         if (mainMenu) {
             populateMenus(mainMenu, isEnabled);
         }
-        // Keybindings for the console
-        app.commands.addKeyBinding({
-            command: CommandIDs.executeConsole,
-            keys: ['Shift Enter'],
-            selector: ".jpgis-console .jp-CodeConsole[data-jp-interaction-mode='notebook'] .jp-CodeConsole-promptCell"
-        });
-        app.commands.addKeyBinding({
-            command: CommandIDs.invokeCompleter,
-            keys: ['Tab'],
-            selector: '.jpgis-console .jp-CodeConsole-promptCell .jp-mod-completer-enabled'
-        });
-        app.commands.addKeyBinding({
-            command: CommandIDs.selectCompleter,
-            keys: ['Enter'],
-            selector: '.jpgis-console .jp-ConsolePanel .jp-mod-completer-active'
-        });
     }
 };
 const controlPanel = {
@@ -217,7 +181,8 @@ const controlPanel = {
         const leftControlPanel = new LeftPanelWidget({
             model: controlModel,
             tracker,
-            state
+            state,
+            commands: app.commands
         });
         leftControlPanel.id = 'jupytergis::leftControlPanel';
         leftControlPanel.title.caption = 'JupyterGIS Control Panel';
@@ -258,10 +223,10 @@ function populateMenus(mainMenu, isEnabled) {
  */
 function buildGroupsMenu(contextMenu, tracker) {
     var _a, _b, _c, _d;
-    if (!((_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.context.model)) {
+    if (!((_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model)) {
         return;
     }
-    const model = (_b = tracker.currentWidget) === null || _b === void 0 ? void 0 : _b.context.model;
+    const model = (_b = tracker.currentWidget) === null || _b === void 0 ? void 0 : _b.model;
     const submenu = (_d = (_c = contextMenu.menu.items.find(item => {
         var _a;
         return item.type === 'submenu' &&
@@ -307,4 +272,4 @@ function buildGroupsMenu(contextMenu, tracker) {
         command: CommandIDs.moveLayerToNewGroup
     });
 }
-export default [plugin, controlPanel, notebookRenderePlugin];
+export default [plugin, controlPanel, notebookRendererPlugin];

package/lib/notebookrenderer.d.ts

@@ -1,5 +1,7 @@
-import { JupyterGISModel } from '@jupytergis/schema';
+import { JupyterGISOutputWidget, JupyterGISTracker } from '@jupytergis/base';
+import { IJGISExternalCommandRegistry, JupyterGISModel } from '@jupytergis/schema';
 import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+import { CommandRegistry } from '@lumino/commands';
 import { Panel } from '@lumino/widgets';
 import { JupyterYModel } from 'yjs-widgets';
 export interface ICommMetadata {
@@ -14,10 +16,20 @@ export declare class YJupyterGISModel extends JupyterYModel {
     jupyterGISModel: JupyterGISModel;
 }
 export declare class YJupyterGISLuminoWidget extends Panel {
-    constructor(options: {
-        model: JupyterGISModel;
-    });
-    onResize: () => void;
+    constructor(options: IOptions);
+    get jgisWidget(): JupyterGISOutputWidget;
+    /**
+     * Build the widget and add it to the panel.
+     * @param options
+     */
+    private _buildWidget;
     private _jgisWidget;
 }
-export declare const notebookRenderePlugin: JupyterFrontEndPlugin<void>;
+interface IOptions {
+    commands: CommandRegistry;
+    model: JupyterGISModel;
+    externalCommands?: IJGISExternalCommandRegistry;
+    tracker?: JupyterGISTracker;
+}
+export declare const notebookRendererPlugin: JupyterFrontEndPlugin<void>;
+export {};

package/lib/notebookrenderer.js

@@ -1,44 +1,114 @@
 import { ICollaborativeDrive } from '@jupyter/collaborative-drive';
-import { JupyterGISPanel } from '@jupytergis/base';
-import { JupyterGISModel } from '@jupytergis/schema';
+import { JupyterGISOutputWidget, JupyterGISPanel, ToolbarWidget } from '@jupytergis/base';
+import { IJGISExternalCommandRegistryToken, IJupyterGISDocTracker, JupyterGISModel } from '@jupytergis/schema';
+import { showErrorMessage } from '@jupyterlab/apputils';
+import { ConsolePanel } from '@jupyterlab/console';
+import { PathExt } from '@jupyterlab/coreutils';
+import { NotebookPanel } from '@jupyterlab/notebook';
 import { MessageLoop } from '@lumino/messaging';
 import { Panel, Widget } from '@lumino/widgets';
-import { IJupyterYWidgetManager, JupyterYModel } from 'yjs-widgets';
+import { IJupyterYWidgetManager, JupyterYDoc, JupyterYModel } from 'yjs-widgets';
 export const CLASS_NAME = 'jupytergis-notebook-widget';
 export class YJupyterGISModel extends JupyterYModel {
 }
 export class YJupyterGISLuminoWidget extends Panel {
     constructor(options) {
         super();
-        this.onResize = () => {
-            if (this._jgisWidget) {
-                MessageLoop.sendMessage(this._jgisWidget, Widget.ResizeMessage.UnknownSize);
+        /**
+         * Build the widget and add it to the panel.
+         * @param options
+         */
+        this._buildWidget = (options) => {
+            const { commands, model, externalCommands, tracker } = options;
+            const content = new JupyterGISPanel({ model, commandRegistry: commands });
+            let toolbar = undefined;
+            if (model.filePath) {
+                toolbar = new ToolbarWidget({
+                    commands,
+                    model,
+                    externalCommands: (externalCommands === null || externalCommands === void 0 ? void 0 : externalCommands.getCommands()) || []
+                });
             }
+            this._jgisWidget = new JupyterGISOutputWidget({
+                model,
+                content,
+                toolbar
+            });
+            this.addWidget(this._jgisWidget);
+            tracker === null || tracker === void 0 ? void 0 : tracker.add(this._jgisWidget);
         };
+        const { model } = options;
         this.addClass(CLASS_NAME);
-        this._jgisWidget = new JupyterGISPanel(options);
-        this.addWidget(this._jgisWidget);
+        this._buildWidget(options);
+        // If the filepath was not set when building the widget, the toolbar is not built.
+        // The widget has to be built again to include the toolbar.
+        const onchange = (_, args) => {
+            if (args.stateChange) {
+                args.stateChange.forEach((change) => {
+                    var _a;
+                    if (change.name === 'path') {
+                        (_a = this.layout) === null || _a === void 0 ? void 0 : _a.removeWidget(this._jgisWidget);
+                        this._jgisWidget.dispose();
+                        this._buildWidget(options);
+                    }
+                });
+            }
+        };
+        model.sharedModel.changed.connect(onchange);
+    }
+    get jgisWidget() {
+        return this._jgisWidget;
     }
 }
-export const notebookRenderePlugin = {
+export const notebookRendererPlugin = {
     id: 'jupytergis:yjswidget-plugin',
     autoStart: true,
-    optional: [IJupyterYWidgetManager, ICollaborativeDrive],
-    activate: (app, yWidgetManager, drive) => {
+    optional: [
+        IJGISExternalCommandRegistryToken,
+        IJupyterGISDocTracker,
+        IJupyterYWidgetManager,
+        ICollaborativeDrive
+    ],
+    activate: (app, externalCommandRegistry, jgisTracker, yWidgetManager, drive) => {
         if (!yWidgetManager) {
             console.error('Missing IJupyterYWidgetManager token!');
             return;
         }
-        if (!drive) {
-            console.error('Cannot setup JupyterGIS Python API without a collaborative drive');
-            return;
-        }
         class YJupyterGISModelFactory extends YJupyterGISModel {
-            ydocFactory(commMetadata) {
+            async initialize(commMetadata) {
                 const { path, format, contentType } = commMetadata;
                 const fileFormat = format;
+                if (!drive) {
+                    showErrorMessage('Error using the JupyterGIS Python API', 'You cannot use the JupyterGIS Python API without a collaborative drive. You need to install a package providing collaboration features (e.g. jupyter-collaboration).');
+                    throw new Error('Failed to create the YDoc without a collaborative drive');
+                }
+                // The path of the project is relative to the path of the notebook
+                let currentWidgetPath = '';
+                const currentWidget = app.shell.currentWidget;
+                if (currentWidget instanceof NotebookPanel ||
+                    currentWidget instanceof ConsolePanel) {
+                    currentWidgetPath = currentWidget.sessionContext.path;
+                }
+                let localPath = '';
+                if (path) {
+                    localPath = PathExt.join(PathExt.dirname(currentWidgetPath), path);
+                    // If the file does not exist yet, create it
+                    try {
+                        await app.serviceManager.contents.get(localPath);
+                    }
+                    catch (e) {
+                        await app.serviceManager.contents.save(localPath, {
+                            content: btoa('{}'),
+                            format: 'base64'
+                        });
+                    }
+                }
+                else {
+                    // If the user did not provide a path, do not create
+                    localPath = PathExt.join(PathExt.dirname(currentWidgetPath), 'unsaved_project');
+                }
                 const sharedModel = drive.sharedModelFactory.createNew({
-                    path,
+                    path: localPath,
                     format: fileFormat,
                     contentType,
                     collaborative: true
@@ -46,7 +116,10 @@ export const notebookRenderePlugin = {
                 this.jupyterGISModel = new JupyterGISModel({
                     sharedModel: sharedModel
                 });
-                return this.jupyterGISModel.sharedModel.ydoc;
+                this.jupyterGISModel.contentsManager = app.serviceManager.contents;
+                this.jupyterGISModel.filePath = localPath;
+                this.ydoc = this.jupyterGISModel.sharedModel.ydoc;
+                this.sharedModel = new JupyterYDoc(commMetadata, this.ydoc);
             }
         }
         class YJupyterGISWidget {
@@ -54,13 +127,20 @@ export const notebookRenderePlugin = {
                 this.yModel = yModel;
                 this.node = node;
                 const widget = new YJupyterGISLuminoWidget({
-                    model: yModel.jupyterGISModel
+                    commands: app.commands,
+                    model: yModel.jupyterGISModel,
+                    externalCommands: externalCommandRegistry,
+                    tracker: jgisTracker
                 });
-                // Widget.attach(widget, node);
+                this._jgisWidget = widget.jgisWidget;
                 MessageLoop.sendMessage(widget, Widget.Msg.BeforeAttach);
                 node.appendChild(widget.node);
                 MessageLoop.sendMessage(widget, Widget.Msg.AfterAttach);
             }
+            dispose() {
+                // Dispose of the widget.
+                this._jgisWidget.dispose();
+            }
         }
         yWidgetManager.registerWidget('@jupytergis:widget', YJupyterGISModelFactory, YJupyterGISWidget);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/jupytergis-lab",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "JupyterGIS Lab extension.",
   "keywords": [
     "jupyter",
@@ -53,23 +53,23 @@
   },
   "dependencies": {
     "@jupyter/collaborative-drive": "^3.0.0",
-    "@jupytergis/base": "^0.2.1",
-    "@jupytergis/jupytergis-core": "^0.2.1",
-    "@jupytergis/schema": "^0.2.1",
+    "@jupytergis/base": "^0.4.0",
+    "@jupytergis/schema": "^0.4.0",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
+    "@jupyterlab/completer": "^4.3.0",
+    "@jupyterlab/console": "^4.3.0",
     "@jupyterlab/coreutils": "^6.3.0",
-    "@jupyterlab/docregistry": "^4.3.0",
-    "@jupyterlab/filebrowser": "^4.3.0",
-    "@jupyterlab/launcher": "^4.3.0",
     "@jupyterlab/mainmenu": "^4.3.0",
+    "@jupyterlab/notebook": "^4.3.0",
     "@jupyterlab/services": "^7.3.0",
+    "@jupyterlab/statedb": "^4.3.0",
     "@jupyterlab/translation": "^4.3.0",
-    "@jupyterlab/ui-components": "^4.3.0",
+    "@lumino/commands": "^2.0.0",
     "@lumino/messaging": "^2.0.0",
     "@lumino/widgets": "^2.0.0",
     "react": "^18.0.1",
-    "yjs-widgets": "^0.3.5"
+    "yjs-widgets": "^0.4"
   },
   "devDependencies": {
     "@jupyterlab/builder": "^4.3.0",

package/style/base.css

@@ -212,10 +212,16 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
   border: solid 1.5px red;
 }
 
+.jGIS-Mainview-Container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .jGIS-Mainview {
   width: 100%;
-  height: 100%;
   box-sizing: border-box;
+  flex: 1;
 }
 
 .jGIS-Popup-Wrapper {
@@ -523,6 +529,7 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
   order: 1;
   margin-top: 2px;
   margin-bottom: 2px;
+  text-transform: capitalize;
 }
 
 .jGIS-property-panel
@@ -731,3 +738,11 @@ div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
 .jgis-identify-grid-body:last-of-type strong:last-of-type {
   padding-bottom: 8px;
 }
+
+/* Style the file path text */
+.file-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  gap: 10px;
+}