Overview
EvalsResultDialog is a full-screen React dialog component that displays the detailed results of an evaluation run in a comprehensive table comparing inputs, expected outputs, actual outputs, metrics, custom evaluators, and LLM-graded evaluations across multiple chatflows.
Description
This component renders a full-screen dialog with a complex, multi-header table showing evaluation results. Each row represents a dataset item with its input, expected output, and per-chatflow actual outputs. For each chatflow column, it displays cost metrics (total cost, token counts), latency metrics (API, chain, retriever, tool, LLM latencies), custom evaluator results (Pass/Fail/Error), and LLM evaluation scores. The table headers dynamically adjust column spans based on which evaluation types are active.
Usage
Use this dialog to display the full results of a completed evaluation run. It is typically opened from the evaluations list view after an evaluation finishes executing and results are available.
Code Reference
Source Location
Signature
const EvalsResultDialog = ({ show, dialogProps, onCancel, openDetailsDrawer }) => {
// ... component logic
}
EvalsResultDialog.propTypes = {
show: PropTypes.bool,
dialogProps: PropTypes.object,
onCancel: PropTypes.func,
openDetailsDrawer: PropTypes.func
}
export default EvalsResultDialog
Import
import EvalsResultDialog from '@/views/evaluations/EvalsResultDialog'
I/O Contract
Inputs
| Name |
Type |
Required |
Description
|
| show |
bool |
Yes |
Controls dialog visibility
|
| dialogProps |
object |
Yes |
Contains data with evaluation results, rows, metrics, chatflowId/Name arrays, custom/LLM evaluator data, and display flags
|
| onCancel |
func |
Yes |
Callback invoked when the Minimize button is clicked
|
| openDetailsDrawer |
func |
Yes |
Callback invoked with a row item when a table row is clicked, opens the side drawer for detailed view
|
Outputs
| Name |
Type |
Description
|
| Portal element |
React.Element |
A full-screen dialog rendered via createPortal into the '#portal' DOM node
|
Key Behavior
- Renders a full-screen dialog (
fullScreen prop on Dialog)
- Displays chatflow names as clickable Chips in the header that open the corresponding canvas/assistant/agentflow
- Dynamically computes column spans with
getColSpan() based on active evaluation types
- Shows per-row metrics: total cost, total tokens, prompt/completion tokens, prompt/completion cost, API/chain/retriever/tool/LLM latency
- Conditionally renders custom evaluator results with color-coded chips (green=Pass, red=Fail, yellow=Error)
- Conditionally renders LLM evaluation results as key-value chip pairs
- Error rows display an error chip styled with red background instead of actual output
Key Functions
| Function |
Description
|
| getColSpan(evaluationsShown, llmEvaluations) |
Calculates the column span for each chatflow header based on which evaluation columns are visible
|
| getOpenLink(index) |
Returns the navigation URL for a chatflow based on its type (Chatflow, Custom Assistant, Agentflow v2)
|
Usage Examples
Basic Usage
import EvalsResultDialog from '@/views/evaluations/EvalsResultDialog'
<EvalsResultDialog
show={showResults}
dialogProps={{
data: {
evaluation: { chatflowId: ['id1'], chatflowName: ['My Flow'], evaluationType: 'llm' },
rows: evaluationRows,
customEvalsDefined: true,
showCustomEvals: true,
showTokenMetrics: true,
showCostMetrics: true,
showLatencyMetrics: true
}
}}
onCancel={() => setShowResults(false)}
openDetailsDrawer={(item) => handleOpenDetails(item)}
/>
Related Pages
