From 17895a54708ed92453051b62dd19deff38cd7e97 Mon Sep 17 00:00:00 2001
From: sasha <aadereiko@gmail.com>
Date: Mon, 13 Jan 2025 14:48:23 +0100
Subject: [PATCH] [OPIK-742]: open an error tooltip for a disabled run button;
 (#1032)

* [OPIK-742]: open an error tooltip for a disabled run button;

* [OPIK-742]: fix lint issues;

---------

Co-authored-by: Sasha <aliaksandr@comet.com>
---
 .../PlaygroundOutputActions.tsx               | 44 +++++++++++--------
 .../shared/TooltipWrapper/TooltipWrapper.tsx  |  6 ++-
 2 files changed, 30 insertions(+), 20 deletions(-)

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<HTMLButtonElement>(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}
           >
             <Pause className="mr-1 size-4" />
             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 (
       <TooltipWrapper
         content={tooltipMessage}
-        hotkeys={isDisabled ? undefined : RUN_HOT_KEYS}
+        key={tooltipKey}
+        defaultOpen={shouldTooltipAppear}
+        hotkeys={isDisabledButton ? undefined : RUN_HOT_KEYS}
       >
         <Button
           size="sm"
           className="mt-2.5"
           onClick={runAll}
-          disabled={isDisabled}
+          disabled={isDisabledButton}
           style={style}
-          ref={actionButtonRef}
         >
           <Play className="mr-1 size-4" />
           Run all
@@ -166,7 +172,7 @@ const PlaygroundOutputActions = ({
   };
 
   useEffect(() => {
-    // stop streaming whenever the location changes
+    // stop streaming whenever a user leaves a page
     return () => stopAll();
   }, [stopAll]);
 
diff --git a/apps/opik-frontend/src/components/shared/TooltipWrapper/TooltipWrapper.tsx b/apps/opik-frontend/src/components/shared/TooltipWrapper/TooltipWrapper.tsx
index 25af29170c..fb702ddd6f 100644
--- a/apps/opik-frontend/src/components/shared/TooltipWrapper/TooltipWrapper.tsx
+++ b/apps/opik-frontend/src/components/shared/TooltipWrapper/TooltipWrapper.tsx
@@ -1,4 +1,6 @@
 import React from "react";
+import { TooltipProps } from "@radix-ui/react-tooltip";
+
 import {
   Tooltip,
   TooltipArrow,
@@ -14,6 +16,7 @@ export type TooltipWrapperProps = {
   side?: "top" | "right" | "bottom" | "left";
   hotkeys?: React.ReactNode[];
   delayDuration?: number;
+  defaultOpen?: TooltipProps["defaultOpen"];
 };
 
 const TooltipWrapper: React.FunctionComponent<TooltipWrapperProps> = ({
@@ -22,10 +25,11 @@ const TooltipWrapper: React.FunctionComponent<TooltipWrapperProps> = ({
   side,
   hotkeys = null,
   delayDuration = 500,
+  defaultOpen,
 }) => {
   return (
     <TooltipProvider delayDuration={delayDuration}>
-      <Tooltip>
+      <Tooltip defaultOpen={defaultOpen}>
         <TooltipTrigger asChild>{children}</TooltipTrigger>
         <TooltipPortal>
           <TooltipContent