Implementation:FlowiseAI Flowise EvaluationResultSideDrawer

Knowledge Sources	FlowiseAI Flowise
Domains	UI Components, Evaluation, Side Drawer
Last Updated	2026-02-12 07:00 GMT

Overview

EvaluationResultSideDrawer is a React side-drawer component that displays detailed evaluation results for a single dataset row, including actual outputs, latency metrics, token counts, cost breakdowns, custom evaluator results, and LLM-graded scores per chatflow.

Description

This component renders a right-anchored SwipeableDrawer that shows comprehensive details for a specific evaluation row. For each chatflow tested, it displays the actual output (or error), latency metrics (API, chain, retriever, tool, LLM), token usage with optional per-node breakdowns in a table, cost metrics with optional per-node breakdowns, custom evaluator pass/fail results with operator details, and LLM-graded evaluation scores. It supports both summary chip views and detailed nested-metrics table views when per-node metrics are available.

Usage

Use this component as a companion to EvalsResultDialog. When a user clicks on a specific evaluation result row in the full-screen results table, this drawer opens to show the detailed breakdown for that single item.

Code Reference

Source Location

• Repository: FlowiseAI Flowise
• File: packages/ui/src/views/evaluations/EvaluationResultSideDrawer.jsx
• Lines: 1-518

Signature

const EvaluationResultSideDrawer = ({ show, dialogProps, onClickFunction }) => {
    // ... component logic
}

EvaluationResultSideDrawer.propTypes = {
    show: PropTypes.bool,
    dialogProps: PropTypes.object,
    onClickFunction: PropTypes.func
}

export default EvaluationResultSideDrawer

Import

import EvaluationResultSideDrawer from '@/views/evaluations/EvaluationResultSideDrawer'

I/O Contract

Inputs

Name	Type	Required	Description
show	bool	Yes	Controls drawer visibility
dialogProps	object	Yes	Contains data (evaluationId, input, expectedOutput, actualOutput[], errors[], metrics[], customEvals[], llmEvaluators[]), evaluationChatflows[], evaluationType, and additionalConfig
onClickFunction	func	Yes	Callback invoked when the drawer close button is clicked

Outputs

Name	Type	Description
Rendered JSX	React.Element	A right-anchored SwipeableDrawer (600px width) with detailed evaluation result breakdown

Key Sections Displayed

Section	Description
Evaluation Id	Displays the unique identifier for the evaluation run
Input	Shows the input text that was sent to the chatflow
Expected Output	Shows the expected output for comparison
Actual Output / Error	Per-chatflow card showing actual response or styled error chip
Latency Metrics	Chips showing API, Chain, Retriever, Tool, and LLM latencies
Tokens	Either a detailed table with per-node breakdown (nodeLabel, provider/model, input/output/total) or summary chips
Cost	Either a detailed table with per-node cost breakdown or summary chips (total, prompt, completion)
Custom Evaluators	Pass/Fail chips with evaluator name and operator/measure details from evaluatorConstant
LLM Graded	Key-value chip pairs from LLM evaluation scores

Key Functions

Function	Description
getEvaluatorValue(evaluator)	Formats evaluator value based on type: quoted string for text, raw number for numeric, empty for JSON
getFlowIcon(index)	Returns the appropriate icon component based on chatflow type (Chatflow, Custom Assistant, Agentflow v2)

Usage Examples

Basic Usage

import EvaluationResultSideDrawer from '@/views/evaluations/EvaluationResultSideDrawer'

<EvaluationResultSideDrawer
    show={showDrawer}
    dialogProps={{
        data: selectedRow,
        evaluationChatflows: ['My Chatflow'],
        evaluationType: 'llm',
        additionalConfig: { chatflowTypes: ['Chatflow'] }
    }}
    onClickFunction={() => setShowDrawer(false)}
/>

Related Pages

• Principle:FlowiseAI_Flowise_Evaluation_Results_Analysis