workign trace graph v2

Author: MadcowD

ell-studio/src/components/DependencyGraphPane.js

@@ -6,7 +6,7 @@ import {DependencyGraph} from './depgraph/DependencyGraph';
 // When changing pages we need to rerender this component (or create a new graph)
 const DependencyGraphPane = ({ lmp, uses }) => {
   const lmps = [lmp, ...uses];
-  console.log(lmps);
+
   return (
    <DependencyGraph lmps={lmps} />
   );

ell-studio/src/components/HierarchicalTable.js

@@ -80,14 +80,14 @@ const TableRow = ({ item, schema, level = 0, onRowClick, columnWidths, updateWid
     }
   }, [isNew]);
 
-  const rowRef = useRef(null);
+  const primaryColumnRef = useRef(null);
 
   useEffect(() => {
-    if (!rowRef.current) return;
+    if (!primaryColumnRef.current) return;
 
     const updatePosition = () => {
-      const tableRect = rowRef.current.closest('table').getBoundingClientRect();
-      const rowRect = rowRef.current.getBoundingClientRect();
+      const tableRect = primaryColumnRef.current.closest('table').getBoundingClientRect();
+      const rowRect = primaryColumnRef.current.getBoundingClientRect();
       const relativeX = rowRect.left - tableRect.left;
       const relativeY = rowRect.top - tableRect.top + rowRect.height / 2;
       setRowRef(item.id, { id: item.id, x: relativeX, y: relativeY, visible: true });
@@ -100,16 +100,15 @@ const TableRow = ({ item, schema, level = 0, onRowClick, columnWidths, updateWid
     const resizeObserver = new ResizeObserver(updatePosition);
 
     // Observe both the row and the table
-    resizeObserver.observe(rowRef.current);
-    resizeObserver.observe(rowRef.current.closest('table'));
+    resizeObserver.observe(primaryColumnRef.current);
+    resizeObserver.observe(primaryColumnRef.current.closest('table'));
 
     // Clean up
     return () => {
       setRowRef(item.id, {visible: false});
       resizeObserver.disconnect();
     };
-  }, [item.id, setRowRef, sortedData.length, expandedRows]);
-
+  }, [item.id, setRowRef, sortedData.length, expandedRows, linkColumn]);
 
   return (
     <React.Fragment>
@@ -158,10 +157,10 @@ const TableRow = ({ item, schema, level = 0, onRowClick, columnWidths, updateWid
                 title={typeof content === 'string' ? content : ''}
               >
                 <div style={{
-                  marginLeft: column.key === linkColumn ? `${level * 20 + 16}px` : 0,
-                  width: column.key === linkColumn ? '100%' : 'auto'
+                  marginLeft: column.key === 'name' ? `${level * 20 + 16}px` : 0,
+                  width: column.key === 'name' ? '100%' : 'auto'
                 }}>
-                <div ref={column.key === linkColumn ? rowRef : null}>
+                <div ref={column.key === linkColumn ? primaryColumnRef : null}>
                   {content}
                 </div>
                 </div>
@@ -299,7 +298,7 @@ const PaginationControls = ({ currentPage, totalPages, onPageChange, pageSize, t
   );
 };
 
-const HierarchicalTable = ({ schema, data, onRowClick, onSelectionChange, initialSortConfig, rowClassName, currentPage, onPageChange, pageSize, totalItems, omitColumns, expandAll, links, linkColumn }) => {
+const HierarchicalTable = ({ schema, data, onRowClick, onSelectionChange, initialSortConfig, rowClassName, currentPage, onPageChange, pageSize, totalItems, omitColumns, expandAll, links, expandedLinkColumn, collapsedLinkColumn }) => {
   const [columnWidths, setColumnWidths] = useState({});
   const [isExpanded, setIsExpanded] = useState(false);
   const [rowRefs, setRowRefs] = useState({});
@@ -352,6 +351,8 @@ const HierarchicalTable = ({ schema, data, onRowClick, onSelectionChange, initia
     return schema;
   }, [schema, omitColumns, isExpanded]);
 
+  const linkColumn = !isExpanded && omitColumns ? collapsedLinkColumn : expandedLinkColumn;
+
 
   return (
     <HierarchicalTableProvider 
@@ -446,7 +447,7 @@ const LinkLines = ({ links, rowRefs, tableOffset }) => {
     if (startRow && endRow && startRow?.visible && endRow?.visible) {
       const isHighlighted = hoveredRow === link.from || 
                             hoveredRow === link.to;
-      const offset = (groupedLinks[link.from].indexOf(link)+ 2) * 5; // Multiply by 20 for spacing
+      const offset = (groupedLinks[link.from].indexOf(link)+ 4) * 3; // Multiply by 20 for spacing
       const color = isHighlighted
         ? (hoveredRow === link.from ? '#f97316' : '#3b82f6')  // Orange if going from, Blue if coming to
         : '#4a5568';

ell-studio/src/components/invocations/InvocationsTable.js

@@ -75,15 +75,9 @@ const InvocationsTable = ({ invocations, currentPage, setCurrentPage, pageSize,
         links.push(...invocation.consumes.map(c => ({
           to: invocation.id,
           from: c
-        })));
+        })).filter(link => link.from !== invocation.id));
       }
 
-      // Recursively add links for child invocations
-      if (invocation.uses) {
-        invocation.uses.forEach(child => {
-          links.push(...generateLinks(child));
-        });
-      }
 
       return links;
     };
@@ -175,13 +169,15 @@ const InvocationsTable = ({ invocations, currentPage, setCurrentPage, pageSize,
 
   if (isLoading) return <div>Loading...</div>;
 
+
   return (
     <HierarchicalTable
       schema={{
         columns: defaultColumns
       }}
       links={links}
-      linkColumn={omitColumns.includes('name') ? 'version' : 'name'}
+      expandedLinkColumn={'name'}
+      collapsedLinkColumn={'version'}
       expandAll={expandAll}
       omitColumns={omitColumns}
       data={invocationTableData}

ell-studio/src/components/source/DiffRenderer.js

@@ -27,7 +27,7 @@ export function DiffRenderer({
   })
 
   const diff = diffLines(previousCode, code);
-  console.log("DIFF", diff)
+
 
   let oldLineNumber = startingLineNumber;
   let newLineNumber = startingLineNumber;

ell-studio/src/hooks/useBackend.js

@@ -58,7 +58,7 @@ export const useLMPs = (name, id) => {
   });
 };
 
-export const useInvocationsFromLMP = (name, id, page = 0, pageSize = 50) => {
+export const useInvocationsFromLMP = (name, id, page = 0, pageSize = 50, hierarchical = false) => {
   return useQuery({
     queryKey: ['invocations', name, id, page, pageSize],
     queryFn: async () => {
@@ -67,7 +67,7 @@ export const useInvocationsFromLMP = (name, id, page = 0, pageSize = 50) => {
       if (name) params.append('lmp_name', name);
       if (id) params.append('lmp_id', id);
       params.append('skip', skip);
-      params.append('hierarchical', false);
+      params.append('hierarchical', hierarchical);
       params.append('limit', pageSize);
       const response = await axios.get(`${API_BASE_URL}/api/invocations?${params.toString()}`);
 

ell-studio/src/pages/LMP.js

@@ -52,7 +52,8 @@ function LMP() {
     name,
     id,
     currentPage,
-    pageSize
+    pageSize,
+    true // dangerous hierarchical query that will not scale to unique invocations
   );
   const { data: uses } = useMultipleLMPs(lmp?.uses);
 

src/ell/stores/sql.py

@@ -159,10 +159,7 @@ def get_lmps(self, skip: int = 0, limit: int = 10, subquery=None, **filters: Opt
 
     def get_invocations(self, lmp_filters: Dict[str, Any], skip: int = 0, limit: int = 10, filters: Optional[Dict[str, Any]] = None, hierarchical: bool = False) -> List[Dict[str, Any]]:
         with Session(self.engine) as session:
-            def fetch_invocation(inv_id, depth=0):
-                if depth > 10:  # Prevent infinite recursion
-                    return None
-
+            def fetch_invocation(inv_id):
                 query = (
                     select(Invocation, SerializedLStr, SerializedLMP)
                     .join(SerializedLMP)
@@ -185,9 +182,8 @@ def fetch_invocation(inv_id, depth=0):
 
                 inv_dict['consumes'] = [r for r in session.exec(consumes_query).all()]
                 inv_dict['consumed_by'] = [r for r in session.exec(consumed_by_query).all()]
+                inv_dict['uses'] = list([d.id for d in inv.uses]) 
 
-                if hierarchical:
-                    inv_dict['uses'] = [fetch_invocation(used.id, depth + 1) for used in inv.uses if used]
 
                 return inv_dict
 
@@ -209,6 +205,16 @@ def fetch_invocation(inv_id, depth=0):
 
             invocations = [fetch_invocation(inv_id) for inv_id in invocation_ids if inv_id]
 
+            if hierarchical:
+                # Fetch all related "uses" invocations
+                used_ids = set()
+                for inv in invocations:
+                    
+                    used_ids.update(inv['uses'])
+
+                used_invocations = [fetch_invocation(inv_id) for inv_id in used_ids if inv_id not in invocation_ids]
+                invocations.extend(used_invocations)
+
             return invocations
 
     def get_traces(self):