Merge pull request #43 from victorverma3/movie-cards

Redesigned movie recommendation display

backend/model/recommender.py

@@ -279,7 +279,10 @@ def merge_recommendations(n, all_recommendations):
 
     for df in dataframes[1:]:
         merged_recommendations = pd.merge(
-            merged_recommendations, df, on=["title", "release_year", "url"], how="inner"
+            merged_recommendations,
+            df,
+            on=["title", "poster", "release_year", "url"],
+            how="inner",
         )
 
     # calculates average predicted rating
@@ -289,22 +292,17 @@ def merge_recommendations(n, all_recommendations):
         if col.endswith("_predicted_rating")
     ]
 
-    merged_recommendations["average_predicted_rating"] = (
+    merged_recommendations["predicted_rating"] = (
         merged_recommendations[predicted_rating_columns]
         .astype(float)
         .mean(axis=1)
         .round(2)
     )
 
-    # rounds average predicted ratings to 2 decimals
-    merged_recommendations["average_predicted_rating"] = merged_recommendations[
-        "average_predicted_rating"
-    ].apply(lambda x: "{:.2f}".format(x))
-
     # sorts recommendations from highest to lowest predicted average rating
     final_merged_recommendations = merged_recommendations.sort_values(
-        by="average_predicted_rating", ascending=False
-    )[["title", "release_year", "average_predicted_rating", "url"]].drop_duplicates(
+        by="predicted_rating", ascending=False
+    )[["title", "poster", "release_year", "predicted_rating", "url"]].drop_duplicates(
         subset="url"
     )
 

frontend/src/components/Footer.tsx

@@ -44,7 +44,7 @@ const Footer = () => {
                 >
                     Victor Verma
                 </a>{" "}
-                | v1.1.2
+                | v1.2.0
             </p>
             <div className="w-40 mx-auto flex flex-row justify-around">
                 {logos.map((logo, index) => (

frontend/src/components/MovieCard.tsx

@@ -0,0 +1,47 @@
+import { Link } from "react-router-dom";
+
+interface MovieCardProps {
+    title: string;
+    poster: string;
+    release_year: number;
+    predicted_rating: number;
+    url: string;
+}
+
+const MovieCard = ({
+    title,
+    poster,
+    release_year,
+    predicted_rating,
+    url,
+}: MovieCardProps) => {
+    return (
+        <div className="w-48 mt-4 flex flex-col border-2 border-gray-200 rounded-lg duration-200 hover:scale-105 hover:transition hover:border-amber-800 hover:shadow-lg">
+            <Link
+                to={url}
+                target="_blank"
+                className="h-full flex flex-col justify-between"
+            >
+                <img
+                    className="w-full rounded-md"
+                    src={poster}
+                    alt="error displaying poster"
+                />
+                <div className="p-2 flex flex-col flex-1 justify-between">
+                    <h2 className="text-md text-left">
+                        <span className="text-amber-800 font-semibold">
+                            {title}{" "}
+                        </span>
+                        ({release_year})
+                    </h2>
+                    <h3 className="text-sm text-left text-black">
+                        Predicted Rating:{" "}
+                        <span className="font-bold">{predicted_rating}</span>
+                    </h3>
+                </div>
+            </Link>
+        </div>
+    );
+};
+
+export default MovieCard;

frontend/src/components/RecDisplay.tsx

@@ -0,0 +1,31 @@
+import MovieCard from "./MovieCard";
+
+type RecommendationResponse = {
+    title: string;
+    poster: string;
+    release_year: number;
+    predicted_rating: number;
+    url: string;
+};
+
+interface RecDisplayProps {
+    recommendations: RecommendationResponse[];
+}
+
+const RecDisplay = ({ recommendations }: RecDisplayProps) => {
+    return (
+        <div className="w-fit max-w-5xl flex flex-wrap justify-around">
+            {recommendations.map((rec) => (
+                <MovieCard
+                    title={rec.title}
+                    poster={rec.poster}
+                    release_year={rec.release_year}
+                    predicted_rating={rec.predicted_rating}
+                    url={rec.url}
+                />
+            ))}
+        </div>
+    );
+};
+
+export default RecDisplay;

frontend/src/components/Recommendation.tsx

@@ -5,7 +5,7 @@ import { useSnackbar } from "notistack";
 
 import Filters from "./Filters";
 import LinearIndeterminate from "./LinearIndeterminate";
-import RecTable from "./RecTable";
+import RecDisplay from "./RecDisplay";
 
 import { MovieFilterContext } from "../contexts/MovieFilterContext";
 
@@ -49,6 +49,7 @@ const isQueryEqual = (previousQuery: Query, currentQuery: Query): boolean => {
 
 type RecommendationResponse = {
     title: string;
+    poster: string;
     release_year: number;
     predicted_rating: number;
     url: string;
@@ -65,8 +66,6 @@ const Recommendation = () => {
 
     const { enqueueSnackbar } = useSnackbar();
 
-    const [isSingleQuery, setIsSingleQuery] = useState(true);
-
     const [previousQuery, setPreviousQuery] = useState<Query>({
         usernames: [],
         popularity: -1,
@@ -187,12 +186,6 @@ const Recommendation = () => {
             return;
         }
 
-        if (usernames.length === 1) {
-            setIsSingleQuery(true);
-        } else {
-            setIsSingleQuery(false);
-        }
-
         getRecommendations(usernames);
     };
 
@@ -243,10 +236,7 @@ const Recommendation = () => {
             )}
             {!gettingRecs && recommendations && (
                 <div className="w-fit mx-auto mt-8">
-                    <RecTable
-                        recommendations={recommendations}
-                        variant={isSingleQuery ? "single" : "multiple"}
-                    />
+                    <RecDisplay recommendations={recommendations}></RecDisplay>
                 </div>
             )}
         </div>