@jupytergis/base 0.14.1 → 0.16.0-alpha.0

package/lib/{panelview/filter-panel → features/filter}/Filter.js

@@ -1,7 +1,7 @@
 import { Button } from '@jupyterlab/ui-components';
 import { cloneDeep } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
-import { useOkSignal } from "../../dialogs/symbology/hooks/useOkSignal";
+import { useOkSignal } from "../layers/symbology/hooks/useOkSignal";
 import { debounce, loadFile } from "../../tools";
 import FilterRow from './FilterRow';
 const FilterComponent = ({ model, okSignalPromise, }) => {
@@ -19,7 +19,7 @@ const FilterComponent = ({ model, okSignalPromise, }) => {
         }
     }, []);
     useEffect(() => {
-        const handleClientStateChanged = () => {
+        const handleSelectedChanged = () => {
             var _a, _b, _c, _d;
             if (!((_b = (_a = model === null || model === void 0 ? void 0 : model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value)) {
                 return;
@@ -40,12 +40,12 @@ const FilterComponent = ({ model, okSignalPromise, }) => {
                 buildFilterDebounce(currentLayer);
             }
         };
-        model === null || model === void 0 ? void 0 : model.clientStateChanged.connect(handleClientStateChanged);
+        model === null || model === void 0 ? void 0 : model.selectedChanged.connect(handleSelectedChanged);
         // Want to rebuild filter object when zoom changes to get values for that zoom level
         // This is because the filtering inputs may depend on the currently visible features
         model === null || model === void 0 ? void 0 : model.sharedOptionsChanged.connect(handleSharedOptionsChanged);
         return () => {
-            model === null || model === void 0 ? void 0 : model.clientStateChanged.disconnect(handleClientStateChanged);
+            model === null || model === void 0 ? void 0 : model.selectedChanged.disconnect(handleSelectedChanged);
             model === null || model === void 0 ? void 0 : model.sharedOptionsChanged.disconnect(handleSharedOptionsChanged);
         };
     }, [model]);

package/lib/{panelview/filter-panel → features/filter}/FilterRow.d.ts

@@ -1,9 +1,10 @@
+import { IJGISFilterItem } from '@jupytergis/schema';
 import React from 'react';
 declare const FilterRow: React.FC<{
     index: number;
     features: Record<string, Set<string | number>>;
-    filterRows: any;
-    setFilterRows: any;
+    filterRows: IJGISFilterItem[];
+    setFilterRows: React.Dispatch<React.SetStateAction<IJGISFilterItem[]>>;
     deleteRow: () => void;
 }>;
 export default FilterRow;

package/lib/{panelview/filter-panel → features/filter}/FilterRow.js

@@ -44,7 +44,8 @@ const FilterRow = ({ index, features, filterRows, setFilterRows, deleteRow }) =>
     };
     const handleOperatorChange = (event) => {
         const newFilters = [...filterRows];
-        newFilters[index].operator = event.target.value;
+        newFilters[index].operator = event.target
+            .value;
         setFilterRows(newFilters);
     };
     const handleValueChange = (event) => {

package/lib/{panelview/identify-panel → features/identify}/IdentifyPanel.d.ts

@@ -1,7 +1,9 @@
 import { IJupyterGISModel } from '@jupytergis/schema';
 import React from 'react';
+import { PatchGeoJSONFeatureProperties } from './types/editorTypes';
 interface IIdentifyComponentProps {
     model: IJupyterGISModel;
+    patchGeoJSONFeatureProperties?: PatchGeoJSONFeatureProperties;
 }
 export declare const IdentifyPanelComponent: React.FC<IIdentifyComponentProps>;
 export {};

package/lib/features/identify/IdentifyPanel.js

@@ -0,0 +1,102 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { FeatureCard } from './components/FeatureCard';
+import { useIdentifyPropertyEditor } from './hooks/useIdentifyPropertyEditor';
+import { getFeatureIdentifier } from './utils/getFeatureIdentifier';
+export const IdentifyPanelComponent = ({ model, patchGeoJSONFeatureProperties, }) => {
+    var _a;
+    const [features, setFeatures] = useState([]);
+    const [visibleRows, setVisibleRows] = useState({
+        0: true,
+    });
+    const [remoteUser, setRemoteUser] = useState(null);
+    const featuresRef = useRef(features);
+    const { editorState, editorActions } = useIdentifyPropertyEditor({
+        model,
+        patchGeoJSONFeatureProperties,
+        setFeatures,
+    });
+    useEffect(() => {
+        featuresRef.current = features;
+    }, [features]);
+    useEffect(() => {
+        const handleIdentifyFeaturesChanged = () => {
+            var _a, _b, _c, _d, _e;
+            const clients = model.sharedModel.awareness.getStates();
+            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) {
+                    setRemoteUser(previousUser => {
+                        var _a;
+                        return (previousUser === null || previousUser === void 0 ? void 0 : previousUser.username) === ((_a = remoteState.user) === null || _a === void 0 ? void 0 : _a.username)
+                            ? previousUser
+                            : remoteState.user;
+                    });
+                    setFeatures((_c = (_b = remoteState.identifiedFeatures) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : []);
+                }
+                return;
+            }
+            setRemoteUser(previousUser => (previousUser ? null : previousUser));
+            // If not following a collaborator
+            const identifiedFeatures = (_e = (_d = model === null || model === void 0 ? void 0 : model.localState) === null || _d === void 0 ? void 0 : _d.identifiedFeatures) === null || _e === void 0 ? void 0 : _e.value;
+            if (!identifiedFeatures) {
+                setFeatures([]);
+                return;
+            }
+            if (model.currentMode === 'identifying' &&
+                featuresRef.current !== identifiedFeatures) {
+                setFeatures(identifiedFeatures);
+            }
+        };
+        const signals = [
+            model === null || model === void 0 ? void 0 : model.identifiedFeaturesChanged,
+            model === null || model === void 0 ? void 0 : model.remoteUserChanged,
+        ];
+        signals.forEach(signal => signal.connect(handleIdentifyFeaturesChanged));
+        handleIdentifyFeaturesChanged();
+        return () => {
+            signals.forEach(signal => signal.disconnect(handleIdentifyFeaturesChanged));
+        };
+    }, [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 = (rowIndex, isOpen) => {
+        setVisibleRows(prev => (Object.assign(Object.assign({}, prev), { [rowIndex]: isOpen })));
+    };
+    const toggleFeatureFloater = (feature) => {
+        const featureId = getFeatureIdentifier(feature);
+        if (!featureId) {
+            return;
+        }
+        setFeatures(previous => {
+            const nextFeatures = previous.map(item => getFeatureIdentifier(item.feature) === featureId
+                ? Object.assign(Object.assign({}, item), { floaterOpen: !item.floaterOpen }) : item);
+            model.syncIdentifiedFeatures(nextFeatures, model.getClientId().toString());
+            return nextFeatures;
+        });
+    };
+    const getFeatureNameOrId = (feature, featureIndex) => {
+        for (const key of Object.keys(feature)) {
+            const lowerCase = key.toLowerCase();
+            if ((lowerCase.includes('label') ||
+                lowerCase.includes('name') ||
+                lowerCase === 'id') &&
+                feature[key]) {
+                return String(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',
+        } },
+        !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.map((item, rowIndex) => (React.createElement(FeatureCard, { key: rowIndex, feature: item.feature, rowIndex: rowIndex, isVisible: !!visibleRows[rowIndex], featureTitle: getFeatureNameOrId(item.feature, rowIndex), isFloaterOpen: !!item.floaterOpen, editorState: editorState, editorActions: editorActions, onToggleVisibility: toggleFeatureVisibility, onToggleFloater: () => toggleFeatureFloater(item.feature), onHighlightFeature: highlightFeatureOnMap })))));
+};

package/lib/features/identify/components/FeatureCard.d.ts

@@ -0,0 +1,17 @@
+import { IIdentifiedFeature } from '@jupytergis/schema';
+import React from 'react';
+import { IPropertyEditorActions, IPropertyEditorState } from '../types/editorTypes';
+interface IFeatureCardProps {
+    feature: IIdentifiedFeature;
+    rowIndex: number;
+    featureTitle: string;
+    isVisible: boolean;
+    isFloaterOpen: boolean;
+    editorState: IPropertyEditorState;
+    editorActions: IPropertyEditorActions;
+    onToggleVisibility: (rowIndex: number, isOpen: boolean) => void;
+    onToggleFloater: () => void;
+    onHighlightFeature: (feature: any) => void;
+}
+export declare const FeatureCard: React.FC<IFeatureCardProps>;
+export {};

package/lib/features/identify/components/FeatureCard.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "../../../shared/components/Collapsible";
+import { FeatureCardHeader } from './FeatureCardHeader';
+import { FeaturePropertyList } from './FeaturePropertyList';
+import { AddPropertyEditor } from './PropertyEditors';
+export const FeatureCard = ({ feature, rowIndex, featureTitle, isVisible, isFloaterOpen, editorState, editorActions, onToggleVisibility, onToggleFloater, onHighlightFeature, }) => {
+    const cardEditorState = editorState.editingFeatureIndex === rowIndex
+        ? editorState
+        : {
+            editingFeatureIndex: null,
+            editorMode: null,
+            editingPropertyKey: null,
+            newPropertyKey: '',
+            newPropertyValue: '',
+            isSavingProperty: false,
+        };
+    return (React.createElement("div", { className: "jgis-identify-card" },
+        React.createElement(Collapsible, { open: isVisible, onOpenChange: nextOpen => onToggleVisibility(rowIndex, nextOpen) },
+            React.createElement(CollapsibleTrigger, { asChild: true },
+                React.createElement("div", { className: "jgis-symbology-override-collapsible-trigger" },
+                    React.createElement(FeatureCardHeader, { feature: feature, isFloaterOpen: isFloaterOpen, featureTitle: featureTitle, onToggleFloater: onToggleFloater, onHighlightFeature: onHighlightFeature }))),
+            React.createElement(CollapsibleContent, null,
+                React.createElement("div", { className: "jgis-identify-content" },
+                    React.createElement(FeaturePropertyList, { feature: feature, rowIndex: rowIndex, editorState: cardEditorState, editorActions: editorActions }),
+                    feature._fromDrawTool === true && (React.createElement(AddPropertyEditor, { feature: feature, rowIndex: rowIndex, editorState: cardEditorState, editorActions: editorActions })))))));
+};

package/lib/features/identify/components/FeatureCardHeader.d.ts

@@ -0,0 +1,11 @@
+import { IIdentifiedFeature } from '@jupytergis/schema';
+import React from 'react';
+interface IFeatureCardHeaderProps {
+    feature: IIdentifiedFeature;
+    featureTitle: string;
+    isFloaterOpen: boolean;
+    onToggleFloater: () => void;
+    onHighlightFeature: (feature: IIdentifiedFeature) => void;
+}
+export declare const FeatureCardHeader: React.FC<IFeatureCardHeaderProps>;
+export {};

package/lib/features/identify/components/FeatureCardHeader.js

@@ -0,0 +1,30 @@
+import { ChevronRightIcon, Eye, EyeOff, Search } from 'lucide-react';
+import React from 'react';
+import { Button } from "../../../shared/components/Button";
+import { getFeatureIdentifier } from '../utils/getFeatureIdentifier';
+export const FeatureCardHeader = ({ feature, featureTitle, isFloaterOpen, onToggleFloater, onHighlightFeature, }) => {
+    const featureIdentifier = getFeatureIdentifier(feature);
+    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("div", { className: "jgis-identify-card-header" },
+        React.createElement("div", { className: "jgis-identify-card-header-actions" },
+            React.createElement(Button, { size: "icon-sm", variant: "icon", className: "jgis-rotate-90 jgis-bg-transparent" },
+                React.createElement(ChevronRightIcon, null)),
+            React.createElement("span", null, featureTitle)),
+        React.createElement("div", { className: "jgis-identify-card-header-actions" },
+            featureIdentifier && (React.createElement(Button, { size: "icon-md", variant: "icon", className: "jgis-inline-icon", onClick: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onToggleFloater();
+                }, title: isFloaterOpen ? 'Hide map floater' : 'Show map floater' }, isFloaterOpen ? React.createElement(EyeOff, null) : React.createElement(Eye, null))),
+            React.createElement(Button, { size: "icon-md", variant: "icon", className: "jgis-inline-icon", onClick: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onHighlightFeature(feature);
+                }, title: isRasterFeature
+                    ? 'Highlight not available for raster features'
+                    : 'Highlight feature on map', disabled: isRasterFeature },
+                React.createElement(Search, null)))));
+};

package/lib/features/identify/components/FeatureFloater.d.ts

@@ -0,0 +1,7 @@
+import { IIdentifiedFeature } from '@jupytergis/schema';
+import React from 'react';
+interface IFeatureFloaterProps {
+    feature: IIdentifiedFeature;
+}
+declare const FeatureFloater: React.FC<IFeatureFloaterProps>;
+export default FeatureFloater;

package/lib/features/identify/components/FeatureFloater.js

@@ -0,0 +1,19 @@
+import React from 'react';
+const FeatureFloater = ({ feature }) => {
+    var _a;
+    const title = (_a = feature.label) !== null && _a !== void 0 ? _a : 'Feature';
+    const entries = Object.entries(feature)
+        .filter(([key, value]) => {
+        if (key === 'geometry' || key === '_geometry' || key.startsWith('_')) {
+            return false;
+        }
+        return typeof value !== 'object' || value === null;
+    })
+        .sort(([keyA], [keyB]) => keyA.localeCompare(keyB));
+    return (React.createElement("div", { className: "jGIS-FeatureFloater" },
+        React.createElement("div", { className: "jGIS-FeatureFloater-title" }, String(title)),
+        entries.map(([key, value]) => (React.createElement("div", { className: "jGIS-FeatureFloater-row", key: key },
+            React.createElement("strong", { className: "jGIS-FeatureFloater-key" }, key),
+            React.createElement("span", { className: "jGIS-FeatureFloater-value" }, String(value)))))));
+};
+export default FeatureFloater;

package/lib/features/identify/components/FeaturePropertyList.d.ts

@@ -0,0 +1,11 @@
+import { IIdentifiedFeature } from '@jupytergis/schema';
+import React from 'react';
+import { IPropertyEditorActions, IPropertyEditorState } from '../types/editorTypes';
+interface IFeaturePropertyListProps {
+    feature: IIdentifiedFeature;
+    rowIndex: number;
+    editorState: IPropertyEditorState;
+    editorActions: IPropertyEditorActions;
+}
+export declare const FeaturePropertyList: React.FC<IFeaturePropertyListProps>;
+export {};

package/lib/features/identify/components/FeaturePropertyList.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { FeatureRow } from './FeatureRow';
+import { PropertyRowEditor } from './PropertyEditors';
+export const FeaturePropertyList = ({ feature, rowIndex, editorState, editorActions, }) => {
+    const isFeatureEditable = (feature === null || feature === void 0 ? void 0 : feature._fromDrawTool) === true;
+    return (React.createElement("div", { className: "jgis-identify-property-rows" }, Object.entries(feature)
+        .filter(([_, value]) => typeof value !== 'object' || value === null)
+        .sort(([keyA], [keyB]) => keyA.localeCompare(keyB))
+        .map(([key, value]) => {
+        const isEditingThisRow = editorState.editingFeatureIndex === rowIndex &&
+            editorState.editorMode === 'edit' &&
+            editorState.editingPropertyKey === key;
+        if (isEditingThisRow) {
+            return (React.createElement(PropertyRowEditor, { key: key, feature: feature, rowIndex: rowIndex, editorState: editorState, editorActions: editorActions }));
+        }
+        return (React.createElement(FeatureRow, { key: key, feature: feature, rowIndex: rowIndex, propertyKey: key, value: value, showActions: isFeatureEditable && !key.startsWith('_'), onEditProperty: (propertyKey, propertyValue) => editorActions.onEditProperty(rowIndex, propertyKey, propertyValue), onDeleteProperty: (targetFeature, targetRowIndex, targetPropertyKey) => editorActions.onDeleteProperty(targetFeature, targetRowIndex, targetPropertyKey) }));
+    })));
+};

package/lib/features/identify/components/FeatureRow.d.ts

@@ -0,0 +1,13 @@
+import { IIdentifiedFeature } from '@jupytergis/schema';
+import React from 'react';
+interface IFeatureRowProps {
+    feature: IIdentifiedFeature;
+    rowIndex: number;
+    propertyKey: string;
+    value: unknown;
+    showActions: boolean;
+    onEditProperty: (propertyKey: string, value: unknown) => void;
+    onDeleteProperty: (feature: IIdentifiedFeature, rowIndex: number, propertyKey: string) => void;
+}
+export declare const FeatureRow: React.FC<IFeatureRowProps>;
+export {};

package/lib/features/identify/components/FeatureRow.js

@@ -0,0 +1,25 @@
+import { Pencil, Trash2 } from 'lucide-react';
+import React from 'react';
+import { PropertyActionsMenu } from './PropertyEditors';
+export const FeatureRow = ({ feature, rowIndex, propertyKey, value, showActions, onEditProperty, onDeleteProperty, }) => {
+    return (React.createElement("div", { className: "jgis-identify-row" },
+        React.createElement("strong", { className: "jgis-identify-col-key" }, propertyKey),
+        React.createElement("span", { className: "jgis-identify-col-value" }, String(value)),
+        showActions && (React.createElement(PropertyActionsMenu, { onContentClick: event => event.stopPropagation(), items: [
+                {
+                    label: 'Edit',
+                    icon: (React.createElement(Pencil, { "data-icon": "inline-start", className: "jgis-inline-icon" })),
+                    onSelect: () => {
+                        onEditProperty(propertyKey, value);
+                    },
+                },
+                {
+                    label: 'Delete',
+                    icon: (React.createElement(Trash2, { "data-icon": "inline-start", className: "jgis-inline-icon" })),
+                    variant: 'destructive',
+                    onSelect: () => {
+                        onDeleteProperty(feature, rowIndex, propertyKey);
+                    },
+                },
+            ] }))));
+};

package/lib/features/identify/components/PropertyEditors.d.ts

@@ -0,0 +1,44 @@
+import { IIdentifiedFeature } from '@jupytergis/schema';
+import React from 'react';
+import { IPropertyEditorActions, IPropertyEditorState } from '../types/editorTypes';
+interface IPropertyFieldsProps {
+    editorState: IPropertyEditorState;
+    editorActions: IPropertyEditorActions;
+}
+export declare const PropertyFields: React.FC<IPropertyFieldsProps>;
+interface IPropertyActionMenuProps {
+    feature: IIdentifiedFeature;
+    rowIndex: number;
+    editorState: IPropertyEditorState;
+    editorActions: IPropertyEditorActions;
+}
+interface IPropertyActionsMenuItem {
+    label: string;
+    icon: React.ReactNode;
+    onSelect: () => void;
+    disabled?: boolean;
+    variant?: 'default' | 'destructive';
+}
+interface IPropertyActionsMenuProps {
+    title?: string;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    onContentClick?: (event: React.MouseEvent) => void;
+    items: IPropertyActionsMenuItem[];
+}
+export declare const PropertyActionsMenu: React.FC<IPropertyActionsMenuProps>;
+export declare const PropertyActionMenu: React.FC<IPropertyActionMenuProps>;
+interface IPropertyRowEditorProps {
+    feature: IIdentifiedFeature;
+    rowIndex: number;
+    editorState: IPropertyEditorState;
+    editorActions: IPropertyEditorActions;
+}
+export declare const PropertyRowEditor: React.FC<IPropertyRowEditorProps>;
+interface IAddPropertyEditorProps {
+    feature: IIdentifiedFeature;
+    rowIndex: number;
+    editorState: IPropertyEditorState;
+    editorActions: IPropertyEditorActions;
+}
+export declare const AddPropertyEditor: React.FC<IAddPropertyEditorProps>;
+export {};

package/lib/features/identify/components/PropertyEditors.js

@@ -0,0 +1,56 @@
+import { Ban, CirclePlus, Ellipsis, Save } from 'lucide-react';
+import React from 'react';
+import { Button } from "../../../shared/components/Button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../../../shared/components/DropdownMenu";
+import { Input } from "../../../shared/components/Input";
+export const PropertyFields = ({ editorState, editorActions, }) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Input, { className: "jgis-identify-col-key", type: "text", placeholder: "key", value: editorState.newPropertyKey, onChange: event => editorActions.onNewPropertyKeyChange(event.target.value) }),
+        React.createElement(Input, { className: "jgis-identify-col-value", type: "text", placeholder: "value", value: editorState.newPropertyValue, onChange: event => editorActions.onNewPropertyValueChange(event.target.value) })));
+};
+export const PropertyActionsMenu = ({ title = 'Property actions', side = 'left', onContentClick, items, }) => {
+    return (React.createElement(DropdownMenu, { modal: false },
+        React.createElement(DropdownMenuTrigger, { asChild: true },
+            React.createElement(Button, { type: "button", className: "jgis-identify-col-actions", title: title, variant: "icon", size: "icon-md" },
+                React.createElement(Ellipsis, null))),
+        React.createElement(DropdownMenuContent, { side: side, onClick: onContentClick }, items.map(item => {
+            var _a;
+            return (React.createElement(DropdownMenuItem, { key: item.label, disabled: item.disabled, variant: (_a = item.variant) !== null && _a !== void 0 ? _a : 'default', onSelect: item.onSelect },
+                item.icon,
+                item.label));
+        }))));
+};
+export const PropertyActionMenu = ({ feature, rowIndex, editorState, editorActions, }) => {
+    return (React.createElement(PropertyActionsMenu, { items: [
+            {
+                label: 'Save',
+                icon: React.createElement(Save, { "data-icon": "inline-start", className: "jgis-inline-icon" }),
+                disabled: !editorState.newPropertyKey.trim() || editorState.isSavingProperty,
+                onSelect: () => {
+                    editorActions.onSaveProperty(feature, rowIndex);
+                },
+            },
+            {
+                label: 'Cancel',
+                icon: React.createElement(Ban, { "data-icon": "inline-start", className: "jgis-inline-icon" }),
+                variant: 'destructive',
+                onSelect: () => {
+                    editorActions.onCancelProperty();
+                },
+            },
+        ] }));
+};
+export const PropertyRowEditor = ({ feature, rowIndex, editorState, editorActions, }) => {
+    return (React.createElement("div", { className: "jgis-identify-row jgis-identify-row-editor" },
+        React.createElement(PropertyFields, { editorState: editorState, editorActions: editorActions }),
+        React.createElement(PropertyActionMenu, { feature: feature, rowIndex: rowIndex, editorState: editorState, editorActions: editorActions })));
+};
+export const AddPropertyEditor = ({ feature, rowIndex, editorState, editorActions, }) => {
+    if (editorState.editorMode === 'add') {
+        return (React.createElement(PropertyRowEditor, { feature: feature, rowIndex: rowIndex, editorState: editorState, editorActions: editorActions }));
+    }
+    return (React.createElement("div", { className: "jgis-identify-row jgis-identify-row-add" },
+        React.createElement(Button, { className: "jgis-identify-add-button", onClick: () => editorActions.onStartAddProperty(rowIndex), variant: "outline", size: "sm" },
+            React.createElement(CirclePlus, { "data-icon": "inline-start", className: "jgis-inline-icon" }),
+            "Add Property")));
+};

package/lib/features/identify/hooks/useIdentifyPropertyEditor.d.ts

@@ -0,0 +1,11 @@
+import { IIdentifiedFeatureEntry, IJupyterGISModel } from '@jupytergis/schema';
+import React from 'react';
+import { IPropertyEditorActions, IPropertyEditorState, PatchGeoJSONFeatureProperties } from '../types/editorTypes';
+export declare function useIdentifyPropertyEditor(props: {
+    model: IJupyterGISModel;
+    patchGeoJSONFeatureProperties?: PatchGeoJSONFeatureProperties;
+    setFeatures: React.Dispatch<React.SetStateAction<IIdentifiedFeatureEntry[]>>;
+}): {
+    editorState: IPropertyEditorState;
+    editorActions: IPropertyEditorActions;
+};

package/lib/features/identify/hooks/useIdentifyPropertyEditor.js

@@ -0,0 +1,132 @@
+import { useState } from 'react';
+export function useIdentifyPropertyEditor(props) {
+    const { model, patchGeoJSONFeatureProperties, setFeatures } = props;
+    const [editingFeatureIndex, setEditingFeatureIndex] = useState(null);
+    const [editorMode, setEditorMode] = useState(null);
+    const [editingPropertyKey, setEditingPropertyKey] = useState(null);
+    const [newPropertyKey, setNewPropertyKey] = useState('');
+    const [newPropertyValue, setNewPropertyValue] = useState('');
+    const [isSavingProperty, setIsSavingProperty] = useState(false);
+    const resetAddPropertyEditor = () => {
+        setEditingFeatureIndex(null);
+        setEditorMode(null);
+        setEditingPropertyKey(null);
+        setNewPropertyKey('');
+        setNewPropertyValue('');
+        setIsSavingProperty(false);
+    };
+    const startAddProperty = (featureIndex) => {
+        setEditingFeatureIndex(featureIndex);
+        setEditorMode('add');
+        setEditingPropertyKey(null);
+        setNewPropertyKey('');
+        setNewPropertyValue('');
+    };
+    const getSelectedSourceId = () => {
+        var _a, _b, _c;
+        const selectedLayers = (_b = (_a = model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value;
+        if (!selectedLayers) {
+            return undefined;
+        }
+        const selectedLayerId = Object.keys(selectedLayers)[0];
+        const selectedLayer = model.getLayer(selectedLayerId);
+        return (_c = selectedLayer === null || selectedLayer === void 0 ? void 0 : selectedLayer.parameters) === null || _c === void 0 ? void 0 : _c.source;
+    };
+    const handleAddProperty = async (feature, featureIndex) => {
+        const featureId = feature._id;
+        if (!featureId) {
+            return;
+        }
+        const sourceId = getSelectedSourceId();
+        const key = newPropertyKey.trim();
+        const previousKey = editorMode === 'edit' ? editingPropertyKey === null || editingPropertyKey === void 0 ? void 0 : editingPropertyKey.trim() : undefined;
+        if (!sourceId ||
+            !patchGeoJSONFeatureProperties ||
+            !key ||
+            isSavingProperty) {
+            return;
+        }
+        setIsSavingProperty(true);
+        const propertyUpdates = { [key]: newPropertyValue };
+        if (previousKey && previousKey !== key) {
+            propertyUpdates[previousKey] = undefined;
+        }
+        const success = await patchGeoJSONFeatureProperties(sourceId, { featureId }, propertyUpdates);
+        if (success) {
+            setFeatures(previous => {
+                const updatedFeatures = [...previous];
+                const targetFeatureEntry = updatedFeatures[featureIndex];
+                if (targetFeatureEntry === null || targetFeatureEntry === void 0 ? void 0 : targetFeatureEntry.feature) {
+                    const updatedTargetFeature = Object.assign({}, targetFeatureEntry.feature);
+                    if (previousKey && previousKey !== key) {
+                        delete updatedTargetFeature[previousKey];
+                    }
+                    updatedTargetFeature[key] = newPropertyValue;
+                    updatedFeatures[featureIndex] = Object.assign(Object.assign({}, targetFeatureEntry), { feature: updatedTargetFeature });
+                }
+                model.syncIdentifiedFeatures(updatedFeatures, model.getClientId().toString());
+                return updatedFeatures;
+            });
+            resetAddPropertyEditor();
+            return;
+        }
+        setIsSavingProperty(false);
+    };
+    const handleDeleteProperty = async (feature, featureIndex, propertyKey) => {
+        const featureId = feature._id;
+        if (!featureId) {
+            return;
+        }
+        if (!patchGeoJSONFeatureProperties ||
+            !propertyKey.trim() ||
+            isSavingProperty) {
+            return;
+        }
+        const sourceId = getSelectedSourceId();
+        if (!sourceId) {
+            return;
+        }
+        setIsSavingProperty(true);
+        const success = await patchGeoJSONFeatureProperties(sourceId, { featureId }, { [propertyKey]: undefined });
+        if (success) {
+            setFeatures(previous => {
+                const updatedFeatures = [...previous];
+                const targetFeatureEntry = updatedFeatures[featureIndex];
+                if (targetFeatureEntry === null || targetFeatureEntry === void 0 ? void 0 : targetFeatureEntry.feature) {
+                    const updatedTargetFeature = Object.assign({}, targetFeatureEntry.feature);
+                    delete updatedTargetFeature[propertyKey];
+                    updatedFeatures[featureIndex] = Object.assign(Object.assign({}, targetFeatureEntry), { feature: updatedTargetFeature });
+                }
+                model.syncIdentifiedFeatures(updatedFeatures, model.getClientId().toString());
+                return updatedFeatures;
+            });
+            resetAddPropertyEditor();
+            return;
+        }
+        setIsSavingProperty(false);
+    };
+    const editorState = {
+        editingFeatureIndex,
+        editorMode,
+        editingPropertyKey,
+        newPropertyKey,
+        newPropertyValue,
+        isSavingProperty,
+    };
+    const editorActions = {
+        onEditProperty: (index, propertyKey, value) => {
+            setEditingFeatureIndex(index);
+            setEditorMode('edit');
+            setEditingPropertyKey(propertyKey);
+            setNewPropertyKey(propertyKey);
+            setNewPropertyValue(String(value !== null && value !== void 0 ? value : ''));
+        },
+        onDeleteProperty: handleDeleteProperty,
+        onStartAddProperty: startAddProperty,
+        onSaveProperty: handleAddProperty,
+        onCancelProperty: resetAddPropertyEditor,
+        onNewPropertyKeyChange: setNewPropertyKey,
+        onNewPropertyValueChange: setNewPropertyValue,
+    };
+    return { editorState, editorActions };
+}

package/lib/features/identify/types/editorTypes.d.ts

@@ -0,0 +1,21 @@
+import { IDict, IIdentifiedFeature } from '@jupytergis/schema';
+export type PatchGeoJSONFeatureProperties = (sourceId: string, target: {
+    featureId: string;
+}, propertyUpdates: IDict<any>) => Promise<boolean>;
+export interface IPropertyEditorState {
+    editingFeatureIndex: number | null;
+    editorMode: 'add' | 'edit' | null;
+    editingPropertyKey: string | null;
+    newPropertyKey: string;
+    newPropertyValue: string;
+    isSavingProperty: boolean;
+}
+export interface IPropertyEditorActions {
+    onEditProperty: (rowIndex: number, propertyKey: string, value: unknown) => void;
+    onDeleteProperty: (feature: IIdentifiedFeature, rowIndex: number, propertyKey: string) => Promise<void>;
+    onStartAddProperty: (rowIndex: number) => void;
+    onSaveProperty: (feature: IIdentifiedFeature, rowIndex: number) => void;
+    onCancelProperty: () => void;
+    onNewPropertyKeyChange: (value: string) => void;
+    onNewPropertyValueChange: (value: string) => void;
+}

package/lib/features/identify/utils/getFeatureIdentifier.d.ts

@@ -0,0 +1,5 @@
+import { IIdentifiedFeature } from '@jupytergis/schema';
+/**
+ * Resolve a stable feature identifier across common property names.
+ */
+export declare function getFeatureIdentifier(feature: IIdentifiedFeature): string | undefined;