From 0ad664f0ea89acd60bbcc98392652b2375f924a3 Mon Sep 17 00:00:00 2001
From: Jakub Lyczko <lyczeq@gmail.com>
Date: Tue, 28 Sep 2021 14:02:24 +0200
Subject: [PATCH] Face details presentation  (#161)

* Create EmotionsCard component and add styling for it

* Modify carousel styles to center values

* Modifying html tags and styling feature details

* Fix width of emotions bar

* Fix if in emotionscard
---
 frontend/src/assets/styles/style.js           | 16 ++++++-
 .../FeatureTiles/FaceTile/EmotionsCard.js     | 18 ++++++++
 .../FaceTile/EmotionsCard.styles.js           | 43 +++++++++++++++++
 .../FeatureTiles/FaceTile/FaceTile.js         | 46 ++++++++++++-------
 .../FeatureTiles/FeatureTile/FeatureTile.js   |  8 ++--
 .../TextEntityTile/TextEntityTile.js          | 12 +++--
 6 files changed, 117 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/views/ImageDetailsPage/components/FeatureTiles/FaceTile/EmotionsCard.js
 create mode 100644 frontend/src/views/ImageDetailsPage/components/FeatureTiles/FaceTile/EmotionsCard.styles.js

diff --git a/frontend/src/assets/styles/style.js b/frontend/src/assets/styles/style.js
index 8c830feb9..70b659dd6 100644
--- a/frontend/src/assets/styles/style.js
+++ b/frontend/src/assets/styles/style.js
@@ -116,7 +116,6 @@ export const FeatureTitle = styled.p`
   height: 10%;
   width: 100%;
   padding: 3% 0;
-  margin-bottom: 5%;
   background: rgb(32, 104, 223);
   background-image: linear-gradient(244deg, rgba(0, 232, 51, 0.5), rgba(60, 144, 228, 0));
   font-size: 20px;
@@ -139,6 +138,13 @@ export const FeatureCarousel = styled(Carousel)`
   height: 90%;
   justify-content: center;
 
+  .rec.rec-item-wrapper {
+    height: 150px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
   .rec.rec-arrow {
     background-color: #1da697;
     margin: 0 2%;
@@ -181,6 +187,14 @@ export const FeatureCarousel = styled(Carousel)`
     background-color: rgba(32, 104, 223, 0.5);
     box-shadow: 0 0 1px 3px rgb(32, 104, 223);
   }
+
+  ul {
+    align-self: center;
+    list-style: none;
+  }
+  li {
+    text-align: center;
+  }
 `;
 
 export const TextAnalysis = styled.div`
diff --git a/frontend/src/views/ImageDetailsPage/components/FeatureTiles/FaceTile/EmotionsCard.js b/frontend/src/views/ImageDetailsPage/components/FeatureTiles/FaceTile/EmotionsCard.js
new file mode 100644
index 000000000..ad1ce8e19
--- /dev/null
+++ b/frontend/src/views/ImageDetailsPage/components/FeatureTiles/FaceTile/EmotionsCard.js
@@ -0,0 +1,18 @@
+import { EmotionsTemplate, EmotionBar } from './EmotionsCard.styles';
+
+const EmotionsCard = ({ emotionsArray }) => {
+  return (
+    <EmotionsTemplate>
+      {emotionsArray.map((obj, i) => {
+        return (
+          <div key={i}>
+            <p key={obj}>{obj.emotion}</p>
+            {obj.emotionValue === 0 ? <p key={i}>Unknown</p> : <EmotionBar emotionValue={obj.emotionValue} key={i} />}
+          </div>
+        );
+      })}
+    </EmotionsTemplate>
+  );
+};
+
+export default EmotionsCard;
diff --git a/frontend/src/views/ImageDetailsPage/components/FeatureTiles/FaceTile/EmotionsCard.styles.js b/frontend/src/views/ImageDetailsPage/components/FeatureTiles/FaceTile/EmotionsCard.styles.js
new file mode 100644
index 000000000..33d628ffb
--- /dev/null
+++ b/frontend/src/views/ImageDetailsPage/components/FeatureTiles/FaceTile/EmotionsCard.styles.js
@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+
+export const EmotionsTemplate = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  p {
+    text-transform: capitalize;
+  }
+
+  div {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-row-gap: 1%;
+  }
+`;
+
+export const EmotionBar = styled.div`
+  display: block;
+  align-self: center;
+  width: ${({ emotionValue }) => {
+    switch (emotionValue) {
+      case 5:
+        return '100%';
+      case 4:
+        return '80%';
+      case 3:
+        return '60%';
+      case 2:
+        return '40%';
+      default:
+        return '15%';
+    }
+  }};
+  max-width: 80%;
+  height: 80%;
+  margin-left: 8%;
+  border-radius: 5px;
+  background: rgb(32, 104, 223);
+  background-image: linear-gradient(244deg, rgba(0, 232, 51, 0.5), rgba(60, 144, 228, 0));
+`;
diff --git a/frontend/src/views/ImageDetailsPage/components/FeatureTiles/FaceTile/FaceTile.js b/frontend/src/views/ImageDetailsPage/components/FeatureTiles/FaceTile/FaceTile.js
index 19614f38f..9f9239cb8 100644
--- a/frontend/src/views/ImageDetailsPage/components/FeatureTiles/FaceTile/FaceTile.js
+++ b/frontend/src/views/ImageDetailsPage/components/FeatureTiles/FaceTile/FaceTile.js
@@ -1,12 +1,32 @@
-import { FeatureItem, FeatureTemplate, FeatureTitle, FeatureCarousel } from 'assets/styles/style';
+import { FeatureTemplate, FeatureTitle, FeatureCarousel } from 'assets/styles/style';
+import EmotionsCard from './EmotionsCard';
 
-const faceDetailsValues = {
-  VERY_UNLIKELY: 'Very Unlikely',
-  UNLIKELY: 'Unlikely',
-  VERY_LIKELY: 'Very Likely',
-  LIKELY: 'Likely',
-  UNKNOWN: 'Unknown',
-  POSSIBLE: 'Possible',
+const getEmotionsWithValues = (obj) => {
+  const emotionsObject = { ...obj };
+
+  const faceDetailsValues = {
+    VERY_LIKELY: 5,
+    LIKELY: 4,
+    POSSIBLE: 3,
+    UNLIKELY: 2,
+    VERY_UNLIKELY: 1,
+    UNKNOWN: 0,
+  };
+
+  const emotionNames = Object.keys(emotionsObject);
+  const emotionsMap = emotionNames.map((emotion) => {
+    return {
+      emotion,
+      emotionValue: faceDetailsValues[emotionsObject[emotion]],
+    };
+  });
+  return emotionsMap;
+};
+
+const extractEmotions = (faceDetails) => {
+  const copiedArray = [...faceDetails];
+
+  return copiedArray?.map(getEmotionsWithValues);
 };
 
 export const FaceTile = ({ faceDetails }) => {
@@ -15,14 +35,8 @@ export const FaceTile = ({ faceDetails }) => {
     <FeatureTemplate>
       <FeatureTitle>Face details</FeatureTitle>
       <FeatureCarousel isNotMany={isNotMany}>
-        {faceDetails?.map((obj, i) => (
-          <FeatureItem key={i}>
-            {Object.keys(obj).map((k, i) => (
-              <p key={i}>
-                {k}: {faceDetailsValues[obj[k]]}
-              </p>
-            ))}
-          </FeatureItem>
+        {extractEmotions(faceDetails).map((emotionsArray, i) => (
+          <EmotionsCard key={i} emotionsArray={emotionsArray} />
         ))}
       </FeatureCarousel>
     </FeatureTemplate>
diff --git a/frontend/src/views/ImageDetailsPage/components/FeatureTiles/FeatureTile/FeatureTile.js b/frontend/src/views/ImageDetailsPage/components/FeatureTiles/FeatureTile/FeatureTile.js
index a25838019..3ef80c1f7 100644
--- a/frontend/src/views/ImageDetailsPage/components/FeatureTiles/FeatureTile/FeatureTile.js
+++ b/frontend/src/views/ImageDetailsPage/components/FeatureTiles/FeatureTile/FeatureTile.js
@@ -35,12 +35,12 @@ export const FeatureTile = ({ title, features, offDots }) => {
     <FeatureTemplate>
       <FeatureTitle>{title}</FeatureTitle>
       <FeatureCarousel isNotMany={isNotMany} offDots={offDots}>
-        {chunks.map((array) => (
-          <div>
+        {chunks.map((array, i) => (
+          <ul key={i}>
             {array.map((element, i) => (
-              <p key={i}>{element}</p>
+              <li key={i}>{element}</li>
             ))}
-          </div>
+          </ul>
         ))}
       </FeatureCarousel>
     </FeatureTemplate>
diff --git a/frontend/src/views/ImageDetailsPage/components/FeatureTiles/TextEntityTile/TextEntityTile.js b/frontend/src/views/ImageDetailsPage/components/FeatureTiles/TextEntityTile/TextEntityTile.js
index 4f8a9cc22..20b14b069 100644
--- a/frontend/src/views/ImageDetailsPage/components/FeatureTiles/TextEntityTile/TextEntityTile.js
+++ b/frontend/src/views/ImageDetailsPage/components/FeatureTiles/TextEntityTile/TextEntityTile.js
@@ -1,4 +1,4 @@
-import { FeatureTemplate, FeatureItem, FeatureTitle, FeatureCarousel } from 'assets/styles/style';
+import { FeatureTemplate, FeatureTitle, FeatureCarousel, TextAnalysis } from 'assets/styles/style';
 
 export const TextEntityTile = ({ entity }) => {
   return (
@@ -6,11 +6,13 @@ export const TextEntityTile = ({ entity }) => {
       <FeatureTitle>Text Entity Details</FeatureTitle>
       <FeatureCarousel>
         {entity?.map((obj, i) => (
-          <FeatureItem key={i}>
+          <TextAnalysis key={i}>
             <p>{obj.name}</p>
-            <p>Type: {obj.type}</p>
-            <p>Sentiment: {obj.sentiment}</p>
-          </FeatureItem>
+            <p>
+              <span>Type</span>: {obj.type}
+            </p>
+            <p><span>Sentiment</span>: {obj.sentiment}</p>
+          </TextAnalysis>
         ))}
       </FeatureCarousel>
     </FeatureTemplate>