Implementation:FlowiseAI Flowise EvaluationResultVersionsSideDrawer
| Knowledge Sources | |
|---|---|
| Domains | Evaluations, UI Navigation |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
EvaluationResultVersionsSideDrawer is a React side drawer component that displays a timeline of evaluation result versions, allowing users to navigate between different evaluation runs.
Description
This component renders a Material UI SwipeableDrawer anchored to the right side of the screen. It fetches evaluation versions via the evaluations API using the useApi hook and displays them in a MUI Lab Timeline layout. Each timeline entry shows the run date formatted with Moment.js and a clickable button labeled with the version number. Clicking a version triggers navigation to that specific evaluation result via the onSelectVersion callback.
Usage
Use this component when users need to browse and switch between different versions of evaluation results. It is typically opened from an evaluation results detail page to allow version comparison and navigation.
Code Reference
Source Location
- Repository: FlowiseAI Flowise
- File: packages/ui/src/views/evaluations/EvaluationResultVersionsSideDrawer.jsx
- Lines: 1-84
Signature
const EvaluationResultVersionsSideDrawer = ({ show, dialogProps, onClickFunction, onSelectVersion }) => { ... }
Import
import EvaluationResultVersionsSideDrawer from '@/views/evaluations/EvaluationResultVersionsSideDrawer'
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| show | bool | Yes | Controls whether the side drawer is open |
| dialogProps | object | Yes | Must contain an id property used to fetch evaluation versions from the API |
| onClickFunction | func | Yes | Callback invoked when the drawer is closed or the close button is clicked |
| onSelectVersion | func | Yes | Callback invoked with a version id string when the user selects a version from the timeline |
Outputs
| Name | Type | Description |
|---|---|---|
| JSX.Element | SwipeableDrawer | Renders a right-anchored drawer containing the evaluation versions timeline |
Usage Examples
Basic Usage
<EvaluationResultVersionsSideDrawer
show={showVersionsDrawer}
dialogProps={{ id: 'evaluation_abc123' }}
onClickFunction={() => setShowVersionsDrawer(false)}
onSelectVersion={(versionId) => {
navigate(`/evaluations/results/${versionId}`)
}}
/>