hierarchical invocations pt 2

MadcowD · Aug 6, 2024 · b50cc8e · b50cc8e
1 parent 8115a8d
commit b50cc8e
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/ell-studio/src/components/HierarchicalTable.js b/ell-studio/src/components/HierarchicalTable.js
@@ -10,6 +10,7 @@ const TableRow = ({ item, schema, level = 0, onRowClick, columnWidths, updateWid
   const isExpanded = expandedRows[item.id];
   const isSelected = isItemSelected(item);
   const [isNew, setIsNew] = useState(true);
+
 
   const customRowClassName = rowClassName ? rowClassName(item) : '';
 
@@ -43,9 +44,9 @@ const TableRow = ({ item, schema, level = 0, onRowClick, columnWidths, updateWid
             <span onClick={(e) => { e.stopPropagation(); toggleRow(item.id); }}>
               {isExpanded ? <FiChevronDown className="text-gray-400 text-base" /> : <FiChevronRight className="text-gray-400 text-base" />}
             </span>
-          ) : (
+          ) : ( 
             <span className="w-4 h-4 inline-block relative">
-              <span className="absolute left-1/2 top-1/2 w-1.5 h-1.5 bg-gray-500 rounded-full transform -translate-x-1/2 -translate-y-1/2"></span>
+              <span className="absolute left-1/2 top-1/2 w-1.5 h-1.5 bg-gray-600 rounded-full transform -translate-x-1/2 -translate-y-1/2"></span>
             </span>
           )}
         </td>
@@ -189,7 +190,7 @@ const PaginationControls = ({ currentPage, totalPages, onPageChange, pageSize, t
   );
 };
 
-const HierarchicalTable = ({ schema, data, onRowClick, onSelectionChange, initialSortConfig, rowClassName, currentPage, onPageChange, pageSize, totalItems, omitColumns }) => {
+const HierarchicalTable = ({ schema, data, onRowClick, onSelectionChange, initialSortConfig, rowClassName, currentPage, onPageChange, pageSize, totalItems, omitColumns, expandAll }) => {
   const [columnWidths, setColumnWidths] = useState({});
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -230,6 +231,7 @@ const HierarchicalTable = ({ schema, data, onRowClick, onSelectionChange, initia
       onSelectionChange={onSelectionChange}
       initialSortConfig={initialSortConfig}
       setIsExpanded={setIsExpanded}
+      expandAll={expandAll}
     >
       <div className="overflow-x-auto hide-scrollbar">
         <table className="w-full">

diff --git a/ell-studio/src/components/HierarchicalTableContext.js b/ell-studio/src/components/HierarchicalTableContext.js
@@ -4,15 +4,27 @@ const HierarchicalTableContext = createContext();
 
 export const useHierarchicalTable = () => useContext(HierarchicalTableContext);
 
-export const HierarchicalTableProvider = ({ children, data, onSelectionChange, initialSortConfig, setIsExpanded}) => {
+export const HierarchicalTableProvider = ({ children, data, onSelectionChange, initialSortConfig, setIsExpanded, expandAll}) => {
   const [expandedRows, setExpandedRows] = useState({});
   const [selectedRows, setSelectedRows] = useState({});
   const [sortConfig, setSortConfig] = useState(initialSortConfig || { key: null, direction: 'asc' });
   useEffect(() => {
     const allParentRowsCollapsed = data.every(item => !expandedRows[item.id]);
     setIsExpanded(!allParentRowsCollapsed);
   }, [expandedRows, setIsExpanded, data]);
+  // expandall specifies if the initial state of row is expanded.
 
+  // if a rows expansion state is not specified, it is set to expanded if expandAll is true.
+  useEffect(() => {
+    if (expandAll) {
+      data.forEach(item => {
+        if (!(item.id in expandedRows)) {
+          setExpandedRows(prev => ({ ...prev, [item.id]: true }));
+        }
+      });
+    }
+  }, [data, expandAll, expandedRows]);
+
   const toggleRow = useCallback((rowId) => {
     setExpandedRows(prev => ({
       ...prev,

diff --git a/ell-studio/src/components/invocations/InvocationsTable.js b/ell-studio/src/components/invocations/InvocationsTable.js
@@ -7,7 +7,7 @@ import VersionBadge from '../VersionBadge';
 import { useNavigate } from 'react-router-dom';
 import { lstrCleanStringify } from '../../utils/lstrCleanStringify';
 
-const InvocationsTable = ({ invocations, currentPage, setCurrentPage, pageSize, onSelectTrace, currentlySelectedTrace, omitColumns = [] }) => {
+const InvocationsTable = ({ invocations, currentPage, setCurrentPage, pageSize, onSelectTrace, currentlySelectedTrace, omitColumns = [], expandAll = false }) => {
   const navigate = useNavigate();
 
 
@@ -74,7 +74,8 @@ const InvocationsTable = ({ invocations, currentPage, setCurrentPage, pageSize,
           />
         </Card>
       ), 
-      sortable: true
+      sortable: true,
+
     },
     { 
       header: 'Version', 
@@ -127,6 +128,7 @@ const InvocationsTable = ({ invocations, currentPage, setCurrentPage, pageSize,
       schema={{
         columns: defaultColumns
       }}
+      expandAll={expandAll}
       omitColumns={omitColumns}
       data={traces}
       onRowClick={onSelectTrace}

diff --git a/ell-studio/src/pages/Traces.js b/ell-studio/src/pages/Traces.js
@@ -121,6 +121,7 @@ const Traces = () => {
       <InvocationsTable 
         invocations={invocations} 
         currentPage={currentPage}
+        expandAll={true}
         setCurrentPage={setCurrentPage}
         pageSize={pageSize}
         onSelectTrace={handleSelectTrace}