Skip to content

Commit

Permalink
Merge pull request #136 from MadcowD/wguss/tehming
Browse files Browse the repository at this point in the history 
Better theming
  • Loading branch information
@MadcowD
MadcowD authored Aug 12, 2024
2 parents 05ea5c0 + a35bb9e commit fb96466
Show file tree
Hide file tree
Showing 14 changed files with 540 additions and 481 deletions.
38 changes: 0 additions & 38 deletions ell-studio/src/App.css
View file

This file was deleted.

203 changes: 118 additions & 85 deletions ell-studio/src/components/LMPDetailsSidePanel.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
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, FiZap, FiHash, FiChevronRight, FiCode } from 'react-icons/fi';
import { getTimeAgo } from '../utils/lmpUtils';
import VersionBadge from './VersionBadge';
import { useInvocationsFromLMP } from '../hooks/useBackend';
import { LMPCardTitle } from './depgraph/LMPCardTitle';
import { format } from 'date-fns';
import SidePanel from './common/SidePanel';
import StatItem from './common/StatItem';
import MetricCard from './common/MetricCard';
import MetricChart from './MetricChart';
import { motion } from 'framer-motion';
import {Card} from './common/Card';

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

return (
<SidePanel title="LMP Details">
<div className="bg-[#21242c] p-3 rounded-md shadow-sm mb-4">
<div className="flex justify-between items-center mb-2">
<h3 className="text-sm font-medium text-gray-300">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-2 text-sm"
>
<div className="bg-card p-2 rounded">
<div className="flex justify-between items-center mb-1">
<h3 className="text-sm 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-y-0.5">
<div className="flex items-center">
<FiClock className="mr-1 text-muted-foreground" size={12} />
<span className="text-muted-foreground">Created:</span>
</div>
<div className="text-right">{getTimeAgo(new Date(lmp.created_at))}</div>
<div className="flex items-center">
<FiTag className="mr-1 text-muted-foreground" size={12} />
<span className="text-muted-foreground">Is LMP:</span>
</div>
<div className="text-right">{lmp.is_lm ? 'Yes' : 'No'}</div>
<div className="flex items-center">
<FiZap className="mr-1 text-muted-foreground" size={12} />
<span className="text-muted-foreground">Invocations:</span>
</div>
<div className="text-right">{totalInvocations}</div>
<div className="flex items-center">
<FiHash className="mr-1 text-muted-foreground" size={12} />
<span className="text-muted-foreground">Avg. Latency:</span>
</div>
<div className="text-right">{avgLatency.toFixed(2)}ms</div>
</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-[#21242c] p-3 rounded-md shadow-sm mb-4">
<h3 className="text-sm font-medium text-gray-300 mb-2">LM Keywords</h3>
<pre className="overflow-x-auto text-xs text-gray-400 bg-[#2a2f3a] p-2 rounded">
<code>{JSON.stringify(lmp.lm_kwargs, null, 2)}</code>
</pre>
</div>
)}

<div className="bg-[#21242c] p-3 rounded-md shadow-sm mb-4">
<h3 className="text-sm font-medium text-gray-300 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-blue-400 hover:text-blue-300 transition-colors">
<LMPCardTitle lmp={use} displayVersion scale={50} shortVersion={true} />
</Link>
</li>
))}
</ul>
) : (
<p className="text-xs text-gray-400">No dependencies</p>
{lmp.lm_kwargs && (
<div className="bg-card p-2 rounded">
<h3 className="text-sm font-semibold text-card-foreground mb-1 flex items-center">
<FiCode className="mr-1" size={14} /> LM Keywords
</h3>
<pre className="overflow-x-auto text-xs text-muted-foreground bg-muted p-1 rounded">
<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-2 rounded">
<h3 className="text-sm font-semibold text-card-foreground mb-1">Uses</h3>
{uses && uses.length > 0 ? (
<ul className="space-y-0.5">
{uses.filter(use => !!use).map((use) => (
<motion.li
key={use.lmp_id}
whileHover={{ scale: 1.01 }}
className=" p-0.5 rounded"
>
<Link to={`/lmp/${use.name}/${use.lmp_id}`} className="text-primary hover:text-primary/80 transition-colors">
<Card>
<LMPCardTitle lmp={use} displayVersion scale={50} />
</Card>
</Link>
</motion.li>
))}
</ul>
) : (
<p className="text-muted-foreground">No dependencies</p>
)}
</div>

<MetricCard
title="Latency"
rawData={chartData}
dataKey="latency"
color="#82ca9d"
aggregation="avg"
yAxisLabel="ms"
/>
<MetricChart
title="Invocations"
rawData={chartData}
dataKey="count"
color="#8884d8"
yAxisLabel="Count"
/>

<div className="bg-[#21242c] p-3 rounded-md shadow-sm mt-4">
<h3 className="text-sm font-medium text-gray-300 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-blue-900 bg-opacity-30'
: 'hover:bg-[#2a2f3a]'
}`}
>
<div className="flex justify-between items-center">
<span className={`font-medium ${
version.lmp_id === lmp.lmp_id ? 'text-blue-400' : 'text-gray-300'
}`}>
v{versionHistory.length - index}
</span>
<span className="text-gray-500">
<FiCalendar className="inline mr-1" size={10} />
{format(new Date(version.created_at), 'MMM d, yyyy')}
</span>
</div>
{version.commit_message && (
<p className="text-gray-500 mt-1 truncate">
<FiGitCommit className="inline mr-1" size={10} />
{version.commit_message}
</p>
)}
</Link>
))}
</div>
</div>
<MetricChart
title="Latency"
rawData={chartData}
dataKey="latency"
color="#82ca9d"
aggregation="avg"
yAxisLabel="ms"
/>
{/*
<div className="bg-card p-2 rounded">
<h3 className="text-sm font-semibold text-card-foreground mb-1">Version History</h3>
<div className="space-y-0.5 max-h-40 overflow-y-auto pr-1">
{versionHistory.map((version, index) => (
<motion.div
key={version.lmp_id}
whileHover={{ scale: 1.01 }}
className={`p-0.5 rounded ${
version.lmp_id === lmp.lmp_id
? 'bg-primary/10 border-l-2 border-primary'
: 'bg-muted hover:bg-muted/80'
}`}
>
<Link to={`/lmp/${version.name}/${version.lmp_id}`} className="block">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-1">
<span className="font-semibold">v{versionHistory.length - index}</span>
<span className="text-xs text-muted-foreground">
{format(new Date(version.created_at), 'MMM d, yyyy HH:mm')}
</span>
</div>
<FiChevronRight className="text-muted-foreground" size={12} />
</div>
{version.commit_message && (
<p className="text-xs text-muted-foreground truncate">
{version.commit_message}
</p>
)}
</Link>
</motion.div>
))}
</div>
</div> */}
</motion.div>
</SidePanel>
);
}
Expand Down
Loading

0 comments on commit fb96466

Please sign in to comment.