-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
feat(webapp): split Models into Your models and Model library tabs #3958
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
Open
ericallam
wants to merge
5
commits into
main
Choose a base branch
from
feature/tri-10025-on-the-models-page-create-a-new-table-for-your-models
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
5 commits
Select commit
Hold shift + click to select a range
5e36725
feat(webapp): split Models into Your models and Model library tabs
ericallam 57dd835
fix(webapp): revalidate Models loader on project/env path change
ericallam 610ea59
fix(webapp): label model sparkline tooltips with their real bucket times
ericallam b5a7a56
fix(webapp): tidy Your models tab spacing and enlarge the charts
ericallam e372c8b
feat(webapp): add prompt-cache metrics to Models and AI metrics
ericallam File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| area: webapp | ||
| type: feature | ||
| --- | ||
|
|
||
| The Models page now has a Your models tab showing your project's model usage (cost, calls, latency, prompt-cache savings, and trend sparklines over a selectable time range) alongside the full model library, ordered by provider relevance and release date. The AI metrics dashboard also gains a caching section with cache hit rate, cached tokens, and estimated savings. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
123 changes: 123 additions & 0 deletions
123
apps/webapp/app/components/primitives/UsageSparkline.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| import { | ||
| Bar, | ||
| BarChart, | ||
| ReferenceLine, | ||
| ResponsiveContainer, | ||
| Tooltip, | ||
| YAxis, | ||
| type TooltipProps, | ||
| } from "recharts"; | ||
| import { cn } from "~/utils/cn"; | ||
| import { formatDateTime } from "./DateTime"; | ||
| import { Header3 } from "./Headers"; | ||
| import TooltipPortal from "./TooltipPortal"; | ||
|
|
||
| type UsageDatum = { date: Date; count: number }; | ||
|
|
||
| type UnitLabel = { singular: string; plural: string }; | ||
|
|
||
| export type UsageSparklineProps = { | ||
| /** Equal-width time buckets, oldest first. */ | ||
| data?: number[]; | ||
| /** Epoch ms of the first bucket's start. When omitted, the last bucket is anchored to now. */ | ||
| bucketStartMs?: number; | ||
| /** Width of each bucket in ms. Defaults to one hour. */ | ||
| bucketIntervalMs?: number; | ||
| /** Bar colour. Defaults to blue. */ | ||
| color?: string; | ||
| /** Unit shown in the tooltip (e.g. calls, tokens). */ | ||
| unitLabel?: UnitLabel; | ||
| /** Format the trailing total. Defaults to `toLocaleString`. */ | ||
| formatTotal?: (total: number) => string; | ||
| /** Class for the trailing total label. */ | ||
| totalClassName?: string; | ||
| }; | ||
|
|
||
| /** | ||
| * Inline 24h sparkline for list rows. Renders a small bar chart plus a trailing | ||
| * total, or an em-dash when there's no data. Shared by the prompts and models | ||
| * lists — keep it presentational (the caller supplies the zero-filled buckets). | ||
| */ | ||
| export function UsageSparkline({ | ||
| data, | ||
| bucketStartMs, | ||
| bucketIntervalMs, | ||
| color = "#3B82F6", | ||
| unitLabel = { singular: "call", plural: "calls" }, | ||
| formatTotal, | ||
| totalClassName = "text-blue-400", | ||
| }: UsageSparklineProps) { | ||
| if (!data || data.every((v) => v === 0)) { | ||
| return <span className="text-text-dimmed">–</span>; | ||
| } | ||
|
|
||
| const total = data.reduce((a, b) => a + b, 0); | ||
| const max = Math.max(...data); | ||
|
|
||
| // Map each bucket to a dated point so the tooltip can show the window it | ||
| // represents. Buckets are `intervalMs` wide; if the caller didn't pass the | ||
| // first bucket's start, anchor the last bucket to now (hourly default). | ||
| const intervalMs = bucketIntervalMs ?? 3600_000; | ||
| const startMs = bucketStartMs ?? Date.now() - (data.length - 1) * intervalMs; | ||
| const chartData: UsageDatum[] = data.map((count, i) => ({ | ||
| date: new Date(startMs + i * intervalMs), | ||
| count, | ||
| })); | ||
|
|
||
| return ( | ||
| <div className="flex items-start gap-2"> | ||
| <div className="h-6 w-[7rem] rounded-sm"> | ||
| <ResponsiveContainer width="100%" height="100%"> | ||
| <BarChart data={chartData} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}> | ||
| <YAxis domain={[0, max || 1]} hide /> | ||
| <Tooltip | ||
| cursor={{ fill: "rgba(255, 255, 255, 0.06)" }} | ||
| content={<UsageSparklineTooltip unitLabel={unitLabel} />} | ||
| allowEscapeViewBox={{ x: true, y: true }} | ||
| wrapperStyle={{ zIndex: 1000 }} | ||
| animationDuration={0} | ||
| /> | ||
| <Bar | ||
| dataKey="count" | ||
| fill={color} | ||
| strokeWidth={0} | ||
| isAnimationActive={false} | ||
| minPointSize={1} | ||
| /> | ||
| <ReferenceLine y={0} stroke="#2C3034" strokeWidth={1} /> | ||
| {max > 0 && ( | ||
| <ReferenceLine y={max} stroke="#4D525B" strokeDasharray="4 4" strokeWidth={1} /> | ||
| )} | ||
| </BarChart> | ||
| </ResponsiveContainer> | ||
| </div> | ||
| <span className={cn("-mt-1 text-xs tabular-nums", totalClassName)}> | ||
| {formatTotal ? formatTotal(total) : total.toLocaleString()} | ||
| </span> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function UsageSparklineTooltip({ | ||
| active, | ||
| payload, | ||
| unitLabel, | ||
| }: TooltipProps<number, string> & { unitLabel: UnitLabel }) { | ||
| if (!active || !payload || payload.length === 0) return null; | ||
| const entry = payload[0].payload as UsageDatum; | ||
| const date = entry.date instanceof Date ? entry.date : new Date(entry.date); | ||
| const formattedDate = formatDateTime(date, "UTC", [], false, true); | ||
| return ( | ||
| <TooltipPortal active={active}> | ||
| <div className="rounded-sm border border-grid-bright bg-background-dimmed px-3 py-2"> | ||
| <Header3 className="border-b border-b-charcoal-650 pb-2">{formattedDate}</Header3> | ||
| <div className="mt-2 text-xs text-text-bright"> | ||
| <span className="tabular-nums">{entry.count.toLocaleString()}</span>{" "} | ||
| <span className="text-text-dimmed"> | ||
| {entry.count === 1 ? unitLabel.singular : unitLabel.plural} | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </TooltipPortal> | ||
| ); | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.