@jupytergis/base 0.10.1 → 0.12.0

package/lib/toolbar/widget.d.ts

@@ -12,7 +12,22 @@ export declare class Separator extends Widget {
 }
 export declare class ToolbarWidget extends ReactiveToolbar {
     private _model;
+    private _newSubMenu;
+    private _hasSetSpectaVisibility;
     constructor(options: ToolbarWidget.IOptions);
+    /**
+     * Updates the story segment menu item based on settings
+     */
+    private _updateStorySegmentMenuItem;
+    /**
+     * Handles settings changes
+     */
+    private _onSettingsChanged;
+    /**
+     * Handles story changes to update Specta mode visibility
+     */
+    private _onSpectaModeChanged;
+    dispose(): void;
 }
 export declare namespace ToolbarWidget {
     interface IOptions extends Toolbar.IOptions {

package/lib/toolbar/widget.js

@@ -39,8 +39,32 @@ function createUserIconRenderer(model) {
 export class ToolbarWidget extends ReactiveToolbar {
     constructor(options) {
         super();
+        this._newSubMenu = null;
+        this._hasSetSpectaVisibility = false;
+        /**
+         * Handles settings changes
+         */
+        this._onSettingsChanged = (sender, key) => {
+            if (key === 'storyMapsDisabled') {
+                this._updateStorySegmentMenuItem();
+            }
+        };
+        /**
+         * Handles story changes to update Specta mode visibility
+         */
+        this._onSpectaModeChanged = (args) => {
+            if (!this._hasSetSpectaVisibility) {
+                this.setHidden(this._model.isSpectaMode());
+                this._hasSetSpectaVisibility = true;
+            }
+        };
         this._model = options.model;
         this.addClass('jGIS-toolbar-widget');
+        // Listen for settings changes
+        this._model.settingsChanged.connect(this._onSettingsChanged, this);
+        // Listen for options change because it's the dependable signal
+        // Update Specta mode visibility
+        this._model.sharedModel.optionsChanged.connect(this._onSpectaModeChanged, this);
         if (options.commands) {
             const openLayersBrowserButton = new CommandToolbarButton({
                 id: CommandIDs.openLayerBrowser,
@@ -51,6 +75,7 @@ export class ToolbarWidget extends ReactiveToolbar {
             openLayersBrowserButton.node.dataset.testid = 'open-layers-browser';
             const NewSubMenu = new MenuSvg({ commands: options.commands });
             NewSubMenu.title.label = 'Add Layer';
+            this._newSubMenu = NewSubMenu;
             NewSubMenu.addItem({
                 type: 'submenu',
                 submenu: rasterSubMenu(options.commands),
@@ -59,6 +84,7 @@ export class ToolbarWidget extends ReactiveToolbar {
                 type: 'submenu',
                 submenu: vectorSubMenu(options.commands),
             });
+            this._updateStorySegmentMenuItem();
             const NewEntryButton = new ToolbarButton({
                 icon: addIcon,
                 noFocusOnClick: false,
@@ -102,6 +128,13 @@ export class ToolbarWidget extends ReactiveToolbar {
             });
             this.addItem('addMarker', addMarkerButton);
             addMarkerButton.node.dataset.testid = 'add-marker-controller-button';
+            const storyModePresentationToggleButton = new CommandToolbarButton({
+                id: CommandIDs.toggleStoryPresentationMode,
+                label: '',
+                commands: options.commands,
+            });
+            this.addItem('toggleStoryPresentationMode', storyModePresentationToggleButton);
+            identifyButton.node.dataset.testid = 'toggleStoryPresentationMode-button';
             this.addItem('separator2', new Separator());
             const toggleConsoleButton = new CommandToolbarButton({
                 id: CommandIDs.toggleConsole,
@@ -117,4 +150,41 @@ export class ToolbarWidget extends ReactiveToolbar {
             this.addItem('users', ReactWidget.create(React.createElement(UsersItem, { model: this._model, iconRenderer: iconRenderer })));
         }
     }
+    /**
+     * Updates the story segment menu item based on settings
+     */
+    _updateStorySegmentMenuItem() {
+        if (!this._newSubMenu) {
+            return;
+        }
+        const shouldShow = !this._model.jgisSettings.storyMapsDisabled;
+        // Find if the item already exists by checking menu items
+        let itemIndex = null;
+        for (let i = 0; i < this._newSubMenu.items.length; i++) {
+            const item = this._newSubMenu.items[i];
+            if (item.type === 'command' &&
+                item.command === CommandIDs.addStorySegment) {
+                itemIndex = i;
+                break;
+            }
+        }
+        const isCurrentlyAdded = itemIndex !== null;
+        if (shouldShow && !isCurrentlyAdded) {
+            this._newSubMenu.addItem({
+                command: CommandIDs.addStorySegment,
+            });
+        }
+        else if (!shouldShow && isCurrentlyAdded) {
+            if (itemIndex !== null) {
+                this._newSubMenu.removeItemAt(itemIndex);
+            }
+        }
+    }
+    dispose() {
+        if (this._model) {
+            this._model.settingsChanged.disconnect(this._onSettingsChanged, this);
+            this._model.sharedModel.storyMapsChanged.disconnect(this._onSpectaModeChanged, this);
+        }
+        super.dispose();
+    }
 }

package/lib/tools.d.ts

@@ -109,13 +109,6 @@ export declare const MIME_TYPES: {
  * @returns A string representing the MIME type.
  */
 export declare const getMimeType: (filename: string) => string;
-/**
- * Helper to convert a string (base64) to ArrayBuffer.
- *
- * @param content - File content as a base64 string.
- * @returns An ArrayBuffer.
- */
-export declare const stringToArrayBuffer: (content: string) => Promise<ArrayBuffer>;
 export declare const getFeatureAttributes: <T>(featureProperties: Record<string, Set<any>>, predicate?: (key: string, value: any) => boolean) => Record<string, Set<T>>;
 /**
  * Get attributes of the feature which are numeric.

package/lib/tools.js

@@ -131,7 +131,7 @@ export function createDefaultLayerRegistry(layerBrowserRegistry) {
     }
     // TODO: These need better names
     /**
-     * Parse tile information from providers to be useable in the layer registry
+     * Parse tile information from providers to be usable in the layer registry
      *
      * @param entry - The name of the entry, which may also serve as the default provider name if none is specified.
      * @param xyzprovider - An object containing the XYZ provider's details, including name, URL, zoom levels, attribution, and possibly other properties relevant to the provider.
@@ -449,17 +449,40 @@ export const loadFile = async (fileInfo) => {
         }
         switch (type) {
             case 'GeoJSONSource': {
-                return typeof file.content === 'string'
-                    ? JSON.parse(file.content)
-                    : file.content;
+                switch (file.format) {
+                    case 'base64': {
+                        return JSON.parse(atob(file.content));
+                    }
+                    case 'text': {
+                        return JSON.parse(file.content);
+                    }
+                    case 'json': {
+                        return file.content;
+                    }
+                }
+                break;
             }
             case 'ShapefileSource': {
-                const arrayBuffer = await stringToArrayBuffer(file.content);
-                const geojson = await shp(arrayBuffer);
+                let buffer;
+                switch (file.format) {
+                    case 'base64': {
+                        buffer = await base64ToArrayBuffer(file.content);
+                        break;
+                    }
+                    case 'text': {
+                        buffer = await stringToArrayBuffer(file.content);
+                        break;
+                    }
+                    case 'json':
+                    default: {
+                        throw new Error(`Invalid Shapefile format: ${file.format}.`);
+                    }
+                }
+                const geojson = await shp(buffer);
                 return geojson;
             }
             case 'ImageSource': {
-                if (typeof file.content === 'string') {
+                if (file.format === 'base64') {
                     const mimeType = getMimeType(filepath);
                     if (!mimeType.startsWith('image/')) {
                         throw new Error(`Invalid image file. MIME type: ${mimeType}`);
@@ -488,14 +511,23 @@ export const loadFile = async (fileInfo) => {
                 }
             }
             case 'GeoParquetSource': {
-                if (typeof file.content === 'string') {
-                    const { toGeoJson } = await import('geoparquet');
-                    const arrayBuffer = await stringToArrayBuffer(file.content);
-                    return await toGeoJson({ file: arrayBuffer, compressors });
-                }
-                else {
-                    throw new Error('Invalid file format for GeoParquet content.');
+                let buffer;
+                switch (file.format) {
+                    case 'base64': {
+                        buffer = await base64ToArrayBuffer(file.content);
+                        break;
+                    }
+                    case 'text': {
+                        buffer = await stringToArrayBuffer(file.content);
+                        break;
+                    }
+                    case 'json':
+                    default: {
+                        throw new Error(`Invalid Geoparquet format: ${file.format}.`);
+                    }
                 }
+                const { toGeoJson } = await import('geoparquet');
+                return await toGeoJson({ file: buffer, compressors });
             }
             default: {
                 throw new Error(`Unsupported source type: ${type}`);
@@ -697,10 +729,19 @@ export const getMimeType = (filename) => {
  * @param content - File content as a base64 string.
  * @returns An ArrayBuffer.
  */
-export const stringToArrayBuffer = async (content) => {
+const base64ToArrayBuffer = async (content) => {
     const base64Response = await fetch(`data:application/octet-stream;base64,${content}`);
     return await base64Response.arrayBuffer();
 };
+/**
+ * Helper to convert a raw string to ArrayBuffer.
+ *
+ * @param content - Raw string content.
+ * @returns An ArrayBuffer.
+ */
+const stringToArrayBuffer = async (content) => {
+    return new TextEncoder().encode(content).buffer;
+};
 export const getFeatureAttributes = (featureProperties, predicate = (key, value) => true) => {
     const filteredRecord = {};
     for (const [key, set] of Object.entries(featureProperties)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.10.1",
+  "version": "0.12.0",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -41,10 +41,10 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": ">=0.2.6 <3.0.0",
-    "@jupyter/collaboration": "^3.1.0",
+    "@jupyter/collaboration": "^4",
     "@jupyter/react-components": "^0.16.6",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
-    "@jupytergis/schema": "^0.10.1",
+    "@jupytergis/schema": "^0.12.0",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",
@@ -65,9 +65,12 @@
     "@mapbox/vector-tile": "^2.0.3",
     "@naisutech/react-tree": "^3.0.1",
     "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@rjsf/core": "^4.2.0",
@@ -75,6 +78,7 @@
     "ajv": "^8.14.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "colormap": "^2.3.2",
     "d3-color": "^3.1.0",
     "date-fns": "^4.1.0",
@@ -93,6 +97,7 @@
     "proj4-list": "1.0.4",
     "react": "^18.0.1",
     "react-day-picker": "^9.7.0",
+    "react-markdown": "^10.1.0",
     "shpjs": "^6.1.0",
     "styled-components": "^5.3.6",
     "three": "^0.135.0",

package/style/base.css

@@ -3,6 +3,7 @@
 | Distributed under the terms of the Modified BSD License.
 |---------------------------------------------------------------------------- */
 
+@import url('ol/ol.css');
 @import url('./dialog.css');
 @import url('./layerBrowser.css');
 @import url('./leftPanel.css');
@@ -11,7 +12,8 @@
 @import url('./statusBar.css');
 @import url('./temporalSlider.css');
 @import url('./tabPanel.css');
-@import url('ol/ol.css');
+@import url('./stacBrowser.css');
+@import url('./storyPanel.css');
 @import url('./shared/button.css');
 @import url('./shared/toggle.css');
 @import url('./shared/tabs.css');
@@ -20,6 +22,13 @@
 @import url('./shared/dropdownMenu.css');
 @import url('./shared/badge.css');
 @import url('./shared/checkbox.css');
+@import url('./shared/radioGroup.css');
+@import url('./shared/dialog.css');
+@import url('./shared/switch.css');
+@import url('./shared/popover.css');
+@import url('./shared/command.css');
+@import url('./shared/combobox.css');
+@import url('./shared/input.css');
 
 .errors {
   color: var(--jp-warn-color0);
@@ -88,7 +97,6 @@ button.jp-mod-styled.jp-mod-reject {
 
 .jgis-right-panel-container {
   width: 330px;
-  top: 30px;
   right: 0px;
   position: absolute;
   margin: 5px;
@@ -98,12 +106,43 @@ button.jp-mod-styled.jp-mod-reject {
 .jgis-left-panel-container {
   position: absolute;
   width: 250px;
-  top: 30px;
   left: 0px;
   margin: 5px;
   z-index: 40;
 }
 
+.jgis-icon-adjust {
+  padding-top: 5px;
+}
+
+.jgis-controls-toolbar {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-end;
+  gap: 0.5rem;
+  position: absolute;
+  bottom: 0.125rem;
+  z-index: 1000;
+  padding: 0 0.125rem;
+}
+
+.jgis-controls-toolbar .ol-control,
+.jgis-controls-toolbar .ol-scale-line,
+.jgis-controls-toolbar .ol-full-screen {
+  position: relative;
+  top: unset;
+  bottom: unset;
+  left: unset;
+  right: unset;
+  margin: 0;
+}
+
+.jgis-controls-toolbar .ol-zoom {
+  position: fixed;
+  right: 0.125rem;
+}
+
 @media (max-width: 768px) {
   .jgis-panels-wrapper {
     position: fixed;

package/style/leftPanel.css

@@ -138,6 +138,24 @@
 .jp-gis-sourceText {
   padding: 3px 0;
   cursor: pointer;
+  flex-grow: 1;
+}
+
+.jp-gis-layerSlideNumber {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 6px;
+  margin-right: 4px;
+  background-color: var(--jp-brand-color1);
+  color: var(--jp-ui-inverse-font-color1);
+  border-radius: 9999px;
+  font-size: var(--jp-ui-font-size0);
+  font-weight: 600;
+  line-height: 1;
 }
 
 li .lm-Menu-itemLabel {

package/style/shared/button.css

@@ -1,18 +1,19 @@
 .jgis-button {
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
-  border-radius: 0.375rem;
+  border-radius: var(--jp-border-radius, 0.375rem);
   font-size: 0.875rem;
   font-weight: 600;
   outline: none;
   background-color: var(--jp-layout-color0);
   color: var(--jp-ui-font-color0);
   border: 0.0375rem solid
-    color-mix(in srgb, var(--jp-accent-color0), transparent 20%);
+    color-mix(in srgb, var(--jp-border-color1), transparent 20%);
   transition: background-color 0.2s ease;
-  height: 2.5rem;
+  height: 2.25rem;
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.5rem;
@@ -146,14 +147,14 @@
 /* sizing */
 .jgis-button[data-size='sm'] {
   height: 2.25rem;
-  border-radius: 0.375rem;
+  border-radius: var(--jp-border-radius, 0.375rem);
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
 
 .jgis-button[data-size='lg'] {
   height: 2.75rem;
-  border-radius: 0.375rem;
+  border-radius: var(--jp-border-radius, 0.375rem);
   padding-left: 2rem;
   padding-right: 2rem;
 }

package/style/shared/calendar.css

@@ -1,7 +1,7 @@
 .jgis-calendar-container {
   padding: 0.75rem;
   background-color: var(--jp-layout-color2);
-  border: 1px solid var(--jp-accent-color0);
+  border: 1px solid var(--jp-border-color0);
   border-radius: var(--jp-border-radius);
 }
 
@@ -272,3 +272,9 @@
   height: 2.5rem;
   align-items: center;
 }
+
+/* Unset width and border when popover contains calendar */
+.jgis-popover-content:has(> .jgis-calendar-container) {
+  width: unset;
+  border: unset;
+}

package/style/shared/combobox.css

@@ -0,0 +1,75 @@
+/* Shared base styles for Select and Combobox buttons */
+/* More specific selector to override button base styles */
+.jgis-button.jgis-combobox-button,
+.jgis-button.jgis-select-button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  white-space: preserve-breaks;
+  padding: 1rem 0.5rem;
+  box-sizing: border-box;
+  border-radius: var(--jp-border-radius, 0.375rem);
+  border: 1px solid var(--jp-border-color0);
+  background-color: var(--jp-layout-color0);
+  color: var(--jp-ui-font-color0);
+  font-size: 0.875rem;
+  /* min-height: 1.125rem; */
+  height: 1.5rem;
+  max-width: none;
+  gap: 0;
+}
+
+.jgis-combobox-button-text,
+.jgis-select-button-text {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+
+.jgis-combobox-icon,
+.jgis-select-icon {
+  margin-left: 0.5rem;
+  margin-top: 0.125rem;
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+/* Shared Popover styles */
+.jgis-combobox-popover,
+.jgis-select-popover {
+  width: 200px;
+  padding: 0;
+  border-radius: var(--jp-border-radius, 0.375rem);
+}
+
+/* Check icon for Combobox (multi-select) */
+.jgis-combobox-check-icon {
+  margin-right: 0.5rem;
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+}
+
+/* Modifier classes - use higher specificity to override base */
+.jgis-button.jgis-combobox-button--full-width,
+.jgis-button.jgis-select-button--full-width {
+  width: 100%;
+}
+
+.jgis-button.jgis-combobox-button--max-width-200,
+.jgis-button.jgis-select-button--max-width-200 {
+  max-width: 200px;
+}
+
+.jgis-button.jgis-combobox-button--no-radius,
+.jgis-button.jgis-select-button--no-radius {
+  border-radius: 0;
+}
+
+.jgis-button.jgis-combobox-button--queryable-input,
+.jgis-button.jgis-select-button--queryable-input {
+  padding: 0.25rem 1rem;
+  border-radius: 0;
+}