Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rewriting to use react query and cleaning up the backend. Closes #25. Closes #31 #112

Merged
merged 9 commits into from
Aug 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions ell-studio/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions ell-studio/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-slot": "^1.1.0",
"@tanstack/react-query": "^5.51.21",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
Expand Down
47 changes: 30 additions & 17 deletions ell-studio/src/App.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,45 @@
import React, { useEffect } from 'react';
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import Sidebar from './components/Sidebar';
import Home from './pages/Home';
import LMP from './pages/LMP';
import Traces from './pages/Traces';
import { ThemeProvider } from './contexts/ThemeContext';
import './styles/globals.css';
import './styles/sourceCode.css';
import refractor from 'refractor'

// Create a client
const queryClient = new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false, // default: true
retry: false, // default: 3
staleTime: 5 * 60 * 1000, // 5 minutes
},
},
});

function App() {
return (
<ThemeProvider>
<Router>
<div className="flex min-h-screen max-h-screen bg-gray-900 text-gray-100">
<Sidebar />
<div className="flex-1 flex flex-col max-h-screen overflow-hidden">
<main className="flex-1 max-h-screen overflow-auto hide-scrollbar">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/lmp/:name/:id?" element={<LMP />} />
<Route path="/traces" element={<Traces />} />
</Routes>
</main>
<QueryClientProvider client={queryClient}>
<ThemeProvider>
<Router>
<div className="flex min-h-screen max-h-screen bg-gray-900 text-gray-100">
<Sidebar />
<div className="flex-1 flex flex-col max-h-screen overflow-hidden">
<main className="flex-1 max-h-screen overflow-auto hide-scrollbar">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/lmp/:name/:id?" element={<LMP />} />
<Route path="/traces" element={<Traces />} />
</Routes>
</main>
</div>
</div>
</div>
</Router>
</ThemeProvider>
</Router>
</ThemeProvider>
</QueryClientProvider>
);
}

Expand Down
65 changes: 63 additions & 2 deletions ell-studio/src/components/HierarchicalTable.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useMemo, useRef, useEffect, useState } from 'react';
import { FiChevronRight, FiChevronDown, FiArrowUp, FiArrowDown } from 'react-icons/fi';
import { FiChevronDown, FiArrowUp, FiArrowDown, FiChevronLeft, FiChevronRight, FiChevronsLeft, FiChevronsRight } from 'react-icons/fi';
import { HierarchicalTableProvider, useHierarchicalTable } from './HierarchicalTableContext';
import { Checkbox } from "components/common/Checkbox"

Expand Down Expand Up @@ -124,7 +124,57 @@ const TableBody = ({ schema, onRowClick, columnWidths, updateWidth, rowClassName
);
};

const HierarchicalTable = ({ schema, data, onRowClick, onSelectionChange, initialSortConfig, rowClassName }) => {
const PaginationControls = ({ currentPage, totalPages, onPageChange, pageSize, totalItems }) => {
// const startItem = currentPage * pageSize + 1;
// const endItem = Math.min((currentPage + 1) * pageSize, totalItems);

return (
<div className="flex justify-between items-center mt-4 text-sm">
<div className="text-gray-400">
{/* Showing {startItem} to {endItem} of {totalItems} items */}
</div>
<div className="flex items-center">
<button
onClick={() => onPageChange(0)}
disabled={currentPage === 0}
className="p-2 rounded-md text-gray-400 hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed"
title="First Page"
>
<FiChevronsLeft />
</button>
<button
onClick={() => onPageChange(currentPage - 1)}
disabled={currentPage === 0}
className="p-2 rounded-md text-gray-400 hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed ml-2"
title="Previous Page"
>
<FiChevronLeft />
</button>
<span className="mx-4 text-gray-400">
Page {currentPage + 1}
</span>
<button
onClick={() => onPageChange(currentPage + 1)}
disabled={currentPage === totalPages - 1}
className="p-2 rounded-md text-gray-400 hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed mr-2"
title="Next Page"
>
<FiChevronRight />
</button>
<button
onClick={() => onPageChange(totalPages - 1)}
disabled={currentPage === totalPages - 1}
className="p-2 rounded-md text-gray-400 hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed"
title="Last Page"
>
<FiChevronsRight />
</button>
</div>
</div>
);
};

const HierarchicalTable = ({ schema, data, onRowClick, onSelectionChange, initialSortConfig, rowClassName, currentPage, onPageChange, pageSize, totalItems }) => {
const [columnWidths, setColumnWidths] = useState({});
const updateWidth = (key, width, maxWidth) => {
setColumnWidths(prev => ({
Expand All @@ -141,6 +191,8 @@ const HierarchicalTable = ({ schema, data, onRowClick, onSelectionChange, initia
setColumnWidths(initialWidths);
}, [schema]);

const totalPages = Math.ceil(totalItems / pageSize);

return (
<HierarchicalTableProvider
data={data}
Expand All @@ -163,6 +215,15 @@ const HierarchicalTable = ({ schema, data, onRowClick, onSelectionChange, initia
/>
</table>
</div>
{onPageChange && (
<PaginationControls
currentPage={currentPage}
totalPages={totalPages}
onPageChange={onPageChange}
pageSize={pageSize}
totalItems={totalItems}
/>
)}
</HierarchicalTableProvider>
);
};
Expand Down
2 changes: 1 addition & 1 deletion ell-studio/src/components/depgraph/LMPCardTitle.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export function LMPCardTitle({
<code className={`px-2 py-1 rounded-md ${lmp.is_lmp ? 'bg-blue-100 text-blue-800' : 'bg-yellow-100 text-yellow-800'} text-${fontSize} font-medium`}>
{lmp.name}()
</code>
{displayVersion && <VersionBadge version={lmp.version_number + 1} lmpId={lmp.id} />}
{displayVersion && <VersionBadge version={lmp.version_number + 1} lmpId={lmp.lmp_id} />}
</div>
);
}
18 changes: 17 additions & 1 deletion ell-studio/src/components/depgraph/graphUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -190,8 +190,9 @@ export const useLayoutedElements = () => {
return [true, { toggle, isRunning }];
}, [initialised]);
};

export function getInitialGraph(lmps, traces) {
const lmpIds = new Set(lmps.map(lmp => lmp.lmp_id));

const initialNodes =
lmps
.filter((x) => !!x)
Expand All @@ -204,6 +205,21 @@ export function getInitialGraph(lmps, traces) {
};
}) || [];

// Create dead nodes for missing LMPs
const deadNodes = lmps
.filter((x) => !!x)
.flatMap((lmp) =>
(lmp.uses || []).filter(use => !lmpIds.has(use)).map(use => ({
id: `${use}`,
type: "lmp",
data: { label: `Unknown LMP (${use})`, lmp: { lmp_id: use, name: `Out of Date LMP (${use})`, version_number: -2 } },
position: { x: 0, y: 0 },
style: { opacity: 0.5 }, // Make dead nodes visually distinct
}))
);

initialNodes.push(...deadNodes);

const initialEdges =
lmps
.filter((x) => !!x)
Expand Down
18 changes: 16 additions & 2 deletions ell-studio/src/components/invocations/InvocationsTable.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,26 @@
import { LMPCardTitle } from '../depgraph/LMPCardTitle';
import HierarchicalTable from '../HierarchicalTable';
import React, { useMemo, useCallback, useEffect } from 'react';
import React, { useMemo, useCallback, useEffect, useState } from 'react';
import { Card } from '../Card';
import { getTimeAgo } from '../../utils/lmpUtils';
import VersionBadge from '../VersionBadge';
import { useNavigate } from 'react-router-dom';
import { lstrCleanStringify } from '../../utils/lstrCleanStringify';

const InvocationsTable = ({ invocations, onSelectTrace, currentlySelectedTrace, omitColumns = [] }) => {
const InvocationsTable = ({ invocations, currentPage, setCurrentPage, pageSize, onSelectTrace, currentlySelectedTrace, omitColumns = [] }) => {
const navigate = useNavigate();



const onClickLMP = useCallback(({lmp, id : invocationId}) => {
navigate(`/lmp/${lmp.name}/${lmp.lmp_id}?i=${invocationId}`);
}, [navigate]);

const isLoading = !invocations;


const traces = useMemo(() => {
if (!invocations) return [];
return invocations.map(inv => ({
name: inv.lmp?.name || 'Unknown',
input: lstrCleanStringify(inv.args.length === 1 ? inv.args[0] : inv.args),
Expand Down Expand Up @@ -107,6 +113,10 @@ const InvocationsTable = ({ invocations, onSelectTrace, currentlySelectedTrace,

const initialSortConfig = { key: 'created_at', direction: 'desc' };

const hasNextPage = traces.length === pageSize;

if (isLoading) return <div>Loading...</div>;

return (
<HierarchicalTable
schema={schema}
Expand All @@ -116,6 +126,10 @@ const InvocationsTable = ({ invocations, onSelectTrace, currentlySelectedTrace,
rowClassName={(item) =>
item.id === currentlySelectedTrace?.id ? 'bg-blue-600 bg-opacity-30' : ''
}
currentPage={currentPage}
onPageChange={setCurrentPage}
pageSize={pageSize}
hasNextPage={hasNextPage}
/>
);
};
Expand Down
Loading
Loading