Skip to content

Commit

Permalink
fix(frontend): improved naming, removed evaluator card view and impro…
Browse files Browse the repository at this point in the history 
…ved style
  • Loading branch information
@bekossy
bekossy committed Sep 11, 2024
1 parent 05c18fb commit 65f0a90
Show file tree
Hide file tree
Showing 7 changed files with 42 additions and 81 deletions.
2 changes: 1 addition & 1 deletion agenta-web/src/components/HumanEvaluations/AbTestingEvaluation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -416,7 +416,7 @@ const AbTestingEvaluation = ({viewType}: {viewType: "evaluation" | "overview"})
{viewType === "overview" ? (
<div className="flex items-center justify-between">
<Space>
<Title>A/B Testing Evaluations</Title>
<Title>Human A/B Testing</Title>
<Button
size="small"
href={`/apps/${appId}/evaluations?selectedEvaluation=ab_testing_evaluation`}
Expand Down
2 changes: 1 addition & 1 deletion agenta-web/src/components/HumanEvaluations/SingleModelEvaluation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -310,7 +310,7 @@ const SingleModelEvaluation = ({viewType}: {viewType: "evaluation" | "overview"}
{viewType === "overview" ? (
<div className="flex items-center justify-between">
<Space>
<Title>Single Model Evaluations</Title>
<Title>Human Annotation</Title>

<Button
size="small"
Expand Down
67 changes: 15 additions & 52 deletions .../components/pages/evaluations/autoEvaluation/EvaluatorsModal/ConfigureEvaluator/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -362,32 +362,12 @@ const ConfigureEvaluator = ({
<Typography.Text className={classes.title}>
{selectedEvaluator.name}
</Typography.Text>
<Space>
<Button
size="small"
className="flex items-center gap-2"
disabled={true}
>
<ClockClockwise />
View history
</Button>
<Button
size="small"
onClick={() => setDebugEvaluator(!debugEvaluator)}
>
{debugEvaluator ? (
<div className="flex items-center gap-2">
Test
<CaretDoubleRight />
</div>
) : (
<div className="flex items-center gap-2">
<CaretDoubleLeft />
Test
</div>
)}
</Button>
</Space>
<Button size="small" onClick={() => setDebugEvaluator(!debugEvaluator)}>
<div className="flex items-center gap-2">
{debugEvaluator ? <CaretDoubleLeft /> : <CaretDoubleRight />}
Test
</div>
</Button>
</Flex>
<Typography.Text type="secondary">
{selectedEvaluator.description}
Expand All @@ -404,10 +384,6 @@ const ConfigureEvaluator = ({
className={classes.formContainer}
>
<Space direction="vertical" size={4}>
<Typography.Text className={classes.formTitleText}>
Identifier
</Typography.Text>

<div className="flex gap-4">
<Form.Item
name="name"
Expand All @@ -419,25 +395,6 @@ const ConfigureEvaluator = ({
>
<Input data-cy="configure-new-evaluator-modal-input" />
</Form.Item>
{/* <Form.Item
name="label"
label="Label"
rules={[
{required: true, message: "This field is required"},
]}
className="flex-1"
>
<Select
mode="multiple"
allowClear
placeholder="Please select"
defaultValue={["item1"]}
options={[
{label: "item1", value: "item1"},
{label: "item2", value: "item2"},
]}
/>
</Form.Item> */}
</div>
</Space>

Expand Down Expand Up @@ -553,7 +510,7 @@ const ConfigureEvaluator = ({
</Space>
</Flex>

<div className="flex-[0.4] flex flex-col h-full gap-1">
<div className="flex-[0.5] flex flex-col h-full gap-1">
<Space>
<Typography.Text className={classes.formTitleText}>
JSON Data
Expand All @@ -580,7 +537,11 @@ const ConfigureEvaluator = ({
}
} catch (error) {}
}}
options={{wordWrap: "on", minimap: {enabled: false}}}
options={{
wordWrap: "on",
minimap: {enabled: false},
lineNumbers: "off",
}}
/>
</div>

Expand All @@ -598,11 +559,12 @@ const ConfigureEvaluator = ({
wordWrap: "on",
minimap: {enabled: false},
readOnly: true,
lineNumbers: "off",
}}
/>
</div>

<div className="flex flex-col gap-2 flex-[0.3] h-full">
<div className="flex flex-col gap-2 flex-[0.2] h-full">
<Flex justify="space-between">
<Typography.Text className={classes.formTitleText}>
Evaluator Output
Expand Down Expand Up @@ -632,6 +594,7 @@ const ConfigureEvaluator = ({
wordWrap: "on",
minimap: {enabled: false},
readOnly: true,
lineNumbers: "off",
}}
value={outputResult}
/>
Expand Down
1 change: 1 addition & 0 deletions ...a-web/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/EvaluatorsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,7 @@ const EvaluatorsModal = ({...props}: EvaluatorsModalProps) => {
closeIcon={null}
title={null}
className={classes.modalWrapper}
centered
{...props}
>
{steps[current]?.content}
Expand Down
22 changes: 7 additions & 15 deletions ...onents/pages/evaluations/autoEvaluation/EvaluatorsModal/NewEvaluator/NewEvaluatorList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,6 @@ interface CreateEvaluatorListProps {
}

const useStyles = createUseStyles((theme: JSSTheme) => ({
textDescription: {
display: "flex",
flex: 1,
flexDirection: "column",
"& .ant-typography:nth-of-type(1)": {
fontSize: theme.fontSize,
lineHeight: theme.lineHeight,
},
},
arrowIcon: {
opacity: 0,
transition: "opacity 0.3s",
Expand All @@ -41,7 +32,7 @@ const CreateEvaluatorList = ({

const columns: ColumnsType<Evaluator> = [
{
title: "Category",
title: "Name",
dataIndex: "key",
key: "key",
width: 200,
Expand All @@ -54,16 +45,16 @@ const CreateEvaluatorList = ({
},
},
{
title: "Type",
title: "Description",
dataIndex: "description",
key: "description",
render: (_, record) => {
return (
<div className="flex items-center gap-2">
<div className={classes.textDescription}>
<Typography.Text>{record.name}</Typography.Text>
<Typography.Text type="secondary">{record.description}</Typography.Text>
</div>
<Typography.Text className="flex-1" type="secondary">
{record.description}
</Typography.Text>

<ArrowRight className={classes.arrowIcon} size={14} />
</div>
)
Expand All @@ -87,6 +78,7 @@ const CreateEvaluatorList = ({
setCurrent(2)
},
})}
pagination={false}
/>
)
}
Expand Down
13 changes: 9 additions & 4 deletions ...eb/src/components/pages/evaluations/autoEvaluation/EvaluatorsModal/NewEvaluator/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ const NewEvaluator = ({
placeholder="Search"
allowClear
/>
<Radio.Group
{/* <Radio.Group
defaultValue={evaluatorsDisplay}
onChange={(e) => setEvaluatorsDisplay(e.target.value)}
>
Expand All @@ -133,15 +133,15 @@ const NewEvaluator = ({
<Radio.Button value="card">
<Cards size={16} className="h-full" />
</Radio.Button>
</Radio.Group>
</Radio.Group> */}
</Flex>
</div>
</div>
{evaluatorsDisplay !== "list" ? <Divider className="mt-2 mb-4" /> : <div />}
</div>

<div>
{evaluatorsDisplay === "list" ? (
{/* {evaluatorsDisplay === "list" ? (
<NewEvaluatorList
evaluators={filteredEvaluators}
setSelectedEvaluator={setSelectedEvaluator}
Expand All @@ -153,7 +153,12 @@ const NewEvaluator = ({
setSelectedEvaluator={setSelectedEvaluator}
setCurrent={setCurrent}
/>
)}
)} */}
<NewEvaluatorList
evaluators={filteredEvaluators}
setSelectedEvaluator={setSelectedEvaluator}
setCurrent={setCurrent}
/>
</div>
</div>
)
Expand Down
16 changes: 8 additions & 8 deletions agenta-web/src/pages/apps/[app_id]/evaluations/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,17 +47,17 @@ const EvaluationsPage = () => {
children: <AutoEvaluation />,
},
{
key: "ab_testing_evaluation",
label: "A/B Testing Evaluation",
icon: <TestTube size={16} />,
children: <AbTestingEvaluation viewType="evaluation" />,
},
{
key: "single_model_evaluation",
label: "Single Model Evaluation",
key: "human_annotation",
label: "Human annotation",
icon: <ListChecks size={16} />,
children: <SingleModelEvaluation viewType="evaluation" />,
},
{
key: "human_ab_testing",
label: "Human A/B Testing",
icon: <TestTube size={16} />,
children: <AbTestingEvaluation viewType="evaluation" />,
},
]

return (
Expand Down

0 comments on commit 65f0a90

Please sign in to comment.