@metastringfoundation/map-list 0.1.1 → 0.1.2

package/dist/components/sidebar/common/opacity-handler-addon.js

@@ -1,9 +1,106 @@
 "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");
 const react_1 = require("react");
-const OpacitySlider = () => {
-    const [opacity, setOpacity] = (0, react_1.useState)(1);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "max-w-sm space-y-4", children: (0, jsx_runtime_1.jsx)("input", { id: "opacity-slider", type: "range", min: "0", max: "1", step: "0.01", value: opacity, onChange: (e) => setOpacity(Number(e.target.value)), className: "\n          w-full cursor-pointer text-2xl h-1\n        " }) }));
+const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
+const OpacityHandler = ({ layerId }) => {
+    const { layer } = (0, use_layers_1.default)();
+    const contextOpacity = layer.getLayerOpacity(layerId);
+    // Local state for smooth slider interaction
+    const [localOpacity, setLocalOpacity] = (0, react_1.useState)(contextOpacity);
+    const isDraggingRef = (0, react_1.useRef)(false);
+    const rafRef = (0, react_1.useRef)(null);
+    // Sync local state with context when context changes externally (not during drag)
+    (0, react_1.useEffect)(() => {
+        if (!isDraggingRef.current) {
+            setLocalOpacity(contextOpacity);
+        }
+    }, [contextOpacity]);
+    // Use requestAnimationFrame for smooth updates
+    const updateOpacity = (0, react_1.useCallback)((value) => {
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+        }
+        rafRef.current = requestAnimationFrame(() => {
+            layer.setLayerOpacity(layerId, value);
+        });
+    }, [layer, layerId]);
+    const handleInput = (e) => {
+        const value = Number(e.target.value);
+        setLocalOpacity(value);
+        isDraggingRef.current = true;
+        updateOpacity(value);
+    };
+    const handleMouseUp = () => {
+        // Ensure final value is set
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+        }
+        layer.setLayerOpacity(layerId, localOpacity);
+        isDraggingRef.current = false;
+    };
+    // Cleanup on unmount
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (rafRef.current !== null) {
+                cancelAnimationFrame(rafRef.current);
+            }
+        };
+    }, []);
+    const percentage = Math.round(localOpacity * 100);
+    const opacityPercent = localOpacity * 100;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1 h-6 flex items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute left-0 right-0 top-1/2 -translate-y-1/2 h-2 rounded-lg pointer-events-none", style: {
+                            background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${opacityPercent}%, #e5e7eb ${opacityPercent}%, #e5e7eb 100%)`,
+                        } }), (0, jsx_runtime_1.jsx)("input", { id: `opacity-slider-${layerId}`, type: "range", min: "0", max: "1", step: "0.01", value: localOpacity, onInput: handleInput, onChange: handleInput, onMouseUp: handleMouseUp, onTouchEnd: handleMouseUp, className: "relative w-full h-2 bg-transparent appearance-none cursor-pointer opacity-slider-input" })] }), (0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: {
+                    __html: `
+          .opacity-slider-input::-webkit-slider-thumb {
+            appearance: none;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: #3b82f6;
+            cursor: pointer;
+            border: 2px solid white;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+            margin-top: -5px;
+          }
+          .opacity-slider-input::-webkit-slider-thumb:hover {
+            transform: scale(1.1);
+          }
+          .opacity-slider-input::-webkit-slider-thumb:active {
+            transform: scale(1.2);
+            cursor: grabbing;
+          }
+          .opacity-slider-input::-webkit-slider-runnable-track {
+            height: 8px;
+            border-radius: 4px;
+            background: transparent;
+          }
+          .opacity-slider-input::-moz-range-thumb {
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: #3b82f6;
+            cursor: pointer;
+            border: 2px solid white;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+          }
+          .opacity-slider-input::-moz-range-thumb:hover {
+            transform: scale(1.1);
+          }
+          .opacity-slider-input::-moz-range-thumb:active {
+            transform: scale(1.2);
+            cursor: grabbing;
+          }
+          .opacity-slider-input::-moz-range-track {
+            height: 8px;
+            border-radius: 4px;
+            background: transparent;
+          }
+        `
+                } })] }));
 };
-exports.default = OpacitySlider;
+exports.default = OpacityHandler;

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

@@ -1 +1 @@
-{"version":3,"file":"style-legend.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/style-legend.tsx"],"names":[],"mappings":"AAKA,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE;;CAAA,2CA4CnC"}
+{"version":3,"file":"style-legend.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/common/style-legend.tsx"],"names":[],"mappings":"AAKA,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE;;CAAA,2CA2CnC"}

package/dist/components/sidebar/common/style-legend.js

@@ -11,7 +11,6 @@ const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
 function StyleLegend({ item }) {
     const [showImage, setShowImage] = (0, react_1.useState)(true);
     const { mp } = (0, use_layers_1.default)();
-    const { t } = useT();
     const legendStyles = (0, react_1.useMemo)(() => item?.data?.styles?.[item.data.styleIndex]?.colors?.paint?.["fill-color"]
         ?.stops ||
         item?.data?.styles?.[item.data.styleIndex]?.colors?.paint?.["circle-color"]?.stops ||
@@ -19,5 +18,5 @@ function StyleLegend({ item }) {
     const vectorLegend = () => {
         return legendStyles.map(([title, color]) => ((0, jsx_runtime_1.jsxs)("li", { className: "flex gap-2 items-center mb-1", children: [(0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 24 24", height: "14", width: "14", focusable: "false", children: (0, jsx_runtime_1.jsx)("circle", { cx: "12", fill: color, cy: "12", r: "12", stroke: "none" }) }), (0, jsx_runtime_1.jsx)("div", { children: title })] }, color)));
     };
-    return ((0, jsx_runtime_1.jsx)("ul", { style: { margin: 0, padding: 0 }, children: item.layerType !== "RASTER" ? (vectorLegend()) : showImage ? ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("img", { style: { margin: "5px" }, onError: () => setShowImage(false), src: `${mp?.geoserver?.endpoint}/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&WIDTH=20&HEIGHT=20&STRICT=false&layer=biodiv:${item.id}` }) })) : ((0, jsx_runtime_1.jsx)("div", { children: t("raster_style_not_found") })) }));
+    return ((0, jsx_runtime_1.jsx)("ul", { style: { margin: 0, padding: 0 }, children: item.layerType !== "RASTER" ? (vectorLegend()) : showImage ? ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)("img", { style: { margin: "5px" }, onError: () => setShowImage(false), src: `${mp?.geoserver?.endpoint}/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&WIDTH=20&HEIGHT=20&STRICT=false&layer=biodiv:${item.id}` }) })) : ((0, jsx_runtime_1.jsx)("div", { children: ("raster_style_not_found") })) }));
 }

package/dist/components/sidebar/comparison/index.d.ts

@@ -0,0 +1,4 @@
+export default function ComparisonSidebar({ onClose }: {
+    onClose?: () => void;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/comparison/index.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,kDAoE9E"}

package/dist/components/sidebar/comparison/index.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ComparisonSidebar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
+const core_1 = require("../../core");
+function ComparisonSidebar({ onClose }) {
+    const { layer } = (0, use_layers_1.default)();
+    const compareList = layer?.compareList || [];
+    const handleRemoveFromComparison = (id) => {
+        layer.setCompareLayer(id, false);
+    };
+    const handleClearAll = () => {
+        compareList.forEach((id) => {
+            layer.setCompareLayer(id, false);
+        });
+    };
+    // Don't show if no layers in comparison
+    if (compareList.length === 0) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "absolute md:left-4 md:bottom-4 md:max-w-sm w-full z-20 bg-white rounded-lg shadow-md overflow-hidden", style: {
+            maxHeight: "40vh",
+            height: "auto"
+        }, children: [onClose && (0, jsx_runtime_1.jsx)(core_1.CloseButton, { onClick: onClose }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", style: { maxHeight: "40vh" }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-4 border-b shrink-0", children: [(0, jsx_runtime_1.jsxs)("h3", { className: "text-lg font-semibold text-gray-800", children: ["Comparing ", compareList.length, " ", compareList.length === 1 ? "layer" : "layers"] }), (0, jsx_runtime_1.jsx)(core_1.Button, { onClick: handleClearAll, className: "text-sm", children: "Clear All" })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2 p-4", children: compareList.map((id) => {
+                                const layerItem = layer.all.find((l) => l.id === id);
+                                if (!layerItem)
+                                    return null;
+                                return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between p-3 bg-gray-50 rounded-md border border-gray-200 hover:bg-gray-100 transition-colors", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-medium text-gray-800", children: layerItem.title || layerItem.id }), layerItem.description && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-500 mt-1", children: layerItem.description }))] }), (0, jsx_runtime_1.jsx)(core_1.Button, { onClick: () => handleRemoveFromComparison(id), className: "ml-2 text-red-600 hover:text-red-700", children: "Remove" })] }, id));
+                            }) }) })] })] }));
+}

package/dist/components/sidebar/search/attribute-comparison.d.ts

@@ -0,0 +1,10 @@
+interface AttributeComparisonProps {
+    attributeKey?: string;
+    clickedLngLat?: {
+        lng: number;
+        lat: number;
+    };
+}
+export default function AttributeComparison({ attributeKey: initialAttributeKey, clickedLngLat, }: AttributeComparisonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=attribute-comparison.d.ts.map

package/dist/components/sidebar/search/attribute-comparison.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribute-comparison.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/search/attribute-comparison.tsx"],"names":[],"mappings":"AAIA,UAAU,wBAAwB;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9C;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,YAAY,EAAE,mBAA0B,EACxC,aAAa,GACd,EAAE,wBAAwB,2CAwT1B"}

package/dist/components/sidebar/search/attribute-comparison.js

@@ -0,0 +1,137 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = AttributeComparison;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_layers_1 = __importDefault(require("../../../hooks/use-layers"));
+const naksha_1 = require("../../../services/naksha");
+function AttributeComparison({ attributeKey: initialAttributeKey = "-2", clickedLngLat, }) {
+    const { layer, mp, query } = (0, use_layers_1.default)();
+    const [attributeKey, setAttributeKey] = (0, react_1.useState)(initialAttributeKey);
+    const [comparisonData, setComparisonData] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const compareLayers = (0, react_1.useMemo)(() => {
+        if (!layer.compareList || layer.compareList.length === 0) {
+            return layer.selectedLayers || [];
+        }
+        return (layer.selectedLayers?.filter((l) => layer.compareList.includes(l.id)) ||
+            []);
+    }, [layer.compareList, layer.selectedLayers]);
+    const fetchAttributeData = async () => {
+        if (compareLayers.length < 2) {
+            setComparisonData([]);
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            const lngLat = clickedLngLat || query.clickedLngLat;
+            if (!lngLat) {
+                setError("Please click on the map to select a location");
+                setLoading(false);
+                return;
+            }
+            const dataPromises = compareLayers.map(async (currentLayer) => {
+                let attributeValue = null;
+                let allProperties = [];
+                try {
+                    if (currentLayer.layerType?.toLowerCase() === "raster") {
+                        const { data } = await (0, naksha_1.axGexGetRasterInfoWithLonLat)(mp.geoserver?.endpoint, mp.geoserver?.workspace, {
+                            bbox: `${lngLat.lng},${lngLat.lat},${lngLat.lng},${lngLat.lat}`,
+                            query_layers: `${mp.geoserver?.workspace}:${currentLayer.id}`,
+                            layers: `${mp.geoserver?.workspace}:${currentLayer.id}`,
+                        });
+                        if (data?.features?.[0]?.properties) {
+                            const props = data.features[0].properties;
+                            allProperties = Object.entries(props).map(([k, v]) => [k, v]);
+                            // Try multiple strategies to find the attribute
+                            // 1. Direct key match
+                            if (props[attributeKey] !== undefined) {
+                                attributeValue = props[attributeKey];
+                            }
+                            // 2. Try numeric index if attributeKey is "-2"
+                            else if (attributeKey === "-2") {
+                                const propKeys = Object.keys(props);
+                                const index = propKeys.length - 2; // -2 means second from last
+                                if (index >= 0 && index < propKeys.length) {
+                                    attributeValue = props[propKeys[index]];
+                                }
+                            }
+                            // 3. Try to find by value match (case-insensitive)
+                            else {
+                                const foundKey = Object.keys(props).find((k) => k.toLowerCase() === attributeKey.toLowerCase());
+                                if (foundKey) {
+                                    attributeValue = props[foundKey];
+                                }
+                            }
+                        }
+                    }
+                    else {
+                        // Vector layer
+                        const propertyMap = currentLayer?.data?.propertyMap || {};
+                        allProperties = Object.entries(propertyMap).map(([k, v]) => [
+                            v,
+                            null, // Value will be fetched from clicked feature
+                        ]);
+                        // Try multiple strategies to find the attribute
+                        // 1. Direct key match in propertyMap values
+                        let propertyKey = Object.keys(propertyMap).find((k) => propertyMap[k] === attributeKey);
+                        // 2. Direct key match in propertyMap keys
+                        if (!propertyKey && propertyMap[attributeKey]) {
+                            propertyKey = attributeKey;
+                        }
+                        // 3. Try numeric index if attributeKey is "-2"
+                        if (!propertyKey && attributeKey === "-2") {
+                            const propertyKeys = Object.keys(propertyMap);
+                            const index = propertyKeys.length - 2; // -2 means second from last
+                            if (index >= 0 && index < propertyKeys.length) {
+                                propertyKey = propertyKeys[index];
+                            }
+                        }
+                        if (propertyKey && layer.selectedFeatures) {
+                            const feature = layer.selectedFeatures.find((f) => f.sourceLayer === currentLayer.id);
+                            if (feature?.properties?.[propertyKey] !== undefined) {
+                                attributeValue = feature.properties[propertyKey];
+                            }
+                        }
+                    }
+                }
+                catch (err) {
+                    console.error(`Error fetching data for layer ${currentLayer.id}:`, err);
+                }
+                return {
+                    layerId: currentLayer.id,
+                    layerTitle: currentLayer.title,
+                    attributeValue,
+                    allProperties,
+                };
+            });
+            const results = await Promise.all(dataPromises);
+            setComparisonData(results);
+        }
+        catch (err) {
+            setError(err.message || "Failed to fetch comparison data");
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (compareLayers.length >= 2 && (clickedLngLat || query.clickedLngLat)) {
+            fetchAttributeData();
+        }
+        else {
+            setComparisonData([]);
+        }
+    }, [compareLayers, clickedLngLat, query.clickedLngLat, attributeKey]);
+    if (compareLayers.length < 2) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "w-full p-4 flex flex-col gap-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center py-8 text-gray-500", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-lg font-semibold mb-2", children: "No Layers Selected for Comparison" }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm", children: "Select at least 2 layers and enable comparison mode to compare attributes" })] }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full p-4 flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3 mb-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-gray-800", children: "Attribute Comparison" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-sm text-gray-600 whitespace-nowrap", children: "Attribute Key:" }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: attributeKey, onChange: (e) => setAttributeKey(e.target.value), className: "flex-1 px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono", placeholder: "e.g., -2, name, id" })] })] }), loading && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center py-8", children: [(0, jsx_runtime_1.jsx)("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-3 text-gray-600", children: "Loading comparison data..." })] })), error && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4 text-red-700", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-semibold mb-1", children: "Error" }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm", children: error })] })), !loading && !error && comparisonData.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm", children: (0, jsx_runtime_1.jsx)("div", { className: "overflow-x-auto", children: (0, jsx_runtime_1.jsxs)("table", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("thead", { className: "bg-gray-50 border-b border-gray-200", children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { className: "px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider", children: "Layer" }), (0, jsx_runtime_1.jsxs)("th", { className: "px-4 py-3 text-left text-xs font-semibold text-gray-700 uppercase tracking-wider", children: [attributeKey, " Value"] })] }) }), (0, jsx_runtime_1.jsx)("tbody", { className: "bg-white divide-y divide-gray-200", children: comparisonData.map((item, index) => ((0, jsx_runtime_1.jsxs)("tr", { className: `hover:bg-gray-50 transition-colors ${index % 2 === 0 ? "bg-white" : "bg-gray-50"}`, children: [(0, jsx_runtime_1.jsx)("td", { className: "px-4 py-3 text-sm font-medium text-gray-900", children: item.layerTitle }), (0, jsx_runtime_1.jsx)("td", { className: "px-4 py-3 text-sm text-gray-700", children: item.attributeValue !== null &&
+                                                        item.attributeValue !== undefined ? ((0, jsx_runtime_1.jsx)("span", { className: "font-mono font-semibold text-blue-600", children: String(item.attributeValue) })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-gray-400 italic", children: "N/A" })) })] }, item.layerId))) })] }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: comparisonData.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between mb-3", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-semibold text-gray-800 text-sm", children: item.layerTitle }), (0, jsx_runtime_1.jsx)("div", { className: "w-2 h-2 bg-blue-500 rounded-full" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600 uppercase tracking-wide", children: attributeKey }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-blue-700", children: item.attributeValue !== null &&
+                                                item.attributeValue !== undefined ? (String(item.attributeValue)) : ((0, jsx_runtime_1.jsx)("span", { className: "text-gray-400 text-lg", children: "N/A" })) })] })] }, item.layerId))) }), comparisonData.some((d) => d.attributeValue !== null) && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-50 border border-gray-200 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-sm font-semibold text-gray-700 mb-3", children: "Comparison Summary" }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-gray-600", children: "Layers Compared" }), (0, jsx_runtime_1.jsx)("div", { className: "text-lg font-semibold text-gray-800", children: comparisonData.length })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-gray-600", children: "Valid Values" }), (0, jsx_runtime_1.jsx)("div", { className: "text-lg font-semibold text-green-600", children: comparisonData.filter((d) => d.attributeValue !== null).length })] })] })] }))] })), !loading && !error && comparisonData.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "text-center py-8 text-gray-500", children: (0, jsx_runtime_1.jsx)("div", { className: "text-sm mb-2", children: "Click on the map to compare attributes at that location" }) }))] }));
+}

package/dist/components/sidebar/search/index.d.ts

@@ -0,0 +1,2 @@
+export default function SearchTabPanel(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/sidebar/search/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/search/index.tsx"],"names":[],"mappings":"AAsBA,MAAM,CAAC,OAAO,UAAU,cAAc,4CAmDrC"}

package/dist/components/sidebar/search/index.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = SearchTabPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const core_1 = require("../../core");
+// Darker search icon component
+const SearchIconDark = ({ disabled = false }) => ((0, jsx_runtime_1.jsx)("svg", { fill: "none", className: `w-5 h-5 ${disabled ? "text-blue-200" : "text-white"}`, width: "24", height: "24", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }));
+function SearchTabPanel() {
+    const [searchTerm, setSearchTerm] = (0, react_1.useState)("");
+    const handleSearchChange = (e) => {
+        setSearchTerm(e.target.value);
+    };
+    const handleSearch = () => {
+        // TODO: Implement search functionality for data within drawn polygon
+        console.log("Searching for:", searchTerm);
+        // This will search data within the polygon boundaries
+        // You can integrate with the polygon data from useMapDraw hook here
+    };
+    const handleKeyPress = (e) => {
+        if (e.key === "Enter") {
+            handleSearch();
+        }
+    };
+    const isDisabled = !searchTerm.trim();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `w-full p-4 flex flex-col gap-4`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3", children: [(0, jsx_runtime_1.jsx)(core_1.Input, { name: "polygon_search", label: "Search Data in Polygon", placeholder: "Enter search term...", value: searchTerm, onChange: handleSearchChange, onKeyPress: handleKeyPress }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleSearch, className: `w-full h-10 px-4 py-2 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 text-md flex align-middle items-center justify-center gap-2 font-medium transition-all duration-200 ${isDisabled
+                            ? "bg-blue-500 text-blue-50 cursor-not-allowed focus:ring-blue-400"
+                            : "bg-blue-600 hover:bg-blue-700 text-white cursor-pointer focus:ring-blue-500 hover:shadow-md"}`, disabled: isDisabled, children: [(0, jsx_runtime_1.jsx)(SearchIconDark, { disabled: isDisabled }), (0, jsx_runtime_1.jsx)("span", { children: "Search" })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-500 mt-2", children: "Draw a polygon on the map first, then search for data within it." })] }));
+}

package/dist/components/sidebar/selected/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/selected/index.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CAgCvC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/sidebar/selected/index.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,gBAAgB,4CA6CvC"}

package/dist/components/sidebar/selected/index.js

@@ -14,7 +14,10 @@ function SelectedTabPanel() {
     const onSortEnd = ({ oldIndex, newIndex, }) => {
         layer.setSelectedIds((0, array_move_1.arrayMoveImmutable)(layer.selectedIds, oldIndex, newIndex));
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: `flex flex-col gap-3 w-full`, children: [layer.selectedIds.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: `p-3 pb-0`, children: (0, jsx_runtime_1.jsxs)(core_1.Button, { onClick: () => layer.clearAll(), children: ["\u2715 ", "clear"] }) })), (0, jsx_runtime_1.jsx)(selected_item_list_1.SelectedItemList, { layerList: layer.selectedLayers, 
+    const checkedCount = layer.getCheckedAttributesCount();
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children: (0, jsx_runtime_1.jsxs)("div", { className: `flex flex-col gap-3 w-full`, children: [layer.selectedIds.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: `p-3 pb-0 flex gap-2`, children: [(0, jsx_runtime_1.jsxs)(core_1.Button, { onClick: () => layer.clearAll(), children: ["\u2715 ", "clear"] }), checkedCount > 0 && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => {
+                                layer.setCompareMode(true);
+                            }, className: "h-8 px-3 py-2 rounded-md focus:outline-none focus:ring cursor-pointer text-md flex align-middle items-center gap-1 bg-green-700 hover:bg-green-800 text-white", children: ["Compare", " ", (0, jsx_runtime_1.jsxs)("span", { children: ["(", checkedCount, ")"] })] }))] })), (0, jsx_runtime_1.jsx)(selected_item_list_1.SelectedItemList, { layerList: layer.selectedLayers, 
                     // @ts-ignore
                     useDragHandle: true, onSortEnd: onSortEnd })] }) }));
 }

package/dist/components/sidebar/tabs.js

@@ -8,8 +8,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const core_1 = require("../core");
 const index_1 = __importDefault(require("./layers/index"));
 const selected_1 = __importDefault(require("./selected"));
-const settings_1 = __importDefault(require("./settings"));
+const search_1 = __importDefault(require("./search"));
 // @ts-ignore
 function SidebarTabs({ onClose }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "absolute top-0 right-0 bottom-0 left-0 md:right-auto md:top-4 md:left-4 md:bottom-4 bg-white rounded-lg shadow-md md:max-w-sm w-full z-20 overflow-hidden", children: [(0, jsx_runtime_1.jsx)(core_1.CloseButton, { onClick: onClose }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col h-full", children: (0, jsx_runtime_1.jsxs)(core_1.Tabs, { className: "flex flex-col h-full", children: [(0, jsx_runtime_1.jsxs)(core_1.TabHeader, { children: [(0, jsx_runtime_1.jsx)(core_1.IconTab, { icon: (0, jsx_runtime_1.jsx)(core_1.LayersIcon, {}), children: ("layers") }), (0, jsx_runtime_1.jsx)(core_1.IconTab, { icon: (0, jsx_runtime_1.jsx)(core_1.LayersIcon, {}), children: ("selected") }), (0, jsx_runtime_1.jsx)(core_1.IconTab, { icon: (0, jsx_runtime_1.jsx)(core_1.SlidersIcon, {}), children: ("settings") })] }), (0, jsx_runtime_1.jsx)(core_1.Panel, { children: (0, jsx_runtime_1.jsx)(index_1.default, {}) }), (0, jsx_runtime_1.jsx)(core_1.Panel, { children: (0, jsx_runtime_1.jsx)(selected_1.default, {}) }), (0, jsx_runtime_1.jsx)(core_1.Panel, { children: (0, jsx_runtime_1.jsx)(settings_1.default, {}) })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "absolute top-0 right-0 bottom-0 left-0 md:right-auto md:top-4 md:left-4 md:bottom-4 bg-white rounded-lg shadow-md md:max-w-sm w-full z-20 overflow-hidden", children: [(0, jsx_runtime_1.jsx)(core_1.CloseButton, { onClick: onClose }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col h-full", children: (0, jsx_runtime_1.jsxs)(core_1.Tabs, { className: "flex flex-col h-full", children: [(0, jsx_runtime_1.jsxs)(core_1.TabHeader, { children: [(0, jsx_runtime_1.jsx)(core_1.IconTab, { icon: (0, jsx_runtime_1.jsx)(core_1.LayersIcon, {}), children: ("layers") }), (0, jsx_runtime_1.jsx)(core_1.IconTab, { icon: (0, jsx_runtime_1.jsx)(core_1.LayersIcon, {}), children: ("selected") }), (0, jsx_runtime_1.jsx)(core_1.IconTab, { icon: (0, jsx_runtime_1.jsx)(core_1.SearchIcon, {}), children: ("search") })] }), (0, jsx_runtime_1.jsx)(core_1.Panel, { children: (0, jsx_runtime_1.jsx)(index_1.default, {}) }), (0, jsx_runtime_1.jsx)(core_1.Panel, { children: (0, jsx_runtime_1.jsx)(selected_1.default, {}) }), (0, jsx_runtime_1.jsx)(core_1.Panel, { children: (0, jsx_runtime_1.jsx)(search_1.default, {}) })] }) })] }));
 }

package/dist/hooks/use-layers.d.ts

@@ -35,6 +35,14 @@ interface LayersContextProps {
         setGridLegends: (g: Record<string, any>) => void;
         compareList: string[];
         setCompareLayer: (layerId: string, checked: boolean) => void;
+        getLayerOpacity: (layerId: string) => number;
+        setLayerOpacity: (layerId: string, opacity: number) => void;
+        checkedAttributes: Set<string>;
+        toggleAttributeCompare: (attributeKey: string) => void;
+        getCheckedAttributesCount: () => number;
+        isCompareMode: boolean;
+        setCompareMode: (value: boolean) => void;
+        fetchStyleForComparison: (layerId: string, styleIndex: number) => Promise<void>;
     };
     query: {
         term: string;

package/dist/hooks/use-layers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-layers.d.ts","sourceRoot":"","sources":["../../src/hooks/use-layers.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-layers.d.ts","sourceRoot":"","sources":["../../src/hooks/use-layers.tsx"],"names":[],"mappings":"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"}

package/dist/hooks/use-layers.js

@@ -64,6 +64,12 @@ const LayersProvider = ({ mp: _mp, children }) => {
     const [hoverFeatures, setHoverFeatures] = (0, react_1.useState)();
     const [selectedFeatures, setSelectedFeatures] = (0, react_1.useState)();
     const [compareList, setCompareList] = (0, react_1.useState)((_mp && _mp.compareList) || []);
+    const [layerOpacities, setLayerOpacities] = (0, react_1.useState)({});
+    const [layerVisibilities, setLayerVisibilities] = (0, react_1.useState)({});
+    // State for tracking checked attributes for comparison (format: "layerId-styleIndex")
+    const [checkedAttributes, setCheckedAttributes] = (0, react_1.useState)(new Set());
+    // State for compare mode (showing dual map)
+    const [isCompareMode, setIsCompareMode] = (0, react_1.useState)(false);
     const setCompareLayer = (layerId, checked) => {
         setCompareList((prev) => {
             if (checked)
@@ -72,6 +78,36 @@ const LayersProvider = ({ mp: _mp, children }) => {
         });
         // optional: call mp.onCompareChange(layerId, checked) if you want callbacks
     };
+    const toggleAttributeCompare = (attributeKey) => {
+        setCheckedAttributes((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(attributeKey)) {
+                // Removing - always allowed
+                newSet.delete(attributeKey);
+            }
+            else {
+                // Adding - check limit
+                if (newSet.size >= 8) {
+                    alert("Maximum 8 attributes can be compared at a time");
+                    return prev; // Don't add, return previous state
+                }
+                newSet.add(attributeKey);
+            }
+            return newSet;
+        });
+    };
+    const getCheckedAttributesCount = () => {
+        return checkedAttributes.size;
+    };
+    const getLayerOpacity = (layerId) => {
+        return layerOpacities[layerId] ?? 1;
+    };
+    const setLayerOpacity = (layerId, opacity) => {
+        setLayerOpacities((prev) => ({
+            ...prev,
+            [layerId]: Math.max(0, Math.min(1, opacity)), // Clamp between 0 and 1
+        }));
+    };
     const selectedFeaturesId = (0, react_1.useMemo)(() => {
         const meta = {};
         for (const qr of selectedFeatures || []) {
@@ -118,11 +154,35 @@ const LayersProvider = ({ mp: _mp, children }) => {
         const layerIndex = getLayerIndexById(layerId);
         toggleVectorLayer(layerIndex, styleIndex, false);
     };
+    // Fetch style data for comparison without changing the active styleIndex on main map
+    const fetchStyleForComparison = async (layerId, styleIndex) => {
+        const layerIndex = getLayerIndexById(layerId);
+        const layer = layers[layerIndex];
+        if (!layer)
+            return;
+        // Get the current active styleIndex to preserve it
+        const currentStyleIndex = layer.data?.styleIndex ?? 0;
+        // Fetch the style data
+        const layerData = await (0, naksha_2.getLayerStyle)(
+        // @ts-ignore
+        layer, styleIndex, mp.nakshaApiEndpoint, mp.geoserver);
+        // Update layer data but preserve the original styleIndex so main map doesn't change
+        updateLayerById(layer.id, {
+            data: {
+                ...layerData,
+                styleIndex: currentStyleIndex, // Keep the original active style
+            }
+        });
+    };
     const onMapHover = async (e) => {
         if (!selectedLayerIds.length || !mapl)
             return;
         try {
             const lastLayerId = selectedLayerIds[0];
+            // console.log(lastLayerId , "lastLayerId")
+            // added check
+            if (!mapl?.getLayer(lastLayerId))
+                return;
             const feats = mapl.queryRenderedFeatures(e.point, {
                 layers: [lastLayerId],
             });
@@ -154,6 +214,16 @@ const LayersProvider = ({ mp: _mp, children }) => {
     const toggleLayer = async ({ layerId, add, styleIndex = 0, focus = true, }) => {
         if (!add) {
             setSelectedLayerIds(selectedLayerIds.filter((_lyrId) => layerId !== _lyrId));
+            // Remove all checked attributes for this layer when it's deselected
+            setCheckedAttributes((prev) => {
+                const newSet = new Set(prev);
+                for (const attrKey of prev) {
+                    if (attrKey.startsWith(`${layerId}-`)) {
+                        newSet.delete(attrKey);
+                    }
+                }
+                return newSet;
+            });
             return;
         }
         const layerIndex = getLayerIndexById(layerId);
@@ -164,7 +234,11 @@ const LayersProvider = ({ mp: _mp, children }) => {
             return updated;
         });
     };
-    const clearAllLayers = async () => setSelectedLayerIds([]);
+    const clearAllLayers = async () => {
+        setSelectedLayerIds([]);
+        // Clear all checked attributes when all layers are cleared
+        setCheckedAttributes(new Set());
+    };
     const updateMP = (key, value) => {
         setMP({ ...mp, [key]: value });
     };
@@ -259,6 +333,24 @@ const LayersProvider = ({ mp: _mp, children }) => {
         // if it takes more then 300 selection will be discarded
         setTimeout(featuresAtLatLng, 300);
     }, [clickedLngLat, selectionStyle, selectedLayerIds]);
+    // Sync checkedAttributes with selectedLayers - remove attributes for unselected layers
+    (0, react_1.useEffect)(() => {
+        setCheckedAttributes((prev) => {
+            const selectedIdsSet = new Set(selectedLayerIds);
+            const newSet = new Set();
+            for (const attrKey of prev) {
+                const [layerId] = attrKey.split("-");
+                if (!layerId) {
+                    continue;
+                }
+                // Only keep attributes for layers that are currently selected
+                if (selectedIdsSet.has(layerId)) {
+                    newSet.add(attrKey);
+                }
+            }
+            return newSet;
+        });
+    }, [selectedLayerIds]);
     return ((0, jsx_runtime_1.jsx)(LayersContext.Provider, { value: {
             mp,
             updateMP,
@@ -287,6 +379,14 @@ const LayersProvider = ({ mp: _mp, children }) => {
                 setGridLegends,
                 compareList: compareList,
                 setCompareLayer: setCompareLayer,
+                getLayerOpacity,
+                setLayerOpacity,
+                checkedAttributes: checkedAttributes,
+                toggleAttributeCompare: toggleAttributeCompare,
+                getCheckedAttributesCount: getCheckedAttributesCount,
+                isCompareMode: isCompareMode,
+                setCompareMode: setIsCompareMode,
+                fetchStyleForComparison: fetchStyleForComparison,
             },
             query: {
                 term: queryTermDebounced,

package/dist/hooks/use-polygon-data.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+/** GeoJSON Feature from map-draw (polygon) */
+export type PolygonShape = {
+    id: string;
+    type: "Feature";
+    geometry: {
+        type: string;
+        coordinates: unknown;
+    };
+    properties?: Record<string, unknown>;
+};
+interface PolygonDataContextValue {
+    /** Current drawn polygon features from map-draw */
+    shapes: PolygonShape[];
+    /** Fetch data from backend for current polygon(s). Call after user draws and hits Search. */
+    fetchPolygonData: (searchTerm?: string) => Promise<void>;
+    /** Response data from last successful fetch */
+    polygonData: unknown;
+    /** Loading state while fetch is in progress */
+    loading: boolean;
+    /** Error message from last failed fetch */
+    error: string | null;
+    /** Clear error (e.g. when user retries or draws again) */
+    clearError: () => void;
+}
+export interface PolygonProviderProps {
+    /** Drawn polygon features from useMapDraw().shapes */
+    shapes: PolygonShape[];
+    children: React.ReactNode;
+}
+export declare function PolygonProvider({ shapes, children }: PolygonProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function usePolygonData(): PolygonDataContextValue;
+export {};
+//# sourceMappingURL=use-polygon-data.d.ts.map