fix: enhance data source initialization and prevent state updates on unmounted components; update SimpleViewRenderer to accept dataSource prop

Author: hotlong

apps/console/src/App.tsx

@@ -44,35 +44,46 @@ export function AppContent() {
   // Branding is now applied by AppShell via ConsoleLayout
 
   useEffect(() => {
-    initializeDataSource();
-  }, []);
+    let cancelled = false;
 
-  async function initializeDataSource() {
-    try {
-      const adapter = new ObjectStackAdapter({
-        baseUrl: '',
-        autoReconnect: true,
-        maxReconnectAttempts: 5,
-        reconnectDelay: 1000,
-        cache: { maxSize: 50, ttl: 300_000 },
-      });
+    async function initializeDataSource() {
+      try {
+        const adapter = new ObjectStackAdapter({
+          baseUrl: '',
+          autoReconnect: true,
+          maxReconnectAttempts: 5,
+          reconnectDelay: 1000,
+          cache: { maxSize: 50, ttl: 300_000 },
+        });
 
-      // Monitor connection state
-      adapter.onConnectionStateChange((event) => {
-        setConnectionState(event.state);
-        if (event.error) {
-          console.error('[Console] Connection error:', event.error);
-        }
-      });
+        // Monitor connection state
+        adapter.onConnectionStateChange((event) => {
+          if (cancelled) return;
+          setConnectionState(event.state);
+          if (event.error) {
+            console.error('[Console] Connection error:', event.error);
+          }
+        });
 
-      await adapter.connect();
+        await adapter.connect();
 
-      setDataSource(adapter);
-    } catch (err) {
-      console.error('[Console] Failed to initialize:', err);
-      setConnectionState('error');
+        if (!cancelled) {
+          setDataSource(adapter);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          console.error('[Console] Failed to initialize:', err);
+          setConnectionState('error');
+        }
+      }
     }
-  }
+
+    initializeDataSource();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
 
   const allObjects = appConfig.objects || [];
 

packages/plugin-dashboard/src/DashboardRenderer.tsx

@@ -21,14 +21,14 @@ const CHART_COLORS = [
 ];
 
 export const DashboardRenderer = forwardRef<HTMLDivElement, { schema: DashboardSchema; className?: string; [key: string]: any }>(
-  ({ schema, className, ...props }, ref) => {
+  ({ schema, className, dataSource, ...props }, ref) => {
     const columns = schema.columns || 4; // Default to 4 columns for better density
     const gap = schema.gap || 4;
 
     return (
-      <div 
-        ref={ref} 
-        className={cn("grid auto-rows-min", className)} 
+      <div
+        ref={ref}
+        className={cn("grid auto-rows-min", className)}
         style={{
             gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
             gap: `${gap * 0.25}rem`

packages/plugin-view/src/index.tsx

@@ -165,7 +165,7 @@ ComponentRegistry.register('sort-ui', SortUI, {
 });
 
 // Simple View Renderer (Container)
-const SimpleViewRenderer: React.FC<any> = ({ schema, className, children, ...props }) => {
+const SimpleViewRenderer: React.FC<any> = ({ schema, className, children, dataSource, ...props }) => {
   // If columns prop is present, use grid layout
   const style = schema.props?.columns 
     ? { display: 'grid', gridTemplateColumns: `repeat(${schema.props.columns}, 1fr)`, gap: '1rem' }