chore: eval selection bar

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/callsTableQuery.ts

@@ -33,7 +33,8 @@ export const useCallsForQuery = (
   gridFilter: GridFilterModel,
   gridSort: GridSortModel,
   gridPage: GridPaginationModel,
-  expandedColumns: Set<string>
+  expandedColumns: Set<string>,
+  columns?: string[]
 ): {
   result: CallSchema[];
   loading: boolean;
@@ -57,7 +58,7 @@ export const useCallsForQuery = (
     offset,
     sortBy,
     filterBy,
-    undefined,
+    columns,
     expandedColumns,
     {
       refetchOnDelete: true,

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/CompareEvaluationsPage.tsx

@@ -95,7 +95,9 @@ export const CompareEvaluationsPageContent: React.FC<
   );
 
   React.useEffect(() => {
-    if (props.evaluationCallIds.length > 0) {
+    // Only update the baseline if we are switching evaluations, if there
+    // is more than 1, we are in the compare view and baseline is auto set
+    if (props.evaluationCallIds.length === 1) {
       setBaselineEvaluationCallId(props.evaluationCallIds[0]);
     }
   }, [props.evaluationCallIds]);
@@ -108,7 +110,7 @@ export const CompareEvaluationsPageContent: React.FC<
     <CompareEvaluationsProvider
       entity={props.entity}
       project={props.project}
-      evaluationCallIds={props.evaluationCallIds}
+      initialEvaluationCallIds={props.evaluationCallIds}
       baselineEvaluationCallId={baselineEvaluationCallId ?? undefined}
       comparisonDimensions={comparisonDimensions ?? undefined}
       setBaselineEvaluationCallId={setBaselineEvaluationCallId}

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/compareEvaluationsContext.tsx

@@ -1,5 +1,5 @@
 import {Box} from '@material-ui/core';
-import React, {useMemo} from 'react';
+import React, {useMemo, useState} from 'react';
 
 import {WeaveLoader} from '../../../../../../common/components/WeaveLoader';
 import {LinearProgress} from '../../../../../LinearProgress';
@@ -16,6 +16,8 @@ const CompareEvaluationsContext = React.createContext<{
     React.SetStateAction<ComparisonDimensionsType | null>
   >;
   setSelectedInputDigest: React.Dispatch<React.SetStateAction<string | null>>;
+  addEvaluationCall: (newCallId: string) => void;
+  removeEvaluationCall: (callId: string) => void;
 } | null>(null);
 
 export const useCompareEvaluationsState = () => {
@@ -29,7 +31,7 @@ export const useCompareEvaluationsState = () => {
 export const CompareEvaluationsProvider: React.FC<{
   entity: string;
   project: string;
-  evaluationCallIds: string[];
+  initialEvaluationCallIds: string[];
   setBaselineEvaluationCallId: React.Dispatch<
     React.SetStateAction<string | null>
   >;
@@ -43,7 +45,7 @@ export const CompareEvaluationsProvider: React.FC<{
 }> = ({
   entity,
   project,
-  evaluationCallIds,
+  initialEvaluationCallIds,
   setBaselineEvaluationCallId,
   setComparisonDimensions,
 
@@ -54,6 +56,9 @@ export const CompareEvaluationsProvider: React.FC<{
   selectedInputDigest,
   children,
 }) => {
+  const [evaluationCallIds, setEvaluationCallIds] = useState(
+    initialEvaluationCallIds
+  );
   const initialState = useEvaluationComparisonState(
     entity,
     project,
@@ -72,10 +77,17 @@ export const CompareEvaluationsProvider: React.FC<{
       setBaselineEvaluationCallId,
       setComparisonDimensions,
       setSelectedInputDigest,
+      addEvaluationCall: (newCallId: string) => {
+        setEvaluationCallIds(prev => [...prev, newCallId]);
+      },
+      removeEvaluationCall: (callId: string) => {
+        setEvaluationCallIds(prev => prev.filter(id => id !== callId));
+      },
     };
   }, [
     initialState.loading,
     initialState.result,
+    setEvaluationCallIds,
     setBaselineEvaluationCallId,
     setComparisonDimensions,
     setSelectedInputDigest,

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/ComparisonDefinitionSection.tsx

@@ -1,12 +1,24 @@
+import {PopupDropdown} from '@wandb/weave/common/components/PopupDropdown';
+import {Tailwind} from '@wandb/weave/components/Tailwind';
+import {parseRef, WeaveObjectRef} from '@wandb/weave/react';
 import React, {useMemo} from 'react';
 
 import {Button} from '../../../../../../../Button';
+import {
+  DEFAULT_FILTER_CALLS,
+  DEFAULT_SORT_CALLS,
+} from '../../../CallsPage/CallsTable';
+import {useCallsForQuery} from '../../../CallsPage/callsTableQuery';
+import {useEvaluationsFilter} from '../../../CallsPage/evaluationsFilter';
+import {Id} from '../../../common/Id';
+import {useWFHooks} from '../../../wfReactInterface/context';
+import {ObjectVersionKey} from '../../../wfReactInterface/wfDataModelHooksInterface';
 import {useCompareEvaluationsState} from '../../compareEvaluationsContext';
 import {STANDARD_PADDING} from '../../ecpConstants';
 import {getOrderedCallIds} from '../../ecpState';
 import {EvaluationComparisonState} from '../../ecpState';
 import {HorizontalBox} from '../../Layout';
-import {EvaluationDefinition} from './EvaluationDefinition';
+import {EvaluationDefinition, VerticalBar} from './EvaluationDefinition';
 
 export const ComparisonDefinitionSection: React.FC<{
   state: EvaluationComparisonState;
@@ -28,25 +40,122 @@ export const ComparisonDefinitionSection: React.FC<{
       {evalCallIds.map((key, ndx) => {
         return (
           <React.Fragment key={key}>
-            {ndx !== 0 && <SwapPositionsButton callId={key} />}
             <EvaluationDefinition state={props.state} callId={key} />
           </React.Fragment>
         );
       })}
+      <AddEvaluationButton state={props.state} />
     </HorizontalBox>
   );
 };
 
-const SwapPositionsButton: React.FC<{callId: string}> = props => {
-  const {setBaselineEvaluationCallId} = useCompareEvaluationsState();
+const EvalMenuOption: React.FC<{
+  callId: string;
+  callName: string;
+  modelRef: string;
+}> = props => {
+  const {useObjectVersion} = useWFHooks();
+  const objRef = useMemo(
+    () => parseRef(props.modelRef) as WeaveObjectRef,
+    [props.modelRef]
+  );
+  const objVersionKey = useMemo(() => {
+    return {
+      scheme: 'weave',
+      entity: objRef.entityName,
+      project: objRef.projectName,
+      weaveKind: objRef.weaveKind,
+      objectId: objRef.artifactName,
+      versionHash: objRef.artifactVersion,
+      path: '',
+      refExtra: objRef.artifactRefExtra,
+    } as ObjectVersionKey;
+  }, [
+    objRef.artifactName,
+    objRef.artifactRefExtra,
+    objRef.artifactVersion,
+    objRef.entityName,
+    objRef.projectName,
+    objRef.weaveKind,
+  ]);
+  const objectVersion = useObjectVersion(objVersionKey);
+  return (
+    <Tailwind>
+      <div className="flexbox flex items-center">
+        <span>{props.callName}</span>
+        <Id id={props.callId} type="Call" />
+        <VerticalBar />
+        <span className="ml-2">
+          {objectVersion.result?.objectId}:{objectVersion.result?.versionIndex}
+        </span>
+      </div>
+    </Tailwind>
+  );
+};
+
+const AddEvaluationButton: React.FC<{
+  state: EvaluationComparisonState;
+}> = props => {
+  const {addEvaluationCall} = useCompareEvaluationsState();
+
+  const evaluationsFilter = useEvaluationsFilter(
+    props.state.data.entity,
+    props.state.data.project
+  );
+  const page = useMemo(
+    () => ({
+      pageSize: 100,
+      page: 0,
+    }),
+    []
+  );
+  const expandedRefCols = useMemo(() => new Set<string>(), []);
+  const columns = useMemo(() => ['inputs'], []);
+  const calls = useCallsForQuery(
+    props.state.data.entity,
+    props.state.data.project,
+    evaluationsFilter,
+    DEFAULT_FILTER_CALLS,
+    DEFAULT_SORT_CALLS,
+    page,
+    expandedRefCols,
+    columns
+  );
+
+  const menuOptions = useMemo(() => {
+    return [
+      calls.result.map(call => ({
+        key: call.callId,
+        content: (
+          <EvalMenuOption
+            callId={call.callId}
+            callName={call.displayName ?? call.spanName}
+            modelRef={call.traceCall?.inputs.model}
+          />
+        ),
+        onClick: () => {
+          addEvaluationCall(call.callId);
+        },
+      })),
+    ];
+  }, [calls, addEvaluationCall]);
+
   return (
-    <Button
-      size="medium"
-      variant="quiet"
-      onClick={() => {
-        setBaselineEvaluationCallId(props.callId);
-      }}
-      icon="retry"
-    />
+    <div className="flex w-full">
+      <PopupDropdown
+        sections={menuOptions}
+        flowing
+        trigger={
+          <Button
+            className="row-actions-button"
+            icon="add-new"
+            size="large"
+            variant="ghost"
+            style={{marginLeft: '4px'}}>
+            Add Evaluation
+          </Button>
+        }
+      />
+    </div>
   );
 };

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/EvaluationDefinition.tsx

@@ -1,5 +1,8 @@
 import {Box} from '@material-ui/core';
 import {Circle} from '@mui/icons-material';
+import {PopupDropdown} from '@wandb/weave/common/components/PopupDropdown';
+import {Button} from '@wandb/weave/components/Button';
+import {Pill} from '@wandb/weave/components/Tag';
 import React, {useMemo} from 'react';
 
 import {
@@ -14,6 +17,7 @@ import {SmallRef} from '../../../../../Browse2/SmallRef';
 import {CallLink, ObjectVersionLink} from '../../../common/Links';
 import {useWFHooks} from '../../../wfReactInterface/context';
 import {ObjectVersionKey} from '../../../wfReactInterface/wfDataModelHooksInterface';
+import {useCompareEvaluationsState} from '../../compareEvaluationsContext';
 import {
   BOX_RADIUS,
   CIRCLE_SIZE,
@@ -27,6 +31,36 @@ export const EvaluationDefinition: React.FC<{
   state: EvaluationComparisonState;
   callId: string;
 }> = props => {
+  const {removeEvaluationCall, setBaselineEvaluationCallId} =
+    useCompareEvaluationsState();
+
+  const menuOptions = useMemo(() => {
+    return [
+      {
+        key: 'add-to-baseline',
+        content: 'Set as baseline',
+        onClick: () => {
+          setBaselineEvaluationCallId(props.callId);
+        },
+        disabled: props.callId === props.state.baselineEvaluationCallId,
+      },
+      {
+        key: 'remove',
+        content: 'Remove',
+        onClick: () => {
+          removeEvaluationCall(props.callId);
+        },
+        disabled: Object.keys(props.state.data.evaluationCalls).length === 1,
+      },
+    ];
+  }, [
+    props.callId,
+    props.state.baselineEvaluationCallId,
+    props.state.data.evaluationCalls,
+    removeEvaluationCall,
+    setBaselineEvaluationCallId,
+  ]);
+
   return (
     <HorizontalBox
       sx={{
@@ -38,11 +72,25 @@ export const EvaluationDefinition: React.FC<{
         justifyContent: 'space-between',
       }}>
       <EvaluationCallLink {...props} />
-      <VerticalBar />
-      <EvaluationModelLink {...props} />
+      {props.callId === props.state.baselineEvaluationCallId && (
+        <Pill label="Baseline" color="teal" />
+      )}
+      <PopupDropdown
+        sections={[menuOptions]}
+        trigger={
+          <Button
+            className="rotate-90"
+            icon="overflow-horizontal"
+            size="small"
+            variant="ghost"
+            style={{marginLeft: '4px'}}
+          />
+        }
+      />
     </HorizontalBox>
   );
 };
+
 export const EvaluationCallLink: React.FC<{
   callId: string;
   state: EvaluationComparisonState;
@@ -147,7 +195,8 @@ const ModelIcon: React.FC = () => {
     </Box>
   );
 };
-const VerticalBar: React.FC = () => {
+
+export const VerticalBar: React.FC = () => {
   return (
     <div
       style={{