feat(playground): example run slideover #5361
Conversation
dosubot
bot
added
the
size:L
| <DialogContainer type="slideOver" isDismissable onDismiss={() => {}}> | ||
| <Dialog size="XL" title={`Experiment Run for Example: ${exampleId}`}> | ||
| <Flex direction="row" justifyContent="center"> | ||
| <View |
There was a problem hiding this comment.
We need overflow so that the view can scroll when there is large amounts of content inside.
There was a problem hiding this comment.
yeah would copy from the SelectedExampleDiaog in the experiment compare table here since you are building the same thing, doesn't look like it probably makes sense to reuse that component but copying the structure and styles makes sense
https://github.com/Arize-ai/phoenix/blob/main/app/src/pages/experiment/ExperimentCompareTable.tsx#L712
| }, [data]); | ||
| const { exampleId, input, referenceOutput, runOutput } = run; | ||
| return ( | ||
| <DialogContainer type="slideOver" isDismissable onDismiss={() => {}}> |
There was a problem hiding this comment.
Clicking anywhere within the dialog closes it, including when trying to collapse cards or select text
wonky.sidebar.mov
There was a problem hiding this comment.
(this also shows that you cannot scroll with large outputs)
There was a problem hiding this comment.
might be happening because the onDismiss function is just that emptyfunction? although that doesn't seem quite right. In either case would recommend passing in an onClose to this that gets passed as the onDismiss prop that allows the parent to control it's closing
| <Tooltip>View Trace</Tooltip> | ||
| </TooltipTrigger> | ||
| )} | ||
| {hasSpan && ( |
There was a problem hiding this comment.
you can put these both in the same conditional just wrap in a fragment
Adds simple slideover for experiment run details in playground
experiment_run_details.mp4
resolves #5286