better dropdown styling

wandb · Oct 10, 2024 · 2716b6d · 2716b6d
1 parent 92e293c
commit 2716b6d
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 28 deletions.
diff --git a/...mpareEvaluationsPage/sections/ComparisonDefinitionSection/ComparisonDefinitionSection.tsx b/...mpareEvaluationsPage/sections/ComparisonDefinitionSection/ComparisonDefinitionSection.tsx
@@ -60,6 +60,7 @@ export const ComparisonDefinitionSection: React.FC<{
   return (
     <DragDropProvider>
       <DropTarget
+        style={{width: '100%', overflow: 'auto'}}
         partRef={{id: `target`}}
         onDragOver={onDragOver}
         onDrop={onDrop}>
@@ -83,7 +84,9 @@ export const ComparisonDefinitionSection: React.FC<{
               </div>
             );
           })}
-          <AddEvaluationButton state={props.state} />
+          <HorizontalBox>
+            <AddEvaluationButton state={props.state} />
+          </HorizontalBox>
         </HorizontalBox>
       </DropTarget>
     </DragDropProvider>
@@ -118,7 +121,7 @@ const ModelRefLabel: React.FC<{modelRef: string}> = props => {
   const objectVersion = useObjectVersion(objVersionKey);
   return (
     <span className="ml-2">
-      {objectVersion.result?.objectId}:{objectVersion.result?.versionIndex}
+      {objectVersion.result?.objectId}:v{objectVersion.result?.versionIndex}
     </span>
   );
 };
@@ -142,7 +145,7 @@ const AddEvaluationButton: React.FC<{
   );
   const expandedRefCols = useMemo(() => new Set<string>(), []);
   // Don't query for output here, re-queried in tsDataModelHooksEvaluationComparison.ts
-  const columns = useMemo(() => ['inputs'], []);
+  const columns = useMemo(() => ['inputs', 'display_name'], []);
   const calls = useCallsForQuery(
     props.state.data.entity,
     props.state.data.project,
@@ -260,8 +263,24 @@ const AddEvaluationButton: React.FC<{
                     className="pb-8 pt-8 font-['Source_Sans_Pro'] text-base font-normal text-moon-800"
                     onClick={() => addEvaluationCall(call.callId)}>
                     <>
-                      <span>{call.displayName ?? call.spanName}</span>
-                      <Id id={call.callId} type="Call" className="ml-0 mr-4" />
+                      <span
+                        style={{
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                          flexGrow: 1,
+                          flexShrink: 1,
+                          maxWidth: '250px',
+                        }}>
+                        {call.displayName ?? call.spanName}
+                      </span>
+                      <span style={{flexShrink: 0}}>
+                        <Id
+                          id={call.callId}
+                          type="Call"
+                          className="ml-0 mr-4"
+                        />
+                      </span>
                       <VerticalBar />
                       <ModelRefLabel modelRef={call.traceCall?.inputs.model} />
                     </>

diff --git a/...ages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/EvaluationDefinition.tsx b/...ages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/EvaluationDefinition.tsx
@@ -34,22 +34,6 @@ import {
 import {EvaluationComparisonState, getBaselineCallId} from '../../ecpState';
 import {HorizontalBox} from '../../Layout';
 
-const DragHandleIcon = styled(WBIcon).attrs({name: 'vertical-handle'})`
-  font-size: calc(30 * 1.75);
-  border-radius: 50%;
-  color: gray300;
-  user-select: none;
-  cursor: grab;
-  &&&:hover {
-    background: gray100;
-    color: black;
-  }
-  &:active {
-    cursor: grabbing;
-  }
-`;
-DragHandle.displayName = 'S.DragHandle';
-
 export const EvaluationDefinition: React.FC<{
   state: EvaluationComparisonState;
   callId: string;
@@ -109,27 +93,34 @@ export const EvaluationDefinition: React.FC<{
           height: EVAL_DEF_HEIGHT,
           borderRadius: BOX_RADIUS,
           border: STANDARD_BORDER,
-          padding: '12px',
+          paddingTop: '12px',
+          paddingBottom: '12px',
           alignItems: 'center',
           justifyContent: 'space-between',
         }}>
-        <DragHandle partRef={partRef}>
+        <DragHandle
+          partRef={partRef}
+          style={{marginTop: '5px', marginRight: '-20px', marginLeft: '4px'}}>
           <DragHandleIcon />
         </DragHandle>
-        <EvaluationCallLink {...props} />
+        <div style={{marginRight: '-8px'}}>
+          <EvaluationCallLink {...props} />
+        </div>
         {props.callId === getBaselineCallId(props.state) && (
-          <Pill label="Baseline" color="teal" />
+          <div style={{marginRight: '-8px'}}>
+            <Pill label="Baseline" color="teal" />
+          </div>
         )}
-        <div style={{marginLeft: '-14px'}}>
+        <div style={{marginLeft: '-6px', marginRight: '8px'}}>
           <PopupDropdown
             sections={[menuOptions]}
             trigger={
               <Button
-                className="rotate-90"
+                className="ml-4 rotate-90"
                 icon="overflow-horizontal"
                 size="small"
                 variant="ghost"
-                style={{marginLeft: '4px'}}
+                // style={{marginLeft: '4px'}}
               />
             }
           />
@@ -258,3 +249,19 @@ export const VerticalBar: React.FC = () => {
     />
   );
 };
+
+const DragHandleIcon = styled(WBIcon).attrs({name: 'vertical-handle'})`
+  font-size: 26px;
+  border-radius: 50%;
+  color: gray300;
+  user-select: none;
+  cursor: grab;
+  &&&:hover {
+    background: gray100;
+    color: black;
+  }
+  &:active {
+    cursor: grabbing;
+  }
+`;
+DragHandle.displayName = 'S.DragHandle';