@jupytergis/base 0.12.1 → 0.12.2

package/lib/shared/hooks/useMediaQuery.js

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+/**
+ * Subscribes to a media query and returns whether it currently matches.
+ * Updates when the viewport changes (resize, orientation).
+ *
+ * @param query - Media query string (e.g. '(max-width: 768px)').
+ * @returns True if the query matches, false otherwise (and when window is unavailable).
+ */
+function useMediaQuery(query) {
+    const [matches, setMatches] = useState(() => {
+        if (typeof window === 'undefined') {
+            return false;
+        }
+        return window.matchMedia(query).matches;
+    });
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        const mediaQuery = window.matchMedia(query);
+        const handleChange = (event) => {
+            setMatches(event.matches);
+        };
+        setMatches(mediaQuery.matches);
+        mediaQuery.addEventListener('change', handleChange);
+        return () => {
+            mediaQuery.removeEventListener('change', handleChange);
+        };
+    }, [query]);
+    return matches;
+}
+export default useMediaQuery;

package/lib/tools.js

@@ -5,7 +5,7 @@ import { VectorTile } from '@mapbox/vector-tile';
 import { compressors } from 'hyparquet-compressors';
 import Protobuf from 'pbf';
 import shp from 'shpjs';
-import RASTER_LAYER_GALLERY from "../rasterlayer_gallery/raster_layer_gallery.json";
+import LAYER_GALLERY from "../layer_gallery.json";
 export const debounce = (func, timeout = 100) => {
     let timeoutId;
     return (...args) => {
@@ -112,27 +112,29 @@ export function deepCopy(value) {
  * @param layerBrowserRegistry Registry to add layers to
  */
 export function createDefaultLayerRegistry(layerBrowserRegistry) {
-    const RASTER_THUMBNAILS = {};
+    const LAYER_THUMBNAILS = {};
     /**
      * Generate object to hold thumbnail URLs
      */
     const importAll = (r) => {
         r.keys().forEach(key => {
             const imageName = key.replace('./', '').replace(/\.\w+$/, '');
-            RASTER_THUMBNAILS[imageName] = r(key);
+            LAYER_THUMBNAILS[imageName] = r(key);
         });
     };
-    const context = require.context('../rasterlayer_gallery', false, /\.(png|jpe?g|gif|svg)$/);
+    const context = require.context('../layer_gallery', false, /\.(png|jpe?g|gif|svg)$/);
     importAll(context);
-    for (const entry of Object.keys(RASTER_LAYER_GALLERY)) {
-        const xyzprovider = RASTER_LAYER_GALLERY[entry];
-        if ('url' in xyzprovider) {
-            const tile = convertToRegistryEntry(entry, xyzprovider);
+    for (const entry of Object.keys(LAYER_GALLERY)) {
+        const layerProvider = LAYER_GALLERY[entry];
+        if ('thumbnailPath' in layerProvider) {
+            /*flat layer provider*/
+            const tile = convertToRegistryEntry(entry, layerProvider);
             layerBrowserRegistry.addRegistryLayer(tile);
         }
         else {
-            Object.keys(xyzprovider).forEach(mapName => {
-                const tile = convertToRegistryEntry(xyzprovider[mapName]['name'], xyzprovider[mapName], entry);
+            /* nested layer provider */
+            Object.keys(layerProvider).forEach(mapName => {
+                const tile = convertToRegistryEntry(layerProvider[mapName]['name'], layerProvider[mapName], entry);
                 layerBrowserRegistry.addRegistryLayer(tile);
             });
         }
@@ -142,35 +144,20 @@ export function createDefaultLayerRegistry(layerBrowserRegistry) {
      * 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.
+     * @param layerProvider - An object containing the provider's details, including name, URL, zoom levels, attribution, and possibly other properties relevant to the provider.
      * @param provider - Optional. Specifies the provider name. If not provided, the `entry` parameter is used as the default provider name.
      * @returns - An object representing the registry entry
      */
-    function convertToRegistryEntry(entry, xyzprovider, provider) {
-        const urlParameters = {};
-        if (xyzprovider.time) {
-            urlParameters.time = xyzprovider.time;
-        }
-        if (xyzprovider.variant) {
-            urlParameters.variant = xyzprovider.variant;
-        }
-        if (xyzprovider.tilematrixset) {
-            urlParameters.tilematrixset = xyzprovider.tilematrixset;
-        }
-        if (xyzprovider.format) {
-            urlParameters.format = xyzprovider.format;
-        }
+    function convertToRegistryEntry(entry, layerProvider, provider) {
         return {
             name: entry,
-            thumbnail: RASTER_THUMBNAILS[xyzprovider['name'].replace('.', '-')],
-            source: {
-                url: xyzprovider['url'],
-                minZoom: xyzprovider['min_zoom'] || 0,
-                maxZoom: xyzprovider['max_zoom'] || 24,
-                attribution: xyzprovider['attribution'] || '',
-                provider: provider !== null && provider !== void 0 ? provider : entry,
-                urlParameters,
-            },
+            thumbnail: LAYER_THUMBNAILS[layerProvider['name'].replace('.', '-')],
+            sourceType: layerProvider['sourceType'],
+            layerType: layerProvider['layerType'],
+            sourceParameters: layerProvider['sourceParameters'],
+            layerParameters: layerProvider['layerParameters'],
+            provider: provider !== null && provider !== void 0 ? provider : entry.split('.', 1)[0],
+            description: layerProvider['description'],
         };
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "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.12.1",
+    "@jupytergis/schema": "^0.12.2",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",
@@ -64,15 +64,6 @@
     "@lumino/widgets": "^2.0.0",
     "@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",
     "@rjsf/validator-ajv8": "^5.23.1",
     "ajv": "^8.14.0",
@@ -94,6 +85,7 @@
     "pmtiles": "^3.0.7",
     "proj4": "2.19.3",
     "proj4-list": "1.0.4",
+    "radix-ui": "^1.4.3",
     "react": "^18.0.1",
     "react-day-picker": "^9.7.0",
     "react-markdown": "^10.1.0",
@@ -101,7 +93,8 @@
     "styled-components": "^5.3.6",
     "three": "^0.135.0",
     "three-mesh-bvh": "^0.5.17",
-    "uuid": "^11.0.3"
+    "uuid": "^11.0.3",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@apidevtools/json-schema-ref-parser": "^9.0.9",

package/style/base.css

@@ -24,6 +24,8 @@
 @import url('./shared/checkbox.css');
 @import url('./shared/radioGroup.css');
 @import url('./shared/dialog.css');
+@import url('./shared/drawer.css');
+@import url('./shared/sheet.css');
 @import url('./shared/switch.css');
 @import url('./shared/popover.css');
 @import url('./shared/command.css');
@@ -170,3 +172,8 @@ button.jp-mod-styled.jp-mod-reject {
     margin: 0;
   }
 }
+
+/* Fix for map in mobile specta view */
+body[data-notebook='specta'] #main.jp-ThemedContainer {
+  overflow: visible;
+}

package/style/shared/drawer.css

@@ -0,0 +1,154 @@
+@keyframes drawer-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes drawer-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.jgis-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: color-mix(in srgb, black, transparent 90%);
+  backdrop-filter: blur(2px);
+}
+
+.jgis-drawer-overlay[data-state='open'] {
+  animation: drawer-fade-in 0.2s ease-out;
+}
+
+.jgis-drawer-overlay[data-state='closed'] {
+  animation: drawer-fade-out 0.2s ease-in;
+}
+
+.jgis-drawer-content {
+  position: fixed;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  font-size: 0.875rem;
+  background-color: var(--jp-layout-color0);
+  color: var(--jp-ui-font-color0);
+  border-color: var(--jp-border-color0);
+}
+
+/* Bottom */
+.jgis-drawer-content[data-vaul-drawer-direction='bottom'] {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin-top: 6rem;
+  max-height: 80vh;
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-radius: 0.75rem 0.75rem 0 0;
+}
+
+/* Top */
+.jgis-drawer-content[data-vaul-drawer-direction='top'] {
+  left: 0;
+  right: 0;
+  top: 0;
+  margin-bottom: 6rem;
+  max-height: 80vh;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-radius: 0 0 0.75rem 0.75rem;
+}
+
+/* Left */
+.jgis-drawer-content[data-vaul-drawer-direction='left'] {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 75%;
+  border-right-width: 1px;
+  border-right-style: solid;
+  border-radius: 0 0.75rem 0.75rem 0;
+}
+
+@media (min-width: 640px) {
+  .jgis-drawer-content[data-vaul-drawer-direction='left'] {
+    max-width: 24rem;
+  }
+}
+
+/* Right */
+.jgis-drawer-content[data-vaul-drawer-direction='right'] {
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 75%;
+  border-left-width: 1px;
+  border-left-style: solid;
+  border-radius: 0.75rem 0 0 0.75rem;
+}
+
+@media (min-width: 640px) {
+  .jgis-drawer-content[data-vaul-drawer-direction='right'] {
+    max-width: 24rem;
+  }
+}
+
+.jgis-drawer-handle {
+  display: none;
+  margin: 1rem auto 0;
+  height: 0.25rem;
+  width: 100px;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  background-color: var(--jp-layout-color2);
+}
+
+.jgis-drawer-content[data-vaul-drawer-direction='bottom'] .jgis-drawer-handle {
+  display: block;
+}
+
+.jgis-drawer-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 1rem;
+}
+
+.jgis-drawer-content[data-vaul-drawer-direction='bottom'] .jgis-drawer-header,
+.jgis-drawer-content[data-vaul-drawer-direction='top'] .jgis-drawer-header {
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .jgis-drawer-header {
+    gap: 0.125rem;
+    text-align: left;
+  }
+}
+
+.jgis-drawer-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  margin-top: auto;
+}
+
+.jgis-drawer-title {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--jp-ui-font-color0);
+}
+
+.jgis-drawer-description {
+  font-size: 0.875rem;
+  color: var(--jp-ui-font-color2);
+}

package/style/shared/sheet.css

@@ -0,0 +1,258 @@
+@keyframes sheet-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes sheet-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes sheet-slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes sheet-slide-out-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes sheet-slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes sheet-slide-out-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes sheet-slide-in-top {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes sheet-slide-out-top {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes sheet-slide-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes sheet-slide-out-bottom {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
+}
+
+.jgis-sheet-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: color-mix(in srgb, black, transparent 90%);
+  backdrop-filter: blur(2px);
+  transition-duration: 0.1s;
+}
+
+.jgis-sheet-overlay[data-state='open'] {
+  animation: sheet-fade-in 0.1s ease-out;
+}
+
+.jgis-sheet-overlay[data-state='closed'] {
+  animation: sheet-fade-out 0.1s ease-in;
+}
+
+.jgis-sheet-content {
+  position: fixed;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  font-size: 0.875rem;
+  background-color: var(--jp-layout-color0);
+  color: var(--jp-ui-font-color0);
+  border-color: var(--jp-border-color0);
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+  background-clip: padding-box;
+}
+
+/* Right */
+.jgis-sheet-content[data-side='right'] {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  height: 100%;
+  width: 75%;
+  border-left-width: 1px;
+  border-left-style: solid;
+}
+
+.jgis-sheet-content[data-side='right'][data-state='open'] {
+  animation:
+    sheet-fade-in 0.2s ease-out,
+    sheet-slide-in-right 0.2s ease-out;
+}
+
+.jgis-sheet-content[data-side='right'][data-state='closed'] {
+  animation:
+    sheet-fade-out 0.2s ease-in,
+    sheet-slide-out-right 0.2s ease-in;
+}
+
+@media (min-width: 640px) {
+  .jgis-sheet-content[data-side='right'] {
+    max-width: 24rem;
+  }
+}
+
+/* Left */
+.jgis-sheet-content[data-side='left'] {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  height: 100%;
+  width: 75%;
+  border-right-width: 1px;
+  border-right-style: solid;
+}
+
+.jgis-sheet-content[data-side='left'][data-state='open'] {
+  animation:
+    sheet-fade-in 0.2s ease-out,
+    sheet-slide-in-left 0.2s ease-out;
+}
+
+.jgis-sheet-content[data-side='left'][data-state='closed'] {
+  animation:
+    sheet-fade-out 0.2s ease-in,
+    sheet-slide-out-left 0.2s ease-in;
+}
+
+@media (min-width: 640px) {
+  .jgis-sheet-content[data-side='left'] {
+    max-width: 24rem;
+  }
+}
+
+/* Top */
+.jgis-sheet-content[data-side='top'] {
+  left: 0;
+  right: 0;
+  top: 0;
+  height: auto;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
+.jgis-sheet-content[data-side='top'][data-state='open'] {
+  animation:
+    sheet-fade-in 0.2s ease-out,
+    sheet-slide-in-top 0.2s ease-out;
+}
+
+.jgis-sheet-content[data-side='top'][data-state='closed'] {
+  animation:
+    sheet-fade-out 0.2s ease-in,
+    sheet-slide-out-top 0.2s ease-in;
+}
+
+/* Bottom */
+.jgis-sheet-content[data-side='bottom'] {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: auto;
+  border-top-width: 1px;
+  border-top-style: solid;
+}
+
+.jgis-sheet-content[data-side='bottom'][data-state='open'] {
+  animation:
+    sheet-fade-in 0.2s ease-out,
+    sheet-slide-in-bottom 0.2s ease-out;
+}
+
+.jgis-sheet-content[data-side='bottom'][data-state='closed'] {
+  animation:
+    sheet-fade-out 0.2s ease-in,
+    sheet-slide-out-bottom 0.2s ease-in;
+}
+
+.jgis-sheet-close {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+}
+
+.jgis-sheet-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 1rem;
+}
+
+.jgis-sheet-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  margin-top: auto;
+}
+
+.jgis-sheet-title {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--jp-ui-font-color0);
+}
+
+.jgis-sheet-description {
+  font-size: 0.875rem;
+  color: var(--jp-ui-font-color2);
+}

package/style/storyPanel.css

@@ -1,6 +1,6 @@
 .jgis-story-viewer-panel {
   padding: 1rem;
-  overflow: hidden;
+  overflow: auto;
   position: relative;
 }
 
@@ -77,14 +77,36 @@
   justify-content: center;
 }
 
+.jgis-story-navbar .jgis-button.jgis-story-navbar-button {
+  color: var(--jp-ui-inverse-font-color0);
+  background-color: var(--jp-inverse-layout-color0);
+}
+
+.jgis-story-viewer-image-container
+  .jgis-story-viewer-nav-container
+  .jgis-story-navbar
+  .jgis-story-navbar-button {
+  color: var(--jp-ui-font-color0);
+  background-color: var(--jp-layout-color0);
+}
+
 .jgis-story-viewer-subtitle-container {
   display: flex;
   align-items: center;
-  /* justify-content: space-between; */
-  /* gap: 1rem; */
   padding-top: 1rem;
 }
 
+.jgis-story-viewer-nav-container-specta-mobile {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  padding: 0 1rem;
+}
+
+.jgis-story-viewer-nav-container-specta-mobile .jgis-story-navbar {
+  justify-content: space-between;
+}
+
 .jgis-story-navbar.jgis-story-navbar-specta-mod {
   position: fixed;
   top: 50%;
@@ -182,6 +204,12 @@
   .jp-FormGroup-content
   fieldset
   .jp-inputFieldWrapper
-  > input#root_presentaionTextColor {
+  > input#root_presentationTextColor {
   height: revert;
 }
+
+.jgis-mobile-specta-trigger-wrapper {
+  position: fixed;
+  bottom: 0.125rem;
+  right: 0.125rem;
+}