added logic to clean edges of map to only show 1 arrow with the average duration and also cleaned up console.logs and added comments to code

Author: patpat20

app/charts/RouteChart.jsx

@@ -1,19 +1,13 @@
-import { Theme, makeStyles } from '@material-ui/core/styles';
-import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
+import { makeStyles } from '@material-ui/core/styles';
 import React, { useContext } from 'react';
-// import OverviewContext from '../context/OverviewContext';
 import { CommsContext } from '../context/CommsContext';
-// import { log } from 'console';
 import Graph from 'react-graph-vis';
 
-const RouteLocations = React.memo(() => {
+const RouteChart = React.memo(() => {
   const communicationsData = useContext(CommsContext).commsData;
-  console.log('commdata=======>', communicationsData);
-  console.log('try again');
 
-  // initialize an empty object resObj.
-  // This object will store the microservice names as values and its corresponding correlatingid or correlatingid as keys.
-  // The microservice names will be stored in array within the order it was to the database.
+  // gather all communicationsData and sort them using matching correlatingid.
+  // resObj { key = correlatingid : value = array of objects{ microservice , time} }
   const resObj = {};
 
   if (communicationsData.length > 0 && communicationsData[0]._id) {
@@ -27,18 +21,13 @@ const RouteLocations = React.memo(() => {
 
     // Iterate over sorted array to build up resObj.
     for (let i = 0; i < communicationsData.length; i += 1) {
-      // declare a constant element and initialize it as the object at index i of the communicationsData array
       const element = communicationsData[i];
-      // Pushes the microservice name & timeSent into the resObj.
-      // Data objects w/ same corrId will be grouped in a same array.
       if (resObj[element.correlatingid]) {
         resObj[element.correlatingid].push({
           microservice: element.microservice,
           time: element.time
         });
       } else {
-        // The value that corresp. to the correlationId key is an array of obj containing name and time data.
-        // Each obj is a data point.
         resObj[element.correlatingid] = [
           {
             microservice: element.microservice,
@@ -56,28 +45,20 @@ const RouteLocations = React.memo(() => {
           time
         });
       } else {
-        // The value that corresp. to the correlationId key is an array of obj containing name and time data.
-        // Each obj is a data point.
         resObj[element.correlatingid] = [
           {
             microservice,
             time
           },
         ];
       }
-      // initializing the object with the first microservice
     }
-    console.log('B', resObj)
   }
-  console.log('+++RESOBJ+++');
-  console.log(resObj);
 
-  // use Object.values to destructure locations
-  // Each elem in tracePoints is an array of arrays, which contain objects (each of which is a data point).
+
   // Filter the array so that only subarrays w/ len > 1 are kept.
   // (len == 1 means there's only one point in the route. There's no meaningful data to be gained from those.)
   const tracePoints = Object.values(resObj).filter(subArray => subArray.length > 1);
-  console.log('tracepoints =======>', tracePoints);
 
   const useStyles = makeStyles(theme => ({
     paper: {
@@ -98,41 +79,42 @@ const RouteLocations = React.memo(() => {
 
   // ======Graphs logic =======//
   const nodeListObj = {};
-  const edgeList = [];
+  const edgeListObj = {};
   for (let route of tracePoints) {
     for (let i = 0; i < route.length; i += 1) {
-      const colors = ['#75b6d7', '#cc000', '#fce356', '#888888', '#ccd8e1']
       // check if node exists if not then add node
       let id = route[i].microservice
       if (nodeListObj[id] === undefined) {
         nodeListObj[id] = { id: id, label: id, color: { background: '#24d2f1', border: 'white', hover: { background: '#4d55ec', border: 'white' } }, shape: 'circle' }
       }
-      // add edge from node 1 to node 2 (repeat til end)
+      // add edge from node to node (repeat til end)
       if (i !== 0) {
+        let from = route[i - 1].microservice
+        let to = id;
+        let edgeStr = JSON.stringify({ from, to })
         let duration = new Date(route[i].time) - new Date(route[i - 1].time);
-        let edge = { from: route[i - 1].microservice, to: id, label: `${duration * 100} ms` }
-        edgeList.push(edge)
+        // only want one edge per route with the average duration
+        if (edgeListObj[edgeStr]) {
+          duration = (duration + edgeListObj[edgeStr]) / 2
+        }
+        edgeListObj[edgeStr] = duration
       }
     }
   }
+
+  // turn objects into valid arrays to input into graph
   const nodeList = Object.values(nodeListObj);
-  console.log(edgeList);
-  console.log(nodeList);
+  const edgeList = []
+  for (let [e, duration] of Object.entries(edgeListObj)) {
+    const edge = JSON.parse(e)
+    edge.label = `${(duration * 10).toFixed(0)} ms`
+    edgeList.push(edge)
+  }
 
   const graph = {
     nodes: nodeList,
     edges: edgeList
   };
-  // const graph = {
-  //   nodes: [
-  //     { id: 'one', label: "Node 1", color: "#e04141" },
-  //     { id: 2, label: "Node 2", color: "#e09c41" },
-  //     { id: 3, label: "Node 3", color: "#e0df41" },
-  //     { id: 4, label: "Node 4", color: "#7be041" },
-  //     { id: 5, label: "Node 5", color: "#41e0c9" }
-  //   ],
-  //   edges: [{ from: 4, to: 2, label: 'hello' }, { from: 'one', to: 3 }, { from: 2, to: 4 }, { from: 2, to: 5 }]
-  // };
   const options = {
     height: '300px',
     width: '300px',
@@ -169,4 +151,4 @@ const RouteLocations = React.memo(() => {
   );
 });
 
-export default RouteLocations;
+export default RouteChart;