fixed some stuff with css overflow for investor info popup

4 files changed, 45 insertions, 54 deletions

diff --git a/react-frontend/src/components/EdgeInfo.js b/react-frontend/src/components/EdgeInfo.js
index 60af0e8..566c70a 100644
--- a/react-frontend/src/components/EdgeInfo.js
+++ b/react-frontend/src/components/EdgeInfo.js
@@ -1,5 +1,6 @@
 
 import '../css/UserCheckin.css';
+import { useEffect, useState } from "react";
 
 /**
  * Componenet for checkins. Has a toggle to show more info.
@@ -7,25 +8,52 @@ import '../css/UserCheckin.css';
  * @returns {import('react').HtmlHTMLAttributes} A list element holding a checkin's info.
  */
 function EdgeInfo(props) {
-    // State - toggled
+   /* // State - toggled
+    const [stockList, setStockList] = useState([]);
 
-    const stockList = props.stockList;
-
-   /* const stockInfo = stockList.map((stock) =>
+   const stockInfo = stockList.map((stock) =>
         <li>{stock}</li>
-    );*/
+    );
+
+
+    const getEdgeInfo = (fromID, toID) => {
+     fetch("http://localhost:4567/edge-data", {
+       method: "POST",
+       body: JSON.stringify({
+         followerID: fromID,
+         leaderID:  toID,
+       }),
+       headers: {
+         "Content-Type": "application/json",
+       },
+       credentials: "same-origin"
+     })
+         .then(res  => res.json())
+         .then(data => {
+           console.log(data);
+           setStockList(data);
+         })
+         .catch(err => console.log(err));
+   }
+
+    useEffect(() => getEdgeInfo(), [props.selectedFollowerID, props.selectedLeaderID]);
+    */
 
-    const hideSelf = () => {
-        props.setHideInfo(true);
-    }
 
     return (
-        <div className='edge-info-wrapper'>
-            <p onClick={hideSelf}> X </p>
+        <div>
+
+        </div>
+        /*<div className='Chosen-user' hidden={!props.showEdgeInfo}>
+            <h3>
+                <span onClick={() => props.setShowEdgeInfo(false)}>
+                    <img className="Img-btn" src="assets/round_arrow_back_white_18dp.png" alt="image" />
+                </span>
+            </h3>
             <div className = 'edge-info'>
-                {stockList}
+                {stockInfo}
             </div>
-        </div>);
+        </div>*/);
 }
 
 export default EdgeInfo;
\ No newline at end of file
diff --git a/react-frontend/src/components/Visualization.js b/react-frontend/src/components/Visualization.js
index 01093dc..d65d106 100644
--- a/react-frontend/src/components/Visualization.js
+++ b/react-frontend/src/components/Visualization.js
@@ -14,16 +14,7 @@ import EdgeInfo from "./EdgeInfo";
  */
 function Visualization(props) {
 
-  /*let stocks = {};
-  let hideEdgeInfo = true;
 
-  const setStocks = (newStocks) => {
-    stocks = newStocks;
-  }
-
-  const setHideEdgeInfo = (val) => {
-    hideEdgeInfo = val;
-  }*/
 
   const [key, setKey] = useState(0);
 
@@ -45,27 +36,6 @@ function Visualization(props) {
     }
   }
 
-
-  /*const getEdgeInfo = (fromID, toID) => {
-      fetch("http://localhost:4567/edge-data", {
-        method: "POST",
-        body: JSON.stringify({
-          followerID: fromID,
-          leaderID:  toID,
-        }),
-        headers: {
-          "Content-Type": "application/json",
-        },
-        credentials: "same-origin"
-      })
-          .then(res  => res.json())
-          .then(data => {
-            console.log(data);
-            setStocks(data);
-            setHideEdgeInfo(false);
-          })
-          .catch(err => console.log(err));
-    }*/
   const getNodes = () => {
     let nodes = [];
     const maxScore = props.data[0].suspicionScore;
@@ -122,20 +92,11 @@ function Visualization(props) {
             opacity: 0.7,
             highlight:'#fdca40',
           },
-          /*chosen: {
-            edge: () => getEdgeInfo(follower.id, hub.id)
-          }*/
         });
       });
     });
     return edges;
   }
-  /*
-  * <EdgeInfo
-          stockList={stocks}
-          setHideInfo={setHideEdgeInfo}
-          hidden={hideEdgeInfo}>
-      </EdgeInfo>*/
 
   // Hooks to update graph state when data changes
   useMemo(() => {
diff --git a/react-frontend/src/css/InvesterInfo.css b/react-frontend/src/css/InvesterInfo.css
index 3501b70..c1bb137 100644
--- a/react-frontend/src/css/InvesterInfo.css
+++ b/react-frontend/src/css/InvesterInfo.css
@@ -18,7 +18,7 @@
 } */
 
 .bigNumber {
-  font-size: 25pt;
+  font-size: 16pt;
   margin: 0;
 }
 
@@ -27,6 +27,7 @@
   color: lightgreen;
   width: 25vw;
   border-radius: 10px;
+  overflow: scroll;
 }
 
 .Stock-row {
diff --git a/react-frontend/src/css/UserCheckin.css b/react-frontend/src/css/UserCheckin.css
index 389bca6..23daffa 100644
--- a/react-frontend/src/css/UserCheckin.css
+++ b/react-frontend/src/css/UserCheckin.css
@@ -10,6 +10,7 @@
   cursor: default;
   /* Transparent background */
   background: rgba(0, 0, 0, 0);
+  overflow: scroll;
 }
 
 ul {
@@ -47,12 +48,12 @@ ul {
 .Checkin-list {
   padding: 0 20px;
   height: 85vh;
-  overflow-y: scroll;
+  overflow: scroll;
 }
 
 .User-checkin-list {
   height: 75vh;
-  overflow-y: scroll;
+  overflow: scroll;
 
   list-style-position: inside;
   padding: 0 20px;