2 files changed, 77 insertions, 3 deletions

diff --git a/react-frontend/src/components/EdgeInfo.js b/react-frontend/src/components/EdgeInfo.js
new file mode 100644
index 0000000..60af0e8
--- /dev/null
+++ b/react-frontend/src/components/EdgeInfo.js
@@ -0,0 +1,31 @@
+
+import '../css/UserCheckin.css';
+
+/**
+ * Componenet for checkins. Has a toggle to show more info.
+ * @param {Object} props The props of the component.
+ * @returns {import('react').HtmlHTMLAttributes} A list element holding a checkin's info.
+ */
+function EdgeInfo(props) {
+    // State - toggled
+
+    const stockList = props.stockList;
+
+   /* const stockInfo = stockList.map((stock) =>
+        <li>{stock}</li>
+    );*/
+
+    const hideSelf = () => {
+        props.setHideInfo(true);
+    }
+
+    return (
+        <div className='edge-info-wrapper'>
+            <p onClick={hideSelf}> X </p>
+            <div className = 'edge-info'>
+                {stockList}
+            </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 96b2027..01093dc 100644
--- a/react-frontend/src/components/Visualization.js
+++ b/react-frontend/src/components/Visualization.js
@@ -4,14 +4,27 @@ import Graph from 'vis-react';
 
 // CSS imports
 import '../css/Canvas.css';
+import EdgeInfo from "./EdgeInfo";
 
 
 /**
- * This function renders and mantains thhe canvas.
+ * This function renders and mantains the canvas.
  * @param {Object} props The props for the canvas.
  * @returns {import("react").HtmlHTMLAttributes} The canvas to be retured.
  */
 function Visualization(props) {
+
+  /*let stocks = {};
+  let hideEdgeInfo = true;
+
+  const setStocks = (newStocks) => {
+    stocks = newStocks;
+  }
+
+  const setHideEdgeInfo = (val) => {
+    hideEdgeInfo = val;
+  }*/
+
   const [key, setKey] = useState(0);
 
   const [graphState, setGraphState] = useState({
@@ -32,6 +45,27 @@ 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;
@@ -87,19 +121,28 @@ function Visualization(props) {
           color:{
             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(() => {
     setKey(key => key + 1);
     setGraphState({nodes: getNodes(), edges: getEdges()})
   }, [JSON.stringify(props.data)]);
-  
+
 
   return (
     <div className="Map-canvas">