zenit-sdk 0.2.0 → 0.2.2

package/dist/react/index.js

@@ -414,6 +414,28 @@ function sanitizeGeoJson(input, debugKey) {
 var import_jsx_runtime = require("react/jsx-runtime");
 var POINT_GEOMETRY_TYPES = /* @__PURE__ */ new Set(["Point", "MultiPoint"]);
 var DEV_MODE = typeof process !== "undefined" && process.env.NODE_ENV !== "production";
+function getPolygonArea(coords) {
+  let area = 0;
+  for (let i = 0; i < coords.length - 1; i++) {
+    area += coords[i][0] * coords[i + 1][1] - coords[i + 1][0] * coords[i][1];
+  }
+  return Math.abs(area / 2);
+}
+function getFeatureArea(feature) {
+  const geom = feature?.geometry;
+  if (!geom?.coordinates) return 0;
+  try {
+    if (geom.type === "Polygon") return getPolygonArea(geom.coordinates[0]);
+    if (geom.type === "MultiPolygon") {
+      return geom.coordinates.reduce(
+        (sum, poly) => sum + getPolygonArea(poly[0]),
+        0
+      );
+    }
+  } catch {
+  }
+  return 0;
+}
 function normalizeBboxFromData(data) {
   const bboxCandidate = data.bbox;
   if (!Array.isArray(bboxCandidate) || bboxCandidate.length < 4) return null;
@@ -515,7 +537,10 @@ var LayerGeoJson = ({
   }, [onEachFeature]);
   const safeData = (0, import_react.useMemo)(() => sanitizeGeoJson(data, String(layerId)), [data, layerId]);
   const features = (0, import_react.useMemo)(() => safeData.features ?? [], [safeData]);
-  const fillFeatures = (0, import_react.useMemo)(() => features.filter(isNonPointGeometry), [features]);
+  const fillFeatures = (0, import_react.useMemo)(
+    () => [...features.filter(isNonPointGeometry)].sort((a, b) => getFeatureArea(b) - getFeatureArea(a)),
+    [features]
+  );
   const pointFeatures = (0, import_react.useMemo)(() => features.filter(isPointGeometry), [features]);
   const dataVersionRef = (0, import_react.useRef)(0);
   const prevSignatureRef = (0, import_react.useRef)("");
@@ -560,7 +585,8 @@ var LayerGeoJson = ({
         return import_leaflet.default.marker(latlng, {
           icon: createPointDivIcon(style, isMobile),
           pane: clusterPaneName,
-          interactive: true
+          interactive: true,
+          bubblingMouseEvents: false
         });
       },
       onEachFeature: (feature, layer) => onEachFeatureRef.current(feature, layer)
@@ -588,7 +614,7 @@ var LayerGeoJson = ({
       {
         data: fillData,
         pane: resolvedFillPane,
-        style: (feature) => styleFn(feature, layerType, baseOpacity),
+        style: (feature) => ({ ...styleFn(feature, layerType, baseOpacity), bubblingMouseEvents: false }),
         onEachFeature: (feature, layer) => {
           onEachFeature(feature, layer);
           onPolygonLabel?.(feature, layer);
@@ -607,7 +633,9 @@ var LayerGeoJson = ({
           }
           return import_leaflet.default.circleMarker(latlng, {
             radius: isMobile ? 8 : 6,
-            ...styleFn(feature, layerType, baseOpacity)
+            ...styleFn(feature, layerType, baseOpacity),
+            bubblingMouseEvents: false,
+            interactive: true
           });
         },
         onEachFeature
@@ -840,6 +868,7 @@ var POPUP_EXCLUDED_KEYS = /* @__PURE__ */ new Set(["geom", "geometry", "_private
 var POPUP_TITLE_KEYS = ["id", "nombre", "name", "title", "titulo", "cluster"];
 var POPUP_BADGE_KEYS = ["tipo", "type", "category", "categoria", "estado", "status"];
 var POPUP_DESCRIPTION_KEYS = ["descripcion", "description", "desc"];
+var POPUP_PRIORITY_KEYS = ["insights", "recomendaciones"];
 var CURRENCY_KEYWORDS = [
   "capital",
   "monto",
@@ -1070,6 +1099,14 @@ function shouldIncludePopupEntry(key, value) {
   if (typeof value === "string" && !value.trim()) return false;
   return true;
 }
+function getPopupPriorityIndex(key) {
+  const normalized = key.trim().toLowerCase();
+  const idx = POPUP_PRIORITY_KEYS.indexOf(normalized);
+  return idx === -1 ? POPUP_PRIORITY_KEYS.length : idx;
+}
+function sortEntriesByPriority(entries) {
+  return [...entries].sort((a, b) => getPopupPriorityIndex(a[0]) - getPopupPriorityIndex(b[0]));
+}
 function createPopupContent(properties) {
   const header = findHeaderProperties(properties);
   const headerText = header.title?.value ?? extractPopupHeader(properties);
@@ -1077,11 +1114,13 @@ function createPopupContent(properties) {
   const badge = header.badge ? getBadgeForProperty(header.badge.key, header.badge.value) : null;
   const colorValue = properties.color;
   const colorBar = typeof colorValue === "string" && isHexColor(colorValue) ? `<div style="height:6px; border-radius:8px; margin:-2px -2px 10px; background:linear-gradient(90deg, ${colorValue}, rgba(255,255,255,0.95));"></div>` : "";
-  const entries = Object.entries(properties).filter(([key, value]) => {
-    if (!shouldIncludePopupEntry(key, value)) return false;
-    if (usedKeys.has(key)) return false;
-    return true;
-  });
+  const entries = sortEntriesByPriority(
+    Object.entries(properties).filter(([key, value]) => {
+      if (!shouldIncludePopupEntry(key, value)) return false;
+      if (usedKeys.has(key)) return false;
+      return true;
+    })
+  );
   if (entries.length === 0) {
     return '<div style="padding:8px 0; color:#64748b; text-align:center;">Sin datos disponibles</div>';
   }
@@ -1127,7 +1166,10 @@ function buildWhitelistedRows(properties, headerSections) {
     return null;
   }
   const { whitelist, modalType } = selection;
-  const entries = applyModalWhitelist(properties, whitelist);
+  const rawEntries = applyModalWhitelist(properties, whitelist);
+  const entries = [...rawEntries].sort(
+    (a, b) => getPopupPriorityIndex(a.matchedKey) - getPopupPriorityIndex(b.matchedKey)
+  );
   if (entries.length === 0) {
     logModalWhitelistDebug({
       modalType,
@@ -1678,6 +1720,39 @@ function isCandidateGeometryType(candidate, allowedTypes) {
   const geometryType = candidate?.geometry?.type;
   return Boolean(geometryType && allowedTypes.has(geometryType));
 }
+function calculatePolygonArea(coords) {
+  let area = 0;
+  for (let i = 0; i < coords.length - 1; i++) {
+    area += coords[i][0] * coords[i + 1][1] - coords[i + 1][0] * coords[i][1];
+  }
+  return Math.abs(area / 2);
+}
+function calculateGeometryArea(geometry) {
+  if (!geometry?.coordinates) return 0;
+  try {
+    if (geometry.type === "Polygon") return calculatePolygonArea(geometry.coordinates[0]);
+    if (geometry.type === "MultiPolygon") {
+      return geometry.coordinates.reduce(
+        (sum, poly) => sum + calculatePolygonArea(poly[0]),
+        0
+      );
+    }
+  } catch {
+  }
+  return 0;
+}
+function calculateLayerAverageArea(features) {
+  if (!features?.length) return 0;
+  try {
+    const total = features.reduce(
+      (sum, f) => sum + (f?.geometry ? calculateGeometryArea(f.geometry) : 0),
+      0
+    );
+    return total / features.length;
+  } catch {
+    return 0;
+  }
+}
 function getFeatureStyleOverrides(feature) {
   const candidate = feature?.properties?._style;
   if (!candidate || typeof candidate !== "object" || Array.isArray(candidate)) return null;
@@ -2039,7 +2114,7 @@ var ZenitMap = (0, import_react5.forwardRef)(({
       );
       if (layerStates && onLayerStateChange) {
         const next = effectiveStates.map(
-          (state) => state.layerId === layerId ? {
+          (state) => isLayerIdMatch(state.layerId, layerId) ? {
             ...state,
             baseOpacity,
             opacity: effectiveOpacity,
@@ -2050,11 +2125,11 @@ var ZenitMap = (0, import_react5.forwardRef)(({
         return;
       }
       setBaseStates(
-        (prev) => prev.map((state) => state.layerId === layerId ? { ...state, baseOpacity } : state)
+        (prev) => prev.map((state) => isLayerIdMatch(state.layerId, layerId) ? { ...state, baseOpacity } : state)
       );
       setUiOverrides((prev) => {
-        const existing = prev.find((entry) => entry.layerId === layerId);
-        const filtered = prev.filter((entry) => entry.layerId !== layerId);
+        const existing = prev.find((entry) => isLayerIdMatch(entry.layerId, layerId));
+        const filtered = prev.filter((entry) => !isLayerIdMatch(entry.layerId, layerId));
         if (existing && existing.overrideVisible !== void 0) {
           return [
             ...filtered,
@@ -2096,13 +2171,18 @@ var ZenitMap = (0, import_react5.forwardRef)(({
       const override = layerGeojsonOverrides[layerKey];
       return {
         ...layer,
-        effective: effectiveStates.find((state) => state.layerId === layer.mapLayer.layerId),
+        effective: effectiveStates.find((state) => isLayerIdMatch(state.layerId, layer.mapLayer.layerId)),
         data: override ?? layerGeojson?.[layer.mapLayer.layerId] ?? layerGeojson?.[layerKey] ?? null
       };
     });
   }, [effectiveStates, layerGeojson, layerGeojsonOverrides, layers]);
   const orderedLayers = (0, import_react5.useMemo)(() => {
-    return [...decoratedLayers].filter((layer) => layer.effective?.visible && layer.data).sort((a, b) => a.displayOrder - b.displayOrder);
+    return [...decoratedLayers].filter((layer) => layer.effective?.visible && layer.data).sort((a, b) => {
+      const aArea = calculateLayerAverageArea(a.data?.features ?? []);
+      const bArea = calculateLayerAverageArea(b.data?.features ?? []);
+      if (aArea !== bArea) return bArea - aArea;
+      return a.displayOrder - b.displayOrder;
+    });
   }, [decoratedLayers]);
   const autoZoomGeojson = (0, import_react5.useMemo)(
     () => orderedLayers.map((layer) => layer.data).filter((collection) => !!collection),
@@ -2155,15 +2235,14 @@ var ZenitMap = (0, import_react5.forwardRef)(({
     (targetMap, targetLayers) => {
       const fillBaseZIndex = 400;
       const pointsBaseZIndex = 750;
-      targetLayers.forEach((layer) => {
-        const order = Number.isFinite(layer.displayOrder) ? layer.displayOrder : 0;
-        const orderOffset = Math.max(0, Math.min(order, 150));
+      const sortedByArea = [...targetLayers].sort((a, b) => (b.averageArea ?? 0) - (a.averageArea ?? 0));
+      sortedByArea.forEach((layer, areaIndex) => {
         const fillPaneName = `zenit-layer-${layer.layerId}-fill`;
         const pointPaneName = `zenit-layer-${layer.layerId}-points`;
         const fillPane = targetMap.getPane(fillPaneName) ?? targetMap.createPane(fillPaneName);
         const pointPane = targetMap.getPane(pointPaneName) ?? targetMap.createPane(pointPaneName);
-        fillPane.style.zIndex = String(fillBaseZIndex + orderOffset);
-        pointPane.style.zIndex = String(pointsBaseZIndex + orderOffset);
+        fillPane.style.zIndex = String(fillBaseZIndex + areaIndex);
+        pointPane.style.zIndex = String(pointsBaseZIndex + areaIndex);
       });
     },
     []
@@ -2186,10 +2265,11 @@ var ZenitMap = (0, import_react5.forwardRef)(({
     }
     const layerTargets = orderedLayers.map((layer) => ({
       layerId: layer.mapLayer.layerId,
-      displayOrder: layer.displayOrder
+      displayOrder: layer.displayOrder,
+      averageArea: calculateLayerAverageArea(layer.data?.features ?? [])
     }));
     if (overlayGeojson) {
-      layerTargets.push({ layerId: "overlay-geojson", displayOrder: 999 });
+      layerTargets.push({ layerId: "overlay-geojson", displayOrder: 999, averageArea: 0 });
     }
     ensureLayerPanes(mapInstance, layerTargets);
     const first = layerTargets[0];
@@ -2239,9 +2319,7 @@ var ZenitMap = (0, import_react5.forwardRef)(({
       });
     }
     layer.on("click", (e) => {
-      if (clickIntent === "point") {
-        import_leaflet4.default.DomEvent.stopPropagation(e);
-      }
+      import_leaflet4.default.DomEvent.stopPropagation(e);
       if (featureInfoMode === "popup" && client && layerId !== void 0 && !extractDescriptionValue(feature?.properties) && feature?.geometry) {
         if (DEV_MODE2) {
           console.debug("[ZenitMap] click/intersect:start", {
@@ -3181,8 +3259,6 @@ var CATALOG_FIELD_BLACKLIST = /* @__PURE__ */ new Set([
   "objectid",
   "OBJECTID",
   "objectId",
-  "gforms",
-  "GFORMS",
   "nomina",
   "NOMINA",
   "shape_area",
@@ -3244,7 +3320,8 @@ var ZenitLayerManager = ({
   onApplyLayerFilter,
   onClearLayerFilter,
   availableFilterLayers = [],
-  filterFieldWhitelist = []
+  filterFieldWhitelist = [],
+  showFiltersTab = true
 }) => {
   const [map, setMap] = (0, import_react8.useState)(null);
   const [loadingMap, setLoadingMap] = (0, import_react8.useState)(false);
@@ -3630,20 +3707,21 @@ var ZenitLayerManager = ({
       controller.abort();
     };
   }, [activeCatalogKey, activeTab, catalogByLayerField, catalogFieldsByLayer, client.layers, extractCatalogFieldMap, filterFieldWhitelist, selectedFilterField, selectedFilterLayer]);
-  const handleApplyFilter = import_react8.default.useCallback(async () => {
-    if (!selectedFilterLayer || !selectedFilterField || !selectedFilterValue || !onApplyLayerFilter) return;
+  const handleApplyFilter = import_react8.default.useCallback(async (valueOverride) => {
+    const value = valueOverride ?? selectedFilterValue;
+    if (!selectedFilterLayer || !selectedFilterField || !value || !onApplyLayerFilter) return;
     setApplyingFilter(true);
     setFilterError(null);
     try {
       await onApplyLayerFilter({
         layerId: selectedFilterLayer.mapLayer.layerId,
         field: selectedFilterField,
-        value: selectedFilterValue
+        value
       });
       setAppliedFilter({
         layerId: selectedFilterLayer.mapLayer.layerId,
         field: selectedFilterField,
-        value: selectedFilterValue
+        value
       });
     } catch (error) {
       const message = error instanceof Error ? error.message : "No se pudo aplicar el filtro";
@@ -4022,7 +4100,7 @@ var ZenitLayerManager = ({
                 ]
               }
             ),
-            !hasPrefilters && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+            !hasPrefilters && showFiltersTab && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               "button",
               {
                 type: "button",
@@ -4057,7 +4135,7 @@ var ZenitLayerManager = ({
         ) }),
         renderLayerCards()
       ] }),
-      !hasPrefilters && activeTab === "filters" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "zlm-filter-panel", style: { display: "flex", flexDirection: "column", gap: 12, background: "#fff", border: "1px solid #e2e8f0", borderRadius: 12, padding: 12 }, children: !filterableLayers.length ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { color: "#64748b", fontSize: 13 }, children: "No hay filtros disponibles para las capas de este mapa." }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      !hasPrefilters && showFiltersTab && activeTab === "filters" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "zlm-filter-panel", style: { display: "flex", flexDirection: "column", gap: 12, background: "#fff", border: "1px solid #e2e8f0", borderRadius: 12, padding: 12 }, children: !filterableLayers.length ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { color: "#64748b", fontSize: 13 }, children: "No hay filtros disponibles para las capas de este mapa." }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
         filterableLayers.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { style: { display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "#475569" }, children: [
           "Capa",
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -4096,7 +4174,10 @@ var ZenitLayerManager = ({
               value: selectedFilterValue,
               placeholder: "Seleccionar\u2026",
               searchPlaceholder: "Buscar valor\u2026",
-              onChange: (nextValue) => setSelectedFilterValue(nextValue),
+              onChange: (nextValue) => {
+                setSelectedFilterValue(nextValue);
+                if (nextValue) handleApplyFilter(nextValue);
+              },
               options: activeCatalogValues,
               disabled: loadingCatalog || activeCatalogValues.length === 0
             }
@@ -4118,7 +4199,7 @@ var ZenitLayerManager = ({
               type: "button",
               className: "zlm-panel-toggle",
               disabled: !selectedFilterValue || applyingFilter || !onApplyLayerFilter,
-              onClick: handleApplyFilter,
+              onClick: () => handleApplyFilter(),
               children: applyingFilter ? "Aplicando\u2026" : "Aplicar"
             }
           ),