@jupytergis/base 0.10.1 → 0.11.1

package/lib/toolbar/widget.js

@@ -39,6 +39,15 @@ function createUserIconRenderer(model) {
 export class ToolbarWidget extends ReactiveToolbar {
     constructor(options) {
         super();
+        this._newSubMenu = null;
+        /**
+         * Handles settings changes
+         */
+        this._onSettingsChanged = (sender, key) => {
+            if (key === 'storyMapsDisabled') {
+                this._updateStorySegmentMenuItem();
+            }
+        };
         this._model = options.model;
         this.addClass('jGIS-toolbar-widget');
         if (options.commands) {
@@ -51,6 +60,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 +69,9 @@ export class ToolbarWidget extends ReactiveToolbar {
                 type: 'submenu',
                 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,
@@ -117,4 +130,40 @@ 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);
+        }
+        super.dispose();
+    }
 }

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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.10.1",
+  "version": "0.11.1",
   "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.11.1",
     "@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

@@ -11,6 +11,7 @@
 @import url('./statusBar.css');
 @import url('./temporalSlider.css');
 @import url('./tabPanel.css');
+@import url('./storyPanel.css');
 @import url('ol/ol.css');
 @import url('./shared/button.css');
 @import url('./shared/toggle.css');
@@ -20,6 +21,9 @@
 @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');
 
 .errors {
   color: var(--jp-warn-color0);

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

@@ -10,7 +10,7 @@
   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;
   padding-left: 1rem;

package/style/shared/dialog.css

@@ -0,0 +1,177 @@
+@keyframes dialog-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dialog-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes dialog-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes dialog-zoom-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+.jgis-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: color-mix(in srgb, black, transparent 50%);
+}
+
+.jgis-dialog-overlay[data-state='open'] {
+  animation: dialog-fade-in 0.2s ease-in-out;
+}
+
+.jgis-dialog-overlay[data-state='closed'] {
+  animation: dialog-fade-out 0.2s ease-in-out;
+}
+
+.jgis-dialog-content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 50;
+  display: grid;
+  width: 100%;
+  max-width: calc(100% - 2rem);
+  transform: translate(-50%, -50%);
+  gap: 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--jp-border-color0);
+  background-color: var(--jp-layout-color0);
+  padding: 1.5rem;
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  transition-duration: 200ms;
+}
+
+@media (min-width: 640px) {
+  .jgis-dialog-content {
+    max-width: 32rem;
+  }
+}
+
+.jgis-dialog-content[data-state='open'] {
+  animation:
+    dialog-fade-in 0.2s ease-in-out,
+    dialog-zoom-in 0.2s ease-in-out;
+}
+
+.jgis-dialog-content[data-state='closed'] {
+  animation:
+    dialog-fade-out 0.2s ease-in-out,
+    dialog-zoom-out 0.2s ease-in-out;
+}
+
+.jgis-dialog-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  border-radius: 0.125rem;
+  opacity: 0.7;
+  transition: opacity 0.15s ease-in-out;
+  outline: none;
+}
+
+.jgis-dialog-close:hover {
+  opacity: 1;
+}
+
+.jgis-dialog-close:focus {
+  opacity: 1;
+  box-shadow: 0 0 0 2px var(--jp-ui-font-color0);
+  outline: none;
+}
+
+.jgis-dialog-close:disabled {
+  pointer-events: none;
+}
+
+.jgis-dialog-close[data-state='open'] {
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color2);
+}
+
+.jgis-dialog-close svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.jgis-dialog-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  text-align: center;
+}
+
+@media (min-width: 640px) {
+  .jgis-dialog-header {
+    text-align: left;
+  }
+}
+
+.jgis-dialog-footer {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0.5rem;
+}
+
+@media (min-width: 640px) {
+  .jgis-dialog-footer {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+
+.jgis-dialog-title {
+  font-size: 1.125rem;
+  line-height: 1;
+  font-weight: 600;
+}
+
+.jgis-dialog-description {
+  font-size: 0.875rem;
+  color: var(--jp-ui-font-color2);
+}
+
+.jgis-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

package/style/shared/radioGroup.css

@@ -0,0 +1,55 @@
+.jgis-radio-group {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.jgis-radio-group-item {
+  aspect-ratio: 1 / 1;
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  border-radius: 9999px !important;
+  border: 1px solid var(--jp-border-color0);
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color0);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  transition:
+    color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  outline: none;
+  cursor: pointer;
+}
+
+.jgis-radio-group-item:focus-visible {
+  border-color: var(--jp-ui-font-color0);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--jp-ui-font-color0), transparent 50%);
+}
+
+.jgis-radio-group-item[aria-invalid='true'] {
+  border-color: var(--jp-error-color0, #dc2626);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--jp-error-color0, #dc2626), transparent 80%);
+}
+
+.jgis-radio-group-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.jgis-radio-group-indicator {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.jgis-radio-group-indicator-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0.5rem;
+  height: 0.5rem;
+  transform: translate(-50%, -50%);
+  fill: currentColor;
+}

package/style/shared/switch.css

@@ -0,0 +1,63 @@
+.jgis-switch {
+  display: inline-flex;
+  height: 1.15rem;
+  width: 2rem;
+  flex-shrink: 0;
+  align-items: center;
+  border-radius: 9999px !important;
+  border: 1px solid transparent;
+  /* border: 1px solid var(--jp-brand-color3); */
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  outline: none;
+  cursor: pointer;
+}
+
+.jgis-switch:focus-visible {
+  border-color: var(--jp-border-color0);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--jp-ui-font-color0), transparent 50%);
+}
+
+.jgis-switch:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.jgis-switch[data-state='checked'] {
+  background-color: var(--jp-accent-color0);
+}
+
+.jgis-switch[data-state='unchecked'] {
+  background-color: var(--jp-layout-color2);
+}
+
+.jgis-switch-thumb {
+  background-color: var(--jp-layout-color1);
+  pointer-events: none;
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  box-shadow: none;
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateX(0);
+}
+
+.jgis-switch-thumb[data-state='checked'] {
+  transform: translateX(calc(100% - 6px));
+}
+
+.jgis-switch-thumb[data-state='unchecked'] {
+  transform: translateX(-2px);
+}
+
+@media (prefers-color-scheme: dark) {
+  .jgis-switch-thumb[data-state='unchecked'] {
+    background-color: var(--jp-ui-font-color0);
+  }
+
+  .jgis-switch-thumb[data-state='checked'] {
+    background-color: var(--jp-layout-color1);
+  }
+}

package/style/shared/tabs.css

@@ -1,7 +1,6 @@
 .jgis-panel-tabs {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
   justify-content: center;
   align-items: center;
   background-color: var(--jp-layout-color0);
@@ -20,7 +19,8 @@
   gap: 1rem;
   width: 100%;
   font-size: 9px;
-  border-radius: 5px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
   overflow-x: scroll;
 }
 
@@ -62,6 +62,7 @@
   width: 100%;
   overflow-y: scroll;
   max-height: 480px;
+  padding-top: 1rem;
 }
 
 .jgis-tabs-content:focus-visible {

package/style/storyPanel.css

@@ -0,0 +1,68 @@
+.jgis-story-viewer-panel {
+  overflow: hidden;
+}
+
+.jgis-story-viewer-panel * {
+  box-sizing: border-box;
+}
+
+.jgis-story-viewer-image-container {
+  position: relative;
+  width: 100%;
+  height: 30%;
+}
+
+.jgis-story-viewer-image {
+  width: 100%;
+  height: 100%;
+  max-height: 240px;
+  object-fit: cover;
+  display: block;
+}
+
+.jgis-story-viewer-image-title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  color: white;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+  background-color: rgba(0, 0, 0, 0.3);
+  text-align: center;
+}
+
+.jgis-story-viewer-nav-container {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding-bottom: 0.25rem;
+}
+
+.jgis-story-viewer-title {
+  text-align: center;
+}
+
+.jgis-story-viewer-subtitle {
+  text-align: center;
+}
+
+.jgis-story-viewer-content {
+  padding-left: 16px;
+}
+
+.jgis-story-viewer-content p,
+.jgis-story-viewer-content span,
+.jgis-story-viewer-content li {
+  font-size: var(--jp-ui-font-size2);
+}
+
+.jgis-story-viewer-content > ul {
+  padding-left: 1rem;
+}

package/style/tabPanel.css

@@ -1,6 +1,5 @@
 .jgis-panel-tab-content {
-  border-radius: 5px;
-  font-size: 10px;
+  font-size: var(--jp-ui-font-size0);
   padding-bottom: 50px;
 }