Implementation:FlowiseAI Flowise GetVersions

Property	Value
Implementation Name	GetVersions
Implements	Principle:FlowiseAI_Flowise_Evaluation_Version_Comparison
Source	packages/ui/src/api/evaluations.js, packages/ui/src/views/evaluations/EvaluationResultVersionsSideDrawer.jsx
Repository	FlowiseAI/Flowise
Domain	API Client, Version Management, Timeline UI
Last Updated	2026-02-12 14:00 GMT

Code Reference

Source Location

The version retrieval API function is defined in packages/ui/src/api/evaluations.js at line 10. The timeline UI is implemented in packages/ui/src/views/evaluations/EvaluationResultVersionsSideDrawer.jsx.

Signature

// packages/ui/src/api/evaluations.js:L10
const getVersions = (id) => client.get(`/evaluations/versions/${id}`)

The API client is configured at packages/ui/src/api/client.js with a base URL of ${baseURL}/api/v1, making the full endpoint:

• GET /api/v1/evaluations/versions/{id}

Import

import evaluationApi from '@/api/evaluations'

UI Component

The versions side drawer component renders the timeline:

// packages/ui/src/views/evaluations/EvaluationResultVersionsSideDrawer.jsx
import { Timeline, TimelineConnector, TimelineContent, TimelineDot, TimelineItem,
         TimelineOppositeContent, timelineOppositeContentClasses, TimelineSeparator } from '@mui/lab'
import evaluationApi from '@/api/evaluations'
import useApi from '@/hooks/useApi'

const EvaluationResultVersionsSideDrawer = ({ show, dialogProps, onClickFunction, onSelectVersion }) => {
    const [versions, setVersions] = useState([])
    const getVersionsApi = useApi(evaluationApi.getVersions)

    useEffect(() => {
        getVersionsApi.request(dialogProps.id)
    }, [dialogProps])

    useEffect(() => {
        if (getVersionsApi.data) {
            setVersions(getVersionsApi.data.versions)
        }
    }, [getVersionsApi.data])

    // Renders MUI Timeline with version entries
    // Each entry shows: moment(version.runDate).format('DD-MMM-YYYY, hh:mm:ss A')
}

The component uses MUI Lab Timeline for the chronological version display and moment.js for date formatting. It is rendered as a SwipeableDrawer anchored to the right side of the screen.

I/O Contract

getVersions

Inputs:

• id (string, required): The unique identifier of the evaluation whose versions to retrieve

Outputs:

• Promise<{data: {versions: Version[]}}>: Resolves with an object containing a versions array, where each Version has:
  • id (string): Unique identifier for the specific version
  • version (number): Sequential version number
  • runDate (string): ISO timestamp of when the version was executed

EvaluationResultVersionsSideDrawer Props

• show (boolean): Whether the side drawer is visible
• dialogProps (Object): Contains id (evaluation ID) used to fetch versions
• onClickFunction (Function): Callback to close the drawer
• onSelectVersion (Function): Callback invoked with the selected version ID when a user clicks a version entry

Usage Examples

Fetching Evaluation Versions

import evaluationApi from '@/api/evaluations'

// Retrieve all versions for an evaluation
const response = await evaluationApi.getVersions('eval-run-123')
const versions = response.data.versions

// Display version history
versions.forEach((version) => {
    console.log(`Version ${version.version}: ${version.runDate} (ID: ${version.id})`)
})

Integrating the Versions Side Drawer

import React, { useState } from 'react'
import EvaluationResultVersionsSideDrawer from '@/views/evaluations/EvaluationResultVersionsSideDrawer'

const EvaluationResultPage = ({ evaluationId }) => {
    const [showVersions, setShowVersions] = useState(false)

    const handleSelectVersion = (versionId) => {
        // Navigate to or load the selected version's results
        setShowVersions(false)
        loadEvaluationResults(versionId)
    }

    return (
        <>
            <button onClick={() => setShowVersions(true)}>View Versions</button>
            <EvaluationResultVersionsSideDrawer
                show={showVersions}
                dialogProps={{ id: evaluationId }}
                onClickFunction={() => setShowVersions(false)}
                onSelectVersion={handleSelectVersion}
            />
        </>
    )
}

Related Pages

• Principle:FlowiseAI_Flowise_Evaluation_Version_Comparison
• Implementation:FlowiseAI_Flowise_RunAgain
• Implementation:FlowiseAI_Flowise_GetEvaluation