@jupytergis/base 0.14.1 → 0.16.0-alpha.0

package/lib/{icons.js → shared/icons.js}

@@ -4,24 +4,26 @@
  */
 // This file is based on iconimports.ts in @jupyterlab/ui-components, but is manually generated.
 import { LabIcon } from '@jupyterlab/ui-components';
-import bookOpenSvgStr from '../style/icons/book_open.svg';
-import clockSvgStr from '../style/icons/clock-solid.svg';
-import geoJsonSvgStr from '../style/icons/geojson.svg';
-import geolocationSvgStr from '../style/icons/geolocation.svg';
-import infoSvgStr from '../style/icons/info-solid.svg';
-import logoSvgStr from '../style/icons/logo.svg';
-import logoMiniSvgStr from '../style/icons/logo_mini.svg';
-import logoMiniAlternativeSvgStr from '../style/icons/logo_mini_alternative.svg';
-import logoMiniQGZ from '../style/icons/logo_mini_qgz.svg';
-import markerSvgStr from '../style/icons/marker.svg';
-import moundSvgStr from '../style/icons/mound.svg';
-import nonVisibilitySvgStr from '../style/icons/nonvisibility.svg';
-import rasterSvgStr from '../style/icons/raster.svg';
-import targetWithCenterSvgStr from '../style/icons/target_with_center.svg';
-import targetWithoutCenterSvgStr from '../style/icons/target_without_center.svg';
-import terminalToolbarSvgStr from '../style/icons/terminal_toolbar.svg';
-import vectorSquareSvgStr from '../style/icons/vector_square.svg';
-import visibilitySvgStr from '../style/icons/visibility.svg';
+import bookOpenSvgStr from '../../style/icons/book_open.svg';
+import clockSvgStr from '../../style/icons/clock-solid.svg';
+import geoJsonSvgStr from '../../style/icons/geojson.svg';
+import geolocationSvgStr from '../../style/icons/geolocation.svg';
+import geoPackageSvgStr from '../../style/icons/geopackage.svg';
+import infoSvgStr from '../../style/icons/info-solid.svg';
+import logoSvgStr from '../../style/icons/logo.svg';
+import logoMiniSvgStr from '../../style/icons/logo_mini.svg';
+import logoMiniAlternativeSvgStr from '../../style/icons/logo_mini_alternative.svg';
+import logoMiniQGZ from '../../style/icons/logo_mini_qgz.svg';
+import markerSvgStr from '../../style/icons/marker.svg';
+import moundSvgStr from '../../style/icons/mound.svg';
+import nonVisibilitySvgStr from '../../style/icons/nonvisibility.svg';
+import pencilSolidSvgStr from '../../style/icons/pencil_solid.svg';
+import rasterSvgStr from '../../style/icons/raster.svg';
+import targetWithCenterSvgStr from '../../style/icons/target_with_center.svg';
+import targetWithoutCenterSvgStr from '../../style/icons/target_without_center.svg';
+import terminalToolbarSvgStr from '../../style/icons/terminal_toolbar.svg';
+import vectorSquareSvgStr from '../../style/icons/vector_square.svg';
+import visibilitySvgStr from '../../style/icons/visibility.svg';
 export const logoIcon = new LabIcon({
     name: 'jupytergis::logo',
     svgstr: logoSvgStr,
@@ -90,7 +92,15 @@ export const targetWithCenterIcon = new LabIcon({
     name: 'jupytergis::targetWithoutCenter',
     svgstr: targetWithoutCenterSvgStr,
 });
+export const geoPackageIcon = new LabIcon({
+    name: 'jupytergis::geoPackage',
+    svgstr: geoPackageSvgStr,
+});
 export const markerIcon = new LabIcon({
     name: 'jupytergis::marker',
     svgstr: markerSvgStr,
 });
+export const pencilSolidIcon = new LabIcon({
+    name: 'jupytergis::pencilSolid',
+    svgstr: pencilSolidSvgStr,
+});

package/lib/tools.d.ts

@@ -27,7 +27,7 @@ export declare function getLayerTileInfo(tileUrl: string, mapOptions: Pick<IJGIS
 export interface IParsedStyle {
     fillColor: string;
     strokeColor: string;
-    strokeWidth: number;
+    strokeWidth: string;
     joinStyle: string;
     capStyle: string;
     radius?: number;
@@ -78,6 +78,7 @@ export declare const loadGeoTiff: (sourceInfo: {
     sourceUrl: string;
     metadata?: undefined;
 } | null>;
+export declare function getGeoPackageTableNames(filepath: string, type: 'GeoPackageVectorSource' | 'GeoPackageRasterSource'): Promise<string[]>;
 /**
  * Generalized file reader for different source types.
  *
@@ -100,6 +101,7 @@ export declare const base64ToBlob: (base64: string, mimeType: string) => Promise
 /**
  * A mapping of file extensions to their corresponding MIME types.
  */
+export declare const INTERNAL_PROXY_BASE = "/jupytergis_core/proxy";
 export declare const MIME_TYPES: {
     [ext: string]: string;
 };

package/lib/tools.js

@@ -2,10 +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 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) => {
@@ -122,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];
@@ -219,7 +223,7 @@ export function parseColor(style) {
         radius: (_a = style['circle-radius']) !== null && _a !== void 0 ? _a : 5,
         fillColor: (_c = (_b = style['circle-fill-color']) !== null && _b !== void 0 ? _b : style['fill-color']) !== null && _c !== void 0 ? _c : '#3399CC',
         strokeColor: (_e = (_d = style['circle-stroke-color']) !== null && _d !== void 0 ? _d : style['stroke-color']) !== null && _e !== void 0 ? _e : '#3399CC',
-        strokeWidth: (_g = (_f = style['circle-stroke-width']) !== null && _f !== void 0 ? _f : style['stroke-width']) !== null && _g !== void 0 ? _g : 1.25,
+        strokeWidth: String((_g = (_f = style['circle-stroke-width']) !== null && _f !== void 0 ? _f : style['stroke-width']) !== null && _g !== void 0 ? _g : DEFAULT_STROKE_WIDTH),
         joinStyle: (_j = (_h = style['circle-stroke-line-join']) !== null && _h !== void 0 ? _h : style['stroke-line-join']) !== null && _j !== void 0 ? _j : 'round',
         capStyle: (_l = (_k = style['circle-stroke-line-cap']) !== null && _k !== void 0 ? _k : style['stroke-line-cap']) !== null && _l !== void 0 ? _l : 'round',
     };
@@ -293,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'];
@@ -353,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.
  *
@@ -361,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': {
@@ -411,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) {
@@ -505,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) {
@@ -562,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',
@@ -590,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',
@@ -767,8 +902,7 @@ export const getNumericFeatureAttributes = (featureProperties) => {
  */
 export const getColorCodeFeatureAttributes = (featureProperties) => {
     return getFeatureAttributes(featureProperties, (_, value) => {
-        const regex = new RegExp('^#[0-9a-f]{6}$');
-        return typeof value === 'string' && regex.test(value);
+        return typeof value === 'string' && /^#[0-9a-fA-F]{6}$/.test(value);
     });
 };
 export function downloadFile(content, fileName, mimeType) {

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,10 +30,21 @@ 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;
+}
 /** Form context passed to SchemaForm and custom fields. */
 export interface IJupyterGISFormContext<TFormData = IDict | undefined> {
     model: IJupyterGISModel;
     formData: TFormData;
+    wmsAvailableLayers?: IWmsLayerInfo[];
+    setWmsAvailableLayers?: (layers: IWmsLayerInfo[]) => void;
     formSchemaRegistry?: IJGISFormSchemaRegistry;
 }
 /** Optional form state (schema, extraErrors). */

package/lib/types.js

@@ -9,6 +9,11 @@ const classificationModes = [
 export const SYMBOLOGY_VALID_LAYER_TYPES = [
     'VectorLayer',
     'VectorTileLayer',
-    'WebGlLayer',
+    'GeoTiffLayer',
     'HeatmapLayer',
 ];
+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) => {
@@ -33,6 +37,10 @@ export const rasterSubMenu = (commands) => {
         type: 'command',
         command: CommandIDs.openNewRasterDialog,
     });
+    subMenu.addItem({
+        type: 'command',
+        command: CommandIDs.openNewWmsDialog,
+    });
     subMenu.addItem({
         type: 'command',
         command: CommandIDs.openNewHillshadeDialog,
@@ -45,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

@@ -1,9 +1,22 @@
+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 { 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';
@@ -21,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();
@@ -104,8 +118,14 @@ export const LayersBodyComponent = props => {
                 };
             }
             else {
-                // If types are the same add the selection - multi-selection
-                newSelection = Object.assign(Object.assign({}, selectedValue), { [item]: { type } });
+                // If types are the same modify the selection (either add or remove to multi-selection)
+                if (item in selectedValue) {
+                    const _a = selectedValue, _b = item, _ = _a[_b], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+                    newSelection = rest;
+                }
+                else {
+                    newSelection = Object.assign(Object.assign({}, selectedValue), { [item]: { type } });
+                }
             }
         }
         // Set the selection
@@ -157,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]);
     /**
@@ -193,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);
@@ -228,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()
@@ -253,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({
@@ -270,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]);
     /**
@@ -318,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) {
@@ -366,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 }))),
@@ -383,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;