diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/ComparisonDefinitionSection.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/ComparisonDefinitionSection.tsx index 04fd25baf96..427d376a1a5 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/ComparisonDefinitionSection.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/ComparisonDefinitionSection.tsx @@ -60,6 +60,7 @@ export const ComparisonDefinitionSection: React.FC<{ return ( @@ -83,7 +84,9 @@ export const ComparisonDefinitionSection: React.FC<{ ); })} - + + + @@ -118,7 +121,7 @@ const ModelRefLabel: React.FC<{modelRef: string}> = props => { const objectVersion = useObjectVersion(objVersionKey); return ( - {objectVersion.result?.objectId}:{objectVersion.result?.versionIndex} + {objectVersion.result?.objectId}:v{objectVersion.result?.versionIndex} ); }; @@ -142,7 +145,7 @@ const AddEvaluationButton: React.FC<{ ); const expandedRefCols = useMemo(() => new Set(), []); // 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)}> <> - {call.displayName ?? call.spanName} - + + {call.displayName ?? call.spanName} + + + + diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/EvaluationDefinition.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/EvaluationDefinition.tsx index 99812bb98fe..f7318819de5 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/EvaluationDefinition.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/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', }}> - + - +
+ +
{props.callId === getBaselineCallId(props.state) && ( - +
+ +
)} -
+
} /> @@ -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';