Merge pull request #29 from CapgeminiInventUK/feat/feedback

feat/feedback

server/src/ingest_server.ts

@@ -1,12 +1,14 @@
 import express from 'express';
 import { langchainIngestRouter } from './routers/ingest/langchain_ingestion_router';
 import 'dotenv/config';
+import { langchainFeedbackRouter } from './routers/ingest/langchain_feedback_router';
 
 
 
 const ingest_server = express();
 ingest_server.use(express.json({ limit: '50mb' }));
 ingest_server.use('/api/runs', langchainIngestRouter);
+ingest_server.use('/api/feedback', langchainFeedbackRouter);
 
 const PORT = process.env.PORT || 1984;
 ingest_server.listen(PORT, () => {

server/src/models/requests/feedback_request.ts

@@ -0,0 +1,17 @@
+export interface CreateFeedback {
+  id: string;
+  run_id: string;
+  key: string;
+  score?: number | boolean;
+  value?: string;
+  comment?: string;
+
+  [key: string]: unknown;
+}
+
+export interface UpdateFeedback {
+  score?: number | boolean;
+  value?: string;
+  correction?: { [key: string]: unknown };
+  comment?: string;
+}

server/src/models/trace_detail_response.ts

@@ -1,3 +1,5 @@
+import { CreateFeedback } from './requests/feedback_request';
+
 export interface TraceDetailResponse {
   run_id: string;
   name: string;
@@ -10,4 +12,5 @@ export interface TraceDetailResponse {
   run_type: string;
   parent_run_id: string | null;
   children: TraceDetailResponse[];
+  feedback?: CreateFeedback;
 }

server/src/repositories/langtrace_repository.ts

@@ -3,6 +3,8 @@ import { TraceData } from '../models/requests/trace_request';
 import { TraceDetailResponse } from '../models/trace_detail_response';
 import 'dotenv/config';
 import { TracePercentile } from '../models/traces_percentiles';
+import { CreateFeedback, UpdateFeedback } from '../models/requests/feedback_request';
+
 
 export class LangtraceRepository {
   private db!: Db;
@@ -53,10 +55,12 @@ export class LangtraceRepository {
           name: 1,
           start_time: 1,
           end_time: 1,
-          latency: 1
+          latency: 1,
+          feedback: 1
         }
       },
-      { $sort: { start_time: -1 } }
+      { $sort: { start_time: -1 } },
+      { $limit: 100 }
     ];
 
     const collection = this.db.collection(this.collectionName);
@@ -105,7 +109,7 @@ export class LangtraceRepository {
     ];
 
     interface TracesPercentilesMongoRecord {
-      latency_percentiles: number[]
+      latency_percentiles: number[];
     }
 
     const result = await collection.aggregate<TracesPercentilesMongoRecord>(pipeline).toArray();
@@ -240,4 +244,25 @@ export class LangtraceRepository {
         },
       ]).toArray();
   }
+
+
+  async insertFeedbackOnTraceByRunId(feedback: CreateFeedback) {
+    const collection = this.db.collection('traces');
+    await collection.updateOne({ run_id: feedback.run_id }, { $set: { feedback } });
+  }
+
+  async updateFeedbackOnTraceByFeedbackId(
+    feedbackId: string,
+    feedbackData: UpdateFeedback):
+    Promise<UpdateResult> {
+    const collection = this.db.collection('traces');
+
+    const setOperation: Record<string, unknown> = {};
+    for (const [key, value] of Object.entries(feedbackData)) {
+      setOperation[`feedback.${key}`] = value;
+    }
+
+    return await collection.updateOne({ 'feedback.id': feedbackId },
+      { $set: setOperation });
+  }
 }

server/src/routers/ingest/langchain_feedback_router.ts

@@ -0,0 +1,39 @@
+import { Router, Request as ExpressRequest, Response as ExpressResponse } from 'express';
+import { LangchainToLangtraceService } from '../../services/langchain_to_langtrace_service';
+import { CreateFeedback, UpdateFeedback } from '../../models/requests/feedback_request';
+
+export const langchainFeedbackRouter = Router();
+const langchainService = new LangchainToLangtraceService();
+
+langchainFeedbackRouter.post('/', async (req: ExpressRequest, res: ExpressResponse) => {
+  console.debug('POST /api/feedback');
+  try {
+    const runData = req.body as CreateFeedback;
+    await langchainService.createFeedback(runData);
+
+    console.debug(`Created feedback with id ${runData.id} in run ${runData.run_id}`);
+
+    res.status(201).json(
+      { feedback_id: runData.id }
+    );
+  } catch (error: unknown) {
+    console.error(error);
+    if (error instanceof Error) {
+      return res.status(400).json({ message: error.message });
+    } else {
+      return res.status(400).json({ message: 'Unknown error' });
+    }
+  }
+});
+
+langchainFeedbackRouter.patch('/:feedbackId', async (req: ExpressRequest, res: ExpressResponse) => {
+  console.debug('PATCH /api/feedback/:feedbackId');
+  const feedbackId = req.params.feedbackId;
+  const updateData = req.body as UpdateFeedback;
+
+  const success = await langchainService.updateFeedback(feedbackId, updateData);
+  if (!success) {
+    return res.status(404).json({ message: 'Feedback not found or update failed' });
+  }
+  return res.status(204).send();
+});

server/src/services/langchain_to_langtrace_service.ts

@@ -1,5 +1,6 @@
 import { LangtraceRepository } from '../repositories/langtrace_repository';
 import { TraceData } from '../models/requests/trace_request';
+import { CreateFeedback, UpdateFeedback } from '../models/requests/feedback_request';
 
 export class LangchainToLangtraceService {
   private langtraceRepository: LangtraceRepository;
@@ -36,4 +37,24 @@ export class LangchainToLangtraceService {
     const updateResult = await this.langtraceRepository.updateTrace(trace_id, langchainData);
     return updateResult.matchedCount > 0;
   }
+
+  async createFeedback(feedback: CreateFeedback) {
+    if (!feedback.run_id) {
+      throw new Error('run_id is required in data');
+    }
+
+    await this.langtraceRepository.insertFeedbackOnTraceByRunId(
+      feedback
+    );
+    return feedback.id;
+  }
+
+  async updateFeedback(feedbackId: string, feedbackData: UpdateFeedback): Promise<boolean> {
+    return (
+      await this.langtraceRepository.updateFeedbackOnTraceByFeedbackId(
+        feedbackId,
+        feedbackData
+      )
+    ).matchedCount > 0;
+  }
 }

ui/src/components/Breadcrumb/Breadcrumb.module.scss

@@ -8,7 +8,7 @@
   display: flex;
   align-items: center;
   font-size: small;
-  padding-bottom: 8px;
+  padding-bottom: 16px;
 }
 
 .breadcrumbItem {

ui/src/components/FilterPanel/FilterPanel.module.scss

@@ -1,10 +1,12 @@
 @use '../../styles/constants' as c;
 
 .filterPanel {
-  border-left: c.$border-width solid #ddd;
-  padding-left: 16px;
   width: 20%;
   overflow-x: auto;
+  background-color: c.$panel-background-color;
+  border-radius: c.$panel-radius;
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
+  padding: 16px;
 }
 
 .filterPanelChips{

ui/src/components/FilterPanel/index.tsx

@@ -3,12 +3,12 @@ import styles from './FilterPanel.module.scss';
 import { TracePercentile } from '@/models/traces_response';
 import PercentileChip from '../PercentileChip';
 
-interface FilterPanelProps {
+interface StatsPanelProps {
   recordsCount: number;
   latencyPercentiles: TracePercentile[];
 }
 
-const FilterPanel: React.FC<FilterPanelProps> = ({ latencyPercentiles, recordsCount }) => {
+const StatsPanel: React.FC<StatsPanelProps> = ({ latencyPercentiles, recordsCount }) => {
 
   return (
     <div className={styles.filterPanel}>
@@ -32,8 +32,9 @@ const FilterPanel: React.FC<FilterPanelProps> = ({ latencyPercentiles, recordsCo
         <p>No latency data available</p>
       </div>
       }
+      <h3>Feedback</h3>
     </div>
   );
 };
 
-export default FilterPanel;
+export default StatsPanel;

ui/src/components/LatencyChip/LatencyChip.module.scss

@@ -15,27 +15,27 @@
   @extend .latencyChip;
   background-color: c.$temperature-1;
   color: c.$temperature-1-text;
-  border: c.$border-width solid transparent;
+  border: 1px solid c.$temperature-1-text;
 }
 
 .temperature2 {
   @extend .latencyChip;
   background-color: c.$temperature-2;
   color: c.$temperature-2-text;
-  border: c.$border-width solid transparent;
+  border: 1px solid c.$temperature-2-text;
 }
 
 .temperature3 {
   @extend .latencyChip;
   background-color: c.$temperature-3;
   color: c.$temperature-3-text;
-  border: c.$border-width solid transparent;
+  border: 1px solid c.$temperature-3-text;
 }
 
 
 .temperature4 {
   @extend .latencyChip;
   background-color: c.$temperature-4;
   color: c.$temperature-4-text;
-  border: c.$border-width solid transparent;
+  border: 1px solid c.$temperature-4-text;
 }

ui/src/components/PercentileChip/PercentileChip.module.scss

@@ -15,27 +15,27 @@
   @extend .percentileChip;
   background-color: c.$temperature-1;
   color: c.$temperature-1-text;
-  border: c.$border-width solid transparent;
+  border: 1px solid c.$temperature-1-text;
 }
 
 .temperature2 {
   @extend .percentileChip;
   background-color: c.$temperature-2;
   color: c.$temperature-2-text;
-  border: c.$border-width solid transparent;
+  border: 1px solid c.$temperature-2-text;
 }
 
 .temperature3 {
   @extend .percentileChip;
   background-color: c.$temperature-3;
   color: c.$temperature-3-text;
-  border: c.$border-width solid transparent;
+  border: 1px solid c.$temperature-3-text;
 }
 
 
 .temperature4 {
   @extend .percentileChip;
   background-color: c.$temperature-4;
   color: c.$temperature-4-text;
-  border: c.$border-width solid transparent;
+  border: 1px solid c.$temperature-4-text;
 }

ui/src/components/TraceDetailsPanel/traceDetailsPanel.module.scss

@@ -2,7 +2,10 @@
 
 .traceDetailsPanel {
   width: 70%;
-  padding-left: 16px;
+  background-color: c.$panel-background-color;
+  border-radius: c.$panel-radius;
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
+  padding: 16px;
 }
 
 .title {
@@ -11,8 +14,8 @@
 }
 
 .content {
-  background-color: c.$background-color;
-  border: c.$border-width solid c.$border-color;
+  background-color: c.$panel-background-color;
+  border: c.$border-width solid rgba(0, 0, 0, 0.2);
   padding: 8px;
   border-radius: c.$border-radius;
   white-space: pre-wrap;

ui/src/components/TraceTable/TraceTable.module.scss

@@ -1,24 +1,27 @@
 @use '../../styles/constants' as c;
 
-
 .tableContainer {
   width: 80%;
   overflow-x: auto;
+  background-color: c.$panel-background-color;
+  border-radius: c.$panel-radius;
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
+  padding: 16px;
 }
 
 .fullWidthTable {
   width: 100%;
-  border: c.$border-width solid c.$border-color;
+  border: c.$border-width solid c.$border-color-transparent;
   border-radius: c.$border-radius;
   border-collapse: separate;
   border-spacing: 0;
 
   th {
-    border-bottom: c.$border-width solid c.$border-color;
+    border-bottom: c.$border-width solid c.$border-color-transparent;
     height: 36px;
     padding: 8px;
     text-align: left;
-    background-color: #f4f4f4;
+    background-color: c.$background-color;
   }
 
   td {
@@ -53,7 +56,7 @@
   .dateDropdown {
     padding: 8px;
     border-radius: c.$border-radius;
-    border: c.$border-width solid c.$border-color;
+    border: c.$border-width solid c.$border-color-transparent;
     font-family: 'Ubuntu', 'Open Sans', sans-serif;
   }
 }

ui/src/components/TraceTable/index.tsx

@@ -30,6 +30,7 @@ function TraceTable(props: {
         <th>Name</th>
         <th>Start Time</th>
         <th>Latency</th>
+        <th>Feedback</th>
       </tr>
       </thead>
       <tbody>

ui/src/components/TraceTree/index.tsx

@@ -48,7 +48,7 @@ const TraceTree: React.FC<TraceTreeProps> = ({
     const traceHeaderClass = isSelected ? `${styles.traceHeader} ${styles.active}` : styles.traceHeader;
 
     return (
-      <div key={trace.run_id}>
+      <div key={trace.run_id} >
         <div className={traceHeaderClass}>
           <div onClick={() => handleSelectTrace(trace)} className={styles.traceTitle}>
             <span className={styles.runTypeBox}>{trace.run_type.toUpperCase()}</span>