Skip to content

Commit 71f3c29

Browse files
skull8888888olzhik11
skull8888888
and
olzhik11
authored
trace view ui improvements (#1004)
* tmp * slider * hover * fixes * eval score * feat: fix scroll, and other issues * feat: fix search --------- Co-authored-by: Olzhas Nurpeisov <[email protected]>
1 parent 47a203b commit 71f3c29

34 files changed

+478
-471
lines changed

‎frontend/components/dataset/dataset-panel.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
44
import useSWR from "swr";
55

66
import AddToLabelingQueuePopover from "@/components/traces/add-to-labeling-queue-popover";
7-
import CodeHighlighter from "@/components/ui/code-highlighter/index";
7+
import ContentRenderer from "@/components/ui/content-renderer/index";
88
import { Datapoint } from "@/lib/dataset/types";
99
import { useToast } from "@/lib/hooks/use-toast";
1010
import { isValidJsonObject, swrFetcher } from "@/lib/utils";
@@ -335,7 +335,7 @@ export default function DatasetPanel({ datasetId, datapointId, onClose, onEditin
335335
<div className="grow flex flex-col space-y-4 p-4 h-full w-full">
336336
<div className="flex flex-col space-y-2">
337337
<Label className="font-medium">Data</Label>
338-
<CodeHighlighter
338+
<ContentRenderer
339339
presetKey={`dataset-data-${datasetId}`}
340340
className="max-h-[400px] rounded"
341341
value={JSON.stringify(newData, null, 2)}
@@ -366,7 +366,7 @@ export default function DatasetPanel({ datasetId, datapointId, onClose, onEditin
366366
</div>
367367
<div className="flex flex-col space-y-2">
368368
<Label className="font-medium">Target</Label>
369-
<CodeHighlighter
369+
<ContentRenderer
370370
presetKey={`dataset-target-${datasetId}`}
371371
className="max-h-[400px] rounded w-full"
372372
value={JSON.stringify(newTarget, null, 2)}
@@ -384,7 +384,7 @@ export default function DatasetPanel({ datasetId, datapointId, onClose, onEditin
384384
</div>
385385
<div className="flex flex-col space-y-2 pb-4">
386386
<Label className="font-medium">Metadata</Label>
387-
<CodeHighlighter
387+
<ContentRenderer
388388
presetKey={`dataset-metadata-${datasetId}`}
389389
className="rounded max-h-[400px]"
390390
value={JSON.stringify(newMetadata, null, 2)}

‎frontend/components/dataset/manual-add-datapoint-dialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Loader2 } from "lucide-react";
55
import { useParams } from "next/navigation";
66
import React, { useCallback, useState } from "react";
77

8-
import { theme } from "@/components/ui/code-highlighter/utils.ts";
8+
import { theme } from "@/components/ui/content-renderer/utils";
99
import { Label } from "@/components/ui/label.tsx";
1010
import { isValidJsonObject } from "@/lib/utils";
1111

‎frontend/components/evaluators/manage-evaluator-sheet.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { useSWRConfig } from "swr";
1111

1212
import { defaultValues, ManageEvaluatorForm } from "@/components/evaluators/evaluators";
1313
import { Button } from "@/components/ui/button";
14-
import { theme } from "@/components/ui/code-highlighter/utils";
14+
import { theme } from "@/components/ui/content-renderer/utils";
1515
import { IconPython } from "@/components/ui/icons";
1616
import { Input } from "@/components/ui/input";
1717
import { Label } from "@/components/ui/label";

‎frontend/components/event-definitions/manage-event-definition-dialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
} from "react-hook-form";
1919

2020
import { Button } from "@/components/ui/button";
21-
import { theme } from "@/components/ui/code-highlighter/utils.ts";
21+
import { theme } from "@/components/ui/content-renderer/utils";
2222
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
2323
import { Input } from "@/components/ui/input";
2424
import { Label } from "@/components/ui/label";

‎frontend/components/playground/messages/message-parts.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Controller, FieldArrayWithId, UseFieldArrayRemove, useFormContext } fro
55

66
import ImageWithPreview from "@/components/playground/image-with-preview";
77
import { Button } from "@/components/ui/button";
8-
import CodeHighlighter from "@/components/ui/code-highlighter/index";
8+
import ContentRenderer from "@/components/ui/content-renderer/index";
99
import DefaultTextarea from "@/components/ui/default-textarea";
1010
import { IconMessage } from "@/components/ui/icons";
1111
import { Input } from "@/components/ui/input";
@@ -105,7 +105,7 @@ const MessageParts = ({ parentIndex, fields, remove }: MessagePartsProps) => {
105105
render={({ field: { value, onChange } }) => (
106106
<div className="flex flex-col gap-1">
107107
<span className="text-secondary-foreground text-xs">Arguments</span>
108-
<CodeHighlighter
108+
<ContentRenderer
109109
value={typeof value === "object" ? JSON.stringify(value, null, 2) : String(value || "{}")}
110110
onChange={(v) => {
111111
try {
@@ -250,7 +250,7 @@ const ToolResultOutput = ({
250250
{output.type === "content" ? (
251251
<Controller
252252
render={({ field: { value, onChange } }) => (
253-
<CodeHighlighter
253+
<ContentRenderer
254254
value={JSON.stringify(value, null, 2)}
255255
onChange={(v) => {
256256
try {
@@ -269,7 +269,7 @@ const ToolResultOutput = ({
269269
) : (
270270
<Controller
271271
render={({ field: { value, onChange } }) => (
272-
<CodeHighlighter
272+
<ContentRenderer
273273
value={value as string}
274274
onChange={onChange}
275275
defaultMode="json"

‎frontend/components/playground/messages/structured-output-sheet.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { PropsWithChildren, useCallback } from "react";
44
import { Controller, useFormContext } from "react-hook-form";
55

66
import { Button } from "@/components/ui/button";
7-
import CodeHighlighter from "@/components/ui/code-highlighter/index";
7+
import ContentRenderer from "@/components/ui/content-renderer/index";
88
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
99
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
1010
import { PlaygroundForm } from "@/lib/playground/types";
@@ -108,7 +108,7 @@ export default function StructuredOutputSheet({
108108
<div className="p-1 flex flex-1 overflow-hidden">
109109
<Controller
110110
render={({ field: { onChange } }) => (
111-
<CodeHighlighter
111+
<ContentRenderer
112112
onChange={(v) => onChange(v)}
113113
codeEditorClassName="rounded-b"
114114
className={cn("rounded h-full", {

‎frontend/components/playground/messages/tools-sheet.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { PropsWithChildren, useCallback, useMemo } from "react";
44
import { Controller, ControllerRenderProps, useFormContext } from "react-hook-form";
55

66
import { Button } from "@/components/ui/button";
7-
import CodeHighlighter from "@/components/ui/code-highlighter/index";
7+
import ContentRenderer from "@/components/ui/content-renderer/index";
88
import { Input } from "@/components/ui/input";
99
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
1010
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
@@ -126,7 +126,7 @@ export default function ToolsSheet({
126126
<div className="p-1 flex flex-1 overflow-hidden">
127127
<Controller
128128
render={({ field: { onChange } }) => (
129-
<CodeHighlighter
129+
<ContentRenderer
130130
onChange={(v) => onChange(v)}
131131
codeEditorClassName="rounded-b"
132132
className={cn("rounded h-full", {

‎frontend/components/playground/playground-panel.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ import { Provider } from "@/components/playground/types";
2020
import Usage from "@/components/playground/usage";
2121
import { getDefaultThinkingModelProviderOptions } from "@/components/playground/utils";
2222
import { Button } from "@/components/ui/button";
23-
import CodeHighlighter from "@/components/ui/code-highlighter/index";
2423
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
24+
import ContentRenderer from "@/components/ui/content-renderer/index";
2525
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
2626
import { useToast } from "@/lib/hooks/use-toast";
2727
import { PlaygroundForm } from "@/lib/playground/types";
@@ -202,7 +202,7 @@ export default function PlaygroundPanel({
202202
<ChevronRight className="w-4 h-4 text-muted-foreground mr-2 group-data-[state=open]:rotate-90 transition-transform duration-200" />
203203
</CollapsibleTrigger>
204204
<CollapsibleContent className="flex flex-1 overflow-hidden max-h-40">
205-
<CodeHighlighter
205+
<ContentRenderer
206206
codeEditorClassName="rounded-b border-none"
207207
className="rounded-b border-none"
208208
value={reasoning}
@@ -216,15 +216,15 @@ export default function PlaygroundPanel({
216216
<div className="flex flex-col flex-1 overflow-hidden">
217217
{!isEmpty(toolCalls) ? (
218218
text && (
219-
<CodeHighlighter
219+
<ContentRenderer
220220
codeEditorClassName="border-b"
221221
className="border-none h-fit border-b"
222222
value={text}
223223
defaultMode="json"
224224
/>
225225
)
226226
) : (
227-
<CodeHighlighter
227+
<ContentRenderer
228228
codeEditorClassName="rounded-b border-none"
229229
className="rounded-b border-none"
230230
value={text}
@@ -236,7 +236,7 @@ export default function PlaygroundPanel({
236236
<span className="flex items-center font-medium text-sm text-secondary-foreground px-2 py-1.5">
237237
<Bolt size={12} className="min-w-3 mr-2" /> Tool Calls
238238
</span>
239-
<CodeHighlighter
239+
<ContentRenderer
240240
codeEditorClassName="rounded-b"
241241
className="rounded-b border-x-0 border-b-0"
242242
value={JSON.stringify(toolCalls)}

‎frontend/components/queue/queue.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { useHotkeys } from "react-hotkeys-hook";
99

1010
import { ResizableWrapper } from "@/components/traces/span-view/common";
1111
import { Button } from "@/components/ui/button";
12-
import CodeHighlighter from "@/components/ui/code-highlighter/index";
12+
import ContentRenderer from "@/components/ui/content-renderer/index";
1313
import DatasetSelect from "@/components/ui/dataset-select";
1414
import { Label } from "@/components/ui/label";
1515
import { Skeleton } from "@/components/ui/skeleton";
@@ -271,7 +271,7 @@ function QueueInner() {
271271
</div>
272272
<div className="flex flex-1 overflow-hidden mt-2">
273273
<ResizableWrapper height={height} onHeightChange={setHeight}>
274-
<CodeHighlighter
274+
<ContentRenderer
275275
presetKey={`labeling-queue-${storeQueue?.id}`}
276276
codeEditorClassName="rounded-b"
277277
className="rounded"
@@ -349,7 +349,7 @@ function QueueInner() {
349349
JSON data that will be written to the target key of the payload object.
350350
</span>
351351
<div className="flex flex-1 min-h-fit overflow-hidden">
352-
<CodeHighlighter
352+
<ContentRenderer
353353
codeEditorClassName="rounded-b"
354354
className={cn("rounded", {
355355
"border border-destructive/75": !isValid,

‎frontend/components/queue/schema-definition-dialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useParams } from "next/navigation";
66
import { useState } from "react";
77

88
import { Button } from "@/components/ui/button";
9-
import { theme } from "@/components/ui/code-highlighter/utils";
9+
import { theme } from "@/components/ui/content-renderer/utils";
1010
import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
1111
import { Separator } from "@/components/ui/separator";
1212
import { useToast } from "@/lib/hooks/use-toast";

0 commit comments

Comments
 (0)