@jupytergis/base 0.15.0 → 0.16.0-alpha.0

package/lib/dialogs/symbology/vector_layer/types/SimpleSymbol.js

@@ -1,120 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { colorToRgba, DEFAULT_COLOR, } from "../../colorRampUtils";
-import { DEFAULT_STROKE_WIDTH } from "../../colorRampUtils";
-import RgbaColorPicker from "../../components/color_ramp/RgbaColorPicker";
-import { useEffectiveSymbologyParams } from "../../hooks/useEffectiveSymbologyParams";
-import { useOkSignal } from "../../hooks/useOkSignal";
-import { saveSymbology, } from "../../symbologyUtils";
-import { useLatest } from "../../../../shared/hooks/useLatest";
-import { parseColor } from "../../../../tools";
-const SimpleSymbol = ({ model, okSignalPromise, layerId, symbologyTab, isStorySegmentOverride, segmentId, }) => {
-    const [style, setStyle] = useState({
-        fillColor: '#3399CC',
-        joinStyle: 'round',
-        strokeColor: '#3399CC',
-        capStyle: 'round',
-        strokeWidth: String(DEFAULT_STROKE_WIDTH),
-        radius: 5,
-    });
-    const styleRef = useLatest(style);
-    const [fillRgba, setFillRgba] = useState(DEFAULT_COLOR);
-    const [strokeRgba, setStrokeRgba] = useState(DEFAULT_COLOR);
-    const fillRgbaRef = useLatest(fillRgba);
-    const strokeRgbaRef = useLatest(strokeRgba);
-    const layer = layerId !== undefined ? model.getLayer(layerId) : null;
-    const params = useEffectiveSymbologyParams({
-        model,
-        layerId: layerId,
-        layer,
-        isStorySegmentOverride,
-        segmentId,
-    });
-    useEffect(() => {
-        var _a, _b, _c;
-        if (!params) {
-            return;
-        }
-        if (((_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.renderType) === 'Single Symbol' && params.color) {
-            const parsed = parseColor(params.color);
-            if (parsed) {
-                setStyle(parsed);
-            }
-            const fillColor = (_b = params.color['circle-fill-color']) !== null && _b !== void 0 ? _b : params.color['fill-color'];
-            const strokeColor = (_c = params.color['circle-stroke-color']) !== null && _c !== void 0 ? _c : params.color['stroke-color'];
-            if (fillColor !== undefined) {
-                setFillRgba(colorToRgba(fillColor));
-            }
-            if (strokeColor !== undefined) {
-                setStrokeRgba(colorToRgba(strokeColor));
-            }
-        }
-    }, [params]);
-    const handleOk = () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        if (!layerId || !(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
-            return;
-        }
-        const styleExpr = {
-            'circle-radius': (_a = styleRef.current) === null || _a === void 0 ? void 0 : _a.radius,
-            'circle-fill-color': fillRgbaRef.current,
-            'circle-stroke-color': strokeRgbaRef.current,
-            'circle-stroke-width': Math.max(0, parseFloat((_c = (_b = styleRef.current) === null || _b === void 0 ? void 0 : _b.strokeWidth) !== null && _c !== void 0 ? _c : '0')),
-            'circle-stroke-line-join': (_d = styleRef.current) === null || _d === void 0 ? void 0 : _d.joinStyle,
-            'circle-stroke-line-cap': (_e = styleRef.current) === null || _e === void 0 ? void 0 : _e.capStyle,
-            'fill-color': fillRgbaRef.current,
-            'stroke-color': strokeRgbaRef.current,
-            'stroke-width': Math.max(0, parseFloat((_g = (_f = styleRef.current) === null || _f === void 0 ? void 0 : _f.strokeWidth) !== null && _g !== void 0 ? _g : '0')),
-            'stroke-line-join': (_h = styleRef.current) === null || _h === void 0 ? void 0 : _h.joinStyle,
-            'stroke-line-cap': (_j = styleRef.current) === null || _j === void 0 ? void 0 : _j.capStyle,
-        };
-        const symbologyState = {
-            renderType: 'Single Symbol',
-        };
-        saveSymbology({
-            model,
-            layerId,
-            isStorySegmentOverride,
-            segmentId,
-            payload: {
-                symbologyState,
-                color: styleExpr,
-            },
-            mutateLayerBeforeSave: targetLayer => {
-                if (targetLayer.type === 'HeatmapLayer') {
-                    targetLayer.type = 'VectorLayer';
-                }
-            },
-        });
-    };
-    useOkSignal(okSignalPromise, handleOk);
-    const joinStyleOptions = ['bevel', 'round', 'miter'];
-    const capStyleOptions = ['butt', 'round', 'square'];
-    if (!layerId || !layer) {
-        return null;
-    }
-    const renderColorTab = () => (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "jp-gis-symbology-row" },
-            React.createElement("label", { htmlFor: 'vector-value-select' }, "Fill Color:"),
-            React.createElement(RgbaColorPicker, { color: fillRgba, onChange: setFillRgba })),
-        React.createElement("div", { className: "jp-gis-symbology-row" },
-            React.createElement("label", { htmlFor: 'vector-value-select' }, "Stroke Color:"),
-            React.createElement(RgbaColorPicker, { color: strokeRgba, onChange: setStrokeRgba })),
-        React.createElement("div", { className: "jp-gis-symbology-row" },
-            React.createElement("label", { htmlFor: 'vector-value-select' }, "Stroke Width:"),
-            React.createElement("input", { type: "text", value: style.strokeWidth, className: "jp-mod-styled", onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { strokeWidth: event.target.value }))) })),
-        React.createElement("div", { className: "jp-gis-symbology-row" },
-            React.createElement("label", { htmlFor: 'vector-join-select' }, "Join Style:"),
-            React.createElement("div", { className: "jp-select-wrapper" },
-                React.createElement("select", { name: 'vector-join-select', onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { joinStyle: event.target.value }))), className: "jp-mod-styled", value: style.joinStyle }, joinStyleOptions.map((method, index) => (React.createElement("option", { key: index, value: method, className: "jp-mod-styled" }, method)))))),
-        React.createElement("div", { className: "jp-gis-symbology-row" },
-            React.createElement("label", { htmlFor: 'vector-cap-select' }, "Cap Style:"),
-            React.createElement("div", { className: "jp-select-wrapper" },
-                React.createElement("select", { name: 'vector-cap-select', onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { capStyle: event.target.value }))), className: "jp-mod-styled", value: style.capStyle }, capStyleOptions.map((cap, index) => (React.createElement("option", { key: index, value: cap, className: "jp-mod-styled" }, cap))))))));
-    const renderRadiusTab = () => (React.createElement("div", { className: "jp-gis-symbology-row" },
-        React.createElement("label", null, "Radius:"),
-        React.createElement("input", { type: "number", value: style.radius, className: "jp-mod-styled", onChange: e => setStyle(prev => (Object.assign(Object.assign({}, prev), { radius: +e.target.value }))) })));
-    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-        React.createElement("p", null, "Color all features the same way."),
-        symbologyTab === 'color' ? renderColorTab() : renderRadiusTab()));
-};
-export default SimpleSymbol;

package/lib/formbuilder/index.d.ts

@@ -1,4 +0,0 @@
-export * from './objectform/SchemaForm';
-export * from './objectform/source';
-export * from './objectform/layer';
-export * from './creationform';

package/lib/formbuilder/index.js

@@ -1,4 +0,0 @@
-export * from './objectform/SchemaForm';
-export * from './objectform/source';
-export * from './objectform/layer';
-export * from './creationform';

package/lib/formbuilder/objectform/layer/storySegmentLayerForm.js

@@ -1,95 +0,0 @@
-import React, { useMemo } from 'react';
-import { deepCopy } from "../../../tools";
-import { SchemaForm } from '../SchemaForm';
-import { ArrayFieldTemplate } from '../components/SegmentFormSymbology';
-import { SourcePropertiesField } from '../components/SourcePropertiesField';
-import StorySegmentReset from '../components/StorySegmentReset';
-import { processBaseSchema, removeFormEntry } from '../schemaUtils';
-import { useSchemaFormState } from '../useSchemaFormState';
-function getFirstSelectedStorySegmentLayerId(model) {
-    const selected = model.selected;
-    if (!selected) {
-        return undefined;
-    }
-    for (const key of Object.keys(selected)) {
-        const layer = model.getLayer(key);
-        if ((layer === null || layer === void 0 ? void 0 : layer.type) === 'StorySegmentLayer') {
-            return key;
-        }
-    }
-    return undefined;
-}
-const StorySegmentResetField = (props) => {
-    const ctx = props.formContext;
-    return React.createElement(StorySegmentReset, { model: ctx === null || ctx === void 0 ? void 0 : ctx.model, layerId: ctx === null || ctx === void 0 ? void 0 : ctx.layerId });
-};
-export function StorySegmentLayerPropertiesForm(props) {
-    const { schema: schemaProp, sourceData, syncData, model, filePath, formContext, sourceType, dialogOptions, formErrorSignal, formSchemaRegistry, } = props;
-    const { formData, schema, formContextValue: baseFormContext, hasSchema, handleChangeBase, handleSubmitBase, } = useSchemaFormState({
-        sourceData,
-        schemaProp,
-        model,
-        syncData,
-        cancel: props.cancel,
-        onAfterChange: dialogOptions
-            ? (data) => {
-                dialogOptions.layerData = Object.assign({}, data);
-            }
-            : undefined,
-    });
-    const layerId = useMemo(() => getFirstSelectedStorySegmentLayerId(model), [model, model.selected]);
-    const formContextValue = useMemo(() => (Object.assign(Object.assign({}, baseFormContext), { layerId, formSchemaRegistry })), [baseFormContext, layerId]);
-    const uiSchema = useMemo(() => {
-        var _a, _b;
-        const builtUiSchema = {};
-        const dataCopy = deepCopy(formData);
-        processBaseSchema(dataCopy, schema, builtUiSchema, formContext, removeFormEntry);
-        if ((_a = schema.properties) === null || _a === void 0 ? void 0 : _a.source) {
-            const availableSources = model.getSourcesByType(sourceType);
-            schema.properties.source.enumNames =
-                Object.values(availableSources);
-            schema.properties.source.enum = Object.keys(availableSources);
-        }
-        removeFormEntry('zoom', dataCopy, schema, builtUiSchema);
-        const layerOverrideItems = (_b = schema.properties) === null || _b === void 0 ? void 0 : _b.layerOverride;
-        const itemsProps = layerOverrideItems === null || layerOverrideItems === void 0 ? void 0 : layerOverrideItems.items;
-        const itemsProperties = itemsProps === null || itemsProps === void 0 ? void 0 : itemsProps.properties;
-        if (itemsProperties) {
-            delete itemsProperties.color;
-            delete itemsProperties.symbologyState;
-        }
-        if (model.selected) {
-            builtUiSchema.extent = {
-                'ui:field': 'storySegmentReset',
-            };
-        }
-        builtUiSchema.content = Object.assign(Object.assign({}, builtUiSchema.content), { markdown: {
-                'ui:widget': 'textarea',
-                'ui:options': {
-                    rows: 10,
-                },
-            } });
-        builtUiSchema.layerOverride = Object.assign(Object.assign({}, builtUiSchema.layerOverride), { items: {
-                'ui:title': '',
-                targetLayer: {
-                    'ui:field': 'layerSelect',
-                },
-                opacity: {
-                    'ui:field': 'opacity',
-                },
-                sourceProperties: {
-                    'ui:field': SourcePropertiesField,
-                },
-            }, 'ui:options': {
-                orderable: false,
-            }, 'ui:ArrayFieldTemplate': ArrayFieldTemplate });
-        return builtUiSchema;
-    }, [schema, formData, formContext, model, sourceType]);
-    const additionalFields = useMemo(() => ({
-        storySegmentReset: StorySegmentResetField,
-    }), []);
-    if (!hasSchema) {
-        return null;
-    }
-    return (React.createElement(SchemaForm, { schema: schema, formData: formData, onChange: handleChangeBase, onSubmit: handleSubmitBase, formContext: formContextValue, filePath: filePath, uiSchema: uiSchema, additionalFields: additionalFields, formErrorSignal: formErrorSignal }));
-}

package/lib/formbuilder/objectform/layer/webGlLayerForm.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { ILayerProps } from './layerform';
-export declare function WebGlLayerPropertiesForm(props: ILayerProps): React.ReactElement | null;

package/lib/formbuilder/objectform/process/index.d.ts

@@ -1 +0,0 @@
-export * from './dissolveProcessForm';

package/lib/formbuilder/objectform/process/index.js

@@ -1 +0,0 @@
-export * from './dissolveProcessForm';

package/lib/panelview/components/legendItem.js

@@ -1,210 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { findExprNode } from "../../dialogs/symbology/colorRampUtils";
-import { useGetSymbology } from "../../dialogs/symbology/hooks/useGetSymbology";
-export const LegendItem = ({ layerId, model }) => {
-    const { symbology, isLoading, error } = useGetSymbology({ layerId, model });
-    const [content, setContent] = useState(null);
-    const parseColorStops = (expr) => {
-        const interpolate = findExprNode(expr, 'interpolate');
-        if (!interpolate) {
-            return [];
-        }
-        const stops = [];
-        for (let i = 3; i < interpolate.length; i += 2) {
-            const value = interpolate[i];
-            const rgba = interpolate[i + 1];
-            const color = Array.isArray(rgba)
-                ? `rgba(${rgba[0]},${rgba[1]},${rgba[2]},${rgba[3]})`
-                : String(rgba);
-            stops.push({ value, color });
-        }
-        return stops;
-    };
-    const parseCaseCategories = (expr) => {
-        if (!Array.isArray(expr) || expr[0] !== 'case') {
-            return [];
-        }
-        const categories = [];
-        for (let i = 1; i < expr.length - 1; i += 2) {
-            const condition = expr[i];
-            const colorExpr = expr[i + 1];
-            let category = '';
-            if (Array.isArray(condition) && condition[0] === '==') {
-                category = condition[2];
-            }
-            let color = '';
-            if (Array.isArray(colorExpr)) {
-                color = `rgba(${colorExpr[0]},${colorExpr[1]},${colorExpr[2]},${colorExpr[3]})`;
-            }
-            else if (typeof colorExpr === 'string') {
-                color = colorExpr;
-            }
-            categories.push({ category, color });
-        }
-        return categories;
-    };
-    useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        if (isLoading) {
-            setContent(React.createElement("p", { style: { fontSize: '0.8em' } }, "Loading\u2026"));
-            return;
-        }
-        if (error) {
-            setContent(React.createElement("p", { style: { color: 'red', fontSize: '0.8em' } }, error.message));
-            return;
-        }
-        if (!symbology) {
-            setContent(React.createElement("p", { style: { fontSize: '0.8em' } }, "No symbology"));
-            return;
-        }
-        const renderType = (_a = symbology.symbologyState) === null || _a === void 0 ? void 0 : _a.renderType;
-        const property = (_b = symbology.symbologyState) === null || _b === void 0 ? void 0 : _b.value;
-        const fill = (_d = (_c = symbology.color) === null || _c === void 0 ? void 0 : _c['fill-color']) !== null && _d !== void 0 ? _d : (_e = symbology.color) === null || _e === void 0 ? void 0 : _e['circle-fill-color'];
-        const stroke = (_g = (_f = symbology.color) === null || _f === void 0 ? void 0 : _f['stroke-color']) !== null && _g !== void 0 ? _g : (_h = symbology.color) === null || _h === void 0 ? void 0 : _h['circle-stroke-color'];
-        // Single Symbol
-        if (renderType === 'Single Symbol') {
-            setContent(React.createElement("div", { style: { display: 'flex', gap: 12, flexWrap: 'wrap', padding: 6 } },
-                fill && (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 6 } },
-                    React.createElement("span", { style: {
-                            width: 16,
-                            height: 16,
-                            border: '1px solid #000',
-                            background: fill,
-                        } }),
-                    React.createElement("span", { style: { fontSize: '0.8em' } }, "Fill"))),
-                stroke && (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 6 } },
-                    React.createElement("span", { style: {
-                            width: 24,
-                            height: 2,
-                            background: stroke,
-                            border: '1px solid #000',
-                        } }),
-                    React.createElement("span", { style: { fontSize: '0.8em' } }, "Stroke"))),
-                !fill && !stroke && (React.createElement("span", { style: { fontSize: '0.8em' } }, "No symbol colors"))));
-            return;
-        }
-        // Graduated
-        if (renderType === 'Graduated') {
-            const stops = parseColorStops(fill || stroke);
-            if (!stops.length) {
-                setContent(React.createElement("p", { style: { fontSize: '0.8em' } }, "No graduated symbology"));
-                return;
-            }
-            const segments = stops
-                .map((s, i) => {
-                const pct = (i / (stops.length - 1)) * 100;
-                return `${s.color} ${pct}%`;
-            })
-                .join(', ');
-            const gradient = `linear-gradient(to right, ${segments})`;
-            setContent(React.createElement("div", { style: { padding: 6, width: '90%' } },
-                property && (React.createElement("div", { style: { fontSize: '1em', marginBottom: 20 } },
-                    React.createElement("strong", null, property))),
-                React.createElement("div", { style: {
-                        position: 'relative',
-                        height: 12,
-                        background: gradient,
-                        border: '1px solid #ccc',
-                        borderRadius: 3,
-                        marginBottom: 20,
-                        marginTop: 10,
-                    } }, stops.map((s, i) => {
-                    const left = (i / (stops.length - 1)) * 100;
-                    const up = i % 2 === 0;
-                    return (React.createElement("div", { key: i, style: {
-                            position: 'absolute',
-                            left: `${left}%`,
-                            transform: 'translateX(-50%)',
-                        } },
-                        React.createElement("div", { style: {
-                                width: 1,
-                                height: 8,
-                                background: '#333',
-                                margin: '0 auto',
-                            } }),
-                        React.createElement("div", { style: {
-                                position: 'absolute',
-                                top: up ? -18 : 12,
-                                fontSize: '0.7em',
-                                whiteSpace: 'nowrap',
-                                marginTop: up ? 0 : 4,
-                            } }, s.value.toFixed(2))));
-                }))));
-            return;
-        }
-        // Canonical
-        if (renderType === 'Canonical') {
-            setContent(React.createElement("div", { style: { padding: 6 } },
-                property && (React.createElement("div", { style: { fontSize: '1em' } },
-                    React.createElement("strong", null, property))),
-                React.createElement("div", { style: { fontSize: '0.8em', opacity: 0.7 } }, "hex color attribute")));
-            return;
-        }
-        // Categorized
-        if (renderType === 'Categorized') {
-            const cats = parseCaseCategories(fill || stroke);
-            if (!cats.length) {
-                setContent(React.createElement("p", { style: { fontSize: '0.8em' } }, "No categorized symbology"));
-                return;
-            }
-            setContent(React.createElement("div", { style: { padding: 6 } },
-                property && (React.createElement("div", { style: { fontSize: '1em', marginBottom: 6 } },
-                    React.createElement("strong", null, property))),
-                React.createElement("div", { style: {
-                        display: 'grid',
-                        gap: 6,
-                        maxHeight: 200,
-                        overflowY: 'auto',
-                        paddingRight: 4,
-                    } }, cats.map((c, i) => (React.createElement("div", { key: i, style: { display: 'flex', alignItems: 'center', gap: 8 } },
-                    React.createElement("span", { style: {
-                            width: 16,
-                            height: 16,
-                            background: c.color || '#ccc',
-                            border: '1px solid #000',
-                            borderRadius: 2,
-                        } }),
-                    React.createElement("span", { style: { fontSize: '0.75em' } }, String(c.category))))))));
-            return;
-        }
-        // Heatmap
-        if (renderType === 'Heatmap') {
-            const colors = Array.isArray(symbology.color) ? symbology.color : [];
-            if (!colors.length) {
-                setContent(React.createElement("p", { style: { fontSize: '0.8em' } }, "No heatmap colors"));
-                return;
-            }
-            const gradient = `linear-gradient(to right, ${colors.join(', ')})`;
-            const reversed = (_j = symbology.symbologyState) === null || _j === void 0 ? void 0 : _j.reverse;
-            setContent(React.createElement("div", { style: { padding: 6, width: '90%' } },
-                React.createElement("div", { style: { fontSize: '1em', marginBottom: 10 } },
-                    React.createElement("strong", null, "Heatmap")),
-                React.createElement("div", { style: {
-                        height: 12,
-                        background: gradient,
-                        border: '1px solid #ccc',
-                        borderRadius: 3,
-                        marginBottom: 4,
-                    } }),
-                React.createElement("div", { style: {
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        fontSize: '0.75em',
-                        marginBottom: 8,
-                    } },
-                    React.createElement("span", { style: { fontWeight: 'bold' } }, "Low"),
-                    React.createElement("span", { style: { fontWeight: 'bold' } }, "High")),
-                React.createElement("div", { style: {
-                        fontSize: '0.75em',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: 2,
-                    } }, reversed && (React.createElement("span", { style: { fontWeight: 'bold' } }, "Reversed ramp")))));
-            return;
-        }
-        setContent(React.createElement("p", null,
-            "Unsupported symbology: ",
-            String(renderType)));
-    }, [symbology, isLoading, error]);
-    return React.createElement("div", null, content);
-};

package/lib/panelview/identify-panel/IdentifyPanel.js

@@ -1,102 +0,0 @@
-import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { LabIcon, caretDownIcon } from '@jupyterlab/ui-components';
-import React, { useEffect, useRef, useState } from 'react';
-export const IdentifyPanelComponent = ({ model, }) => {
-    var _a;
-    const [features, setFeatures] = useState();
-    const [visibleFeatures, setVisibleFeatures] = useState({
-        0: true,
-    });
-    const [remoteUser, setRemoteUser] = useState(null);
-    const featuresRef = useRef(features);
-    // Reset state values when current widget changes
-    useEffect(() => {
-        featuresRef.current = features;
-    }, [features]);
-    useEffect(() => {
-        const handleClientStateChanged = (sender, clients) => {
-            var _a, _b, _c, _d, _e, _f;
-            const remoteUserId = (_a = model === null || model === void 0 ? void 0 : model.localState) === null || _a === void 0 ? void 0 : _a.remoteUser;
-            // If following a collaborator
-            if (remoteUserId) {
-                const remoteState = clients.get(remoteUserId);
-                if (remoteState) {
-                    if (((_b = remoteState.user) === null || _b === void 0 ? void 0 : _b.username) !== (remoteUser === null || remoteUser === void 0 ? void 0 : remoteUser.username)) {
-                        setRemoteUser(remoteState.user);
-                    }
-                    setFeatures((_d = (_c = remoteState.identifiedFeatures) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : {});
-                }
-                return;
-            }
-            // If not following a collaborator
-            const identifiedFeatures = (_f = (_e = model === null || model === void 0 ? void 0 : model.localState) === null || _e === void 0 ? void 0 : _e.identifiedFeatures) === null || _f === void 0 ? void 0 : _f.value;
-            if (!identifiedFeatures) {
-                setFeatures({});
-                return;
-            }
-            if (model.currentMode === 'identifying' &&
-                featuresRef.current !== identifiedFeatures) {
-                setFeatures(identifiedFeatures);
-            }
-        };
-        model === null || model === void 0 ? void 0 : model.clientStateChanged.connect(handleClientStateChanged);
-        return () => {
-            model === null || model === void 0 ? void 0 : model.clientStateChanged.disconnect(handleClientStateChanged);
-        };
-    }, [model]);
-    const highlightFeatureOnMap = (feature) => {
-        var _a, _b;
-        (_a = model === null || model === void 0 ? void 0 : model.highlightFeatureSignal) === null || _a === void 0 ? void 0 : _a.emit(feature);
-        const geometry = feature.geometry || feature._geometry;
-        (_b = model === null || model === void 0 ? void 0 : model.flyToGeometrySignal) === null || _b === void 0 ? void 0 : _b.emit(geometry);
-    };
-    const toggleFeatureVisibility = (index) => {
-        setVisibleFeatures(prev => (Object.assign(Object.assign({}, prev), { [index]: !prev[index] })));
-    };
-    const getFeatureNameOrId = (feature, featureIndex) => {
-        for (const key of Object.keys(feature)) {
-            const lowerCase = key.toLowerCase();
-            if ((lowerCase.includes('name') || lowerCase === 'id') && feature[key]) {
-                return feature[key];
-            }
-        }
-        return `Feature ${featureIndex + 1}`;
-    };
-    return (React.createElement("div", { className: "jgis-identify-wrapper", style: {
-            border: ((_a = model === null || model === void 0 ? void 0 : model.localState) === null || _a === void 0 ? void 0 : _a.remoteUser)
-                ? `solid 3px ${remoteUser === null || remoteUser === void 0 ? void 0 : remoteUser.color}`
-                : 'unset',
-        } },
-        !Object.keys(features !== null && features !== void 0 ? features : {}).length && (React.createElement("div", { style: { textAlign: 'center' } }, "Please select a layer from the layer list, then \"i\" from the toolbar to start identifying features.")),
-        features &&
-            Object.values(features).map((feature, featureIndex) => (React.createElement("div", { key: featureIndex, className: "jgis-identify-grid-item" },
-                React.createElement("div", { className: "jgis-identify-grid-item-header" },
-                    React.createElement("span", { onClick: () => toggleFeatureVisibility(featureIndex) },
-                        React.createElement(LabIcon.resolveReact, { icon: caretDownIcon, className: `jp-gis-layerGroupCollapser${visibleFeatures[featureIndex] ? ' jp-mod-expanded' : ''}`, tag: 'span' }),
-                        React.createElement("span", null, getFeatureNameOrId(feature, featureIndex))),
-                    (() => {
-                        const isRasterFeature = !feature.geometry &&
-                            !feature._geometry &&
-                            typeof (feature === null || feature === void 0 ? void 0 : feature.x) !== 'number' &&
-                            typeof (feature === null || feature === void 0 ? void 0 : feature.y) !== 'number';
-                        return (React.createElement("button", { className: "jgis-highlight-button", onClick: e => {
-                                e.stopPropagation();
-                                highlightFeatureOnMap(feature);
-                            }, title: isRasterFeature
-                                ? 'Highlight not available for raster features'
-                                : 'Highlight feature on map', disabled: isRasterFeature },
-                            React.createElement(FontAwesomeIcon, { icon: faMagnifyingGlass })));
-                    })()),
-                visibleFeatures[featureIndex] && (React.createElement(React.Fragment, null, Object.entries(feature)
-                    .filter(([key, value]) => typeof value !== 'object' || value === null)
-                    .sort(([keyA], [keyB]) => keyA.localeCompare(keyB))
-                    .map(([key, value]) => (React.createElement("div", { key: key, className: "jgis-identify-grid-body" },
-                    React.createElement("strong", null,
-                        key,
-                        ":"),
-                    typeof value === 'string' &&
-                        /<\/?[a-z][\s\S]*>/i.test(value) ? (React.createElement("span", { dangerouslySetInnerHTML: {
-                            __html: `${value}`,
-                        } })) : (React.createElement("span", null, String(value)))))))))))));
-};