@metastringfoundation/map-list 0.1.1 → 0.1.3

package/dist/components/map-comparison/index.js

@@ -0,0 +1,165 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-nocheck
+const react_1 = require("react");
+const use_layers_1 = __importDefault(require("../../hooks/use-layers"));
+const core_1 = require("../core");
+const constants_1 = require("../../static/constants");
+const naksha_1 = require("../../utils/naksha");
+const LayerCard = ({ layer, selectedAttributes, isLoadingAttributes, onDropdownToggle, onAttributeToggle }) => {
+    const [isDropdownOpen, setIsDropdownOpen] = (0, react_1.useState)(false);
+    const attributes = (0, react_1.useMemo)(() => {
+        const propertyMap = layer.data?.propertyMap || {};
+        return Object.entries(propertyMap).map(([key, displayName]) => ({
+            key,
+            displayName: displayName || key,
+        }));
+    }, [layer.data?.propertyMap]);
+    const selectedCount = selectedAttributes.size;
+    const totalCount = attributes.length;
+    const handleDropdownClick = () => {
+        const wasOpen = isDropdownOpen;
+        const newState = !isDropdownOpen;
+        setIsDropdownOpen(newState);
+        // Fetch data when opening the dropdown (was closed, now opening)
+        if (newState && !wasOpen) {
+            onDropdownToggle();
+        }
+    };
+    const formatDate = (dateString) => {
+        if (!dateString)
+            return null;
+        try {
+            return new Date(dateString).toLocaleDateString();
+        }
+        catch {
+            return null;
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "p-3 border-b border-gray-200 bg-white hover:bg-gray-50 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3 mb-3", children: [(0, jsx_runtime_1.jsx)("img", { className: "flex shrink-0 overflow-hidden h-16 w-16 object-cover border border-gray-300 rounded shadow-sm", src: layer.thumbnail || constants_1.FALLBACK_THUMB, alt: layer.title }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsx)("h3", { className: "font-semibold text-gray-900 mb-1 leading-tight truncate", title: layer.title, children: layer.title }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600 line-clamp-2 mb-2", title: layer.description, children: layer.description || "No description available" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-sm text-gray-500", children: [layer.createdBy && ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "By:" }), (0, jsx_runtime_1.jsx)("span", { children: layer.createdBy })] })), formatDate(layer.createdDate) && ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Date:" }), (0, jsx_runtime_1.jsx)("span", { children: formatDate(layer.createdDate) })] })), layer.license && ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "License:" }), (0, jsx_runtime_1.jsx)("span", { children: layer.license })] })), layer.tags && layer.tags.length > 0 && ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)("span", { className: "font-medium", children: "Tags:" }), (0, jsx_runtime_1.jsxs)("span", { children: [layer.tags.slice(0, 2).join(", "), layer.tags.length > 2 ? "..." : ""] })] }))] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: handleDropdownClick, className: "w-full flex items-center justify-between px-3 py-2 text-sm font-medium text-gray-700 bg-gray-50 hover:bg-gray-100 border border-gray-300 rounded transition-colors", children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { children: "Attributes" }), selectedCount > 0 && ((0, jsx_runtime_1.jsxs)("span", { className: "px-1.5 py-0.5 bg-green-100 text-green-700 rounded text-sm font-semibold", children: [selectedCount, "/", totalCount] }))] }), isDropdownOpen ? (0, jsx_runtime_1.jsx)(core_1.UpIcon, {}) : (0, jsx_runtime_1.jsx)(core_1.DownIcon, {})] }), isDropdownOpen && ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 border border-gray-300 rounded bg-white max-h-64 overflow-y-auto shadow-sm scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100", children: isLoadingAttributes ? ((0, jsx_runtime_1.jsx)("div", { className: "px-3 py-4 text-sm text-gray-500 italic text-center", children: "Loading attributes..." })) : attributes.length > 0 ? (attributes.map((attr) => ((0, jsx_runtime_1.jsxs)("label", { className: "flex items-center gap-2 px-3 py-2 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0 transition-colors", children: [(0, jsx_runtime_1.jsx)(core_1.CheckboxInput, { name: `${layer.id}-${attr.key}`, checked: selectedAttributes.has(attr.key), onChange: () => {
+                                        onAttributeToggle(attr.key);
+                                    }, style: { accentColor: '#16a34a' } }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-700 flex-1", children: attr.displayName })] }, attr.key)))) : ((0, jsx_runtime_1.jsx)("div", { className: "px-3 py-4 text-sm text-gray-500 italic text-center", children: "No attributes available for this layer" })) }))] })] }));
+};
+const MapComparison = () => {
+    const { layer, mp } = (0, use_layers_1.default)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
+    const [compareSelectedLayers, setCompareSelectedLayers] = (0, react_1.useState)(new Set());
+    const [selectedAttributes, setSelectedAttributes] = (0, react_1.useState)({});
+    const [loadingAttributes, setLoadingAttributes] = (0, react_1.useState)({});
+    const [layersWithData, setLayersWithData] = (0, react_1.useState)({});
+    const fetchingRef = (0, react_1.useRef)(new Set());
+    const toggleOpen = () => setIsOpen(!isOpen);
+    // Filter layers based on search term
+    const filteredLayers = (0, react_1.useMemo)(() => {
+        if (!searchTerm.trim()) {
+            return layer.all;
+        }
+        const term = searchTerm.toLowerCase();
+        return layer.all.filter((l) => {
+            return (l.title?.toLowerCase().includes(term) ||
+                l.description?.toLowerCase().includes(term) ||
+                l.createdBy?.toLowerCase().includes(term) ||
+                l.tags?.some((tag) => tag.toLowerCase().includes(term)));
+        });
+    }, [layer.all, searchTerm]);
+    const handleCompareToggle = (layerId) => {
+        setCompareSelectedLayers((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(layerId)) {
+                newSet.delete(layerId);
+            }
+            else {
+                newSet.add(layerId);
+            }
+            return newSet;
+        });
+    };
+    const fetchLayerAttributes = async (layerId) => {
+        const layerItem = layer.all.find((l) => l.id === layerId);
+        if (!layerItem)
+            return;
+        // Skip if already fetched or currently loading
+        if (layersWithData[layerId] || fetchingRef.current.has(layerId))
+            return;
+        // If layer already has propertyMap, use it directly
+        if (layerItem.data?.propertyMap && Object.keys(layerItem.data.propertyMap).length > 0) {
+            setLayersWithData((prev) => ({
+                ...prev,
+                [layerId]: layerItem,
+            }));
+            setSelectedAttributes((prev) => ({
+                ...prev,
+                [layerId]: new Set(),
+            }));
+            return;
+        }
+        fetchingRef.current.add(layerId);
+        setLoadingAttributes((prev) => ({ ...prev, [layerId]: true }));
+        try {
+            const layerData = await (0, naksha_1.getLayerStyle)(layerItem, 0, // styleIndex
+            mp.nakshaApiEndpoint, mp.geoserver);
+            const updatedLayer = {
+                ...layerItem,
+                data: layerData,
+            };
+            setLayersWithData((prev) => ({
+                ...prev,
+                [layerId]: updatedLayer,
+            }));
+            setSelectedAttributes((prev) => ({
+                ...prev,
+                [layerId]: new Set(),
+            }));
+        }
+        catch (error) {
+            console.error("Error fetching layer attributes:", error);
+        }
+        finally {
+            fetchingRef.current.delete(layerId);
+            setLoadingAttributes((prev) => ({ ...prev, [layerId]: false }));
+        }
+    };
+    const handleAttributeToggle = (layerId, attributeKey) => {
+        setSelectedAttributes((prev) => {
+            const layerAttributes = prev[layerId] || new Set();
+            const newSet = new Set(layerAttributes);
+            if (newSet.has(attributeKey)) {
+                newSet.delete(attributeKey);
+            }
+            else {
+                newSet.add(attributeKey);
+                // Auto-check the main compare checkbox when any attribute is selected
+                if (!compareSelectedLayers.has(layerId)) {
+                    setCompareSelectedLayers((prevCompare) => {
+                        const newCompareSet = new Set(prevCompare);
+                        newCompareSet.add(layerId);
+                        return newCompareSet;
+                    });
+                }
+            }
+            return {
+                ...prev,
+                [layerId]: newSet,
+            };
+        });
+    };
+    const handleCompare = () => {
+        // TODO: Implement comparison logic
+        console.log("Comparing layers:", Array.from(compareSelectedLayers));
+        console.log("Selected attributes:", selectedAttributes);
+        // This will trigger the actual comparison functionality
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { onClick: toggleOpen, type: "button", className: "absolute left-4 top-[60px] z-10 bg-white rounded-lg shadow-lg flex items-center gap-2 font-medium hover:bg-gray-50 transition-colors border border-gray-200 px-4 py-3", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", className: "text-green-600", children: [(0, jsx_runtime_1.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "2", x2: "12", y2: "22" }), (0, jsx_runtime_1.jsx)("line", { x1: "2", y1: "12", x2: "22", y2: "12" })] }), (0, jsx_runtime_1.jsx)("span", { children: "Compare" })] }), isOpen && ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 flex items-center justify-center z-50 p-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-white rounded-lg shadow-2xl w-full max-w-3xl h-[85vh] flex flex-col overflow-hidden border border-gray-200", children: [(0, jsx_runtime_1.jsx)("div", { className: "px-6 py-4 border-b border-gray-200 bg-gray-50", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 shrink-0", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", className: "text-green-600", children: [(0, jsx_runtime_1.jsx)("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", y1: "2", x2: "12", y2: "22" }), (0, jsx_runtime_1.jsx)("line", { x1: "2", y1: "12", x2: "22", y2: "12" })] }), (0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-semibold text-gray-800 whitespace-nowrap", children: "Map Comparison" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 flex-1 min-w-0 max-w-md", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-w-0", children: (0, jsx_runtime_1.jsx)(core_1.SearchInput, { placeholder: "Search layers...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value) }) }), (0, jsx_runtime_1.jsx)("button", { onClick: toggleOpen, type: "button", className: "flex items-center justify-center w-8 h-8 bg-red-100 hover:bg-red-200 text-red-800 rounded transition-colors shrink-0", title: "Close", children: (0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto bg-white", children: filteredLayers.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center h-full min-h-[400px] p-8 text-center text-gray-500", children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "mb-2 text-base", children: searchTerm ? "No layers found" : "No layers available" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm", children: searchTerm
+                                                ? "Try adjusting your search terms"
+                                                : "Layers will appear here when available" })] }) })) : (filteredLayers.map((layerItem) => {
+                                // Use fetched layer data if available, otherwise use original
+                                const layerData = layersWithData[layerItem.id] || layerItem;
+                                return ((0, jsx_runtime_1.jsx)(LayerCard, { layer: layerData, isLoadingAttributes: loadingAttributes[layerItem.id] || false, selectedAttributes: selectedAttributes[layerItem.id] || new Set(), onDropdownToggle: () => fetchLayerAttributes(layerItem.id), onAttributeToggle: (attributeKey) => handleAttributeToggle(layerItem.id, attributeKey) }, layerItem.id));
+                            })) }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 bg-gray-50", children: (0, jsx_runtime_1.jsx)("button", { onClick: handleCompare, type: "button", className: "px-5 py-2.5 text-white bg-green-600 hover:bg-green-700 rounded-md transition-colors font-medium text-sm shadow-sm", children: "Compare" }) })] }) }))] }));
+};
+exports.default = MapComparison;

package/dist/components/map-comparison/types.d.ts

@@ -0,0 +1,30 @@
+import { GeoserverLayer } from "../../interfaces";
+export type ComparisonMode = "side-by-side" | "overlay" | "attribute";
+export interface ComparisonLayer {
+    layerId: string;
+    layer: GeoserverLayer;
+    attributeKey?: string;
+    attributeLabel?: string;
+    styleIndex?: number;
+}
+export interface ComparisonConfig {
+    mode: ComparisonMode;
+    layers: ComparisonLayer[];
+    syncView: boolean;
+    showStats: boolean;
+}
+export interface ComparisonStats {
+    layerId: string;
+    attributeKey?: string;
+    totalFeatures?: number;
+    minValue?: number;
+    maxValue?: number;
+    avgValue?: number;
+    uniqueValues?: number;
+}
+export interface AttributeOption {
+    key: string;
+    label: string;
+    type: "numeric" | "categorical" | "date";
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/map-comparison/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/map-comparison/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG,SAAS,GAAG,WAAW,CAAC;AAEtE,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,cAAc,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,GAAG,aAAa,GAAG,MAAM,CAAC;CAC1C"}

package/dist/components/map-comparison/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/map-comparison/use-map-comparison.d.ts

@@ -0,0 +1,18 @@
+import { GeoserverLayer } from "../../interfaces";
+import { ComparisonConfig, ComparisonMode, AttributeOption } from "./types";
+export declare function useMapComparison(): {
+    isOpen: boolean;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    config: ComparisonConfig;
+    availableLayers: GeoserverLayer[];
+    getLayerAttributes: (layerId: string) => AttributeOption[];
+    addLayer: (layerId: string, attributeKey?: string, styleIndex?: number) => void;
+    removeLayer: (layerId: string) => void;
+    updateLayerAttribute: (layerId: string, attributeKey?: string, styleIndex?: number) => void;
+    setMode: (mode: ComparisonMode) => void;
+    toggleSyncView: () => void;
+    toggleStats: () => void;
+    clearComparison: () => void;
+    isLayerInComparison: (layerId: string) => boolean;
+};
+//# sourceMappingURL=use-map-comparison.d.ts.map

package/dist/components/map-comparison/use-map-comparison.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-map-comparison.d.ts","sourceRoot":"","sources":["../../../src/components/map-comparison/use-map-comparison.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EACL,gBAAgB,EAEhB,cAAc,EACd,eAAe,EAChB,MAAM,SAAS,CAAC;AAGjB,wBAAgB,gBAAgB;;;;;kCAiBlB,MAAM,KAAG,eAAe,EAAE;wBAqCzB,MAAM,iBACA,MAAM,eACR,MAAM;2BA2BmB,MAAM;oCASpC,MAAM,iBAAiB,MAAM,eAAe,MAAM;oBA0B3B,cAAc;;;;mCA0BrC,MAAM;EAqBnB"}

package/dist/components/map-comparison/use-map-comparison.js

@@ -0,0 +1,139 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMapComparison = useMapComparison;
+const react_1 = require("react");
+const use_layers_1 = __importDefault(require("../../hooks/use-layers"));
+function useMapComparison() {
+    const { layer } = (0, use_layers_1.default)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [config, setConfig] = (0, react_1.useState)({
+        mode: "side-by-side",
+        layers: [],
+        syncView: true,
+        showStats: false,
+    });
+    // Get available layers
+    const availableLayers = (0, react_1.useMemo)(() => {
+        return layer.all || [];
+    }, [layer.all]);
+    // Get available attributes for a layer
+    const getLayerAttributes = (0, react_1.useCallback)((layerId) => {
+        const layerData = availableLayers.find((l) => l.id === layerId);
+        if (!layerData?.data?.propertyMap)
+            return [];
+        const attributes = [];
+        const propertyMap = layerData.data.propertyMap;
+        // Add all properties from propertyMap
+        Object.entries(propertyMap).forEach(([key, label]) => {
+            attributes.push({
+                key,
+                label: String(label),
+                type: "categorical", // Default, can be enhanced with actual type detection
+            });
+        });
+        // Add style-based attributes if available
+        if (layerData.data.styles && layerData.data.styles.length > 0) {
+            layerData.data.styles.forEach((style, index) => {
+                if (style.styleName) {
+                    attributes.push({
+                        key: `style_${index}`,
+                        label: style.styleTitle || style.styleName,
+                        type: "categorical",
+                    });
+                }
+            });
+        }
+        return attributes;
+    }, [availableLayers]);
+    // Add layer to comparison
+    const addLayer = (0, react_1.useCallback)((layerId, attributeKey, styleIndex) => {
+        const layerData = availableLayers.find((l) => l.id === layerId);
+        if (!layerData)
+            return;
+        const attributeLabel = attributeKey
+            ? getLayerAttributes(layerId).find((attr) => attr.key === attributeKey)
+                ?.label || attributeKey
+            : undefined;
+        const newLayer = {
+            layerId,
+            layer: layerData,
+            attributeKey,
+            attributeLabel,
+            styleIndex,
+        };
+        setConfig((prev) => ({
+            ...prev,
+            layers: [...prev.layers, newLayer],
+        }));
+    }, [availableLayers, getLayerAttributes]);
+    // Remove layer from comparison
+    const removeLayer = (0, react_1.useCallback)((layerId) => {
+        setConfig((prev) => ({
+            ...prev,
+            layers: prev.layers.filter((l) => l.layerId !== layerId),
+        }));
+    }, []);
+    // Update layer attribute
+    const updateLayerAttribute = (0, react_1.useCallback)((layerId, attributeKey, styleIndex) => {
+        setConfig((prev) => ({
+            ...prev,
+            layers: prev.layers.map((l) => {
+                if (l.layerId === layerId) {
+                    const attributeLabel = attributeKey
+                        ? getLayerAttributes(layerId).find((attr) => attr.key === attributeKey)?.label || attributeKey
+                        : undefined;
+                    return {
+                        ...l,
+                        attributeKey,
+                        attributeLabel,
+                        styleIndex,
+                    };
+                }
+                return l;
+            }),
+        }));
+    }, [getLayerAttributes]);
+    // Set comparison mode
+    const setMode = (0, react_1.useCallback)((mode) => {
+        setConfig((prev) => ({ ...prev, mode }));
+    }, []);
+    // Toggle sync view
+    const toggleSyncView = (0, react_1.useCallback)(() => {
+        setConfig((prev) => ({ ...prev, syncView: !prev.syncView }));
+    }, []);
+    // Toggle stats
+    const toggleStats = (0, react_1.useCallback)(() => {
+        setConfig((prev) => ({ ...prev, showStats: !prev.showStats }));
+    }, []);
+    // Clear all comparisons
+    const clearComparison = (0, react_1.useCallback)(() => {
+        setConfig({
+            mode: "side-by-side",
+            layers: [],
+            syncView: true,
+            showStats: false,
+        });
+    }, []);
+    // Check if layer is in comparison
+    const isLayerInComparison = (0, react_1.useCallback)((layerId) => {
+        return config.layers.some((l) => l.layerId === layerId);
+    }, [config.layers]);
+    return {
+        isOpen,
+        setIsOpen,
+        config,
+        availableLayers,
+        getLayerAttributes,
+        addLayer,
+        removeLayer,
+        updateLayerAttribute,
+        setMode,
+        toggleSyncView,
+        toggleStats,
+        clearComparison,
+        isLayerInComparison,
+    };
+}

package/dist/components/sidebar/common/attribute-compare-addon.d.ts

@@ -0,0 +1,7 @@
+import { GeoserverLayer } from "../../../interfaces";
+interface AttributeCompareAddonProps {
+    layer: GeoserverLayer;
+}
+export default function AttributeCompareAddon({ layer }: AttributeCompareAddonProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=attribute-compare-addon.d.ts.map

package/dist/components/sidebar/common/attribute-compare-addon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribute-compare-addon.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/attribute-compare-addon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAGrD,UAAU,0BAA0B;IAClC,KAAK,EAAE,cAAc,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAAE,KAAK,EAAE,EAAE,0BAA0B,kDAyElF"}

package/dist/components/sidebar/common/attribute-compare-addon.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = AttributeCompareAddon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// AttributeCompareAddon.tsx - Component to compare different attributes of the same layer
+const react_1 = require("react");
+const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
+function AttributeCompareAddon({ layer }) {
+    const { layer: layerContext } = (0, use_layers_1.default)();
+    // Get available attributes (styles) for this layer
+    const availableAttributes = (0, react_1.useMemo)(() => {
+        if (!layer.data?.styles || !Array.isArray(layer.data.styles)) {
+            return [];
+        }
+        return layer.data.styles.map((style, index) => ({
+            styleIndex: index,
+            attributeKey: style.styleName || `attribute_${index}`,
+            attributeTitle: style.styleTitle || `Attribute ${index + 1}`,
+        }));
+    }, [layer.data?.styles]);
+    // Don't show if layer has less than 2 attributes
+    if (availableAttributes.length < 2) {
+        return null;
+    }
+    const comparedAttributes = layerContext.getComparedAttributes(layer.id);
+    const handleToggleAttribute = async (attributeKey, styleIndex, checked) => {
+        await layerContext.setCompareAttribute(layer.id, attributeKey, styleIndex, checked);
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 pt-2 border-t border-gray-200", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm font-medium text-gray-700", children: "Compare Attributes" }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2", children: availableAttributes.map((attr) => {
+                    const isChecked = layerContext.isAttributeCompared(layer.id, attr.attributeKey, attr.styleIndex);
+                    return ((0, jsx_runtime_1.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer select-none text-sm", children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "h-4 w-4 accent-blue-600", checked: isChecked, onChange: (e) => handleToggleAttribute(attr.attributeKey, attr.styleIndex, e.target.checked) }), (0, jsx_runtime_1.jsx)("span", { className: "text-gray-700", children: attr.attributeTitle })] }, `${attr.styleIndex}-${attr.attributeKey}`));
+                }) }), comparedAttributes.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-gray-500 mt-1", children: [comparedAttributes.length, " attribute", comparedAttributes.length > 1 ? "s" : "", " selected"] }))] }));
+}

package/dist/components/sidebar/common/layer-item-style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layer-item-style.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/layer-item-style.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,GAAG,CAAA;CAAE,kDA0B7D"}
+{"version":3,"file":"layer-item-style.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/layer-item-style.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,GAAG,CAAA;CAAE,kDA4H7D"}

package/dist/components/sidebar/common/layer-item-style.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = LayerItemStyle;
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-nocheck
+const react_1 = require("react");
 const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
 const core_1 = require("../../core");
 const moreless_1 = __importDefault(require("./moreless"));
@@ -14,8 +15,52 @@ function LayerItemStyle({ item }) {
     if (!item.data?.styles)
         return null;
     const { layer } = (0, use_layers_1.default)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
+    const dropdownRef = (0, react_1.useRef)(null);
+    // Close dropdown when clicking outside
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
     const onStyleChange = (e) => {
         layer.updateStyle(item.id, Number(e.target.value));
+        setSelectedIndex(Number(e.target.value));
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4 pt-2", children: [item.layerType !== "RASTER" && ((0, jsx_runtime_1.jsx)(core_1.SelectInput, { onChange: onStyleChange, children: item.data?.styles.map((opt, idx) => ((0, jsx_runtime_1.jsx)("option", { value: idx, children: opt.styleTitle }, idx))) })), (0, jsx_runtime_1.jsx)(moreless_1.default, { children: (0, jsx_runtime_1.jsx)(style_legend_1.StyleLegend, { item: item }) })] }));
+    // Toggle checkbox for comparison (independent from dropdown selection)
+    const onCheckboxToggle = (styleIndex, event) => {
+        event.stopPropagation(); // Prevent dropdown item click
+        const attributeKey = `${item.id}-${styleIndex}`;
+        layer.toggleAttributeCompare(attributeKey);
+    };
+    const selectedStyle = item.data?.styles[selectedIndex];
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4 pt-2", children: [item.layerType !== "RASTER" && ((0, jsx_runtime_1.jsxs)("div", { className: "relative", ref: dropdownRef, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: "block w-full px-4 py-2 mt-2 text-gray-700 border bg-white border-gray-200 rounded-md focus:outline-none focus:ring text-left flex items-center justify-between", children: [(0, jsx_runtime_1.jsx)("span", { children: selectedStyle?.styleTitle || "Select attribute" }), (0, jsx_runtime_1.jsx)("svg", { className: `w-4 h-4 transition-transform ${isOpen ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), isOpen && ((0, jsx_runtime_1.jsx)("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-md shadow-lg max-h-60 overflow-auto", children: item.data?.styles.map((opt, idx) => {
+                            const attributeKey = `${item.id}-${idx}`;
+                            const isChecked = layer.checkedAttributes.has(attributeKey);
+                            const checkedCount = layer.getCheckedAttributesCount();
+                            const isLimitReached = checkedCount >= 8 && !isChecked;
+                            const isSelected = idx === selectedIndex;
+                            return ((0, jsx_runtime_1.jsxs)("div", { className: `flex items-center justify-between px-4 py-2 border-b border-gray-100 last:border-b-0 ${isSelected
+                                    ? "bg-blue-50 hover:bg-blue-100"
+                                    : "hover:bg-gray-50"}`, children: [(0, jsx_runtime_1.jsx)("span", { className: "flex-1 text-gray-700 cursor-pointer", onClick: () => {
+                                            onStyleChange({ target: { value: idx } });
+                                            setIsOpen(false);
+                                        }, children: opt.styleTitle }), (0, jsx_runtime_1.jsx)("div", { onClick: (e) => {
+                                            if (isLimitReached) {
+                                                e.stopPropagation();
+                                                alert("Maximum 8 attributes can be compared at a time");
+                                                return;
+                                            }
+                                            onCheckboxToggle(idx, e);
+                                        }, className: isLimitReached ? "opacity-50 cursor-not-allowed" : "cursor-pointer", title: isLimitReached ? "Maximum 8 attributes can be compared at a time" : "", children: (0, jsx_runtime_1.jsx)(core_1.CheckboxInput, { name: `compare-${item.id}-${idx}`, checked: isChecked, disabled: isLimitReached, onChange: () => { } }) })] }, idx));
+                        }) }))] })), (0, jsx_runtime_1.jsx)(moreless_1.default, { children: (0, jsx_runtime_1.jsx)(style_legend_1.StyleLegend, { item: item }) })] }));
 }

package/dist/components/sidebar/common/layer-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layer-item.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/layer-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAyBrD,UAAU,cAAc;IACtB,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oDAAoD;IACpD,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,aAAa,GACd,EAAE,cAAc,2CAqIhB"}
+{"version":3,"file":"layer-item.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/layer-item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAwBrD,UAAU,cAAc;IACtB,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,oDAAoD;IACpD,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,aAAa,CAAC,EAAE,GAAG,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,IAAI,EACJ,QAAQ,EACR,eAAe,EACf,aAAa,GACd,EAAE,cAAc,2CAmIhB"}

package/dist/components/sidebar/common/layer-item.js

@@ -15,7 +15,6 @@ const grid_legend_1 = __importDefault(require("./grid-legend"));
 const info_popover_1 = require("./info-popover");
 const layer_item_style_1 = __importDefault(require("./layer-item-style"));
 const opacity_handler_addon_1 = __importDefault(require("./opacity-handler-addon"));
-const layer_compare_addon_1 = __importDefault(require("./layer-compare-addon"));
 function LayerItem({ item, extended, dragHandleProps, dragHandleRef, }) {
     const { layer, query, mp, query: { setClickedLngLat }, setIsInfoBarOpen, } = (0, use_layers_1.default)();
     const [isAdded, setIsAdded] = (0, react_1.useState)(layer.selectedIds.includes(item.id));
@@ -56,5 +55,5 @@ function LayerItem({ item, extended, dragHandleProps, dragHandleRef, }) {
         mp?.onLayerDownload(item.id);
     };
     const handleOnZoom = () => layer?.zoomToExtent(item?.id);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "z-20 p-3 bg-white border-t border-gray-200", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center shrink-0", children: [(0, jsx_runtime_1.jsx)(core_1.CheckboxInput, { name: item.id, checked: isAdded, onChange: onToggleLayer, isLoading: isLoading }), extended && ((0, jsx_runtime_1.jsx)("div", { ref: dragHandleRef, ...dragHandleProps, className: "mt-1 w-6 text-center cursor-move", children: (0, jsx_runtime_1.jsx)(core_1.GrabberIcon, {}) }))] }), (0, jsx_runtime_1.jsx)("img", { className: "flex shrink-0 overflow-hidden h-16 w-16 p-1 mb-2 object-cover border border-gray-200 rounded", src: item.thumbnail || constants_1.FALLBACK_THUMB }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { title: item.title, className: "mb-1 leading-tight", style: constants_1.overflowStyle, children: (0, jsx_runtime_1.jsx)(highlighter_1.Highlighted, { text: item.title, highlight: query.term }) }), (0, jsx_runtime_1.jsx)("p", { title: item.description, className: "text-gray-600 text-sm", style: constants_1.overflowStyle2, children: item.description })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "pb-3", children: extended && (0, jsx_runtime_1.jsx)(opacity_handler_addon_1.default, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between", children: [extended && ((0, jsx_runtime_1.jsx)(layer_compare_addon_1.default, { id: item.id })), !extended && ((0, jsx_runtime_1.jsxs)(core_1.Button, { onClick: onDownloadLayer, disabled: !item.isDownloadable, children: [(0, jsx_runtime_1.jsx)(core_1.DownloadIcon, {}), " Download"] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3", children: [(0, jsx_runtime_1.jsx)(core_1.Button, { onClick: shareLayer, title: "Share", children: (0, jsx_runtime_1.jsx)(core_1.ShareIcon, {}) }), extended && ((0, jsx_runtime_1.jsx)(core_1.Button, { onClick: handleOnZoom, title: "Zoom To Extent", children: (0, jsx_runtime_1.jsx)(core_1.ZoomExtentIcon, {}) })), (0, jsx_runtime_1.jsx)(info_popover_1.PopoverWrapper, { item: item })] })] }), extended && (0, jsx_runtime_1.jsx)(layer_item_style_1.default, { item: item }), extended && item?.source?.type === "grid" && (0, jsx_runtime_1.jsx)(grid_legend_1.default, { item: item })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "z-20 p-3 bg-white border-t border-gray-200", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center shrink-0", children: [(0, jsx_runtime_1.jsx)(core_1.CheckboxInput, { name: item.id, checked: isAdded, onChange: onToggleLayer, isLoading: isLoading }), extended && ((0, jsx_runtime_1.jsx)("div", { ref: dragHandleRef, ...dragHandleProps, className: "mt-1 w-6 text-center cursor-move", children: (0, jsx_runtime_1.jsx)(core_1.GrabberIcon, {}) }))] }), (0, jsx_runtime_1.jsx)("img", { className: "flex shrink-0 overflow-hidden h-16 w-16 p-1 mb-2 object-cover border border-gray-200 rounded", src: item.thumbnail || constants_1.FALLBACK_THUMB }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { title: item.title, className: "mb-1 leading-tight", style: constants_1.overflowStyle, children: (0, jsx_runtime_1.jsx)(highlighter_1.Highlighted, { text: item.title, highlight: query.term }) }), (0, jsx_runtime_1.jsx)("p", { title: item.description, className: "text-gray-600 text-sm", style: constants_1.overflowStyle2, children: item.description })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "pb-3", children: extended && (0, jsx_runtime_1.jsx)(opacity_handler_addon_1.default, { layerId: item.id }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between", children: [!extended && ((0, jsx_runtime_1.jsxs)(core_1.Button, { onClick: onDownloadLayer, disabled: !item.isDownloadable, children: [(0, jsx_runtime_1.jsx)(core_1.DownloadIcon, {}), " Download"] })), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3", children: [(0, jsx_runtime_1.jsx)(core_1.Button, { onClick: shareLayer, title: "Share", children: (0, jsx_runtime_1.jsx)(core_1.ShareIcon, {}) }), extended && ((0, jsx_runtime_1.jsx)(core_1.Button, { onClick: handleOnZoom, title: "Zoom To Extent", children: (0, jsx_runtime_1.jsx)(core_1.ZoomExtentIcon, {}) })), (0, jsx_runtime_1.jsx)(info_popover_1.PopoverWrapper, { item: item })] })] }), extended && (0, jsx_runtime_1.jsx)(layer_item_style_1.default, { item: item }), extended && item?.source?.type === "grid" && (0, jsx_runtime_1.jsx)(grid_legend_1.default, { item: item })] }));
 }

package/dist/components/sidebar/common/opacity-handler-addon.d.ts

@@ -1,3 +1,6 @@
-declare const OpacitySlider: () => import("react/jsx-runtime").JSX.Element;
-export default OpacitySlider;
+interface OpacityHandlerProps {
+    layerId: string;
+}
+declare const OpacityHandler: ({ layerId }: OpacityHandlerProps) => import("react/jsx-runtime").JSX.Element;
+export default OpacityHandler;
 //# sourceMappingURL=opacity-handler-addon.d.ts.map

package/dist/components/sidebar/common/opacity-handler-addon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"opacity-handler-addon.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/opacity-handler-addon.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,aAAa,+CAqBlB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"opacity-handler-addon.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/opacity-handler-addon.tsx"],"names":[],"mappings":"AAGA,UAAU,mBAAmB;IAC3B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,cAAc,GAAI,aAAa,mBAAmB,4CAgIvD,CAAC;AAEF,eAAe,cAAc,CAAC"}