diff --git a/apps/opik-frontend/src/components/pages/PlaygroundPage/PlaygroundOutputs/PlaygroundOutputActions/PlaygroundOutputActions.tsx b/apps/opik-frontend/src/components/pages/PlaygroundPage/PlaygroundOutputs/PlaygroundOutputActions/PlaygroundOutputActions.tsx index ac49c03144..7801baa8ef 100644 --- a/apps/opik-frontend/src/components/pages/PlaygroundPage/PlaygroundOutputs/PlaygroundOutputActions/PlaygroundOutputActions.tsx +++ b/apps/opik-frontend/src/components/pages/PlaygroundPage/PlaygroundOutputs/PlaygroundOutputActions/PlaygroundOutputActions.tsx @@ -1,10 +1,4 @@ -import React, { - useCallback, - useEffect, - useMemo, - useRef, - useState, -} from "react"; +import React, { useCallback, useEffect, useMemo, useState } from "react"; import useDatasetsList from "@/api/datasets/useDatasetsList"; import { Dataset, DatasetItem } from "@/types/datasets"; import { Button } from "@/components/ui/button"; @@ -43,8 +37,6 @@ const PlaygroundOutputActions = ({ datasetItems, loadingDatasetItems, }: PlaygroundOutputActionsProps) => { - const actionButtonRef = useRef(null); - const [isLoadedMore, setIsLoadedMore] = useState(false); const promptMap = usePromptMap(); @@ -100,7 +92,6 @@ const PlaygroundOutputActions = ({ className="mt-2.5" variant="outline" onClick={stopAll} - ref={actionButtonRef} > Stop all @@ -110,18 +101,28 @@ const PlaygroundOutputActions = ({ } const areAllPromptsValid = Object.values(promptMap).every((p) => !!p.model); - const isDatasetEmpty = !!datasetId && datasetItems.length === 0; + const isDatasetEmpty = + !loadingDatasetItems && !!datasetId && datasetItems.length === 0; + const isDatasetRemoved = - datasetId && !datasets.find((d) => d.id === datasetId); + !isLoadingDatasets && + datasetId && + !datasets.find((d) => d.id === datasetId); - const isDisabled = + const isDisabledButton = !areAllPromptsValid || loadingDatasetItems || isLoadingDatasets || isDatasetRemoved || isDatasetEmpty; - const style: React.CSSProperties = isDisabled + const shouldTooltipAppear = !!( + isDatasetEmpty || + !areAllPromptsValid || + isDatasetRemoved + ); + + const style: React.CSSProperties = isDisabledButton ? { pointerEvents: "auto" } : {}; @@ -141,22 +142,27 @@ const PlaygroundOutputActions = ({ const runMessage = promptCount === 1 ? "Run your prompt" : "Run your prompts"; - const tooltipMessage = isDisabled + const tooltipMessage = isDisabledButton ? datasetRemovedMessage || emptyDatasetMessage || selectLLMModelMessage : runMessage; + const tooltipKey = shouldTooltipAppear + ? "action-tooltip-open-tooltip" + : "action-tooltip"; + return (