Skip to content

Commit

Permalink
sexy
Browse files Browse the repository at this point in the history
  • Loading branch information
@MadcowD
MadcowD committed Aug 12, 2024
1 parent 54979a9 commit 25b5838
Show file tree
Hide file tree
Showing 3 changed files with 163 additions and 164 deletions.
8 changes: 4 additions & 4 deletions ell-studio/src/components/layouts/GenericPageLayout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@ const GenericPageLayout = ({
selectedTrace={selectedTrace}
setSelectedTrace={setSelectedTrace}
showSidebar={showSidebar}
containerClass="flex flex-col h-full"
containerClass="flex flex-col h-full bg-background"
>
<div className="p-6">
<div className="p-6 bg-background">
{children}
</div>
</InvocationsLayout>
</ResizablePanel>
<ResizableHandle withHandle className="my-handle" />
<ResizableHandle withHandle className="my-handle bg-border" />
<ResizablePanel defaultSize={30} minSize={20} className="bg-background" style={{ display: sidebarVisible ? 'block' : 'none' }}>
<ScrollArea className="h-full">
<ScrollArea className="h-full bg-background">
{sidebarContent}
</ScrollArea>
</ResizablePanel>
Expand Down
66 changes: 32 additions & 34 deletions ell-studio/src/pages/Invocations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,24 +145,30 @@ const Invocations = () => {
setSelectedTrace={setSelectedTrace}
sidebarContent={sidebarContent}
>
<div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-semibold text-white flex items-center">
Invocations
</h1>
</div>
<div className="bg-background text-foreground">
<div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-semibold">Invocations</h1>
<div className="flex items-center space-x-2">
<button
className={`px-3 py-1 rounded text-xs ${isPolling ? 'bg-primary text-primary-foreground' : 'bg-secondary text-secondary-foreground'}`}
onClick={togglePolling}
>
{isPolling ? <FiPause className="inline mr-1" /> : <FiPlay className="inline mr-1" />}
{isPolling ? 'Pause' : 'Resume'}
</button>
</div>
</div>

{/* Search bar, advanced filters, and controls */}
<div className="mb-6 space-y-4">
<div className="flex items-center space-x-4">
<div className="flex-grow relative">
<div className="mb-6 flex items-center space-x-4">
<div className="relative flex-grow">
<input
type="text"
placeholder="Search invocations..."
className="w-full bg-[#2d333b] text-white px-4 py-2 rounded-md pl-10"
className="w-full pl-10 pr-4 py-2 bg-input text-foreground rounded-md"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<FiSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
<FiSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
</div>
<button
className="flex items-center px-3 py-2 bg-[#2d333b] text-sm rounded hover:bg-gray-700"
Expand All @@ -171,13 +177,6 @@ const Invocations = () => {
<FiFilter className="mr-2" />
Advanced Filters
</button>
<button
className={`flex items-center px-3 py-2 ${isPolling ? 'bg-blue-600' : 'bg-[#2d333b]'} rounded hover:bg-gray-700`}
onClick={togglePolling}
>
{isPolling ? <FiPause className="mr-2" /> : <FiPlay className="mr-2" />}
{isPolling ? 'Pause Updates' : 'Resume Updates'}
</button>
</div>

{advancedFilters.isOpen && (
Expand Down Expand Up @@ -238,23 +237,22 @@ const Invocations = () => {
</div>
)}

<div className="flex items-center space-x-2 mb-6">
<button className="flex items-center px-2 py-1 bg-secondary text-secondary-foreground text-xs rounded hover:bg-secondary/80">
<FiColumns className="mr-1" />
Columns
</button>
</div>
<InvocationsTable
invocations={filteredInvocations}
currentPage={currentPage}
expandAll={true}
setCurrentPage={setCurrentPage}
pageSize={pageSize}
onSelectTrace={handleSelectTrace}
currentlySelectedTrace={selectedTrace}
/>
</div>

<div className="flex items-center space-x-2 mb-6">
<button className="flex items-center px-2 py-1 bg-[#1c2128] text-xs rounded hover:bg-gray-700">
<FiColumns className="mr-1" />
Columns
</button>
</div>
<InvocationsTable
invocations={filteredInvocations}
currentPage={currentPage}
expandAll={true}
setCurrentPage={setCurrentPage}
pageSize={pageSize}
onSelectTrace={handleSelectTrace}
currentlySelectedTrace={selectedTrace}
/>
</GenericPageLayout>
);
};
Expand Down
253 changes: 127 additions & 126 deletions ell-studio/src/pages/LMP.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,141 +129,142 @@ function LMP() {
setSelectedTrace={setSelectedTrace}
sidebarContent={sidebar}
>
<div className="flex justify-between items-center mb-6">
<h1 className="text-lg flex items-center">
<Link to={`/lmp/${lmp?.name}`}>
<Card>
<LMPCardTitle lmp={lmp} />
</Card>
</Link>
</h1>
</div>
<div className="bg-background text-foreground">
<div className="flex justify-between items-center mb-6">
<h1 className="text-lg flex items-center">
<Link to={`/lmp/${lmp?.name}`}>
<Card className="bg-card text-card-foreground">
<LMPCardTitle lmp={lmp} />
</Card>
</Link>
</h1>
</div>

<main className="overflow-y-auto hide-scrollbar">
<div className="mb-6 bg-card rounded-lg p-4">
<div className="flex justify-between items-center mb-4">
<div className="flex items-center space-x-4">
<h2 className="text-md font-semibold text-card-foreground">Language Model Program</h2>
{(id || requestedInvocationId) && (
<>
<span className="text-muted-foreground mx-2">•</span>
<VersionBadge
version={
id
? lmp?.version_number + 1
: requestedInvocation?.lmp.version_number + 1
}
hash={id ? lmp?.lmp_id : requestedInvocation?.lmp_id}
/>
</>
)}
<main className="overflow-y-auto hide-scrollbar">
<div className="mb-6 bg-card rounded-lg p-4">
<div className="flex justify-between items-center mb-4">
<div className="flex items-center space-x-4">
<h2 className="text-md font-semibold text-card-foreground">Language Model Program</h2>
{(id || requestedInvocationId) && (
<>
<span className="text-muted-foreground mx-2">•</span>
<VersionBadge
version={
id
? lmp?.version_number + 1
: requestedInvocation?.lmp.version_number + 1
}
/>
</>
)}
</div>
<div className="flex space-x-4 items-center">
{previousVersion && (
<>
{viewMode === "Diff" && (
<div className="flex items-center text-sm text-muted-foreground">
<FiGitCommit className="mr-2" />
<span className="mr-2">Comparing to </span>
<VersionBadge
version={previousVersion.version_number + 1}
hash={previousVersion.lmp_id}
className="opacity-40"
/>
</div>
)}
<ToggleSwitch
leftLabel="Source"
rightLabel="Diff"
isRight={viewMode === "Diff"}
onToggle={handleViewModeToggle}
/>
</>
)}
<button
className="p-1 rounded bg-secondary hover:bg-secondary/80 transition-colors"
onClick={handleCopyCode}
>
<FiCopy className="w-4 h-4" />
</button>
</div>
</div>
<div className="flex space-x-4 items-center">
{previousVersion && (
<>
{viewMode === "Diff" && (
<div className="flex items-center text-sm text-muted-foreground">
<FiGitCommit className="mr-2" />
<span className="mr-2">Comparing to </span>
<VersionBadge
version={previousVersion.version_number + 1}
hash={previousVersion.lmp_id}
className="opacity-40"
/>
</div>
)}
<ToggleSwitch
leftLabel="Source"
rightLabel="Diff"
isRight={viewMode === "Diff"}
onToggle={handleViewModeToggle}
/>
</>
)}
<button
className="p-1 rounded bg-secondary hover:bg-secondary/80 transition-colors"
onClick={handleCopyCode}
>
<FiCopy className="w-4 h-4" />
</button>
<div className="overflow-hidden">
<LMPSourceView
lmp={lmp}
selectedInvocation={selectedTrace}
showDependenciesInitial={!!id}
previousVersion={previousVersion}
viewMode={previousVersion ? viewMode : "Source"}
/>
</div>
</div>
<div className="overflow-hidden">
<LMPSourceView
lmp={lmp}
selectedInvocation={selectedTrace}
showDependenciesInitial={!!id}
previousVersion={previousVersion}
viewMode={previousVersion ? viewMode : "Source"}
/>
</div>
</div>

<div className="mb-6">
<div className="flex border-b border-border">
{["Runs", "Version History"].map((tab) => (
<button
key={tab}
className={`px-4 py-2 focus:outline-none ${
activeTab === tab.toLowerCase().replace(" ", "_")
? "text-primary border-b-2 border-primary font-medium"
: "text-muted-foreground hover:text-foreground"
}`}
onClick={() =>
setActiveTab(tab.toLowerCase().replace(" ", "_"))
}
>
{tab}
</button>
))}
</div>
<div className="mb-6">
<div className="flex border-b border-border">
{["Runs", "Version History"].map((tab) => (
<button
key={tab}
className={`px-4 py-2 focus:outline-none ${
activeTab === tab.toLowerCase().replace(" ", "_")
? "text-primary border-b-2 border-primary font-medium"
: "text-muted-foreground hover:text-foreground"
}`}
onClick={() =>
setActiveTab(tab.toLowerCase().replace(" ", "_"))
}
>
{tab}
</button>
))}
</div>

<div className="mt-4">
{activeTab === "runs" && (
<>
<div className="flex justify-between items-center mb-4">
<div className="flex space-x-2">
<button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors flex items-center">
<FiFilter className="mr-1" /> 1 filter
</button>
<button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors">
Last 7 days
</button>
<button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors">
Root Runs
</button>
<button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors">
LLM Calls
</button>
<button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors">
All Runs
<div className="mt-4">
{activeTab === "runs" && (
<>
<div className="flex justify-between items-center mb-4">
<div className="flex space-x-2">
<button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors flex items-center">
<FiFilter className="mr-1" /> 1 filter
</button>
<button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors">
Last 7 days
</button>
<button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors">
Root Runs
</button>
<button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors">
LLM Calls
</button>
<button className="px-3 py-1 bg-secondary text-secondary-foreground rounded text-xs hover:bg-secondary/80 transition-colors">
All Runs
</button>
</div>
<button className="p-1 rounded bg-secondary hover:bg-secondary/80 transition-colors">
<FiColumns className="w-4 h-4" />
</button>
</div>
<button className="p-1 rounded bg-secondary hover:bg-secondary/80 transition-colors">
<FiColumns className="w-4 h-4" />
</button>
</div>
<InvocationsTable
invocations={invocations}
currentPage={currentPage}
pageSize={pageSize}
setCurrentPage={setCurrentPage}
producingLmp={lmp}
onSelectTrace={(trace) => {
setSelectedTrace(trace);
setSearchParams({ i: trace.id });
}}
currentlySelectedTrace={selectedTrace}
omitColumns={omitColumns}
/>
</>
)}
{activeTab === "version_history" && (
<VersionHistoryPane versions={versionHistory} />
)}
<InvocationsTable
invocations={invocations}
currentPage={currentPage}
pageSize={pageSize}
setCurrentPage={setCurrentPage}
producingLmp={lmp}
onSelectTrace={(trace) => {
setSelectedTrace(trace);
setSearchParams({ i: trace.id });
}}
currentlySelectedTrace={selectedTrace}
omitColumns={omitColumns}
/>
</>
)}
{activeTab === "version_history" && (
<VersionHistoryPane versions={versionHistory} />
)}
</div>
</div>
</div>
</main>
</main>
</div>
</GenericPageLayout>
);
}
Expand Down

0 comments on commit 25b5838

Please sign in to comment.