-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2766b01
commit 9d65427
Showing
17 changed files
with
2,006 additions
and
1,616 deletions.
There are no files selected for viewing
30 changes: 30 additions & 0 deletions
30
...ations/[evaluationId]/_components/MetricsSummary/BigNumberPanels/MeanValuePanel/index.tsx
This file contains 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,30 @@ | ||
| 'use client' | ||
|
|
||
| import { EvaluationMeanValue } from '@latitude-data/core/browser' | ||
| import { RangeBadge } from '@latitude-data/web-ui' | ||
|
|
||
| import Panel from '../Panel' | ||
|
|
||
| export default function MeanValuePanel({ | ||
| mean, | ||
| }: { | ||
| mean: EvaluationMeanValue | ||
| }) { | ||
| // TODO: DO local store + action to refresh totals with key by documentUuid and evaluationId | ||
| const data = mean | ||
| const label = 'Current average' | ||
| const additionalInfo = | ||
| 'The mean value of all the evaluated results from the current version.' | ||
|
|
||
| return ( | ||
| <Panel label={label} additionalInfo={additionalInfo}> | ||
| <div className='w-fit'> | ||
| <RangeBadge | ||
| minValue={data.minValue} | ||
| maxValue={data.maxValue} | ||
| value={data.meanValue} | ||
| /> | ||
| </div> | ||
| </Panel> | ||
| ) | ||
| } |
24 changes: 24 additions & 0 deletions
24
...tions/[evaluationId]/_components/MetricsSummary/BigNumberPanels/ModalValuePanel/index.tsx
This file contains 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,24 @@ | ||
| 'use client' | ||
|
|
||
| import { EvaluationModalValue } from '@latitude-data/core/browser' | ||
| import { Text } from '@latitude-data/web-ui' | ||
|
|
||
| import Panel from '../Panel' | ||
|
|
||
| export default function ModalValuePanel({ | ||
| modal, | ||
| }: { | ||
| modal: EvaluationModalValue | ||
| }) { | ||
| // TODO: DO local store + action to refresh totals with key by documentUuid and evaluationId | ||
| const data = modal | ||
| return ( | ||
| <Panel | ||
| label='Current modal' | ||
| additionalInfo='The most common result from the current version.' | ||
| > | ||
| <Text.H3B>{data.mostCommon}</Text.H3B> | ||
| <Text.H3 color='foregroundMuted'> ({data.percentage} %)</Text.H3> | ||
| </Panel> | ||
| ) | ||
| } |
40 changes: 40 additions & 0 deletions
40
...id]/evaluations/[evaluationId]/_components/MetricsSummary/BigNumberPanels/Panel/index.tsx
This file contains 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,40 @@ | ||
| 'use client' | ||
|
|
||
| import { ReactNode } from 'react' | ||
|
|
||
| import { Icon, Text, Tooltip } from '@latitude-data/web-ui' | ||
|
|
||
| export default function Panel({ | ||
| label, | ||
| value, | ||
| additionalInfo, | ||
| children, | ||
| }: { | ||
| label: string | ||
| value?: string | ||
| additionalInfo?: string | ||
| children?: ReactNode | ||
| }) { | ||
| const panel = ( | ||
| <div className='min-w-44 flex-1 flex flex-col gap-1 p-4 rounded-lg border border-border'> | ||
| <div className='flex flex-row justify-between items-center gap-1'> | ||
| <Text.H5 color='foregroundMuted'>{label}</Text.H5> | ||
| {additionalInfo && ( | ||
| <Icon name='info' className='text-muted-foreground' /> | ||
| )} | ||
| </div> | ||
| {value && <Text.H3B>{value}</Text.H3B>} | ||
| {children} | ||
| </div> | ||
| ) | ||
|
|
||
| if (additionalInfo) { | ||
| return ( | ||
| <Tooltip side='left' trigger={panel}> | ||
| <Text.H5 color='white'>{additionalInfo}</Text.H5> | ||
| </Tooltip> | ||
| ) | ||
| } | ||
|
|
||
| return panel | ||
| } |
27 changes: 27 additions & 0 deletions
27
...luations/[evaluationId]/_components/MetricsSummary/BigNumberPanels/TotalsPanels/index.tsx
This file contains 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,27 @@ | ||
| 'use client' | ||
|
|
||
| import { EvaluationAggregationTotals } from '@latitude-data/core/browser' | ||
| import { formatCostInMillicents } from '$/app/_lib/formatUtils' | ||
|
|
||
| import Panel from '../Panel' | ||
|
|
||
| export default function TotalsPanels({ | ||
| aggregation, | ||
| }: { | ||
| documentUuid: string | ||
| evaluationId: number | ||
| aggregation: EvaluationAggregationTotals | ||
| }) { | ||
| // TODO: DO local store + action to refresh totals with key by documentUuid and evaluationId | ||
| const data = aggregation | ||
| return ( | ||
| <> | ||
| <Panel label='Total logs' value={String(data.totalCount)} /> | ||
| <Panel | ||
| label='Total cost' | ||
| value={formatCostInMillicents(data.costInMillicents)} | ||
| /> | ||
| <Panel label='Total tokens' value={String(data.tokens)} /> | ||
| </> | ||
| ) | ||
| } |
225 changes: 77 additions & 148 deletions
225
...mentUuid]/evaluations/[evaluationId]/_components/MetricsSummary/BigNumberPanels/index.tsx
This file contains 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 |
|---|---|---|
| @@ -1,176 +1,105 @@ | ||
| import { ReactNode, useMemo } from 'react' | ||
|
|
||
| import { | ||
| Commit, | ||
| Evaluation, | ||
| EvaluationResultableType, | ||
| Workspace, | ||
| } from '@latitude-data/core/browser' | ||
| import { EvaluationResultWithMetadata } from '@latitude-data/core/repositories' | ||
| import { | ||
| Icon, | ||
| RangeBadge, | ||
| Skeleton, | ||
| Text, | ||
| Tooltip, | ||
| } from '@latitude-data/web-ui' | ||
| import { formatCostInMillicents } from '$/app/_lib/formatUtils' | ||
| getEvaluationMeanValueQuery, | ||
| getEvaluationModalValueQuery, | ||
| getEvaluationTotalsQuery, | ||
| } from '@latitude-data/core/services/evaluationResults/index' | ||
| import ModalValuePanel from '$/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/MetricsSummary/BigNumberPanels/ModalValuePanel' | ||
|
|
||
| import MeanValuePanel from './MeanValuePanel' | ||
| import TotalsPanels from './TotalsPanels' | ||
|
|
||
| function Panel({ | ||
| label, | ||
| value, | ||
| additionalInfo, | ||
| children, | ||
| async function MeanPanel({ | ||
| workspaceId, | ||
| evaluation, | ||
| documentUuid, | ||
| commit, | ||
| }: { | ||
| label: string | ||
| value?: string | ||
| additionalInfo?: string | ||
| children?: ReactNode | ||
| workspaceId: number | ||
| evaluation: Evaluation | ||
| documentUuid: string | ||
| commit: Commit | ||
| }) { | ||
| const panel = ( | ||
| <div className='min-w-44 flex-1 flex flex-col gap-1 p-4 rounded-lg border border-border'> | ||
| <div className='flex flex-row justify-between items-center gap-1'> | ||
| <Text.H5 color='foregroundMuted'>{label}</Text.H5> | ||
| {additionalInfo && ( | ||
| <Icon name='info' className='text-muted-foreground' /> | ||
| )} | ||
| </div> | ||
| {value && <Text.H3B>{value}</Text.H3B>} | ||
| {children} | ||
| </div> | ||
| ) | ||
|
|
||
| if (additionalInfo) { | ||
| return ( | ||
| <Tooltip side='left' trigger={panel}> | ||
| <Text.H5 color='white'>{additionalInfo}</Text.H5> | ||
| </Tooltip> | ||
| ) | ||
| } | ||
|
|
||
| return panel | ||
| const mean = await getEvaluationMeanValueQuery({ | ||
| workspaceId, | ||
| evaluation, | ||
| documentUuid, | ||
| commit, | ||
| }) | ||
|
|
||
| return <MeanValuePanel mean={mean} /> | ||
| } | ||
|
|
||
| function TypeSpecificPanel({ | ||
| async function ModalPanel({ | ||
| workspaceId, | ||
| evaluation, | ||
| evaluationResults, | ||
| documentUuid, | ||
| commit, | ||
| }: { | ||
| workspaceId: number | ||
| evaluation: Evaluation | ||
| evaluationResults: EvaluationResultWithMetadata[] | ||
| commit?: Commit | ||
| documentUuid: string | ||
| commit: Commit | ||
| }) { | ||
| const label = | ||
| evaluation.configuration.type == EvaluationResultableType.Number | ||
| ? 'Current average' | ||
| : 'Current modal' | ||
|
|
||
| const additionalInfo = | ||
| evaluation.configuration.type == EvaluationResultableType.Number | ||
| ? 'The mean value of all the evaluated results from the current version.' | ||
| : 'The most common result from the current version.' | ||
|
|
||
| if (!commit) { | ||
| return ( | ||
| <Panel label={label} additionalInfo={additionalInfo}> | ||
| <Skeleton className='w-16 h-4 bg-muted animate-pulse' /> | ||
| </Panel> | ||
| ) | ||
| } | ||
|
|
||
| const value = useMemo<ReactNode>(() => { | ||
| const resultsFromCommit = evaluationResults.filter( | ||
| (e) => e.commit.id === commit.id, | ||
| ) | ||
|
|
||
| if (resultsFromCommit.length == 0) { | ||
| return <Text.H4 color='foregroundMuted'>No data</Text.H4> | ||
| } | ||
|
|
||
| if (evaluation.configuration.type == EvaluationResultableType.Number) { | ||
| const { to: maxValue, from: minValue } = | ||
| evaluation.configuration.detail!.range | ||
| const sumValue = resultsFromCommit.reduce((acc, result) => { | ||
| return acc + Number(result.result) | ||
| }, 0) | ||
|
|
||
| const meanValue = sumValue / resultsFromCommit.length | ||
|
|
||
| return ( | ||
| <div className='w-fit'> | ||
| <RangeBadge | ||
| minValue={minValue} | ||
| maxValue={maxValue} | ||
| value={meanValue} | ||
| /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const resultCounts = resultsFromCommit.reduce( | ||
| (acc, result) => { | ||
| const value = result.result as string | ||
| if (!acc[value]) { | ||
| acc[value] = 0 | ||
| } | ||
| acc[value] += 1 | ||
| return acc | ||
| }, | ||
| {} as Record<string, number>, | ||
| ) | ||
|
|
||
| const mostCommonResult = Object.keys(resultCounts).reduce((a, b) => | ||
| resultCounts[a]! > resultCounts[b]! ? a : b, | ||
| ) | ||
|
|
||
| const resultPresence = | ||
| (resultCounts[mostCommonResult]! / resultsFromCommit.length) * 100 | ||
|
|
||
| return ( | ||
| <> | ||
| <Text.H3B>{mostCommonResult}</Text.H3B> | ||
| <Text.H3 color='foregroundMuted'> ({resultPresence} %)</Text.H3> | ||
| </> | ||
| ) | ||
| }, [evaluation, evaluationResults, commit]) | ||
|
|
||
| return ( | ||
| <Panel label={label} additionalInfo={additionalInfo}> | ||
| {value} | ||
| </Panel> | ||
| ) | ||
| const modal = await getEvaluationModalValueQuery({ | ||
| workspaceId, | ||
| evaluation, | ||
| documentUuid, | ||
| commit, | ||
| }) | ||
|
|
||
| return <ModalValuePanel modal={modal} /> | ||
| } | ||
|
|
||
| export function BigNumberPanels({ | ||
| evaluation, | ||
| evaluationResults, | ||
| export async function BigNumberPanels({ | ||
| workspace, | ||
| commit, | ||
| evaluation, | ||
| documentUuid, | ||
| }: { | ||
| workspace: Workspace | ||
| commit: Commit | ||
| evaluation: Evaluation | ||
| evaluationResults: EvaluationResultWithMetadata[] | ||
| commit?: Commit | ||
| documentUuid: string | ||
| }) { | ||
| const totalCost = useMemo(() => { | ||
| return evaluationResults.reduce((acc, result) => { | ||
| return acc + (result.costInMillicents ?? 0) | ||
| }, 0) | ||
| }, [evaluationResults]) | ||
|
|
||
| const totalTokens = useMemo(() => { | ||
| return evaluationResults.reduce((acc, result) => { | ||
| return acc + (result.tokens ?? 0) | ||
| }, 0) | ||
| }, [evaluationResults]) | ||
|
|
||
| const aggregationTotals = await getEvaluationTotalsQuery({ | ||
| workspaceId: workspace.id, | ||
| commit, | ||
| evaluation, | ||
| documentUuid, | ||
| }) | ||
| const isNumeric = | ||
| evaluation.configuration.type == EvaluationResultableType.Number | ||
| return ( | ||
| <div className='flex flex-wrap gap-6'> | ||
| <Panel label='Total logs' value={String(evaluationResults.length)} /> | ||
| <Panel label='Total cost' value={formatCostInMillicents(totalCost)} /> | ||
| <Panel label='Total tokens' value={String(totalTokens)} /> | ||
| <TypeSpecificPanel | ||
| evaluation={evaluation} | ||
| evaluationResults={evaluationResults} | ||
| commit={commit} | ||
| <TotalsPanels | ||
| aggregation={aggregationTotals} | ||
| documentUuid={documentUuid} | ||
| evaluationId={evaluation.id} | ||
| /> | ||
|
|
||
| {isNumeric && ( | ||
| <MeanPanel | ||
| commit={commit} | ||
| evaluation={evaluation} | ||
| workspaceId={workspace.id} | ||
| documentUuid={documentUuid} | ||
| /> | ||
| )} | ||
|
|
||
| {!isNumeric && ( | ||
| <ModalPanel | ||
| commit={commit} | ||
| evaluation={evaluation} | ||
| workspaceId={workspace.id} | ||
| documentUuid={documentUuid} | ||
| /> | ||
| )} | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.