@metastringfoundation/map-list 0.1.0 → 0.1.2

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

@@ -0,0 +1,152 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ComparisonView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const maplibre_1 = __importStar(require("react-map-gl/maplibre"));
+const map_common_1 = require("@metastringfoundation/map-common");
+const use_map_comparison_1 = require("./use-map-comparison");
+const layers_1 = require("../map/layers");
+const popup_1 = __importDefault(require("../map/popup"));
+const use_layers_1 = __importDefault(require("../../hooks/use-layers"));
+const comparison_stats_1 = __importDefault(require("./comparison-stats"));
+const NavControl = maplibre_1.NavigationControl;
+function ComparisonView() {
+    const { config } = (0, use_map_comparison_1.useMapComparison)();
+    const { mp, layer } = (0, use_layers_1.default)();
+    const [coordsByPane, setCoordsByPane] = (0, react_1.useState)({});
+    const [viewStates, setViewStates] = (0, react_1.useState)({});
+    const initialViewState = (0, react_1.useMemo)(() => mp.defaultViewState ?? map_common_1.defaultViewState, [mp.defaultViewState]);
+    // Initialize view states
+    (0, react_1.useEffect)(() => {
+        if (config.layers.length > 0) {
+            const newViewStates = {};
+            config.layers.forEach((compLayer) => {
+                if (!viewStates[compLayer.layerId]) {
+                    newViewStates[compLayer.layerId] = initialViewState;
+                }
+            });
+            if (Object.keys(newViewStates).length > 0) {
+                setViewStates((prev) => ({ ...prev, ...newViewStates }));
+            }
+        }
+    }, [config.layers, initialViewState]);
+    // Sync view states if enabled
+    const handleViewStateChange = (layerId, viewState) => {
+        if (config.syncView && config.layers.length > 1) {
+            // Sync all maps to the same view state
+            const syncedViewStates = {};
+            config.layers.forEach((l) => {
+                syncedViewStates[l.layerId] = viewState;
+            });
+            setViewStates((prev) => ({ ...prev, ...syncedViewStates }));
+        }
+        else {
+            // Update only the specific map
+            setViewStates((prev) => ({ ...prev, [layerId]: viewState }));
+        }
+    };
+    const onMouseMove = (layerId) => (e) => {
+        if (!e.lngLat)
+            return;
+        setCoordsByPane((prev) => ({
+            ...prev,
+            [layerId]: e.lngLat,
+        }));
+    };
+    if (config.layers.length === 0) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "w-full h-screen flex items-center justify-center bg-gray-100", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-gray-500 text-lg mb-2", children: "No layers selected for comparison" }), (0, jsx_runtime_1.jsx)("p", { className: "text-gray-400 text-sm", children: "Add layers from the comparison panel to get started" })] }) }));
+    }
+    // Prepare layers with attribute/style modifications
+    const preparedLayers = (0, react_1.useMemo)(() => {
+        return config.layers.map((compLayer) => {
+            const baseLayer = { ...compLayer.layer };
+            // If attribute-based comparison, modify the layer to show specific attribute
+            if (compLayer.attributeKey && compLayer.attributeKey.startsWith("style_")) {
+                const styleIndex = parseInt(compLayer.attributeKey.replace("style_", ""));
+                if (baseLayer.data) {
+                    baseLayer.data = {
+                        ...baseLayer.data,
+                        styleIndex: styleIndex,
+                    };
+                }
+            }
+            return {
+                ...baseLayer,
+                id: `compare-${compLayer.layerId}`,
+            };
+        });
+    }, [config.layers]);
+    // Render based on mode
+    if (config.mode === "overlay") {
+        // Overlay mode: stack all layers on a single map
+        const overlayViewState = viewStates[config.layers[0]?.layerId] || initialViewState;
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full h-screen relative", children: [config.showStats && (0, jsx_runtime_1.jsx)(comparison_stats_1.default, {}), (0, jsx_runtime_1.jsxs)(maplibre_1.default, { id: "comparison-overlay", initialViewState: overlayViewState, style: { width: "100%", height: "100%" }, mapStyle: layer.mapStyle, onMove: (e) => {
+                        if (config.layers[0]) {
+                            handleViewStateChange(config.layers[0].layerId, e.viewState);
+                        }
+                    }, children: [(0, jsx_runtime_1.jsx)(NavControl, { position: "top-right", showZoom: true, showCompass: true }), preparedLayers.map((l, index) => {
+                            const beforeId = index > 0 ? preparedLayers[index - 1].id : undefined;
+                            return (0, jsx_runtime_1.jsx)(layers_1.MapLayer, { layer: l, beforeId: beforeId }, l.id);
+                        }), (0, jsx_runtime_1.jsx)(popup_1.default, { coordinates: coordsByPane["overlay"] })] })] }));
+    }
+    // Side-by-side or attribute mode: show multiple maps
+    const layout = (0, react_1.useMemo)(() => {
+        const count = config.layers.length;
+        if (count === 1)
+            return { cols: 1, rows: 1 };
+        if (count === 2)
+            return { cols: 2, rows: 1 };
+        if (count === 3)
+            return { cols: 2, rows: 2 };
+        return { cols: 2, rows: Math.ceil(count / 2) };
+    }, [config.layers.length]);
+    const renderMap = (compLayer, index) => {
+        const preparedLayer = preparedLayers[index];
+        const viewState = viewStates[compLayer.layerId] || initialViewState;
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "relative w-full h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "absolute top-2 left-2 z-10 bg-black/70 text-white px-3 py-1 rounded-md text-sm font-medium", children: [compLayer.layer.title, compLayer.attributeLabel && ((0, jsx_runtime_1.jsxs)("span", { className: "ml-2 text-xs text-gray-300", children: ["(", compLayer.attributeLabel, ")"] }))] }), (0, jsx_runtime_1.jsxs)(maplibre_1.default, { id: `compare-${compLayer.layerId}`, initialViewState: viewState, style: { position: "absolute", inset: 0 }, mapStyle: layer.mapStyle, onMouseMove: onMouseMove(compLayer.layerId), onMove: (e) => handleViewStateChange(compLayer.layerId, e.viewState), children: [(0, jsx_runtime_1.jsx)(NavControl, { position: "top-right", showZoom: true, showCompass: true }), (0, jsx_runtime_1.jsx)(layers_1.MapLayer, { layer: preparedLayer }), (0, jsx_runtime_1.jsx)(popup_1.default, { coordinates: coordsByPane[compLayer.layerId] })] }, config.syncView ? `sync-${JSON.stringify(viewState)}` : compLayer.layerId)] }, compLayer.layerId));
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full h-screen relative", children: [config.showStats && (0, jsx_runtime_1.jsx)(comparison_stats_1.default, {}), (0, jsx_runtime_1.jsx)("div", { style: {
+                    display: "grid",
+                    gridTemplateColumns: `repeat(${layout.cols}, 1fr)`,
+                    gridTemplateRows: `repeat(${layout.rows}, ${100 / layout.rows}vh)`,
+                    height: "100vh",
+                }, children: config.layers.map((compLayer, index) => renderMap(compLayer, index)) })] }));
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Map Comparison Wrapper Component
+ *
+ * This component works within the existing LayersProvider context
+ * Use this when you already have MapProvider and LayersProvider set up
+ */
+export default function ComparisonWrapper(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=comparison-wrapper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"comparison-wrapper.d.ts","sourceRoot":"","sources":["../../../src/components/map-comparison/comparison-wrapper.tsx"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,4CAcxC"}

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

@@ -0,0 +1,26 @@
+"use client";
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ComparisonWrapper;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const comparison_panel_1 = __importDefault(require("./comparison-panel"));
+const comparison_view_1 = __importDefault(require("./comparison-view"));
+const use_map_comparison_1 = require("./use-map-comparison");
+/**
+ * Map Comparison Wrapper Component
+ *
+ * This component works within the existing LayersProvider context
+ * Use this when you already have MapProvider and LayersProvider set up
+ */
+function ComparisonWrapper() {
+    const { setIsOpen } = (0, use_map_comparison_1.useMapComparison)();
+    // Auto-open the comparison panel when comparison mode is activated
+    (0, react_1.useEffect)(() => {
+        setIsOpen(true);
+    }, [setIsOpen]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full h-screen relative", children: [(0, jsx_runtime_1.jsx)(comparison_panel_1.default, {}), (0, jsx_runtime_1.jsx)(comparison_view_1.default, {})] }));
+}

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

@@ -0,0 +1,3 @@
+declare const MapComparison: () => import("react/jsx-runtime").JSX.Element;
+export default MapComparison;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/map-comparison/index.tsx"],"names":[],"mappings":"AAsJA,QAAA,MAAM,aAAa,+CAoQlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

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-compare-addon.d.ts

@@ -0,0 +1,4 @@
+export default function LayerCompareAddon({ id }: {
+    id: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=layer-compare-addon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layer-compare-addon.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/layer-compare-addon.tsx"],"names":[],"mappings":"AAKA,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,2CAqB/D"}