Merge branch 'main' into thiagohora/OPIK-736_fix_deserialization_issue

comet-ml · Jan 10, 2025 · ff05e9e · ff05e9e
2 parents 2b68503 + c97b71c
commit ff05e9e
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 18 deletions.
diff --git a/...ages/PlaygroundPage/PlaygroundOutputs/PlaygroundOutputActions/PlaygroundOutputActions.tsx b/...ages/PlaygroundPage/PlaygroundOutputs/PlaygroundOutputActions/PlaygroundOutputActions.tsx
@@ -196,8 +196,9 @@ const PlaygroundOutputActions = ({
           options={datasetOptions}
           value={datasetId || ""}
           placeholder={
-            <div className="flex items-center text-foreground">
-              <Database className="mr-2 size-4" /> Dataset
+            <div className="flex w-full items-center text-foreground">
+              <Database className="mr-2 size-4" />
+              <span className="truncate">Dataset</span>
             </div>
           }
           onChange={handleChangeDatasetId}
@@ -214,9 +215,9 @@ const PlaygroundOutputActions = ({
           })}
           renderTitle={(option) => {
             return (
-              <div className="flex items-center text-foreground">
+              <div className="flex w-full items-center text-foreground">
                 <Database className="mr-2 size-4" />
-                {option.label}
+                <span className="max-w-[90%] truncate">{option.label}</span>
               </div>
             );
           }}

diff --git a/apps/opik-frontend/src/components/shared/LoadableSelectBox/LoadableSelectBox.tsx b/apps/opik-frontend/src/components/shared/LoadableSelectBox/LoadableSelectBox.tsx
@@ -29,7 +29,7 @@ export type LoadableSelectBoxProps = {
   onLoadMore?: () => void;
   buttonSize?: ButtonProps["size"];
   buttonClassName?: string;
-  renderTitle?: (option: DropdownOption<string>) => void;
+  renderTitle?: (option: DropdownOption<string>) => ReactElement;
 };
 
 export const LoadableSelectBox = ({
@@ -43,7 +43,7 @@ export const LoadableSelectBox = ({
   isLoading = false,
   disabled,
   onLoadMore,
-  renderTitle,
+  renderTitle: parentRenderTitle,
 }: LoadableSelectBoxProps) => {
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
@@ -56,11 +56,20 @@ export const LoadableSelectBox = ({
       ? `No search results for the first ${optionsCount} items`
       : "No search results"
     : "No data";
-  const valueOption = options.find((o) => o.value === value);
-  const title =
-    valueOption && isFunction(renderTitle)
-      ? renderTitle(valueOption)
-      : valueOption?.label;
+
+  const renderTitle = () => {
+    const valueOption = options.find((o) => o.value === value);
+
+    if (!valueOption) {
+      return <div className="truncate text-light-slate">{placeholder}</div>;
+    }
+
+    if (isFunction(parentRenderTitle)) {
+      return parentRenderTitle(valueOption);
+    }
+
+    return <div>{valueOption?.label}</div>;
+  };
 
   const filteredOptions = useMemo(() => {
     return options.filter((o) => toLower(o.label).includes(toLower(search)));
@@ -90,11 +99,7 @@ export const LoadableSelectBox = ({
           disabled={disabled}
           ref={ref}
         >
-          {title ? (
-            <div className="truncate">{title}</div>
-          ) : (
-            <div className="truncate text-light-slate">{placeholder}</div>
-          )}
+          {renderTitle()}
 
           <ChevronDown className="ml-2 size-4 shrink-0 text-light-slate" />
         </Button>
@@ -136,11 +141,11 @@ export const LoadableSelectBox = ({
                   openChangeHandler(false);
                 }}
               >
-                <span className="w-4">
+                <div className="min-w-4">
                   {option.value === value && (
                     <Check className="size-3.5 shrink-0" strokeWidth="3" />
                   )}
-                </span>
+                </div>
 
                 <div className="comet-body-s truncate">{option.label}</div>
               </div>