Skip to content

Commit

Permalink
Merge branch 'MadcowD:main' into pubsub
Browse files Browse the repository at this point in the history
  • Loading branch information
@alex-dixon
alex-dixon authored Aug 23, 2024
2 parents e4f1525 + 0832cdc commit 1fa16d7
Show file tree
Hide file tree
Showing 22 changed files with 785 additions and 698 deletions.
10 changes: 5 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
# `ell` [WIP, unreleased, experimental]

[![](https://dcbadge.limes.pink/api/server/Yqyga6Qr?style=flat)](https://discord.gg/Yqyga6Qr)
[![](https://dcbadge.limes.pink/api/server/Yqyga6Qr?style=flat)](https://discord.gg/Yqyga6Qr)
[![](https://dcbadge.limes.pink/api/server/Yqyga6Qr?style=flat)](https://discord.gg/Yqyga6Qr)
[![](https://dcbadge.limes.pink/api/server/Yqyga6Qr?style=flat)](https://discord.gg/Yqyga6Qr)
[![](https://dcbadge.limes.pink/api/server/vWntgU52Xb?style=flat)](https://discord.gg/vWntgU52Xb)
[![](https://dcbadge.limes.pink/api/server/vWntgU52Xb?style=flat)](https://discord.gg/vWntgU52Xb)
[![](https://dcbadge.limes.pink/api/server/vWntgU52Xb?style=flat)](https://discord.gg/vWntgU52Xb)
[![](https://dcbadge.limes.pink/api/server/vWntgU52Xb?style=flat)](https://discord.gg/vWntgU52Xb)

> **IMPORTANT**: This repository is currently pre-v1.0, highly experimental, and not yet packaged for general use. It contains numerous bugs, and the schemas are subject to frequent changes. While we welcome contributions, please be aware that submitting pull requests at this stage is at your own discretion, as the codebase is rapidly evolving.
> **[JOIN THE DISCORD](https://discord.gg/Yqyga6Qr)** We are developing this in public and I want all hands on deck regarding design decisions! Join us at [https://discord.gg/Yqyga6Qr](https://discord.gg/Yqyga6Qr)
> **[JOIN THE DISCORD](https://discord.gg/vWntgU52Xb)** We are developing this in public and I want all hands on deck regarding design decisions! Join us at [https://discord.gg/vWntgU52Xb](https://discord.gg/vWntgU52Xb)
# What is `ell`?

Expand Down
38 changes: 0 additions & 38 deletions ell-studio/src/App.css
View file

This file was deleted.

40 changes: 26 additions & 14 deletions ell-studio/src/components/HierarchicalTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import React, { useMemo, useRef, useEffect, useState, useCallback } from 'react'
import { FiChevronDown, FiArrowUp, FiArrowDown, FiChevronLeft, FiChevronRight, FiChevronsLeft, FiChevronsRight } from 'react-icons/fi';
import { HierarchicalTableProvider, useHierarchicalTable } from './HierarchicalTableContext';
import { Checkbox } from "components/common/Checkbox"
import { debounce } from 'lodash';

// Update the SmoothLine component
const SmoothLine = ({ index, startX, startY, endX: endXPreprocess, special, endY, color, animated, opacity, offset }) => {
const endX = endXPreprocess;
Expand Down Expand Up @@ -83,34 +85,44 @@ const TableRow = ({ item, schema, level = 0, onRowClick, columnWidths, updateWid
}, [isNew]);

const primaryColumnRef = useRef(null);

useEffect(() => {
if (!primaryColumnRef.current) return;

const table = primaryColumnRef.current.closest('table');
let tableRect = table.getBoundingClientRect();

const updatePosition = () => {
const tableRect = primaryColumnRef.current.closest('table').getBoundingClientRect();
const rowRect = primaryColumnRef.current.getBoundingClientRect();
const relativeX = rowRect.left - tableRect.left;
const relativeY = rowRect.top - tableRect.top + rowRect.height / 2;
setRowRef(item.id, { id: item.id, x: relativeX, y: relativeY, visible: true });
requestAnimationFrame(() => {
if (!primaryColumnRef.current) return;
const rowRect = primaryColumnRef.current.getBoundingClientRect();
const relativeX = rowRect.left - tableRect.left;
const relativeY = rowRect.top - tableRect.top + rowRect.height / 2;
setRowRef(item.id, { id: item.id, x: relativeX, y: relativeY, visible: true });
});
};

// Initial position update
updatePosition();
const debouncedUpdatePosition = debounce(updatePosition, 100);

// Shared ResizeObserver
const resizeObserver = new ResizeObserver(() => {
tableRect = table.getBoundingClientRect(); // Update tableRect
debouncedUpdatePosition();
});

// Create a ResizeObserver
const resizeObserver = new ResizeObserver(updatePosition);
// Observe only the table
resizeObserver.observe(table);

// Observe both the row and the table
resizeObserver.observe(primaryColumnRef.current);
resizeObserver.observe(primaryColumnRef.current.closest('table'));
// Initial position update
updatePosition();

// Clean up
return () => {
setRowRef(item.id, {visible: false});
resizeObserver.disconnect();
debouncedUpdatePosition.cancel();
};
}, [item.id, setRowRef, sortedData.length, expandedRows, linkColumn]);
}, [item.id, setRowRef]);

return (
<React.Fragment>
Expand Down
212 changes: 115 additions & 97 deletions ell-studio/src/components/LMPDetailsSidePanel.js
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,21 @@
import React, { useState, useMemo } from 'react';
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 MetricChart from './MetricChart';
import { useInvocationsFromLMP } from '../hooks/useBackend';
import { LMPCardTitle } from './depgraph/LMPCardTitle';
import { subDays, format, addDays, endOfMonth } from 'date-fns';
import { ScrollArea } from './common/ScrollArea';

function StatItem({ icon: Icon, label, value }) {
return (
<div className="flex items-center justify-between text-sm">
<span className="flex items-center text-gray-400"><Icon className="mr-2" size={14} />{label}</span>
<span className="font-medium text-white">{value}</span>
</div>
);
}
import { format } from 'date-fns';
import SidePanel from './common/SidePanel';
import MetricChart from './MetricChart';
import { motion } from 'framer-motion';
import {Card} from './common/Card';

function LMPDetailsSidePanel({ lmp, uses, versionHistory }) {
// TODO: update this for all versions aswell..
const { data: invocations } = useInvocationsFromLMP(lmp.name, lmp.lmp_id, 0, 100);

const chartData = useMemo(() => {
if (!invocations || invocations.length === 0) return [];

return invocations
.map(inv => ({
date: new Date(inv.created_at),
Expand All @@ -42,101 +33,128 @@ function LMPDetailsSidePanel({ lmp, uses, versionHistory }) {
}, [invocations]);

return (
// <ScrollArea className="h-full">
<div className="p-4">
<h2 className="text-lg font-semibold mb-3 text-white">Details</h2>
<div className="space-y-4">
<div className="bg-[#161b22] p-3 rounded">
<div className="flex justify-between items-center mb-2">
<h3 className="text-md font-semibold text-white">Version</h3>
<VersionBadge version={lmp.version_number + 1} hash={lmp.lmp_id} />
</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`} />
<SidePanel title="LMP Details">
<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>

{lmp.lm_kwargs && (
<div className="bg-[#161b22] p-3 rounded">
<h3 className="text-md font-semibold mb-2 text-white">LM Keywords</h3>
<pre className="overflow-x-auto text-xs text-gray-300">
<code>{JSON.stringify(lmp.lm_kwargs, null, 2)}</code>
</pre>
<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>

<div className="bg-[#161b22] p-3 rounded">
<h3 className="text-md font-semibold mb-2 text-white">Uses</h3>
{uses && uses.length > 0 ? (
<ul className="space-y-1">
{uses.filter(use => !!use).map((use) => (
<li key={use.lmp_id} className="text-sm">
<Link to={`/lmp/${use.name}/${use.lmp_id}`} className="text-blue-400 hover:text-blue-300">
<LMPCardTitle lmp={use} displayVersion scale={50} shortVersion={true} />
</Link>
</li>
))}
</ul>
) : (
<p className="text-sm 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>
)}

<MetricChart
rawData={chartData}
dataKey="count"
color="#8884d8"
title="Invocations"
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>

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

<div className="bg-[#161b22] p-3 rounded">
<h3 className="text-sm font-semibold mb-2 text-white">Version History</h3>
<div className="space-y-2 max-h-48 overflow-y-auto">
{versionHistory.map((version, index) => (
<Link
key={version.lmp_id}
to={`/lmp/${version.name}/${version.lmp_id}`}
className={`block p-2 rounded ${
version.lmp_id === lmp.lmp_id
? 'bg-blue-900 bg-opacity-30'
: 'hover:bg-gray-800'
}`}
>
<div className="flex justify-between items-center text-sm">
<span className={`font-semibold ${
version.lmp_id === lmp.lmp_id ? 'text-blue-400' : 'text-white'
}`}>
v{versionHistory.length - index}
</span>
<span className="text-gray-400 text-xs">
<FiCalendar className="inline mr-1" size={12} />
{format(new Date(version.created_at), 'MMM d, yyyy')}
</span>
<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-gray-400 text-xs mt-1 truncate">
<FiGitCommit className="inline mr-1" size={12} />
<p className="text-xs text-muted-foreground truncate">
{version.commit_message}
</p>
)}
</Link>
))}
</div>
</motion.div>
))}
</div>
</div>
</div>
// </ScrollArea>
</div> */}
</motion.div>
</SidePanel>
);
}

Expand Down
Loading

0 comments on commit 1fa16d7

Please sign in to comment.