Skip to content
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.

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

added backlink to dataset in spans #178

Merged
merged 1 commit into from
Nov 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@ import { authOptions } from '@/lib/auth';
import { fetcher } from '@/lib/utils';
import { NextRequest } from 'next/server';
import { db } from '@/lib/db/drizzle';
import { datasetDatapoints } from '@/lib/db/migrations/schema';
import { datasetDatapoints, datapointToSpan } from '@/lib/db/migrations/schema';
import { and, inArray, eq } from 'drizzle-orm';
import { isCurrentUserMemberOfProject } from '@/lib/db/utils';
import { z } from 'zod';

export async function GET(
req: NextRequest,
Expand All @@ -27,28 +28,66 @@ export async function GET(
);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider adding a check for the user's session to ensure that the user is authenticated before proceeding with the POST request.

}

const CreateDatapointsSchema = z.object({
datapoints: z.array(z.object({
data: z.unknown(),
target: z.any().optional(),
metadata: z.record(z.any()).optional(),
})),
sourceSpanId: z.string().optional(),
});

export async function POST(
req: Request,
{ params }: { params: { projectId: string; datasetId: string } }
): Promise<Response> {
const projectId = params.projectId;
const datasetId = params.datasetId;
const session = await getServerSession(authOptions);
const user = session!.user;

if (!(await isCurrentUserMemberOfProject(projectId))) {
return new Response(JSON.stringify({ error: "User is not a member of the project" }), { status: 403 });
}

const body = await req.json();

return await fetcher(
`/projects/${projectId}/datasets/${datasetId}/datapoints`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${user.apiKey}`
},
body: JSON.stringify(body)
}
);
// Validate request body
const parseResult = CreateDatapointsSchema.required().safeParse(body);
if (!parseResult.success) {
return new Response(
JSON.stringify({
error: "Invalid request body",
details: parseResult.error.issues
}),
{ status: 400 }
);
}

const { datapoints, sourceSpanId } = parseResult.data;

const res = await db.insert(datasetDatapoints).values(
datapoints.map((datapoint) => ({
...datapoint,
data: datapoint.data,
createdAt: new Date().toUTCString(),
datasetId
}))
).returning();

if (sourceSpanId && res.length > 0) {
await db.insert(datapointToSpan).values(
res.map((datapoint) => ({
spanId: sourceSpanId,
datapointId: datapoint.id,
projectId,
}))
).returning();
}

if (res.length === 0) {
return new Response('Error creating datasetDatapoints', { status: 500 });
}

return new Response('datasetDatapoints created successfully', { status: 200 });
}

export async function DELETE(
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { db } from "@/lib/db/drizzle";
import { datapointToSpan } from "@/lib/db/migrations/schema";
import { isCurrentUserMemberOfProject } from "@/lib/db/utils";
import { eq } from "drizzle-orm";


export async function GET(
request: Request,
{ params }: { params: { projectId: string; spanId: string } }
) {

const { projectId, spanId } = params;

if (!(await isCurrentUserMemberOfProject(projectId))) {
return new Response('Unauthorized', { status: 401 });
}

const datapoints = await db.query.datapointToSpan.findMany({
where: eq(datapointToSpan.spanId, spanId),
with: {
datasetDatapoint: {
with: {
dataset: true
}
}
},
});

// Flatten the structure
const flattenedDatapoints = datapoints.map(dp => ({
datapointId: dp.datasetDatapoint.id,
datasetId: dp.datasetDatapoint.dataset.id,
datasetName: dp.datasetDatapoint.dataset.name
}));

return Response.json(flattenedDatapoints);
}
41 changes: 35 additions & 6 deletions frontend/components/dataset/dataset.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,6 @@ interface DatasetProps {
}

export default function Dataset({ dataset }: DatasetProps) {
const [selectedDatapoint, setSelectedDatapoint] = useState<Datapoint | null>(
null
);
const router = useRouter();
const searchParams = new URLSearchParams(useSearchParams().toString());
const pathName = usePathname();
Expand All @@ -41,6 +38,10 @@ export default function Dataset({ dataset }: DatasetProps) {
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
const [isDeleting, setIsDeleting] = useState(false);

// Get datapointId from URL params
const datapointId = searchParams.get('datapointId');
const [selectedDatapoint, setSelectedDatapoint] = useState<Datapoint | null>(null);

const parseNumericSearchParam = (
key: string,
defaultValue: number
Expand Down Expand Up @@ -71,6 +72,12 @@ export default function Dataset({ dataset }: DatasetProps) {
}
}, [data]);

useEffect(() => {
if (!datapointId) {
setSelectedDatapoint(null);
}
}, [datapointId]);

const columns: ColumnDef<Datapoint>[] = [
{
accessorKey: 'createdAt',
Expand Down Expand Up @@ -125,6 +132,28 @@ export default function Dataset({ dataset }: DatasetProps) {
setIsDeleteDialogOpen(false);
};

// Update URL when datapoint is selected
const handleDatapointSelect = (datapoint: Datapoint | null) => {
setSelectedDatapoint(datapoint);
const newSearchParams = new URLSearchParams(searchParams);
if (datapoint) {
newSearchParams.set('datapointId', datapoint.id);
} else {
newSearchParams.delete('datapointId');
}
router.push(`${pathName}?${newSearchParams.toString()}`);
};

// Load selected datapoint from URL param on initial load
useEffect(() => {
if (datapointId && datapoints) {
const datapoint = datapoints.find(d => d.id === datapointId);
if (datapoint) {
setSelectedDatapoint(datapoint);
}
}
}, [datapointId, datapoints]);

return (
<div className="h-full flex flex-col">
<Header path={'datasets/' + dataset.name} />
Expand All @@ -147,10 +176,10 @@ export default function Dataset({ dataset }: DatasetProps) {
data={datapoints}
getRowId={(datapoint) => datapoint.id}
onRowClick={(row) => {
setSelectedDatapoint(row.original);
handleDatapointSelect(row.original);
}}
paginated
focusedRowId={selectedDatapoint?.id}
focusedRowId={datapointId}
manualPagination
pageCount={pageCount}
defaultPageSize={pageSize}
Expand Down Expand Up @@ -214,7 +243,7 @@ export default function Dataset({ dataset }: DatasetProps) {
datasetId={dataset.id}
datapoint={selectedDatapoint}
onClose={() => {
setSelectedDatapoint(null);
handleDatapointSelect(null);
mutate();
}}
/>
Expand Down
5 changes: 4 additions & 1 deletion frontend/components/traces/export-spans-dialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { cn } from '@/lib/utils';
import { useToast } from '@/lib/hooks/use-toast';
import { Dataset } from '@/lib/dataset/types';
import Formatter from '../ui/formatter';
import { eventEmitter } from '@/lib/event-emitter';

interface ExportSpansDialogProps {
span: Span;
Expand Down Expand Up @@ -88,7 +89,8 @@ export default function ExportSpansDialog({ span }: ExportSpansDialogProps) {
target: target,
metadata: metadata
}
]
],
sourceSpanId: span.spanId
})
}
);
Expand All @@ -100,6 +102,7 @@ export default function ExportSpansDialog({ span }: ExportSpansDialogProps) {
variant: 'destructive'
});
} else {
eventEmitter.emit('mutateSpanDatapoints');
toast({
title: `Successfully exported span to dataset ${selectedDataset?.name}`
});
Expand Down
93 changes: 93 additions & 0 deletions frontend/components/traces/span-datasets.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import { useProjectContext } from '@/contexts/project-context';
import { cn, swrFetcher } from '@/lib/utils';
import useSWR from 'swr';
import { useEffect } from 'react';

import { eventEmitter } from '@/lib/event-emitter';
import { Table, TableBody, TableCell, TableRow } from '../ui/table';
import { Skeleton } from '../ui/skeleton';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger
} from '../ui/tooltip';
import ClientTimestampFormatter from '../client-timestamp-formatter';
import { Button } from '../ui/button';
import { ArrowUpRight, Info, X } from 'lucide-react';
import Link from 'next/link';

interface SpanDatasetsProps {
spanId: string;
}

interface SpanDataset {
datasetName: string;
datasetId: string;
datapointId: string;
}

export default function SpanDatasets({ spanId }: SpanDatasetsProps) {
const { projectId } = useProjectContext();

const { data, isLoading, mutate } = useSWR<SpanDataset[]>(
`/api/projects/${projectId}/spans/${spanId}/datapoints`,
swrFetcher
);

useEffect(() => {
const handleDatapointAdded = () => {
mutate();
};
eventEmitter.on('mutateSpanDatapoints', handleDatapointAdded);

return () => {
eventEmitter.off('mutateSpanDatapoints', handleDatapointAdded);
};
}, [mutate]);

return (
<div className="flex flex-col pb-2">
<div className="pb-2 font-medium text-lg">Datasets</div>
<div className="border rounded bg-card">
{isLoading ? (
<div>
<Skeleton className="h-10 w-full" />
</div>
) : data && data.length > 0 ? (
<Table className="">
<TableBody className="text-base">
{data?.map((dataset: SpanDataset, index: number) => (
<TableRow
key={dataset.datasetId}
className={cn(
'text-sm',
index === data.length - 1 ? 'border-b-0' : ''
)}
>
<TableCell>
<div className="flex">
<div className="border-secondary-foreground/30 border p-0.5 px-3 bg-secondary rounded-full">
{dataset.datasetName}
</div>
</div>
</TableCell>
<TableCell className="font-mono text-secondary-foreground">{dataset.datapointId}</TableCell>
<TableCell>
<Link href={`/project/${projectId}/datasets/${dataset.datasetId}?datapointId=${dataset.datapointId}`} target="_blank">
<ArrowUpRight className="text-secondary-foreground" size={16} />
</Link>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
) : (
<div className="p-2 text-secondary-foreground text-sm">
No labels
</div>
)}
</div>
</div>
);
}
2 changes: 2 additions & 0 deletions frontend/components/traces/span-view-span.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Formatter from '../ui/formatter';
import ChatMessageListTab from './chat-message-list-tab';
import { Span } from '@/lib/traces/types';
import SpanLabels from './span-labels';
import SpanDatasets from './span-datasets';

interface SpanViewSpanProps {
span: Span;
Expand All @@ -17,6 +18,7 @@ export function SpanViewSpan({ span }: SpanViewSpanProps) {
<div>
<div className="p-4 w-full h-full">
<SpanLabels spanId={span.spanId} />
<SpanDatasets spanId={span.spanId} />
<div className="pb-2 font-medium text-lg">Input</div>
{isChatMessageList(span.input) ? (
<ChatMessageListTab messages={span.input} />
Expand Down
6 changes: 5 additions & 1 deletion frontend/components/traces/spans-table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -120,9 +120,13 @@ export default function SpansTable({ onRowClick }: SpansTableProps) {
searchParams.set('traceId', row.traceId!);
searchParams.set('spanId', row.spanId);
router.push(`${pathName}?${searchParams.toString()}`);
setSpanId(row.spanId);
onRowClick?.(row.traceId);
};

useEffect(() => {
setSpanId(searchParams.get('spanId') ?? null);
}, [searchParams]);

const columns: ColumnDef<Span, any>[] = [
{
cell: (row) => <Mono>{row.getValue()}</Mono>,
Expand Down
Loading