-
Notifications
You must be signed in to change notification settings - Fork 197
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Span displays): Add Root, LLM, and Retriever span visualizations (…
…#1107) * shuffling * update standard.md to mention python versions tested * de-circularizing * finishing up decircularization * fix imports in tests * more import fixes * starting spans work * more import fixes * updating docs and docstrings with new locations * add temp to bedrock and ignored warning * trying to remove circular import * more debugging * more fixes * more of the same * last few * missed on * nits * typo * fix feedbackmode imports * 2 more fixes * starting spans work * work * working on spans * opentelemetry work * working on spans * span work * organize imports * starting span categorization logic * nits * typo in module doc * spans for custom apps * clear outputs * fix dictnamespace typing * span types * colors * style updates * span types * more style fixes * add dist build * revert some changes * revert ipynb changes --------- Co-authored-by: Piotr Mardziel <[email protected]>
- Loading branch information
1 parent
b99afb5
commit 2b9c3c2
Showing
30 changed files
with
882 additions
and
359 deletions.
There are no files selected for viewing
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
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
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
236 changes: 0 additions & 236 deletions
236
trulens_eval/trulens_eval/react_components/record_viewer/dist/assets/index-22978a10.js
This file was deleted.
Oops, something went wrong.
236 changes: 236 additions & 0 deletions
236
trulens_eval/trulens_eval/react_components/record_viewer/dist/assets/index-69ff0e1b.js
Large diffs are not rendered by default.
Oops, something went wrong.
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
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
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
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
31 changes: 31 additions & 0 deletions
31
trulens_eval/trulens_eval/react_components/record_viewer/src/RecordTable/SpanIconDisplay.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,31 @@ | ||
| import { Box, SxProps, Theme } from '@mui/material'; | ||
|
|
||
| import { DEFAULT_SPAN_TYPE_PROPS, SPAN_TYPE_PROPS } from '@/icons/SpanIcon'; | ||
| import { SpanType } from '@/utils/Span'; | ||
|
|
||
| interface SpanIconProps { | ||
| spanType?: SpanType; | ||
| } | ||
|
|
||
| export default function SpanIconDisplay({ spanType = SpanType.UNTYPED }: SpanIconProps) { | ||
| const { backgroundColor, Icon, color } = SPAN_TYPE_PROPS[spanType] ?? DEFAULT_SPAN_TYPE_PROPS; | ||
|
|
||
| return ( | ||
| <Box sx={{ ...containerSx, backgroundColor, color }}> | ||
| <Icon sx={{ ...iconSx, color }} /> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| const iconSx: SxProps<Theme> = { | ||
| p: 0.5, | ||
| height: '16px', | ||
| width: '16px', | ||
| }; | ||
|
|
||
| const containerSx: SxProps<Theme> = { | ||
| display: 'flex', | ||
| borderRadius: ({ spacing }) => spacing(0.5), | ||
| flexDirection: 'column', | ||
| justifyContent: 'center', | ||
| }; |
62 changes: 13 additions & 49 deletions
62
...s_eval/trulens_eval/react_components/record_viewer/src/RecordTree/Details/NodeDetails.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,56 +1,20 @@ | ||
| import { Grid, Stack, Typography } from '@mui/material'; | ||
|
|
||
| import JSONViewer from '@/JSONViewer'; | ||
| import LabelAndValue from '@/LabelAndValue'; | ||
| import Panel from '@/Panel'; | ||
| import Section from '@/RecordTree/Details/Section'; | ||
| import { summarySx } from '@/RecordTree/Details/styles'; | ||
| import TracePanel from '@/RecordTree/Details/TracePanel'; | ||
| import LLMDetails from '@/RecordTree/Details/NodeSpecificDetails/LLMDetails'; | ||
| import NodeDetailsContainer from '@/RecordTree/Details/NodeSpecificDetails/NodeDetailsContainer'; | ||
| import { CommonDetailsProps } from '@/RecordTree/Details/NodeSpecificDetails/types'; | ||
| import { SpanLLM, SpanRetriever } from '@/utils/Span'; | ||
| import { StackTreeNode } from '@/utils/StackTreeNode'; | ||
| import { RecordJSONRaw } from '@/utils/types'; | ||
|
|
||
| type DetailsProps = { | ||
| selectedNode: StackTreeNode; | ||
| recordJSON: RecordJSONRaw; | ||
| }; | ||
|
|
||
| export default function NodeDetails({ selectedNode, recordJSON }: DetailsProps) { | ||
| const { timeTaken: nodeTime, raw, selector } = selectedNode; | ||
|
|
||
| // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment | ||
| const { args, rets } = raw ?? {}; | ||
|
|
||
| let returnValueDisplay = <Typography>No return values recorded</Typography>; | ||
| if (rets) { | ||
| if (typeof rets === 'string') returnValueDisplay = <Typography>{rets}</Typography>; | ||
| if (typeof rets === 'object') returnValueDisplay = <JSONViewer src={rets as object} />; | ||
| } | ||
| import RetrieverDetails from './NodeSpecificDetails/RetrieverDetails'; | ||
|
|
||
| return ( | ||
| <> | ||
| <Stack direction="row" sx={summarySx}> | ||
| <LabelAndValue label="Time taken" value={<Typography>{nodeTime} ms</Typography>} /> | ||
| </Stack> | ||
| export default function NodeDetails({ selectedNode, recordJSON }: CommonDetailsProps) { | ||
| const { span } = selectedNode; | ||
|
|
||
| <Grid container gap={1}> | ||
| <Grid item xs={12}> | ||
| <Panel header="Span I/O"> | ||
| <Stack gap={2}> | ||
| <Section title="Arguments" subtitle={selector ? `${selector}.args` : undefined}> | ||
| {args ? <JSONViewer src={args} /> : 'No arguments recorded.'} | ||
| </Section> | ||
| if (!span) return <NodeDetailsContainer selectedNode={selectedNode} recordJSON={recordJSON} />; | ||
| if (span instanceof SpanLLM) | ||
| return <LLMDetails selectedNode={selectedNode as StackTreeNode<SpanLLM>} recordJSON={recordJSON} />; | ||
|
|
||
| <Section title="Return values" subtitle={selector ? `${selector}.rets` : undefined}> | ||
| {returnValueDisplay} | ||
| </Section> | ||
| </Stack> | ||
| </Panel> | ||
| </Grid> | ||
| if (span instanceof SpanRetriever) | ||
| return <RetrieverDetails selectedNode={selectedNode as StackTreeNode<SpanRetriever>} recordJSON={recordJSON} />; | ||
|
|
||
| <Grid item xs={12}> | ||
| <TracePanel recordJSON={recordJSON} /> | ||
| </Grid> | ||
| </Grid> | ||
| </> | ||
| ); | ||
| return <NodeDetailsContainer selectedNode={selectedNode} recordJSON={recordJSON} />; | ||
| } |
20 changes: 20 additions & 0 deletions
20
.../react_components/record_viewer/src/RecordTree/Details/NodeSpecificDetails/LLMDetails.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,20 @@ | ||
| import { Typography } from '@mui/material'; | ||
|
|
||
| import LabelAndValue from '@/LabelAndValue'; | ||
| import NodeDetailsContainer from '@/RecordTree/Details/NodeSpecificDetails/NodeDetailsContainer'; | ||
| import { CommonDetailsProps } from '@/RecordTree/Details/NodeSpecificDetails/types'; | ||
| import { SpanLLM } from '@/utils/Span'; | ||
|
|
||
| type LLMDetailsProps = CommonDetailsProps<SpanLLM>; | ||
|
|
||
| export default function LLMDetails({ selectedNode, recordJSON }: LLMDetailsProps) { | ||
| return ( | ||
| <NodeDetailsContainer | ||
| selectedNode={selectedNode} | ||
| recordJSON={recordJSON} | ||
| labels={ | ||
| <LabelAndValue label="Model name" value={<Typography>{selectedNode.span?.modelName ?? 'N/A'}</Typography>} /> | ||
| } | ||
| /> | ||
| ); | ||
| } |
62 changes: 62 additions & 0 deletions
62
...ponents/record_viewer/src/RecordTree/Details/NodeSpecificDetails/NodeDetailsContainer.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,62 @@ | ||
| import { Grid, Stack, Typography } from '@mui/material'; | ||
| import { PropsWithChildren, ReactElement } from 'react'; | ||
|
|
||
| import JSONViewer from '@/JSONViewer'; | ||
| import LabelAndValue from '@/LabelAndValue'; | ||
| import Panel from '@/Panel'; | ||
| import { CommonDetailsProps } from '@/RecordTree/Details/NodeSpecificDetails/types'; | ||
| import Section from '@/RecordTree/Details/Section'; | ||
| import { summarySx } from '@/RecordTree/Details/styles'; | ||
| import TracePanel from '@/RecordTree/Details/TracePanel'; | ||
| import { toHumanSpanType } from '@/utils/Span'; | ||
|
|
||
| type DetailsProps = PropsWithChildren< | ||
| CommonDetailsProps & { | ||
| labels?: ReactElement; | ||
| } | ||
| >; | ||
|
|
||
| export default function NodeDetailsContainer({ selectedNode, recordJSON, children, labels }: DetailsProps) { | ||
| const { timeTaken: nodeTime, raw, selector, span } = selectedNode; | ||
|
|
||
| // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment | ||
| const { args, rets } = raw ?? {}; | ||
|
|
||
| let returnValueDisplay = <Typography>No return values recorded</Typography>; | ||
| if (rets) { | ||
| if (typeof rets === 'string') returnValueDisplay = <Typography>{rets}</Typography>; | ||
| if (typeof rets === 'object') returnValueDisplay = <JSONViewer src={rets as object} />; | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <Stack direction="row" sx={summarySx}> | ||
| <LabelAndValue label="Span type" value={<Typography>{toHumanSpanType(span?.type)}</Typography>} /> | ||
| <LabelAndValue label="Time taken" value={<Typography>{nodeTime} ms</Typography>} /> | ||
| {labels} | ||
| </Stack> | ||
|
|
||
| <Grid container gap={1}> | ||
| <Grid item xs={12}> | ||
| <Panel header="Span I/O"> | ||
| <Stack gap={2}> | ||
| <Section title="Arguments" subtitle={selector ? `${selector}.args` : undefined}> | ||
| {args ? <JSONViewer src={args} /> : 'No arguments recorded.'} | ||
| </Section> | ||
|
|
||
| <Section title="Return values" subtitle={selector ? `${selector}.rets` : undefined}> | ||
| {returnValueDisplay} | ||
| </Section> | ||
| </Stack> | ||
| </Panel> | ||
| </Grid> | ||
|
|
||
| {children} | ||
|
|
||
| <Grid item xs={12}> | ||
| <TracePanel recordJSON={recordJSON} /> | ||
| </Grid> | ||
| </Grid> | ||
| </> | ||
| ); | ||
| } |
Oops, something went wrong.