https://www.bitstory.ai/assets/js/user_features_clientside.js?m=1763649592.0

1// Clientside helpers for user features (moved from components/user_features.py)
2// This file replaces the inline script previously embedded in user_feature_modals
3
4window.dash_clientside = Object.assign({}, window.dash_clientside || {}, {
5  edit_feature: function (feature_json) {
6    try {
7      // Parse the feature JSON
8      const feature = JSON.parse(feature_json);
9
10      // Store the feature data globally
11      window.selected_feature_data = feature;
12
13      // Find and click the hidden edit trigger button
14      var editButton = document.getElementById('hidden-edit-trigger');
15      if (editButton) {
16        editButton.click();
17      }
18    } catch (e) {
19      console.error('Error parsing feature data:', e);
20    }
21  },
22
23  set_selected_feature: function (feature) {
24    // Store the selected feature data
25    window.selected_feature_data = feature;
26  },
27});
28
29// Monitor GeoJSON data updates
30function monitorGeoJSONData() {
31  const observer = new MutationObserver(function (mutations) {
32    mutations.forEach(function (mutation) {
33      if (mutation.type === 'attributes' && mutation.attributeName === 'data') {
34        const element = mutation.target;
35        if (element.id === 'user_features_geojson') {
36          console.log('📊 GeoJSON data attribute changed!', element);
37          // Try to access the data
38          if (window.dash_clientside && window.dash_clientside.callback_context) {
39            console.log('🔄 Dash callback context available');
40          }
41        }
42      }
43    });
44  });
45
46  const geoJsonElement = document.getElementById('user_features_geojson');
47  if (geoJsonElement) {
48    observer.observe(geoJsonElement, {
49      attributes: true,
50      subtree: true,
51    });
52    console.log('👀 Started monitoring GeoJSON element for data changes');
53  } else {
54    console.log('❌ GeoJSON element not found, retrying in 1 second...');
55    setTimeout(monitorGeoJSONData, 1000);
56  }
57}
58
59// Debug function to check GeoJSON state
60window.debugGeoJSON = function () {
61  const geoJsonElement = document.getElementById('user_features_geojson');
62  if (geoJsonElement) {
63    console.log('🔧 GeoJSON Element:', geoJsonElement);
64    console.log('🔧 GeoJSON Data:', geoJsonElement.data);
65    console.log('🔧 GeoJSON Props:', geoJsonElement.props);
66    console.log('🔧 GeoJSON Children:', geoJsonElement.children);
67  } else {
68    console.log('❌ GeoJSON element not found!');
69  }
70};
71
72// Debug function to check LayersControl
73window.debugLayersControl = function () {
74  console.log('🗂️ Checking LayersControl...');
75
76  // Find all layer control elements
77  const layerControls = document.querySelectorAll('.leaflet-control-layers');
78  console.log('🗂️ Found layer controls:', layerControls.length);
79
80  layerControls.forEach((control, index) => {
81    console.log(`🗂️ Layer Control ${index}:`, control);
82
83    // Check for overlay labels
84    const overlayLabels = control.querySelectorAll('.leaflet-control-layers-overlays label');
85    console.log(`🗂️ Overlay labels in control ${index}:`, overlayLabels.length);
86

87    overlayLabels.forEach((label, labelIndex) => {
88      console.log(`🗂️ Label ${labelIndex}:`, label.textContent, label);
89    });
90  });
91
92  // Check if the layer exists on the map
93  if (window.map && window.map.eachLayer) {
94    console.log('🗺️ Checking map layers...');
95    window.map.eachLayer(function (layer) {
96      console.log('🗺️ Layer found:', layer);
97      if (layer.options && layer.options.attribution) {
98        console.log('🗺️ Layer attribution:', layer.options.attribution);
99      }
100    });
101  }
102};
103
104// Start monitoring when page loads
105if (document.readyState === 'loading') {
106  document.addEventListener('DOMContentLoaded', monitorGeoJSONData);
107} else {
108  monitorGeoJSONData();
109}
110
111// Auto-debug after 5 seconds
112setTimeout(function () {
113  console.log('🔍 Running auto-debug after 5 seconds...');
114  window.debugGeoJSON();
115  window.debugLayersControl();
116}, 5000);
117
118// Also debug after 10 seconds in case layers load later
119setTimeout(function () {
120  console.log('🔍 Running extended debug after 10 seconds...');
121  window.debugLayersControl();
122}, 10000);