@jupytergis/base 0.12.0 → 0.12.2

package/lib/shared/components/Sheet.js

@@ -0,0 +1,64 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { XIcon } from 'lucide-react';
+import { Dialog as SheetPrimitive } from 'radix-ui';
+import * as React from 'react';
+import { Button } from './Button';
+import { cn } from './utils';
+function Sheet(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(SheetPrimitive.Root, Object.assign({ "data-slot": "sheet" }, props));
+}
+function SheetTrigger(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(SheetPrimitive.Trigger, Object.assign({ "data-slot": "sheet-trigger" }, props));
+}
+function SheetClose(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(SheetPrimitive.Close, Object.assign({ "data-slot": "sheet-close" }, props));
+}
+function SheetPortal(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(SheetPrimitive.Portal, Object.assign({ "data-slot": "sheet-portal" }, props));
+}
+function SheetOverlay(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(SheetPrimitive.Overlay, Object.assign({ "data-slot": "sheet-overlay", className: cn('jgis-sheet-overlay', className) }, props)));
+}
+function SheetContent(_a) {
+    var { className, children, side = 'right', showCloseButton = true, container } = _a, props = __rest(_a, ["className", "children", "side", "showCloseButton", "container"]);
+    return (React.createElement(SheetPortal, null,
+        React.createElement(SheetOverlay, null),
+        React.createElement(SheetPrimitive.Content, Object.assign({ "data-slot": "sheet-content", "data-side": side, className: cn('jgis-sheet-content', className) }, props),
+            children,
+            showCloseButton && (React.createElement(SheetPrimitive.Close, { "data-slot": "sheet-close", asChild: true },
+                React.createElement(Button, { variant: "ghost", className: "jgis-sheet-close", size: "icon-sm" },
+                    React.createElement(XIcon, null),
+                    React.createElement("span", { className: "jgis-sr-only" }, "Close")))))));
+}
+function SheetHeader(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ "data-slot": "sheet-header", className: cn('jgis-sheet-header', className) }, props)));
+}
+function SheetFooter(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ "data-slot": "sheet-footer", className: cn('jgis-sheet-footer', className) }, props)));
+}
+function SheetTitle(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(SheetPrimitive.Title, Object.assign({ "data-slot": "sheet-title", className: cn('jgis-sheet-title', className) }, props)));
+}
+function SheetDescription(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(SheetPrimitive.Description, Object.assign({ "data-slot": "sheet-description", className: cn('jgis-sheet-description', className) }, props)));
+}
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

package/lib/shared/components/Switch.d.ts

@@ -1,4 +1,4 @@
-import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { Switch as SwitchPrimitive } from 'radix-ui';
 import * as React from 'react';
 declare function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>): React.JSX.Element;
 export { Switch };

package/lib/shared/components/Switch.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { Switch as SwitchPrimitive } from 'radix-ui';
 import * as React from 'react';
 import { cn } from './utils';
 function Switch(_a) {

package/lib/shared/components/Tabs.d.ts

@@ -1,4 +1,4 @@
-import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { Tabs as TabsPrimitive } from 'radix-ui';
 import * as React from 'react';
 interface IPanelTabProps {
     className: string;

package/lib/shared/components/Tabs.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { Tabs as TabsPrimitive } from 'radix-ui';
 import * as React from 'react';
 import { cn } from './utils';
 const Tabs = (_a) => {

package/lib/shared/components/ToggleGroup.d.ts

@@ -1,5 +1,5 @@
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { type VariantProps } from 'class-variance-authority';
+import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
 import * as React from 'react';
 declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;

package/lib/shared/components/ToggleGroup.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { cva } from 'class-variance-authority';
+import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
 import * as React from 'react';
 import { cn } from './utils';
 const toggleVariants = cva('jgis-toggle', {

package/lib/shared/hooks/useMediaQuery.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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).
+ */
+declare function useMediaQuery(query: string): boolean;
+export default useMediaQuery;

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.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
  *

package/lib/tools.js

@@ -2,11 +2,10 @@ 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';
-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) => {
@@ -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
@@ -104,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);
             });
         }
@@ -134,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.0",
+  "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.0",
+    "@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",
@@ -80,7 +71,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",
@@ -95,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",
@@ -102,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');
@@ -95,20 +97,28 @@ button.jp-mod-styled.jp-mod-reject {
   border-width: 0;
 }
 
-.jgis-right-panel-container {
-  width: 330px;
-  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;
-  left: 0px;
-  margin: 5px;
-  z-index: 40;
+  left: 0;
 }
 
 .jgis-icon-adjust {
@@ -162,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);
+}