prevent graph from reloading

Author: MadcowD

ell-studio/src/pages/Home.js

@@ -1,15 +1,17 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { useTheme } from '../contexts/ThemeContext';
 import { getTimeAgo } from '../utils/lmpUtils';
 import { DependencyGraph } from '../components/depgraph/DependencyGraph';
 import { useLatestLMPs, useTraces } from '../hooks/useBackend';
 import VersionBadge from '../components/VersionBadge';
+const MemoizedDependencyGraph = React.memo(DependencyGraph);
 function Home() {
   const [expandedLMP, setExpandedLMP] = useState(null);
   const { darkMode } = useTheme();
   const { data: lmps, isLoading: isLoadingLMPs } = useLatestLMPs();
   const { data: traces, isLoading: isLoadingTraces } = useTraces(lmps);
+  
 
   const toggleExpand = (lmpName, event) => {
     if (event.target.tagName.toLowerCase() !== 'a') {
@@ -21,7 +23,22 @@ function Home() {
     return id.length > 8 ? `${id.substring(0, 8)}...` : id;
   };
 
-  if (isLoadingLMPs || isLoadingTraces) {
+  const [firstTraces, setFirstTraces] = useState(traces);
+  const [firstLMPs, setFirstLMPs] = useState(lmps);
+
+  useEffect(() => {
+    if((!firstTraces || !firstLMPs) && traces && lmps) {
+      console.log("Setting first traces and lmps");
+      setFirstTraces(traces);
+      setFirstLMPs(lmps);
+    }
+  }, [traces, firstTraces, lmps, firstLMPs]);
+  
+  // TODO: Make graph dynamically update.
+  const memoizedTraces = useMemo(() => firstTraces, [firstTraces]);
+  const memoizedLMPs = useMemo(() => firstLMPs, [firstLMPs]);
+
+  if (!memoizedLMPs || !memoizedTraces) {
     return <div className={`bg-${darkMode ? 'gray-900' : 'gray-100'} min-h-screen flex items-center justify-center`}>
       <p className={`text-${darkMode ? 'white' : 'black'}`}>Loading...</p>
     </div>;
@@ -31,7 +48,7 @@ function Home() {
     <div className={`bg-${darkMode ? 'gray-900' : 'gray-100'} min-h-screen`}>
       <div className="container mx-auto px-4 py-8">
         <h1 className={`text-3xl font-bold mb-6 ${darkMode ? 'text-gray-100' : 'text-gray-800'}`}>Language Model Programs</h1>
-        {lmps && traces && <DependencyGraph lmps={lmps} traces={traces}/>}
+       <MemoizedDependencyGraph lmps={memoizedLMPs} traces={memoizedTraces} key={memoizedLMPs.length + memoizedTraces.length}/>
         <div className="space-y-4">
           {lmps.map((lmp) => (
             <div 

src/ell/studio/__main__.py

@@ -6,7 +6,7 @@
 from fastapi.staticfiles import StaticFiles
 from fastapi.responses import FileResponse
 from watchfiles import awatch
-
+import time
 
 def main():
     parser = ArgumentParser(description="ELL Studio Data Server")
@@ -30,20 +30,48 @@ async def serve_react_app(full_path: str):
 
     db_path = os.path.join(args.storage_dir, "ell.db")
 
-    async def db_watcher():
-        async for changes in awatch(db_path):
-            print(f"Database changed: {changes}")
-            await app.notify_clients("database_updated")
+    async def db_watcher(db_path, app):
+        last_stat = None
 
-    # Start the database watcher
+        while True:
+            await asyncio.sleep(0.1)  # Fixed interval of 0.1 seconds
+            try:
+                current_stat = os.stat(db_path)
+                
+                if last_stat is None:
+                    print(f"Database file found: {db_path}")
+                    await app.notify_clients("database_updated")
+                else:
+                    # Use a threshold for time comparison to account for filesystem differences
+                    time_threshold = 1  # 1 second threshold
+                    time_changed = abs(current_stat.st_mtime - last_stat.st_mtime) > time_threshold
+                    size_changed = current_stat.st_size != last_stat.st_size
+                    inode_changed = current_stat.st_ino != last_stat.st_ino
 
+                    if time_changed or size_changed or inode_changed:
+                        print(f"Database changed: mtime {time.ctime(last_stat.st_mtime)} -> {time.ctime(current_stat.st_mtime)}, "
+                              f"size {last_stat.st_size} -> {current_stat.st_size}, "
+                              f"inode {last_stat.st_ino} -> {current_stat.st_ino}")
+                        await app.notify_clients("database_updated")
+                
+                last_stat = current_stat
+            except FileNotFoundError:
+                if last_stat is not None:
+                    print(f"Database file deleted: {db_path}")
+                    await app.notify_clients("database_updated")
+                last_stat = None
+                await asyncio.sleep(1)  # Wait a bit longer if the file is missing
+            except Exception as e:
+                print(f"Error checking database file: {e}")
+                await asyncio.sleep(1)  # Wait a bit longer on errors
 
+    # Start the database watcher
     loop = asyncio.new_event_loop()
 
     config = uvicorn.Config(app=app, port=args.port, loop=loop)
     server = uvicorn.Server(config)
     loop.create_task(server.serve())
-    loop.create_task(db_watcher())
+    loop.create_task(db_watcher(db_path, app))
     loop.run_forever()
 
 if __name__ == "__main__":