Update app.py

app.py

@@ -432,11 +432,28 @@ class ApplicationFactory:
         """Create the Argilla service."""
         return ArgillaService()
     
+    @staticmethod
+    def cleanup_existing_webhooks(argilla_client):
+        """Clean up existing webhooks to avoid warnings."""
+        try:
+            # Get existing webhooks
+            existing_webhooks = argilla_client.webhooks.list()
+            
+            # Look for our webhook
+            for webhook in existing_webhooks:
+                if "handle_response_created" in getattr(webhook, 'url', ''):
+                    logger.info(f"Removing existing webhook: {webhook.id}")
+                    argilla_client.webhooks.delete(webhook.id)
+                    break
+        except Exception as e:
+            logger.warning(f"Could not clean up webhooks: {e}")
+    
     @classmethod
     def create_webhook_handler(cls, app_state: ApplicationState) -> Callable:
         """Create the webhook handler function."""
         country_service = CountryMappingService()
         
+        # Define the webhook handler
         @webhook_listener(events=["response.created"])
         async def handle_response_created(response, type, timestamp):
             try:
@@ -561,12 +578,29 @@ class ApplicationFactory:
                 outputs=[country_progress]
             )
             
-            # When map_data is updated, reload the D3 script
+            # Alternative approach to load JavaScript without using _js parameter
+            # Create a hidden HTML component to hold our script
+            js_holder = gr.HTML("", visible=False)
+            
+            # When map_data is updated, create a script tag with our D3 code
+            def create_script_tag(data):
+                script_content = MapVisualization.create_d3_script(data)
+                html = f"""
+                <div id="js-executor">
+                    <script>
+                        (async () => {{
+                            const scriptFn = {script_content};
+                            await scriptFn();
+                        }})();
+                    </script>
+                </div>
+                """
+                return html
+                
             map_data.change(
-                fn=lambda data: (None, MapVisualization.create_d3_script(data)),
+                fn=create_script_tag,
                 inputs=map_data,
-                outputs=[None, None],
-                _js=MapVisualization.create_d3_script(app_state.to_json())
+                outputs=js_holder
             )
             
             # Use timer to check for new events and update stats
@@ -575,8 +609,20 @@ class ApplicationFactory:
                 outputs=[events_json, map_data, total_docs_ui, avg_completion_ui, countries_over_50_ui]
             )
             
-            # Initialize D3 on page load
-            demo.load(None, None, None, _js=MapVisualization.create_d3_script(app_state.to_json()))
+            # Initialize D3 on page load using an initial script tag
+            initial_map_script = gr.HTML(
+                f"""
+                <div id="initial-js-executor">
+                    <script>
+                        document.addEventListener('DOMContentLoaded', async () => {{
+                            const scriptFn = {MapVisualization.create_d3_script(app_state.to_json())};
+                            await scriptFn();
+                        }});
+                    </script>
+                </div>
+                """,
+                visible=False
+            )
         
         return demo
 
@@ -590,6 +636,9 @@ def create_application():
     app_state = ApplicationFactory.create_app_state()
     argilla_service = ApplicationFactory.create_argilla_service()
     
+    # Clean up existing webhooks
+    ApplicationFactory.cleanup_existing_webhooks(argilla_service.client)
+    
     # Create and register webhook handler
     webhook_handler = ApplicationFactory.create_webhook_handler(app_state)