Skip to content

Commit 3a85412

Browse files
shagun-singh-inkeepgithub-actions[bot]
shagun-singh-inkeep
and
github-actions[bot]
authored
performance of test suites (#3137)
* perf * style: auto-format with biome * changeset --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent d6443a9 commit 3a85412

5 files changed

Lines changed: 56 additions & 67 deletions

File tree

‎.changeset/red-flowers-beg.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@inkeep/agents-manage-ui": patch
3+
---
4+
5+
Improve performance of datasets and evaluation results loading

‎agents-manage-ui/src/components/dataset-items/dataset-items-table.tsx‎

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import type { ColumnDef } from '@tanstack/react-table';
44
import { MoreVertical, Pencil, Plus, Trash2 } from 'lucide-react';
55
import { type FC, useState } from 'react';
6-
import { ExpandableJsonEditor } from '@/components/editors/expandable-json-editor';
6+
import { ReadOnlyJsonView } from '@/components/editors/read-only-json-view';
77
import { Button } from '@/components/ui/button';
88
import { DataTable } from '@/components/ui/data-table';
99
import { DataTableColumnHeader } from '@/components/ui/data-table-column-header';
@@ -25,23 +25,10 @@ interface DatasetItemsTableProps {
2525
items: DatasetItem[];
2626
}
2727

28-
const ReadOnlyEditor: FC<{
29-
name: string;
28+
const ReadOnlyJsonCell: FC<{
3029
value: unknown;
31-
}> = ({ name, value }) => {
32-
return (
33-
<ExpandableJsonEditor
34-
name={name}
35-
value={JSON.stringify(value, null, 2)}
36-
readOnly
37-
editorOptions={{
38-
wordWrap: 'off',
39-
scrollbar: {
40-
alwaysConsumeMouseWheel: true,
41-
},
42-
}}
43-
/>
44-
);
30+
}> = ({ value }) => {
31+
return <ReadOnlyJsonView value={JSON.stringify(value, null, 2)} />;
4532
};
4633

4734
export function DatasetItemsTable({
@@ -75,15 +62,15 @@ export function DatasetItemsTable({
7562
id: 'input',
7663
header: 'Input',
7764
enableSorting: false,
78-
cell: ({ row }) => <ReadOnlyEditor name={`input_${row.index}`} value={row.original.input} />,
65+
cell: ({ row }) => <ReadOnlyJsonCell value={row.original.input} />,
7966
},
8067
{
8168
id: 'expectedOutput',
8269
header: 'Expected Output',
8370
enableSorting: false,
8471
cell: ({ row }) =>
8572
row.original.expectedOutput ? (
86-
<ReadOnlyEditor name={`output_${row.index}`} value={row.original.expectedOutput} />
73+
<ReadOnlyJsonCell value={row.original.expectedOutput} />
8774
) : (
8875
<span className="text-sm text-muted-foreground italic">None</span>
8976
),

‎agents-manage-ui/src/components/editors/read-only-json-view.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
'use client';
2+
3+
import type { FC } from 'react';
4+
import { Streamdown } from 'streamdown';
5+
import { cn } from '@/lib/utils';
6+
7+
interface ReadOnlyJsonViewProps {
8+
value: string;
9+
className?: string;
10+
maxHeight?: string;
11+
}
12+
13+
export const ReadOnlyJsonView: FC<ReadOnlyJsonViewProps> = ({
14+
value,
15+
className,
16+
maxHeight = '200px',
17+
}) => {
18+
const markdown = `\`\`\`json\n${value}\n\`\`\``;
19+
20+
return (
21+
<div
22+
className={cn(
23+
'overflow-auto rounded-md border border-input text-xs [&_pre]:!m-0 [&_pre]:!rounded-md [&_pre]:!border-0 [&_code]:!text-xs',
24+
className
25+
)}
26+
style={{ maxHeight }}
27+
>
28+
<Streamdown>{markdown}</Streamdown>
29+
</div>
30+
);
31+
};

‎agents-manage-ui/src/components/evaluation-jobs/evaluation-job-results.tsx‎

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { ChevronDown, ChevronRight, ExternalLink, Loader2 } from 'lucide-react';
44
import Link from 'next/link';
55
import { useEffect, useState } from 'react';
6-
import { ExpandableJsonEditor } from '@/components/editors/expandable-json-editor';
6+
import { ReadOnlyJsonView } from '@/components/editors/read-only-json-view';
77
import { EvaluationStatusBadge } from '@/components/evaluators/evaluation-status-badge';
88
import { EvaluatorViewDialog } from '@/components/evaluators/evaluator-view-dialog';
99
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
@@ -281,13 +281,8 @@ export function EvaluationJobResults({
281281

282282
return (
283283
<>
284-
<OutputCollapsible
285-
resultId={result.id}
286-
output={outputWithoutMetadata}
287-
/>
288-
{metadata && (
289-
<MetadataCollapsible resultId={result.id} metadata={metadata} />
290-
)}
284+
<OutputCollapsible output={outputWithoutMetadata} />
285+
{metadata && <MetadataCollapsible metadata={metadata} />}
291286
</>
292287
);
293288
})()}
@@ -316,7 +311,7 @@ export function EvaluationJobResults({
316311
);
317312
}
318313

319-
function OutputCollapsible({ resultId, output }: { resultId: string; output: unknown }) {
314+
function OutputCollapsible({ output }: { output: unknown }) {
320315
const [isOpen, setIsOpen] = useState(false);
321316

322317
return (
@@ -326,19 +321,13 @@ function OutputCollapsible({ resultId, output }: { resultId: string; output: unk
326321
<span>Output</span>
327322
</CollapsibleTrigger>
328323
<CollapsibleContent className="pt-2">
329-
<ExpandableJsonEditor
330-
name={`output-${resultId}`}
331-
value={JSON.stringify(output, null, 2)}
332-
label=""
333-
readOnly
334-
defaultOpen
335-
/>
324+
<ReadOnlyJsonView value={JSON.stringify(output, null, 2)} maxHeight="300px" />
336325
</CollapsibleContent>
337326
</Collapsible>
338327
);
339328
}
340329

341-
function MetadataCollapsible({ resultId, metadata }: { resultId: string; metadata: unknown }) {
330+
function MetadataCollapsible({ metadata }: { metadata: unknown }) {
342331
const [isOpen, setIsOpen] = useState(false);
343332

344333
return (
@@ -348,13 +337,7 @@ function MetadataCollapsible({ resultId, metadata }: { resultId: string; metadat
348337
<span>Metadata</span>
349338
</CollapsibleTrigger>
350339
<CollapsibleContent className="pt-2">
351-
<ExpandableJsonEditor
352-
name={`metadata-${resultId}`}
353-
value={JSON.stringify(metadata, null, 2)}
354-
label=""
355-
readOnly
356-
defaultOpen
357-
/>
340+
<ReadOnlyJsonView value={JSON.stringify(metadata, null, 2)} maxHeight="300px" />
358341
</CollapsibleContent>
359342
</Collapsible>
360343
);

‎agents-manage-ui/src/components/evaluation-run-configs/evaluation-run-config-results.tsx‎

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import { CheckCircle2, ChevronDown, ChevronRight, ExternalLink, Loader2 } from 'lucide-react';
44
import Link from 'next/link';
55
import { useEffect, useState } from 'react';
6-
import { ExpandableJsonEditor } from '@/components/editors/expandable-json-editor';
6+
import { ReadOnlyJsonView } from '@/components/editors/read-only-json-view';
77
import { SuiteConfigViewDialog } from '@/components/evaluation-run-configs/suite-config-view-dialog';
88
import { EvaluationStatusBadge } from '@/components/evaluators/evaluation-status-badge';
99
import { EvaluatorViewDialog } from '@/components/evaluators/evaluator-view-dialog';
@@ -307,13 +307,8 @@ export function EvaluationRunConfigResults({
307307

308308
return (
309309
<>
310-
<OutputCollapsible
311-
resultId={result.id}
312-
output={outputWithoutMetadata}
313-
/>
314-
{metadata && (
315-
<MetadataCollapsible resultId={result.id} metadata={metadata} />
316-
)}
310+
<OutputCollapsible output={outputWithoutMetadata} />
311+
{metadata && <MetadataCollapsible metadata={metadata} />}
317312
</>
318313
);
319314
})()}
@@ -350,7 +345,7 @@ export function EvaluationRunConfigResults({
350345
);
351346
}
352347

353-
function OutputCollapsible({ resultId, output }: { resultId: string; output: unknown }) {
348+
function OutputCollapsible({ output }: { output: unknown }) {
354349
const [isOpen, setIsOpen] = useState(false);
355350

356351
return (
@@ -360,19 +355,13 @@ function OutputCollapsible({ resultId, output }: { resultId: string; output: unk
360355
<span>Output</span>
361356
</CollapsibleTrigger>
362357
<CollapsibleContent className="pt-2">
363-
<ExpandableJsonEditor
364-
name={`output-${resultId}`}
365-
value={JSON.stringify(output, null, 2)}
366-
label=""
367-
readOnly
368-
defaultOpen
369-
/>
358+
<ReadOnlyJsonView value={JSON.stringify(output, null, 2)} maxHeight="300px" />
370359
</CollapsibleContent>
371360
</Collapsible>
372361
);
373362
}
374363

375-
function MetadataCollapsible({ resultId, metadata }: { resultId: string; metadata: unknown }) {
364+
function MetadataCollapsible({ metadata }: { metadata: unknown }) {
376365
const [isOpen, setIsOpen] = useState(false);
377366

378367
return (
@@ -382,13 +371,7 @@ function MetadataCollapsible({ resultId, metadata }: { resultId: string; metadat
382371
<span>Metadata</span>
383372
</CollapsibleTrigger>
384373
<CollapsibleContent className="pt-2">
385-
<ExpandableJsonEditor
386-
name={`metadata-${resultId}`}
387-
value={JSON.stringify(metadata, null, 2)}
388-
label=""
389-
readOnly
390-
defaultOpen
391-
/>
374+
<ReadOnlyJsonView value={JSON.stringify(metadata, null, 2)} maxHeight="300px" />
392375
</CollapsibleContent>
393376
</Collapsible>
394377
);

0 commit comments

Comments
 (0)