@jupytergis/jupytergis-lab 0.1.1

package/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2023, JupyterGIS contributors
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1 @@
+# jupytergis_lab

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+declare const _default: JupyterFrontEndPlugin<void>[];
+export default _default;

package/lib/index.js

@@ -0,0 +1,308 @@
+import { CommandIDs, ControlPanelModel, LeftPanelWidget, RightPanelWidget, addCommands, createDefaultLayerRegistry } from '@jupytergis/base';
+import { IJGISFormSchemaRegistryToken, IJGISLayerBrowserRegistryToken, IJupyterGISDocTracker } from '@jupytergis/schema';
+import { ILayoutRestorer } from '@jupyterlab/application';
+import { ICompletionProviderManager } from '@jupyterlab/completer';
+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';
+const NAME_SPACE = 'jupytergis';
+const plugin = {
+    id: 'jupytergis:lab:main-menu',
+    autoStart: true,
+    requires: [
+        IJupyterGISDocTracker,
+        IJGISFormSchemaRegistryToken,
+        IJGISLayerBrowserRegistryToken,
+        IStateDB
+    ],
+    optional: [IMainMenu, ITranslator, ICompletionProviderManager],
+    activate: (app, tracker, formSchemaRegistry, layerBrowserRegistry, state, mainMenu, translator, completionProviderManager) => {
+        console.log('jupytergis:lab:main-menu is activated!');
+        translator = translator !== null && translator !== void 0 ? translator : nullTranslator;
+        const isEnabled = () => {
+            return (tracker.currentWidget !== null &&
+                tracker.currentWidget === app.shell.currentWidget);
+        };
+        createDefaultLayerRegistry(layerBrowserRegistry);
+        addCommands(app, tracker, translator, formSchemaRegistry, layerBrowserRegistry, state, completionProviderManager);
+        // SOURCES context menu
+        const newSourceSubMenu = new Menu({ commands: app.commands });
+        newSourceSubMenu.title.label = translator
+            .load('jupyterlab')
+            .__('Add Source');
+        newSourceSubMenu.id = 'jp-gis-contextmenu-addSource';
+        app.contextMenu.addItem({
+            type: 'submenu',
+            selector: '.jp-gis-sourcePanel',
+            rank: 3,
+            submenu: newSourceSubMenu
+        });
+        newSourceSubMenu.addItem({
+            command: CommandIDs.newRasterSource,
+            args: { from: 'contextMenu' }
+        });
+        newSourceSubMenu.addItem({
+            command: CommandIDs.newVectorSource,
+            args: { from: 'contextMenu' }
+        });
+        newSourceSubMenu.addItem({
+            command: CommandIDs.newGeoJSONSource,
+            args: { from: 'contextMenu' }
+        });
+        newSourceSubMenu.addItem({
+            command: CommandIDs.newRasterDemSource,
+            args: { from: 'contextMenu' }
+        });
+        newSourceSubMenu.addItem({
+            command: CommandIDs.newImageSource,
+            args: { from: 'contextMenu' }
+        });
+        app.contextMenu.addItem({
+            type: 'separator',
+            selector: '.jp-gis-sourcePanel',
+            rank: 2
+        });
+        app.contextMenu.addItem({
+            selector: '.jp-gis-source.jp-gis-sourceUnused',
+            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,
+            selector: '.jp-gis-layerItem',
+            rank: 1
+        });
+        // Separator
+        app.contextMenu.addItem({
+            type: 'separator',
+            selector: '.jp-gis-layerPanel',
+            rank: 1
+        });
+        app.contextMenu.addItem({
+            command: CommandIDs.removeLayer,
+            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'
+        });
+        const moveLayerSubmenu = new Menu({ commands: app.commands });
+        moveLayerSubmenu.title.label = translator
+            .load('jupyterlab')
+            .__('Move Selected Layers to Group');
+        moveLayerSubmenu.id = 'jp-gis-contextmenu-movelayer';
+        app.contextMenu.addItem({
+            type: 'submenu',
+            selector: '.jp-gis-layerItem',
+            rank: 2,
+            submenu: moveLayerSubmenu
+        });
+        app.contextMenu.opened.connect(() => buildGroupsMenu(app.contextMenu, tracker));
+        app.contextMenu.addItem({
+            command: CommandIDs.removeGroup,
+            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',
+            selector: '.jp-gis-layerPanel',
+            rank: 2
+        });
+        const newLayerSubMenu = new Menu({ commands: app.commands });
+        newLayerSubMenu.title.label = translator.load('jupyterlab').__('Add Layer');
+        newLayerSubMenu.id = 'jp-gis-contextmenu-addLayer';
+        app.contextMenu.addItem({
+            type: 'submenu',
+            selector: '.jp-gis-layerPanel',
+            rank: 3,
+            submenu: newLayerSubMenu
+        });
+        newLayerSubMenu.addItem({
+            command: CommandIDs.newRasterLayer,
+            args: { from: 'contextMenu' }
+        });
+        newLayerSubMenu.addItem({
+            command: CommandIDs.newVectorLayer,
+            args: { from: 'contextMenu' }
+        });
+        newLayerSubMenu.addItem({
+            command: CommandIDs.newHillshadeLayer,
+            args: { from: 'contextMenu' }
+        });
+        newLayerSubMenu.addItem({
+            command: CommandIDs.newImageLayer,
+            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 = {
+    id: 'jupytergis:lab:controlpanel',
+    autoStart: true,
+    requires: [
+        ILayoutRestorer,
+        IJupyterGISDocTracker,
+        IJGISFormSchemaRegistryToken,
+        IStateDB
+    ],
+    activate: (app, restorer, tracker, formSchemaRegistry, state) => {
+        const controlModel = new ControlPanelModel({ tracker });
+        const leftControlPanel = new LeftPanelWidget({
+            model: controlModel,
+            tracker,
+            state
+        });
+        leftControlPanel.id = 'jupytergis::leftControlPanel';
+        leftControlPanel.title.caption = 'JupyterGIS Control Panel';
+        // TODO Need an icon
+        // leftControlPanel.title.icon = jcLightIcon;
+        const rightControlPanel = new RightPanelWidget({
+            model: controlModel,
+            tracker,
+            formSchemaRegistry
+        });
+        rightControlPanel.id = 'jupytergis::rightControlPanel';
+        rightControlPanel.title.caption = 'JupyterGIS Control Panel';
+        // TODO Need an icon
+        // rightControlPanel.title.icon = jcLightIcon;
+        if (restorer) {
+            restorer.add(leftControlPanel, NAME_SPACE);
+            restorer.add(rightControlPanel, NAME_SPACE);
+        }
+        app.shell.add(leftControlPanel, 'left', { rank: 2000 });
+        app.shell.add(rightControlPanel, 'right', { rank: 2000 });
+    }
+};
+/**
+ * Populates the application menus for the notebook.
+ */
+function populateMenus(mainMenu, isEnabled) {
+    // Add undo/redo hooks to the edit menu.
+    mainMenu.editMenu.undoers.redo.add({
+        id: CommandIDs.redo,
+        isEnabled
+    });
+    mainMenu.editMenu.undoers.undo.add({
+        id: CommandIDs.undo,
+        isEnabled
+    });
+}
+/**
+ * Populate submenu with current group names
+ */
+function buildGroupsMenu(contextMenu, tracker) {
+    var _a, _b, _c, _d;
+    if (!((_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.context.model)) {
+        return;
+    }
+    const model = (_b = tracker.currentWidget) === null || _b === void 0 ? void 0 : _b.context.model;
+    const submenu = (_d = (_c = contextMenu.menu.items.find(item => {
+        var _a;
+        return item.type === 'submenu' &&
+            ((_a = item.submenu) === null || _a === void 0 ? void 0 : _a.id) === 'jp-gis-contextmenu-movelayer';
+    })) === null || _c === void 0 ? void 0 : _c.submenu) !== null && _d !== void 0 ? _d : null;
+    // Bail early if the submenu isn't found
+    if (!submenu) {
+        return;
+    }
+    submenu.clearItems();
+    // need a list of group name
+    const layerTree = model.getLayerTree();
+    const groupNames = getLayerGroupNames(layerTree);
+    function getLayerGroupNames(layerTree) {
+        const result = [];
+        for (const item of layerTree) {
+            // Skip if the item is a layer id
+            if (typeof item === 'string') {
+                continue;
+            }
+            // Process group items
+            if (item.layers) {
+                result.push(item.name);
+                // Recursively process the layers of the current item
+                const nestedResults = getLayerGroupNames(item.layers);
+                // Append the results of the recursive call to the main result array
+                result.push(...nestedResults);
+            }
+        }
+        return result;
+    }
+    submenu.addItem({
+        command: CommandIDs.moveLayersToGroup,
+        args: { label: '' }
+    });
+    groupNames.forEach(name => {
+        submenu.addItem({
+            command: CommandIDs.moveLayersToGroup,
+            args: { label: name }
+        });
+    });
+    submenu.addItem({
+        command: CommandIDs.moveLayerToNewGroup
+    });
+}
+export default [plugin, controlPanel, notebookRenderePlugin];

package/lib/notebookrenderer.d.ts

@@ -0,0 +1,23 @@
+import { JupyterGISModel } from '@jupytergis/schema';
+import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+import { Panel } from '@lumino/widgets';
+import { JupyterYModel } from 'yjs-widgets';
+export interface ICommMetadata {
+    create_ydoc: boolean;
+    path: string;
+    format: string;
+    contentType: string;
+    ymodel_name: string;
+}
+export declare const CLASS_NAME = "jupytergis-notebook-widget";
+export declare class YJupyterGISModel extends JupyterYModel {
+    jupyterGISModel: JupyterGISModel;
+}
+export declare class YJupyterGISLuminoWidget extends Panel {
+    constructor(options: {
+        model: JupyterGISModel;
+    });
+    onResize: () => void;
+    private _jgisWidget;
+}
+export declare const notebookRenderePlugin: JupyterFrontEndPlugin<void>;

package/lib/notebookrenderer.js

@@ -0,0 +1,88 @@
+import { WebSocketProvider } from '@jupyter/docprovider';
+import { JupyterGISPanel } from '@jupytergis/base';
+import { JupyterGISModel } from '@jupytergis/schema';
+import { URLExt } from '@jupyterlab/coreutils';
+import { ServerConnection } from '@jupyterlab/services';
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import { MessageLoop } from '@lumino/messaging';
+import { Panel, Widget } from '@lumino/widgets';
+import { IJupyterYWidgetManager, JupyterYModel } from 'yjs-widgets';
+const Y_DOCUMENT_PROVIDER_URL = 'api/collaboration/room';
+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);
+            }
+        };
+        this.addClass(CLASS_NAME);
+        this._jgisWidget = new JupyterGISPanel(options);
+        this.addWidget(this._jgisWidget);
+    }
+}
+export const notebookRenderePlugin = {
+    id: 'jupytergis:yjswidget-plugin',
+    autoStart: true,
+    optional: [IJupyterYWidgetManager, ITranslator],
+    activate: (app, yWidgetManager, translator) => {
+        if (!yWidgetManager) {
+            console.error('Missing IJupyterYWidgetManager token!');
+            return;
+        }
+        const labTranslator = translator !== null && translator !== void 0 ? translator : nullTranslator;
+        class YJupyterGISModelFactory extends YJupyterGISModel {
+            ydocFactory(commMetadata) {
+                const { path, format, contentType } = commMetadata;
+                this.jupyterGISModel = new JupyterGISModel({});
+                const user = app.serviceManager.user;
+                if (path && format && contentType) {
+                    const server = ServerConnection.makeSettings();
+                    const serverUrl = URLExt.join(server.wsUrl, Y_DOCUMENT_PROVIDER_URL);
+                    const ywsProvider = new WebSocketProvider({
+                        url: serverUrl,
+                        path,
+                        format,
+                        contentType,
+                        model: this.jupyterGISModel.sharedModel,
+                        user,
+                        translator: labTranslator.load('jupyterlab')
+                    });
+                    this.jupyterGISModel.disposed.connect(() => {
+                        ywsProvider.dispose();
+                    });
+                }
+                else {
+                    const awareness = this.jupyterGISModel.sharedModel.awareness;
+                    const _onUserChanged = (user) => {
+                        awareness.setLocalStateField('user', user.identity);
+                    };
+                    user.ready
+                        .then(() => {
+                        _onUserChanged(user);
+                    })
+                        .catch(e => console.error(e));
+                    user.userChanged.connect(_onUserChanged, this);
+                }
+                return this.jupyterGISModel.sharedModel.ydoc;
+            }
+        }
+        class YJupyterGISWidget {
+            constructor(yModel, node) {
+                this.yModel = yModel;
+                this.node = node;
+                const widget = new YJupyterGISLuminoWidget({
+                    model: yModel.jupyterGISModel
+                });
+                // Widget.attach(widget, node);
+                MessageLoop.sendMessage(widget, Widget.Msg.BeforeAttach);
+                node.appendChild(widget.node);
+                MessageLoop.sendMessage(widget, Widget.Msg.AfterAttach);
+            }
+        }
+        yWidgetManager.registerWidget('@jupytergis:widget', YJupyterGISModelFactory, YJupyterGISWidget);
+    }
+};

package/package.json

@@ -0,0 +1,127 @@
+{
+  "name": "@jupytergis/jupytergis-lab",
+  "version": "0.1.1",
+  "description": "JupyterGIS Lab extension.",
+  "keywords": [
+    "jupyter",
+    "jupyterlab",
+    "jupyterlab-extension"
+  ],
+  "homepage": "https://github.com/geojupyter/jupytergis",
+  "bugs": {
+    "url": "https://github.com/geojupyter/jupytergis/issues"
+  },
+  "license": "BSD-3-Clause",
+  "author": "JupyterGIS contributors",
+  "files": [
+    "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+    "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "style": "style/index.css",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/geojupyter/jupytergis.git"
+  },
+  "scripts": {
+    "build": "jlpm build:lib && jlpm build:labextension:dev",
+    "build:prod": "jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
+    "build:labextension": "jupyter labextension build .",
+    "build:labextension:dev": "jupyter labextension build --development True .",
+    "build:lib": "tsc --sourceMap",
+    "build:lib:prod": "tsc",
+    "build:dev": "jlpm run build",
+    "clean": "jlpm clean:lib",
+    "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
+    "clean:lintcache": "rimraf .eslintcache .stylelintcache",
+    "clean:labextension": "rimraf jupytergis_lab/labextension jupytergis_lab/_version.py",
+    "clean:all": "jlpm clean:lib && jlpm clean:labextension && jlpm clean:lintcache",
+    "eslint": "jlpm eslint:check --fix",
+    "eslint:check": "eslint . --cache --ext .ts,.tsx",
+    "install:extension": "jlpm build",
+    "lint": "jlpm stylelint && jlpm prettier && jlpm eslint",
+    "lint:check": "jlpm stylelint:check && jlpm prettier:check && jlpm eslint:check",
+    "prettier": "jlpm prettier:base --write",
+    "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
+    "prettier:check": "jlpm prettier:base --check",
+    "stylelint": "jlpm stylelint:check --fix",
+    "stylelint:check": "stylelint --cache \"style/**/*.css\"",
+    "watch": "run-p watch:src watch:labextension",
+    "watch:src": "tsc -w --sourceMap",
+    "watch:labextension": "jupyter labextension watch ."
+  },
+  "dependencies": {
+    "@jupyter/docprovider": "^2.0.0",
+    "@jupytergis/base": "^0.1.1",
+    "@jupytergis/jupytergis-core": "^0.1.1",
+    "@jupytergis/schema": "^0.1.1",
+    "@jupyterlab/application": "^4.0.0",
+    "@jupyterlab/apputils": "^4.0.0",
+    "@jupyterlab/coreutils": "^6.0.0",
+    "@jupyterlab/docregistry": "^4.0.0",
+    "@jupyterlab/filebrowser": "^4.0.0",
+    "@jupyterlab/launcher": "^4.0.0",
+    "@jupyterlab/mainmenu": "^4.0.0",
+    "@jupyterlab/services": "^7.0.0",
+    "@jupyterlab/translation": "^4.0.0",
+    "@jupyterlab/ui-components": "^4.0.0",
+    "@lumino/messaging": "^2.0.0",
+    "@lumino/widgets": "^2.0.0",
+    "react": "^18.0.1",
+    "yjs-widgets": "^0.3.5"
+  },
+  "devDependencies": {
+    "@jupyterlab/builder": "^4.0.0",
+    "css-loader": "^6.7.1",
+    "mkdirp": "^1.0.3",
+    "npm-run-all": "^4.1.5",
+    "rimraf": "^3.0.2",
+    "typescript": "^5",
+    "yjs": "^13.5.0"
+  },
+  "sideEffects": [
+    "style/*.css",
+    "style/index.js"
+  ],
+  "styleModule": "style/index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "jupyterlab": {
+    "discovery": {
+      "server": {
+        "managers": [
+          "pip"
+        ],
+        "base": {
+          "name": "jupytergis_lab"
+        }
+      }
+    },
+    "extension": true,
+    "outputDir": "jupytergis_lab/labextension",
+    "sharedPackages": {
+      "@jupytergis/base": {
+        "singleton": true,
+        "bundled": false
+      },
+      "@jupytergis/schema": {
+        "singleton": true,
+        "bundled": false
+      },
+      "@jupytergis/jupytergis-core": {
+        "singleton": true,
+        "bundled": false
+      },
+      "@jupyter/docprovider": {
+        "singleton": true,
+        "bundled": false
+      },
+      "yjs-widgets": {
+        "singleton": true,
+        "bundled": false
+      }
+    }
+  }
+}

package/style/base.css

@@ -0,0 +1,377 @@
+@import url('~@deathbeds/jupyterlab-rjsf/style/index.css');
+@import url('~@jupytergis/base/style/index.css');
+
+.jGIS-Spinner {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  outline: none;
+  background: #00000075;
+}
+
+.jGIS-SpinnerContent {
+  border: solid #f376269e;
+  margin: 50px auto;
+  text-indent: -9999em;
+  width: 6em;
+  height: 6em;
+  border-radius: 50%;
+  position: relative;
+  animation:
+    load3 1s infinite linear,
+    fadeIn 1s;
+}
+
+.jGIS-SpinnerContent:before {
+  width: 50%;
+  height: 50%;
+  background: #f3762605;
+  border-radius: 100% 0 100% 0;
+  box-shadow: inset 6px 5px 0 1px #f37626;
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: '';
+}
+
+.jGIS-SpinnerContent:after {
+  width: 75%;
+  height: 75%;
+  border-radius: 50%;
+  content: '';
+  margin: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.jGIS-camera-client {
+  width: 15px;
+  height: 15px;
+  position: absolute;
+  z-index: 10;
+  background-color: var(--jp-private-notebook-active-color);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.jGIS-control-panel {
+  color: var(--jp-ui-font-color1);
+  background: var(--jp-layout-color1);
+  height: 100%;
+}
+
+.jGIS-control-panel * {
+  font-family: var(--jp-ui-font-family);
+}
+
+.jGIS-control-panel-title {
+  border-bottom: solid var(--jp-border-width) var(--jp-border-color1);
+  box-shadow: var(--jp-toolbar-box-shadow);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-height: 24px;
+  height: var(--jp-debugger-header-height);
+  background-color: var(--jp-layout-color2);
+}
+
+.jGIS-control-panel-title h2 {
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: var(--jp-ui-font-size0);
+  color: var(--jp-ui-font-color1);
+  padding-left: 8px;
+  padding-right: 4px;
+}
+
+.jGIS-sidepanel-widget {
+  height: 100%;
+}
+
+.jGIS-sidebar-treepanel {
+  display: flex;
+  flex-direction: column;
+  min-height: 50px;
+  padding-top: 3px;
+}
+
+.jGIS-sidebar-propertiespanel {
+  display: flex;
+  flex-direction: column;
+  min-height: 50px;
+  padding-top: 3px;
+}
+
+.jGIS-treeview-wrapper {
+  overflow: auto;
+  height: 100%;
+}
+
+.jGIS-treeview-wrapper > div {
+  padding: 0 !important;
+}
+/* TODO: More robust selector */
+.jGIS-treeview-wrapper div[style*='align-items: center;']:first-of-type {
+  flex-grow: 1;
+}
+
+.jGIS-control-panel-tree {
+  flex-grow: 1;
+}
+
+.jGIS-sidebar-propertiespanel > div {
+  overflow: auto;
+}
+
+.jGIS-property-outer {
+  padding: 10px;
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.jGIS-property-buttons {
+  display: flex;
+  justify-content: end;
+  padding: 10px;
+}
+
+.jGIS-property-panel {
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.jGIS-hidden-field {
+  display: none;
+}
+
+div.field.field-array > label + span {
+  display: none;
+}
+
+.jGIS-layer-CreationFormDialog .jp-Dialog-content {
+  width: 60%;
+}
+
+.jGIS-layer-CreationFormDialog form {
+  padding: 10px;
+}
+
+/* TODO Upstream this to jupyterlab jrfs */
+.jp-SchemaForm .control-label,
+.jp-SchemaForm legend {
+  position: inherit;
+  text-transform: capitalize;
+}
+
+div.jGIS-toolbar-widget > div.jp-Toolbar-item:last-child {
+  flex-grow: 1;
+}
+
+.jGIS-toolbar-usertoolbar {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row-reverse;
+}
+.jGIS-toolbar-react-widget {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.jGIS-Toolbar-Separator {
+  width: var(--jp-border-width);
+  background-color: var(--jp-border-color1);
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+
+.jGIS-toolbar-usertoolbar .jp-MenuBar-anonymousIcon,
+.jGIS-toolbar-usertoolbar .jp-MenuBar-imageIcon {
+  position: unset !important;
+  margin-right: 2px;
+  height: 22px;
+  box-sizing: border-box;
+}
+
+.jGIS-toolbar-usertoolbar .jp-MenuBar-anonymousIcon.selected,
+.jGIS-toolbar-usertoolbar .jp-MenuBar-imageIcon.selected {
+  border: solid 1.5px red;
+}
+
+.jGIS-Mainview {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.jGIS-Annotation-Wrapper {
+  position: absolute;
+  opacity: 1;
+  transition: opacity 0.1s linear 0.15s;
+}
+
+.jGIS-Annotation {
+  z-index: 1;
+  margin-left: 1px;
+  margin-top: 1px;
+  padding: 1em;
+  color: #fff;
+  background: var(--jp-layout-color1);
+  border-radius: 0.5em;
+  font-size: 12px;
+  line-height: 1.2;
+  transition: opacity 0.5s;
+}
+
+.jGIS-FloatingAnnotation {
+  position: absolute;
+  width: 250px;
+  box-shadow: var(--jp-elevation-z6);
+}
+
+.jGIS-Annotations {
+  overflow: auto;
+}
+
+.jGIS-Annotations-Separator {
+  border-color: var(--jp-layout-color4);
+  border-style: solid;
+  border-width: 1px;
+}
+
+.jGIS-Annotation-Handler {
+  position: absolute;
+  top: -5px;
+  left: -5px;
+  width: 8px;
+  height: 8px;
+  border: 1px solid #ffffffc2;
+  border-radius: 50%;
+  background: rgb(0 0 0 / 63%);
+  cursor: pointer;
+  transition-property: width, height, left, top;
+  transition-duration: 0.2s;
+  z-index: 1000;
+}
+
+.jGIS-Annotation-Handler:hover {
+  top: -9px;
+  left: -9px;
+  width: 16px;
+  height: 16px;
+}
+
+.jGIS-Annotation-Message {
+  display: flex;
+  margin-top: 10px;
+  gap: 5px;
+  align-items: center;
+  justify-content: center;
+}
+
+.jGIS-Annotation-Message .jGIS-Annotation-User-Icon {
+  border-radius: 100%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+  color: var(--jp-ui-font-color1);
+}
+
+.jGIS-Annotation-Message textarea {
+  border-radius: var(--jp-border-radius);
+  background: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color2);
+  flex-grow: 1;
+  resize: none;
+}
+
+.jGIS-Annotation-Message-Content {
+  background: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color2);
+  border-radius: var(--jp-border-radius);
+  flex-grow: 1;
+}
+
+.jGIS-Annotation-Topbar {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.jGIS-Annotation-TopBarIcon {
+  margin: 3px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.jGIS-Annotation-TopBarIcon > svg {
+  width: 20px;
+  height: 20px;
+}
+
+.jGIS-Annotation-Submit > svg {
+  width: 30px;
+  height: 30px;
+}
+
+.jGIS-Annotation-Submit g {
+  fill: #f6f7f8 !important;
+}
+
+.jGIS-Annotation-Submit:hover {
+  opacity: 70%;
+  cursor: pointer;
+}
+
+.jGIS-Annotation-Submit {
+  background-color: var(--jp-brand-color1);
+  border-radius: 100%;
+  width: 30px;
+  height: 30px;
+}
+
+/* Hack to remove the malformed form button */
+.object-property-expand {
+  display: none;
+}
+
+.highlight {
+  background-color: var(--jp-layout-color2) !important;
+}
+.jupytergis-notebook-widget {
+  height: 600px;
+  width: 100%;
+}
+.jupytergis-notebook-widget > div {
+  height: 100%;
+  width: 100%;
+}
+
+.jp-SchemaForm .control-label,
+.jp-SchemaForm legend {
+  width: 100%;
+}
+
+.jpgis-console {
+  border-top: var(--jp-border-width) solid var(--jp-toolbar-border-color);
+}
+
+.jpgis-console .jp-CodeConsole-banner {
+  display: none;
+}

package/style/index.css

@@ -0,0 +1 @@
+@import url('base.css');

package/style/index.js

@@ -0,0 +1 @@
+import "./base.css";