Skip to content

refactor(studio): replace deprecated ReadOnlyField with KVPair (ASTD-227) #366

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aray12 merged 2 commits into from
Jun 24, 2026
Merged

refactor(studio): replace deprecated ReadOnlyField with KVPair (ASTD-227) #366

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4c2839f
refactor(studio): replace deprecated ReadOnlyField with KVPair (ASTD-…
aray12 Jun 16, 2026
156908a
fix(studio): use nullish checks for metric params to preserve falsy v…
aray12 Jun 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 0 additions & 39 deletions web/packages/studio/src/components/common/ReadOnlyField.tsx
View file
Open in desktop

This file was deleted.

8 changes: 4 additions & 4 deletions web/packages/studio/src/components/evaluation/Configurations/ConfigurationDetailsPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
// SPDX-License-Identifier: Apache-2.0

import { KVPair } from '@nemo/common/src/components/KVPair';
import { Divider, Stack, Tag, Text } from '@nvidia/foundations-react-core';
import { ReadOnlyField } from '@studio/components/common/ReadOnlyField';
import { TaskDisplay } from '@studio/components/evaluation/Configurations/TaskDisplay';
import { useWorkspaceFromPath } from '@studio/hooks/useWorkspaceFromPath';
import {
Expand Down Expand Up @@ -48,11 +48,11 @@ export const ConfigurationDetailsPanel: FC<ConfigurationDetailsPanelProps> = ({
return (
<Stack gap="density-2xl" className={`overflow-y-auto w-full ${className || ''}`}>
<Stack gap="density-2xl" className="w-full">
<ReadOnlyField label="Configuration Name" value={configName} />
<ReadOnlyField label="Configuration ID" value={configId} />
<KVPair label="Configuration Name" value={configName} />
<KVPair label="Configuration ID" value={configId} />

{tags && tags.length > 0 && (
<ReadOnlyField
<KVPair
label="Tags"
value={
<Stack gap="density-sm" direction="row">
Expand Down
16 changes: 8 additions & 8 deletions web/packages/studio/src/components/evaluation/Configurations/LLMJudgeDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
// SPDX-License-Identifier: Apache-2.0

import { KVPair } from '@nemo/common/src/components/KVPair';
import { Stack, Text } from '@nvidia/foundations-react-core';
import { Pre } from '@studio/components/common/Pre';
import { ReadOnlyField } from '@studio/components/common/ReadOnlyField';
import { FC } from 'react';

const getStr = (params: Record<string, unknown> | undefined, key: string): string | undefined => {
Expand Down Expand Up @@ -46,20 +46,20 @@ export const LLMJudgeDisplay: FC<LLMJudgeDisplayProps> = ({ metricName, metricCo
return (
<Stack gap="density-2xl">
<Text kind="label/bold/md">{metricName}</Text>
<ReadOnlyField label="Type" value={metricConfig.type} />
<KVPair label="Type" value={metricConfig.type} />

<Stack gap="density-2xl">
<ReadOnlyField label="Model" value={modelName} />
<ReadOnlyField
<KVPair label="Model" value={modelName} />
<KVPair
label="System Message"
value={systemMessage ? <Pre>{systemMessage}</Pre> : '-'}
value={systemMessage ? <Pre>{systemMessage}</Pre> : undefined}
/>
<ReadOnlyField label="User Message" value={userMessage ? <Pre>{userMessage}</Pre> : '-'} />
<KVPair label="User Message" value={userMessage ? <Pre>{userMessage}</Pre> : undefined} />
</Stack>

<Stack gap="density-2xl">
<ReadOnlyField label="Score Type" value={scoreType || '-'} />
<ReadOnlyField label="Parser Pattern" value={parserPattern || '-'} />
<KVPair label="Score Type" value={scoreType} />
<KVPair label="Parser Pattern" value={parserPattern} />
</Stack>
</Stack>
);
Expand Down
58 changes: 30 additions & 28 deletions web/packages/studio/src/components/evaluation/Configurations/MetricDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
// SPDX-License-Identifier: Apache-2.0

import { KVPair } from '@nemo/common/src/components/KVPair';
import { Stack, Text } from '@nvidia/foundations-react-core';
import { Pre } from '@studio/components/common/Pre';
import { ReadOnlyField } from '@studio/components/common/ReadOnlyField';
import { FC } from 'react';

export interface MetricDisplayProps {
Expand All @@ -28,69 +28,71 @@ export const MetricDisplay: FC<MetricDisplayProps> = ({ metricName, metricConfig
return (
<Stack gap="density-sm">
<Text kind="label/bold/md">{metricName}</Text>
<ReadOnlyField label="Type" value={metricConfig.type} />
<KVPair label="Type" value={metricConfig.type} />

{type === 'string-check' && (
<ReadOnlyField
<KVPair
label="Check Pattern"
value={
params.check ? (
Array.isArray(params.check) ? (
<Pre>{params.check.join(',')}</Pre>
) : (
String(params.check)
)
) : (
'-'
)
params.check != null
? Array.isArray(params.check)
? params.check.join(',')
: String(params.check)
: undefined
Comment thread
coderabbitai[bot] marked this conversation as resolved.
}
/>
)}

{type === 'bleu' && (
<>
<ReadOnlyField
<KVPair
label="References"
value={params.references ? <Pre>{String(params.references)}</Pre> : '-'}
value={params.references != null ? <Pre>{String(params.references)}</Pre> : undefined}
/>
{params.candidate && (
<ReadOnlyField label="Candidate" value={<Pre>{String(params.candidate)}</Pre>} />
{params.candidate != null && (
<KVPair label="Candidate" value={<Pre>{String(params.candidate)}</Pre>} />
)}
</>
)}

{type === 'rouge' && (
<>
<ReadOnlyField
<KVPair
label="Ground Truth Reference"
value={params.ground_truth ? <Pre>{String(params.ground_truth)}</Pre> : '-'}
value={
params.ground_truth != null ? <Pre>{String(params.ground_truth)}</Pre> : undefined
}
/>
{params.prediction && (
<ReadOnlyField label="Prediction" value={<Pre>{String(params.prediction)}</Pre>} />
{params.prediction != null && (
<KVPair label="Prediction" value={<Pre>{String(params.prediction)}</Pre>} />
)}
</>
)}

{type === 'em' && (
<>
<ReadOnlyField
<KVPair
label="Ground Truth Reference"
value={params.ground_truth ? <Pre>{String(params.ground_truth)}</Pre> : '-'}
value={
params.ground_truth != null ? <Pre>{String(params.ground_truth)}</Pre> : undefined
}
/>
{params.prediction && (
<ReadOnlyField label="Prediction" value={<Pre>{String(params.prediction)}</Pre>} />
{params.prediction != null && (
<KVPair label="Prediction" value={<Pre>{String(params.prediction)}</Pre>} />
)}
</>
)}

{type === 'f1' && (
<>
<ReadOnlyField
<KVPair
label="Ground Truth Reference"
value={params.ground_truth ? <Pre>{String(params.ground_truth)}</Pre> : '-'}
value={
params.ground_truth != null ? <Pre>{String(params.ground_truth)}</Pre> : undefined
}
/>
{params.prediction && (
<ReadOnlyField label="Prediction" value={<Pre>{String(params.prediction)}</Pre>} />
{params.prediction != null && (
<KVPair label="Prediction" value={<Pre>{String(params.prediction)}</Pre>} />
)}
</>
)}
Expand Down
8 changes: 4 additions & 4 deletions web/packages/studio/src/components/evaluation/Configurations/TaskDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
// SPDX-License-Identifier: Apache-2.0

import { KVPair } from '@nemo/common/src/components/KVPair';
import { Stack, Text } from '@nvidia/foundations-react-core';
import { ReadOnlyField } from '@studio/components/common/ReadOnlyField';
import { LLMJudgeDisplay } from '@studio/components/evaluation/Configurations/LLMJudgeDisplay';
import { MetricDisplay } from '@studio/components/evaluation/Configurations/MetricDisplay';
import { DatasetFileLink } from '@studio/components/evaluation/DatasetFileLink';
Expand Down Expand Up @@ -36,10 +36,10 @@ export const TaskDisplay: FC<{

return (
<Stack gap="density-xl" className="w-full">
<ReadOnlyField label="Task Name" value={taskName} />
<ReadOnlyField label="Target Type" value={targetType} />
<KVPair label="Task Name" value={taskName} />
<KVPair label="Target Type" value={targetType} />
{filesetInfo && (
<ReadOnlyField
<KVPair
label="Input File"
value={<DatasetFileLink label={filesetInfo.fileDisplayName} url={filesetInfo.linkUrl} />}
/>
Expand Down
Loading