Skip to content

Commit

Permalink
better sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@MadcowD
MadcowD committed Aug 12, 2024
1 parent 5532465 commit 45a6d59
Show file tree
Hide file tree
Showing 4 changed files with 195 additions and 199 deletions.
180 changes: 98 additions & 82 deletions ell-studio/src/components/LMPDetailsSidePanel.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useMemo } from 'react';
import { Link } from 'react-router-dom';
import { FiClock, FiTag, FiGitCommit, FiZap, FiHash, FiCalendar } from 'react-icons/fi';
import { FiClock, FiTag, FiGitCommit, FiZap, FiHash, FiCalendar, FiChevronRight } from 'react-icons/fi';
import { getTimeAgo } from '../utils/lmpUtils';
import VersionBadge from './VersionBadge';
import { useInvocationsFromLMP } from '../hooks/useBackend';
Expand All @@ -9,6 +9,7 @@ import { format } from 'date-fns';
import SidePanel from './common/SidePanel';
import StatItem from './common/StatItem';
import MetricCard from './common/MetricCard';
import { motion } from 'framer-motion';

function LMPDetailsSidePanel({ lmp, uses, versionHistory }) {
const { data: invocations } = useInvocationsFromLMP(lmp.name, lmp.lmp_id, 0, 100);
Expand All @@ -33,94 +34,109 @@ function LMPDetailsSidePanel({ lmp, uses, versionHistory }) {

return (
<SidePanel title="LMP Details">
<div className="bg-card p-3 rounded-md shadow-sm mb-4">
<div className="flex justify-between items-center mb-2">
<h3 className="text-sm font-medium text-card-foreground">Version</h3>
<VersionBadge version={lmp.version_number + 1} hash={lmp.lmp_id} />
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
className="space-y-6"
>
<div className="bg-card p-4 rounded-lg shadow-md">
<div className="flex justify-between items-center mb-4">
<h3 className="text-lg font-semibold text-card-foreground">Version Info</h3>
<VersionBadge version={lmp.version_number + 1} hash={lmp.lmp_id} />
</div>
<div className="grid grid-cols-2 gap-4">
<StatItem icon={FiClock} label="Created" value={getTimeAgo(new Date(lmp.created_at))} />
<StatItem icon={FiTag} label="Is LMP" value={lmp.is_lm ? 'Yes' : 'No'} />
<StatItem icon={FiZap} label="Total Invocations" value={totalInvocations} />
<StatItem icon={FiHash} label="Avg. Latency" value={`${avgLatency.toFixed(2)}ms`} />
</div>
</div>
<StatItem icon={FiClock} label="Created" value={getTimeAgo(new Date(lmp.created_at))} />
<StatItem icon={FiTag} label="Is LMP" value={lmp.is_lm ? 'Yes' : 'No'} />
<StatItem icon={FiZap} label="Total Invocations" value={totalInvocations} />
<StatItem icon={FiHash} label="Avg. Latency" value={`${avgLatency.toFixed(2)}ms`} />
</div>

{lmp.lm_kwargs && (
<div className="bg-card p-3 rounded-md shadow-sm mb-4">
<h3 className="text-sm font-medium text-card-foreground mb-2">LM Keywords</h3>
<pre className="overflow-x-auto text-xs text-muted-foreground bg-muted p-2 rounded">
<code>{JSON.stringify(lmp.lm_kwargs, null, 2)}</code>
</pre>
</div>
)}

<div className="bg-card p-3 rounded-md shadow-sm mb-4">
<h3 className="text-sm font-medium text-card-foreground mb-2">Uses</h3>
{uses && uses.length > 0 ? (
<ul className="space-y-1">
{uses.filter(use => !!use).map((use) => (
<li key={use.lmp_id} className="text-xs">
<Link to={`/lmp/${use.name}/${use.lmp_id}`} className="text-primary hover:text-primary/80 transition-colors">
<LMPCardTitle lmp={use} displayVersion scale={50} shortVersion={true} />
</Link>
</li>
))}
</ul>
) : (
<p className="text-xs text-muted-foreground">No dependencies</p>
{lmp.lm_kwargs && (
<div className="bg-card p-4 rounded-lg shadow-md">
<h3 className="text-lg font-semibold text-card-foreground mb-3">LM Keywords</h3>
<pre className="overflow-x-auto text-sm text-muted-foreground bg-muted p-3 rounded-md">
<code>{JSON.stringify(lmp.lm_kwargs, null, 2)}</code>
</pre>
</div>
)}
</div>

<MetricCard
title="Invocations"
rawData={chartData}
dataKey="count"
color="#8884d8"
yAxisLabel="Count"
/>
<div className="bg-card p-4 rounded-lg shadow-md">
<h3 className="text-lg font-semibold text-card-foreground mb-3">Uses</h3>
{uses && uses.length > 0 ? (
<ul className="space-y-2">
{uses.filter(use => !!use).map((use) => (
<motion.li
key={use.lmp_id}
whileHover={{ scale: 1.02 }}
className="text-sm bg-muted p-2 rounded-md"
>
<Link to={`/lmp/${use.name}/${use.lmp_id}`} className="text-primary hover:text-primary/80 transition-colors">
<LMPCardTitle lmp={use} displayVersion scale={50} shortVersion={true} />
</Link>
</motion.li>
))}
</ul>
) : (
<p className="text-sm text-muted-foreground">No dependencies</p>
)}
</div>

<MetricCard
title="Invocations"
rawData={chartData}
dataKey="count"
color="#8884d8"
yAxisLabel="Count"
/>

<MetricCard
title="Latency"
rawData={chartData}
dataKey="latency"
color="#82ca9d"
aggregation="avg"
yAxisLabel="ms"
/>
<MetricCard
title="Latency"
rawData={chartData}
dataKey="latency"
color="#82ca9d"
aggregation="avg"
yAxisLabel="ms"
/>

<div className="bg-card p-3 rounded-md shadow-sm mt-4">
<h3 className="text-sm font-medium text-card-foreground mb-2">Version History</h3>
<div className="space-y-2 max-h-48 overflow-y-auto pr-2">
{versionHistory.map((version, index) => (
<Link
key={version.lmp_id}
to={`/lmp/${version.name}/${version.lmp_id}`}
className={`block p-2 rounded text-xs ${
version.lmp_id === lmp.lmp_id
? 'bg-primary/10'
: 'hover:bg-muted'
}`}
>
<div className="flex justify-between items-center">
<span className={`font-medium ${
version.lmp_id === lmp.lmp_id ? 'text-primary' : 'text-muted-foreground'
}`}>
v{versionHistory.length - index}
</span>
<span className="text-muted-foreground">
<FiCalendar className="inline mr-1" size={10} />
{format(new Date(version.created_at), 'MMM d, yyyy')}
</span>
</div>
{version.commit_message && (
<p className="text-muted-foreground mt-1 truncate">
<FiGitCommit className="inline mr-1" size={10} />
{version.commit_message}
</p>
)}
</Link>
))}
<div className="bg-card p-4 rounded-lg shadow-md">
<h3 className="text-lg font-semibold text-card-foreground mb-3">Version History</h3>
<div className="space-y-2 max-h-64 overflow-y-auto pr-2">
{versionHistory.map((version, index) => (
<motion.div
key={version.lmp_id}
whileHover={{ scale: 1.02 }}
className={`p-3 rounded-md text-sm ${
version.lmp_id === lmp.lmp_id
? 'bg-primary/10'
: 'bg-muted hover:bg-muted/80'
}`}
>
<Link to={`/lmp/${version.name}/${version.lmp_id}`} className="block">
<div className="flex justify-between items-center">
<span className={`font-medium ${
version.lmp_id === lmp.lmp_id ? 'text-primary' : 'text-card-foreground'
}`}>
v{versionHistory.length - index}
</span>
<span className="text-muted-foreground">
<FiCalendar className="inline mr-1" size={12} />
{format(new Date(version.created_at), 'MMM d, yyyy')}
</span>
</div>
{version.commit_message && (
<p className="text-muted-foreground mt-1 truncate">
<FiGitCommit className="inline mr-1" size={12} />
{version.commit_message}
</p>
)}
</Link>
</motion.div>
))}
</div>
</div>
</div>
</motion.div>
</SidePanel>
);
}
Expand Down
Loading

0 comments on commit 45a6d59

Please sign in to comment.