Merge pull request #61 from mongodb/docsp-55532-vector-scoring

DOCSP-55532: Add vector scoring to search results

Author: cbullinger

mflix/client/app/components/MovieCard/MovieCard.module.css

@@ -105,6 +105,17 @@
   font-size: 14px;
 }
 
+.vectorScore {
+  margin: 0 0 4px 0;
+  color: #0066cc;
+  font-size: 13px;
+  font-weight: 500;
+  background: #e6f0ff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: inline-block;
+}
+
 .movieGenres {
   margin: 0;
   color: #888;

mflix/client/app/components/MovieCard/MovieCard.tsx

@@ -69,6 +69,11 @@ export default function MovieCard({ movie, isSelected = false, onSelectionChange
         {movie.year && (
           <p className={movieStyles.movieYear}>({movie.year})</p>
         )}
+        {movie.score !== undefined && (
+          <p className={movieStyles.vectorScore}>
+            🎯 Vector Score: {movie.score.toFixed(4)}
+          </p>
+        )}
         {movie.imdb?.rating && (
           <p className={movieStyles.movieRating}>⭐ {movie.imdb.rating}/10</p>
         )}

mflix/client/app/lib/api.ts

@@ -725,6 +725,7 @@ export async function vectorSearchMovies(searchParams: {
         genres: item.genres || [],
         directors: item.directors || [],
         cast: item.cast || [],
+        score: item.score,
         // Add default values for fields not included in VectorSearchResult
         fullplot: undefined,
         released: undefined,

mflix/client/app/types/movie.ts

@@ -5,7 +5,7 @@
 
 /**
  * Movie interface for type safety
- * Matches the Movie type from the Express backend
+ * Matches the Movie type from the backend
  */
 export interface Movie {
   _id: string;
@@ -51,11 +51,13 @@ export interface Movie {
   };
   metacritic?: number;
   type?: string;
+  // Vector search score (only present in vector search results)
+  score?: number;
 }
 
 /**
  * API Response interface for the movies endpoint
- * Matches the SuccessResponse type from the Express backend
+ * Matches the SuccessResponse type from the backend
  */
 export interface MoviesApiResponse {
   success: boolean;