@jupytergis/base 0.15.0 → 0.16.0-alpha.1

package/lib/tools.js

@@ -2,11 +2,14 @@ import { showErrorMessage } from '@jupyterlab/apputils';
 import { PathExt, URLExt } from '@jupyterlab/coreutils';
 import { ServerConnection } from '@jupyterlab/services';
 import { VectorTile } from '@mapbox/vector-tile';
+import { GeoPackageAPI, GeoPackageTileRetriever } from '@ngageoint/geopackage';
 import { compressors } from 'hyparquet-compressors';
+import loadGpkg from 'ol-load-geopackage';
 import Protobuf from 'pbf';
 import shp from 'shpjs';
-import LAYER_GALLERY from "../layer_gallery.json";
-import { DEFAULT_STROKE_WIDTH } from "./dialogs/symbology/colorRampUtils";
+import LAYER_GALLERY from "../_generated/layer_gallery.json";
+import { DEFAULT_STROKE_WIDTH } from "./features/layers/symbology/colorRampUtils";
+import { getGdal } from './gdal';
 export const debounce = (func, timeout = 100) => {
     let timeoutId;
     return (...args) => {
@@ -123,7 +126,7 @@ export function createDefaultLayerRegistry(layerBrowserRegistry) {
             LAYER_THUMBNAILS[imageName] = r(key);
         });
     };
-    const context = require.context('../layer_gallery', false, /\.(png|jpe?g|gif|svg)$/);
+    const context = require.context('../layer_gallery_thumbnails', false, /\.(png|jpe?g|gif|svg)$/);
     importAll(context);
     for (const entry of Object.keys(LAYER_GALLERY)) {
         const layerProvider = LAYER_GALLERY[entry];
@@ -294,7 +297,7 @@ export const fetchWithProxies = async (url, model, parseResponse, options, strat
     const proxyUrl = settings && settings.proxyUrl ? settings.proxyUrl : 'https://corsproxy.io';
     const strategies = {
         direct: url => url,
-        internal: url => `/jupytergis_core/proxy?url=${encodeURIComponent(url)}`,
+        internal: url => `${INTERNAL_PROXY_BASE}?url=${encodeURIComponent(url)}`,
         external: url => `${proxyUrl}/?url=${encodeURIComponent(url)}`,
     };
     const defaultOrder = ['direct', 'internal', 'external'];
@@ -354,6 +357,106 @@ export const loadGeoTiff = async (sourceInfo, model, file) => {
         sourceUrl: url,
     };
 };
+const geoPackageCache = new Map();
+/**
+ * Convert curved geometries to linear geometries for a given GeoPackage vector file, and reproject the data
+ *
+ * @param fileBlob GeoPackage file as a blob
+ * @returns Blob URL created from converted file
+ */
+async function linearizeReprojectGpkg(fileBlob, projection) {
+    const gdal = await getGdal();
+    const file = new File([fileBlob], 'input.gpkg', {
+        type: 'application/geopackage+sqlite3',
+    });
+    const ds = await gdal.open(file);
+    await gdal.ogr2ogr(ds.datasets[0], ['-f', 'GPKG', '-nlt', 'CONVERT_TO_LINEAR', '-t_srs', projection], 'output');
+    const bytes = await gdal.getFileBytes('/output/output.gpkg');
+    const blob = new Blob([new Uint8Array(bytes)], {
+        type: 'application/geopackage+sqlite3',
+    });
+    const url = URL.createObjectURL(blob);
+    return url;
+}
+function loadGeoPackageVectorFile(fileBlob, projection, cacheFilename) {
+    if (geoPackageCache.has(cacheFilename)) {
+        return geoPackageCache.get(cacheFilename);
+    }
+    const loader = (async () => {
+        try {
+            const url = await linearizeReprojectGpkg(fileBlob, projection);
+            const [tables, slds] = await loadGpkg(url, projection);
+            const tableMap = {};
+            for (const name of Object.keys(tables)) {
+                tableMap[name] = {
+                    source: tables[name],
+                    sld: slds[name],
+                };
+            }
+            return tableMap;
+        }
+        catch (e) {
+            showErrorMessage('Failed to load GeoPackage file', e);
+            throw e;
+        }
+    })();
+    geoPackageCache.set(cacheFilename, loader);
+    return loader;
+}
+async function loadGeoPackageRasterFile(filepath, cacheFilename, model, file_content) {
+    if (geoPackageCache.has(cacheFilename)) {
+        return geoPackageCache.get(cacheFilename);
+    }
+    const loader = (async () => {
+        try {
+            let bytes;
+            if (filepath.startsWith('http://') || filepath.startsWith('https://')) {
+                bytes = await loadGkpgFromUrl(filepath, model);
+            }
+            else {
+                const arrayBuffer = await stringToArrayBuffer(file_content);
+                bytes = new Uint8Array(arrayBuffer);
+            }
+            const geoPackage = await GeoPackageAPI.open(bytes);
+            const tileTables = await geoPackage.getTileTables();
+            const tableMap = {};
+            tileTables.forEach(tableName => {
+                const tileDao = geoPackage.getTileDao(tableName);
+                const tileWidth = tileDao.tileMatrices[0].tile_width;
+                const tileHeight = tileDao.tileMatrices[0].tile_height;
+                tableMap[tableName] = {
+                    gpr: new GeoPackageTileRetriever(tileDao, tileWidth, tileHeight),
+                    tileDao,
+                };
+            });
+            return tableMap;
+        }
+        catch (error) {
+            showErrorMessage(`Failed to load GeoPackage file: ${cacheFilename}`, error);
+            throw error;
+        }
+    })();
+    geoPackageCache.set(cacheFilename, loader);
+    return loader;
+}
+async function loadGkpgFromUrl(filepath, model) {
+    const response = await fetchWithProxies(filepath, model, async (response) => {
+        const arrayBuffer = await response.arrayBuffer();
+        return new Uint8Array(arrayBuffer);
+    });
+    if (!response) {
+        throw new Error(`Failed to fetch GeoPackage from URL: ${filepath}`);
+    }
+    return response;
+}
+export async function getGeoPackageTableNames(filepath, type) {
+    const cacheKey = filepath + (type === 'GeoPackageRasterSource' ? 'Raster' : 'Vector');
+    const tableMap = await geoPackageCache.get(cacheKey);
+    if (!tableMap) {
+        return [];
+    }
+    return Object.keys(tableMap);
+}
 /**
  * Generalized file reader for different source types.
  *
@@ -362,6 +465,9 @@ export const loadGeoTiff = async (sourceInfo, model, file) => {
  */
 export const loadFile = async (fileInfo) => {
     const { filepath, type, model } = fileInfo;
+    if (!filepath) {
+        return;
+    }
     if (filepath.startsWith('http://') || filepath.startsWith('https://')) {
         switch (type) {
             case 'ImageSource': {
@@ -412,6 +518,21 @@ export const loadFile = async (fileInfo) => {
                 showErrorMessage('Network error', `Failed to fetch ${filepath}`);
                 throw new Error(`Failed to fetch ${filepath}`);
             }
+            case 'GeoPackageVectorSource': {
+                const projection = model.sharedModel.options.projection;
+                if (!projection) {
+                    throw new Error(`Projection is not specified for ${filepath}`);
+                }
+                const fileBlob = await fetchWithProxies(filepath, model, async (response) => response.blob());
+                if (!fileBlob) {
+                    showErrorMessage('Network error', `Failed to fetch ${filepath}`);
+                    throw new Error(`Failed to fetch ${filepath}`);
+                }
+                return loadGeoPackageVectorFile(fileBlob, projection, filepath + 'Vector');
+            }
+            case 'GeoPackageRasterSource': {
+                return loadGeoPackageRasterFile(filepath, filepath + 'Raster', model);
+            }
             case 'GeoParquetSource': {
                 const cached = await getFromIndexedDB(filepath);
                 if (cached) {
@@ -506,6 +627,17 @@ export const loadFile = async (fileInfo) => {
                     throw new Error('Invalid file format for tiff content.');
                 }
             }
+            case 'GeoPackageVectorSource': {
+                const projection = model.sharedModel.options.projection;
+                if (!projection) {
+                    throw new Error(`Projection is not specified for ${filepath}`);
+                }
+                const blob = await base64ToBlob(file.content, getMimeType(filepath));
+                return loadGeoPackageVectorFile(blob, projection, filepath + 'Vector');
+            }
+            case 'GeoPackageRasterSource': {
+                return loadGeoPackageRasterFile(filepath, filepath + 'Raster', undefined, file.content);
+            }
             case 'GeoParquetSource': {
                 let buffer;
                 switch (file.format) {
@@ -563,6 +695,7 @@ export const base64ToBlob = async (base64, mimeType) => {
 /**
  * A mapping of file extensions to their corresponding MIME types.
  */
+export const INTERNAL_PROXY_BASE = '/jupytergis_core/proxy';
 export const MIME_TYPES = {
     // from https://github.com/python/cpython/blob/3.9/Lib/mimetypes.py
     '.a': 'application/octet-stream',
@@ -591,6 +724,7 @@ export const MIME_TYPES = {
     '.etx': 'text/x-setext',
     '.exe': 'application/octet-stream',
     '.gif': 'image/gif',
+    '.gpkg': 'application/geopackage+vnd.sqlite3',
     '.gtar': 'application/x-gtar',
     '.h': 'text/plain',
     '.hdf': 'application/x-hdf',

package/lib/types.d.ts

@@ -13,7 +13,7 @@ type InternalRgbArray = number[];
 export type ColorValue = RgbColorValue | HexColorValue;
 export type SizeValue = number;
 export type SymbologyValue = SizeValue | ColorValue | InternalRgbArray;
-export type VectorRenderType = 'Single Symbol' | 'Canonical' | 'Graduated' | 'Categorized' | 'Heatmap';
+export type VectorRenderType = 'Heatmap' | 'Grammar';
 /**
  * Add jupytergisMaps object to the global variables.
  */
@@ -30,6 +30,11 @@ declare global {
 declare const classificationModes: readonly ["quantile", "equal interval", "jenks", "pretty", "logarithmic", "continuous"];
 export type ClassificationMode = (typeof classificationModes)[number];
 export declare const SYMBOLOGY_VALID_LAYER_TYPES: string[];
+export declare const STORY_TYPE: {
+    readonly guided: "guided";
+    readonly unguided: "unguided";
+    readonly verticalScroll: "Vertical Scroll";
+};
 export interface IWmsLayerInfo {
     name: string;
     title: string;

package/lib/types.js

@@ -9,6 +9,10 @@ const classificationModes = [
 export const SYMBOLOGY_VALID_LAYER_TYPES = [
     'VectorLayer',
     'VectorTileLayer',
-    'WebGlLayer',
-    'HeatmapLayer',
+    'GeoTiffLayer',
 ];
+export const STORY_TYPE = {
+    guided: 'guided',
+    unguided: 'unguided',
+    verticalScroll: 'Vertical Scroll',
+};

package/lib/{menus.js → workspace/menus.js}

@@ -1,6 +1,6 @@
 import { Menu } from '@lumino/widgets';
-import { CommandIDs } from './constants';
-import { rasterIcon } from './icons';
+import { CommandIDs } from '../constants';
+import { rasterIcon } from '../shared/icons';
 export const vectorSubMenu = (commands) => {
     const subMenu = new Menu({ commands });
     subMenu.title.label = 'Add Vector Layer';
@@ -22,6 +22,10 @@ export const vectorSubMenu = (commands) => {
         type: 'command',
         command: CommandIDs.openNewGeoParquetDialog,
     });
+    subMenu.addItem({
+        type: 'command',
+        command: CommandIDs.newGeoPackageVectorEntry,
+    });
     return subMenu;
 };
 export const rasterSubMenu = (commands) => {
@@ -49,5 +53,9 @@ export const rasterSubMenu = (commands) => {
         type: 'command',
         command: CommandIDs.openNewGeoTiffDialog,
     });
+    subMenu.addItem({
+        type: 'command',
+        command: CommandIDs.newGeoPackageRasterEntry,
+    });
     return subMenu;
 };

package/lib/workspace/panels/components/TabbedPanel.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export interface ITabConfig {
+    name: string;
+    title: string;
+    enabled: boolean;
+    contentClassName?: string;
+    content: React.ReactNode;
+}
+interface ITabbedPanelProps {
+    tabs: ITabConfig[];
+    curTab: string;
+    onTabClick: (name: string) => void;
+    onTabListMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+    onTabListTouchStart?: React.TouchEventHandler<HTMLDivElement>;
+}
+export declare const TabbedPanel: React.FC<ITabbedPanelProps>;
+export {};

package/lib/workspace/panels/components/TabbedPanel.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { TabsRoot, TabsContent, TabsList, TabsTrigger, } from '../../../shared/components/Tabs';
+import { cn } from '../../../shared/components/utils';
+export const TabbedPanel = ({ tabs, curTab, onTabClick, onTabListMouseDown, onTabListTouchStart, }) => {
+    const enabledTabs = tabs.filter(tab => tab.enabled);
+    const tabsListRef = React.useRef(null);
+    React.useEffect(() => {
+        const list = tabsListRef.current;
+        const active = list === null || list === void 0 ? void 0 : list.querySelector('[data-state="active"]');
+        if (list && active) {
+            const listCenter = list.offsetWidth / 2;
+            const triggerCenter = active.offsetLeft + active.offsetWidth / 2;
+            list.scrollLeft = triggerCenter - listCenter;
+        }
+    }, [curTab]);
+    return (React.createElement(TabsRoot, { className: "jgis-panel-tabs", curTab: curTab },
+        React.createElement(TabsList, { ref: tabsListRef, onMouseDown: onTabListMouseDown, onTouchStart: onTabListTouchStart }, enabledTabs.map(tab => (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", key: tab.name, value: tab.name, onClick: () => onTabClick(tab.name) }, tab.title)))),
+        enabledTabs.map(tab => (React.createElement(TabsContent, { key: tab.name, value: tab.name, className: cn('jgis-panel-tab-content', tab.contentClassName) }, tab.content)))));
+};

package/lib/{panelview → workspace/panels}/components/layers.js

@@ -9,12 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { DOMUtils } from '@jupyterlab/apputils';
 import { Button, LabIcon, caretDownIcon, caretRightIcon, } from '@jupyterlab/ui-components';
 import React, { useEffect, useState, } from 'react';
-import { CommandIDs, icons } from "../../constants";
-import { useGetSymbology } from "../../dialogs/symbology/hooks/useGetSymbology";
-import { nonVisibilityIcon, targetWithCenterIcon, visibilityIcon, } from "../../icons";
+import { CommandIDs, icons } from "../../../constants";
+import { useGetSymbology } from "../../../features/layers/symbology/hooks/useGetSymbology";
+import { nonVisibilityIcon, targetWithCenterIcon, visibilityIcon, } from "../../../shared/icons";
 import { LegendItem } from './legendItem';
 const LAYER_GROUP_CLASS = 'jp-gis-layerGroup';
 const LAYER_GROUP_HEADER_CLASS = 'jp-gis-layerGroupHeader';
@@ -32,6 +34,7 @@ export const LayersBodyComponent = props => {
         // Notify commands that need updating
         props.commands.notifyCommandChanged(CommandIDs.identify);
         props.commands.notifyCommandChanged(CommandIDs.temporalController);
+        props.commands.notifyCommandChanged(CommandIDs.toggleDrawFeatures);
     };
     const _onDragOver = (e) => {
         e.stopPropagation();
@@ -174,13 +177,14 @@ const LayerGroupComponent = props => {
      * Listen to the changes on the current layer.
      */
     useEffect(() => {
-        const onClientSharedStateChanged = () => {
+        const handleSelectedChanged = () => {
             // TODO Support follow mode and remoteUser state
             setSelected(isSelected(group.name, gisModel));
         };
-        gisModel === null || gisModel === void 0 ? void 0 : gisModel.clientStateChanged.connect(onClientSharedStateChanged);
+        gisModel === null || gisModel === void 0 ? void 0 : gisModel.selectedChanged.connect(handleSelectedChanged);
+        handleSelectedChanged();
         return () => {
-            gisModel === null || gisModel === void 0 ? void 0 : gisModel.clientStateChanged.disconnect(onClientSharedStateChanged);
+            gisModel === null || gisModel === void 0 ? void 0 : gisModel.selectedChanged.disconnect(handleSelectedChanged);
         };
     }, [gisModel, group.name]);
     /**
@@ -210,6 +214,21 @@ const LayerGroupComponent = props => {
     const handleRightClick = (event) => {
         onClick({ type: 'group', item: name, event });
     };
+    const handleGroupMoreClick = (e) => {
+        e.stopPropagation();
+        onClick({
+            type: 'group',
+            item: name,
+            event: e,
+        });
+        const rect = e.currentTarget.getBoundingClientRect();
+        e.currentTarget.dispatchEvent(new MouseEvent('contextmenu', {
+            bubbles: true,
+            cancelable: true,
+            clientX: rect.left,
+            clientY: rect.bottom,
+        }));
+    };
     const handleExpand = async () => {
         state.save(`jupytergis:${group.name}`, { expanded: !open });
         setOpen(!open);
@@ -245,7 +264,9 @@ const LayerGroupComponent = props => {
                     padding: '2px 4px',
                     fontSize: 'inherit',
                     fontFamily: 'inherit',
-                }, autoFocus: true })) : (React.createElement("span", { id: id, className: LAYER_TEXT_CLASS, tabIndex: -2 }, name))),
+                }, autoFocus: true })) : (React.createElement("span", { id: id, className: LAYER_TEXT_CLASS, tabIndex: -2 }, name)),
+            React.createElement(Button, { className: "jp-gis-layer-more-btn", minimal: true, onClick: handleGroupMoreClick, title: "More options" },
+                React.createElement(FontAwesomeIcon, { icon: faEllipsisVertical }))),
         open && (React.createElement("div", null, layers
             .slice()
             .reverse()
@@ -270,7 +291,7 @@ const LayerComponent = props => {
     const [selected, setSelected] = useState(
     // TODO Support multi-selection as `model?.jGISModel?.localState?.selected.value` does
     isSelected(layerId, gisModel));
-    const [expanded, setExpanded] = useState(false);
+    const [expanded, setExpanded] = useState(true);
     const [isEditing, setIsEditing] = useState(false);
     const [editValue, setEditValue] = useState('');
     const { symbology } = useGetSymbology({
@@ -287,13 +308,14 @@ const LayerComponent = props => {
      * Listen to the changes on the current layer.
      */
     useEffect(() => {
-        const onClientSharedStateChanged = (sender, clients) => {
+        const handleSelectedChanged = () => {
             // TODO Support follow mode and remoteUser state
             setSelected(isSelected(layerId, gisModel));
         };
-        gisModel === null || gisModel === void 0 ? void 0 : gisModel.clientStateChanged.connect(onClientSharedStateChanged);
+        gisModel === null || gisModel === void 0 ? void 0 : gisModel.selectedChanged.connect(handleSelectedChanged);
+        handleSelectedChanged();
         return () => {
-            gisModel === null || gisModel === void 0 ? void 0 : gisModel.clientStateChanged.disconnect(onClientSharedStateChanged);
+            gisModel === null || gisModel === void 0 ? void 0 : gisModel.selectedChanged.disconnect(handleSelectedChanged);
         };
     }, [gisModel, layerId]);
     /**
@@ -335,6 +357,21 @@ const LayerComponent = props => {
             event,
         });
     };
+    const handleLayerMoreClick = (e) => {
+        e.stopPropagation();
+        onClick({
+            type: 'layer',
+            item: layerId,
+            event: e,
+        });
+        const rect = e.currentTarget.getBoundingClientRect();
+        e.currentTarget.dispatchEvent(new MouseEvent('contextmenu', {
+            bubbles: true,
+            cancelable: true,
+            clientX: rect.left,
+            clientY: rect.bottom,
+        }));
+    };
     const handleRenameSave = () => {
         const newName = editValue.trim();
         if (newName && newName !== name && gisModel) {
@@ -383,11 +420,17 @@ const LayerComponent = props => {
                   ${isStorySegmentLayer ? 'jp-gis-storySegmentLayer' : ''}
                   ${selected ? ' jp-mod-selected' : ''}`, draggable: true, onDragStart: Private.onDragStart, onDragOver: Private.onDragOver, onDragEnd: Private.onDragEnd, "data-id": layerId, style: { display: 'flex', flexDirection: 'column' } },
         React.createElement("div", { className: LAYER_TITLE_CLASS, onClick: setSelection, onContextMenu: setSelection, style: { display: 'flex' } },
-            hasSupportedSymbology && (React.createElement(Button, { minimal: true, onClick: e => {
-                    e.stopPropagation();
-                    setExpanded(v => !v);
-                }, title: expanded ? 'Hide legend' : 'Show legend' },
-                React.createElement(LabIcon.resolveReact, { icon: expanded ? caretDownIcon : caretRightIcon, tag: "span" }))),
+            React.createElement(Button, { minimal: true, onClick: hasSupportedSymbology
+                    ? e => {
+                        e.stopPropagation();
+                        setExpanded(v => !v);
+                    }
+                    : undefined, title: hasSupportedSymbology
+                    ? expanded
+                        ? 'Hide legend'
+                        : 'Show legend'
+                    : undefined, style: { visibility: hasSupportedSymbology ? 'visible' : 'hidden' } },
+                React.createElement(LabIcon.resolveReact, { icon: expanded ? caretDownIcon : caretRightIcon, tag: "span" })),
             isStorySegmentLayer ? (React.createElement("span", { className: LAYER_SLIDE_NUMBER_CLASS, title: "Slide number" }, getSlideNumber())) : (React.createElement(Button, { title: layer.visible ? 'Hide layer' : 'Show layer', onClick: toggleVisibility, minimal: true },
                 React.createElement(LabIcon.resolveReact, { icon: layer.visible ? visibilityIcon : nonVisibilityIcon, className: `${LAYER_ICON_CLASS}${layer.visible ? '' : ' jp-gis-mod-hidden'}`, tag: "span" }))),
             icons.has(layer.type) && (React.createElement(LabIcon.resolveReact, Object.assign({}, icons.get(layer.type), { className: LAYER_ICON_CLASS }))),
@@ -400,8 +443,10 @@ const LayerComponent = props => {
                     fontFamily: 'inherit',
                 }, autoFocus: true })) : (React.createElement("span", { id: id, className: LAYER_TEXT_CLASS, tabIndex: -2, onDoubleClick: handleDoubleClick, title: "Double-click to zoom to layer" }, name)),
             React.createElement(Button, { title: 'Move map to the extent of the layer', onClick: moveToExtent, minimal: true },
-                React.createElement(LabIcon.resolveReact, { icon: targetWithCenterIcon, className: LAYER_ICON_CLASS, tag: "span" }))),
-        expanded && gisModel && hasSupportedSymbology && (React.createElement("div", { style: { marginTop: 6, width: '100%' } },
+                React.createElement(LabIcon.resolveReact, { icon: targetWithCenterIcon, className: LAYER_ICON_CLASS, tag: "span" })),
+            React.createElement(Button, { className: "jp-gis-layer-more-btn", minimal: true, onClick: handleLayerMoreClick, title: "More options" },
+                React.createElement(FontAwesomeIcon, { icon: faEllipsisVertical }))),
+        expanded && gisModel && hasSupportedSymbology && (React.createElement("div", { style: { marginTop: 6, width: '100%' }, onClick: setSelection },
             React.createElement(LegendItem, { layerId: layerId, model: gisModel })))));
 };
 var Private;