@jupytergis/base 0.11.1 → 0.12.1

package/lib/toolbar/widget.d.ts

@@ -13,6 +13,7 @@ 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
@@ -22,6 +23,10 @@ export declare class ToolbarWidget extends ReactiveToolbar {
      * Handles settings changes
      */
     private _onSettingsChanged;
+    /**
+     * Handles story changes to update Specta mode visibility
+     */
+    private _onSpectaModeChanged;
     dispose(): void;
 }
 export declare namespace ToolbarWidget {

package/lib/toolbar/widget.js

@@ -40,6 +40,7 @@ export class ToolbarWidget extends ReactiveToolbar {
     constructor(options) {
         super();
         this._newSubMenu = null;
+        this._hasSetSpectaVisibility = false;
         /**
          * Handles settings changes
          */
@@ -48,8 +49,22 @@ export class ToolbarWidget extends ReactiveToolbar {
                 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,
@@ -70,8 +85,6 @@ export class ToolbarWidget extends ReactiveToolbar {
                 submenu: vectorSubMenu(options.commands),
             });
             this._updateStorySegmentMenuItem();
-            // Listen for settings changes
-            this._model.settingsChanged.connect(this._onSettingsChanged, this);
             const NewEntryButton = new ToolbarButton({
                 icon: addIcon,
                 noFocusOnClick: false,
@@ -115,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,
@@ -163,6 +183,7 @@ export class ToolbarWidget extends ReactiveToolbar {
     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

@@ -5,7 +5,8 @@ export declare const debounce: (func: CallableFunction, timeout?: number) => Cal
 export declare function throttle<T extends (...args: any[]) => void>(callback: T, delay?: number): T;
 export declare function getElementFromProperty(filePath?: string | null, prop?: string | null): HTMLElement | undefined | null;
 export declare function nearest(n: number, tol: number): number;
-export declare function getCSSVariableColor(name: string): string;
+/** Read a CSS variable from the document root and return the value. */
+export declare function getCssVarAsColor(cssVar: string): string;
 /**
  * Call the API extension
  *
@@ -109,13 +110,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

@@ -2,7 +2,6 @@ import { showErrorMessage } from '@jupyterlab/apputils';
 import { PathExt, URLExt } from '@jupyterlab/coreutils';
 import { ServerConnection } from '@jupyterlab/services';
 import { VectorTile } from '@mapbox/vector-tile';
-import * as d3Color from 'd3-color';
 import { compressors } from 'hyparquet-compressors';
 import Protobuf from 'pbf';
 import shp from 'shpjs';
@@ -53,9 +52,18 @@ export function nearest(n, tol) {
         return n;
     }
 }
-export function getCSSVariableColor(name) {
-    const color = window.getComputedStyle(document.body).getPropertyValue(name) || '#ffffff';
-    return d3Color.rgb(color).formatHex();
+/** Read a CSS variable from the document root and return the value. */
+export function getCssVarAsColor(cssVar) {
+    if (typeof document === 'undefined') {
+        return '';
+    }
+    const value = getComputedStyle(document.documentElement)
+        .getPropertyValue(cssVar)
+        .trim();
+    if (!value) {
+        return '';
+    }
+    return value;
 }
 /**
  * Call the API extension
@@ -449,17 +457,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 +519,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 +737,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.11.1",
+  "version": "0.12.1",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -44,7 +44,7 @@
     "@jupyter/collaboration": "^4",
     "@jupyter/react-components": "^0.16.6",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
-    "@jupytergis/schema": "^0.11.1",
+    "@jupytergis/schema": "^0.12.1",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",
@@ -80,7 +80,6 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "colormap": "^2.3.2",
-    "d3-color": "^3.1.0",
     "date-fns": "^4.1.0",
     "gdal3.js": "^2.8.1",
     "geojson-vt": "^4.0.2",

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,8 +12,8 @@
 @import url('./statusBar.css');
 @import url('./temporalSlider.css');
 @import url('./tabPanel.css');
+@import url('./stacBrowser.css');
 @import url('./storyPanel.css');
-@import url('ol/ol.css');
 @import url('./shared/button.css');
 @import url('./shared/toggle.css');
 @import url('./shared/tabs.css');
@@ -24,6 +25,10 @@
 @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);
@@ -90,22 +95,60 @@ button.jp-mod-styled.jp-mod-reject {
   border-width: 0;
 }
 
-.jgis-right-panel-container {
-  width: 330px;
-  top: 30px;
-  right: 0px;
+/* Height constrained to 0.5rem less than .jGIS-Mainview-Container */
+.jgis-right-panel-container,
+.jgis-left-panel-container {
   position: absolute;
-  margin: 5px;
+  margin: 0.25rem;
   z-index: 40;
+  max-height: calc(100% - 0.5rem);
+  overflow-y: auto;
+  border-radius: 8px;
+  box-shadow:
+    0 4px 8px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.jgis-right-panel-container {
+  width: 330px;
+  right: 0;
 }
 
 .jgis-left-panel-container {
-  position: absolute;
   width: 250px;
-  top: 30px;
-  left: 0px;
-  margin: 5px;
-  z-index: 40;
+  left: 0;
+}
+
+.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) {

package/style/shared/button.css

@@ -1,9 +1,10 @@
 .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;
@@ -12,7 +13,7 @@
   border: 0.0375rem solid
     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;
+}

package/style/shared/command.css

@@ -0,0 +1,178 @@
+/* Command Root */
+.jgis-command {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 0.375rem;
+  background-color: var(--jp-layout-color0);
+  color: var(--jp-ui-font-color0);
+}
+
+/* Command Dialog specific styles */
+.jgis-command [cmdk-group-heading] {
+  color: var(--jp-ui-font-color2);
+  padding: 0 0.5rem;
+  font-weight: 500;
+}
+
+.jgis-command [data-slot='command-input-wrapper'] {
+  height: 3rem;
+}
+
+.jgis-command [cmdk-group] {
+  padding: 0 0.5rem;
+}
+
+.jgis-command [cmdk-group]:not([hidden]) ~ [cmdk-group] {
+  padding-top: 0;
+}
+
+.jgis-command [cmdk-input-wrapper] svg {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+.jgis-command [cmdk-input] {
+  height: 1.5rem;
+  box-sizing: border-box;
+  padding: 1rem 0.5rem;
+}
+
+.jgis-command [cmdk-item] {
+  padding: 0 0.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.jgis-command [cmdk-item] svg {
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+/* Command Input Wrapper */
+.jgis-command-input-wrapper {
+  display: flex;
+  height: 2.25rem;
+  align-items: center;
+  gap: 0.5rem;
+  border-bottom: 1px solid var(--jp-border-color0);
+  padding: 0.25rem 0.75rem;
+}
+
+.jgis-command-input-wrapper .size-4 {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+/* Command Input */
+.jgis-command-input {
+  display: flex;
+  height: 1rem;
+  width: 100%;
+  border-radius: 0.375rem;
+  background-color: transparent;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  font-size: 0.875rem;
+  outline: none;
+}
+
+.jgis-command-input::placeholder {
+  color: var(--jp-ui-font-color2);
+}
+
+.jgis-command-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Command List */
+.jgis-command-list {
+  max-height: 300px;
+  scroll-padding: 0.25rem 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+/* Command Empty */
+.jgis-command-empty {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+  text-align: center;
+  font-size: 0.875rem;
+}
+
+/* Command Group */
+.jgis-command-group {
+  color: var(--jp-ui-font-color0);
+  overflow: hidden;
+  padding: 0.25rem;
+}
+
+.jgis-command-group [cmdk-group-heading] {
+  color: var(--jp-ui-font-color2);
+  padding: 0 0.5rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+/* Command Separator */
+.jgis-command-separator {
+  background-color: var(--jp-border-color0);
+  margin: 0 -0.25rem;
+  height: 1px;
+}
+
+/* Command Item */
+.jgis-command-item {
+  position: relative;
+  display: flex;
+  cursor: default;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.125rem;
+  padding: 0 0.5rem;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+  font-size: 0.875rem;
+  outline: none;
+  user-select: none;
+}
+
+.jgis-command-item[data-selected='true'] {
+  background-color: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color0);
+}
+
+.jgis-command-item svg:not([class*='text-']) {
+  color: var(--jp-ui-font-color2);
+}
+
+.jgis-command-item svg {
+  pointer-events: none;
+  flex-shrink: 0;
+}
+
+.jgis-command-item svg:not([class*='size-']) {
+  width: 1rem;
+  height: 1rem;
+}
+
+.jgis-command-item[data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* Command Shortcut */
+.jgis-command-shortcut {
+  color: var(--jp-ui-font-color2);
+  margin-left: auto;
+  font-size: 0.75rem;
+  letter-spacing: 0.1em;
+}