added some console.logs to better see the flow

Author: andytsou19

.gitignore

@@ -14,5 +14,5 @@ src/extension/build.pem
 bower_components
 sandboxes/manual-tests/NextJS/.next
 .vscode
-src/app/components/Map.tsx
+src/app/components/.tsx
 package-lock.json

src/README.md

@@ -70,6 +70,8 @@ The general flow of data is described in the following steps:
 ![GENERAL DATA FLOW](../assets/dataflow.jpg)
 
 1. When the background bundle is loaded by the browser, it executes a script injection into the dom. (see section on *backend*). This script uses a technique called [throttle](https://medium.com/@bitupon.211/debounce-and-throttle-160affa5457b) to send state data from the app to the content script every specified milliseconds (in our case, this interval is 70ms).
+<!--  CHECK LINE 496 IN LINKFIBER.TS -->
+
 
 2. The content script always listens for messages being passed from the extension's target application. Upon receiving data from the target app, the content script will immediately forward this data to the background script which then updates an object called `tabsObj`. Each time `tabsObj` is updated, its latest version will be passed to Reactime, where it is processed for displaying to the user by the *app* folder scripts.
 

src/app/components/ComponentMap.tsx

@@ -4,29 +4,29 @@ import { Group } from '@visx/group';
 import { hierarchy, Tree } from '@visx/hierarchy';
 import { LinearGradient } from '@visx/gradient';
 import { pointRadial } from 'd3-shape';
-import useForceUpdate from './useForceUpdate';
-import LinkControls from './LinkControls';
-import getLinkComponent from './getLinkComponent';
 import { localPoint } from '@visx/event';
 import {
   useTooltip,
   useTooltipInPortal,
   TooltipWithBounds,
   defaultStyles,
 } from '@visx/tooltip';
+import useForceUpdate from './useForceUpdate';
+import LinkControls from './LinkControls';
+import getLinkComponent from './getLinkComponent';
 import { onHover, onHoverExit } from '../actions/actions';
 import { useStoreContext } from '../store';
 
 const root = hierarchy({
-  name: "root",
+  name: 'root',
   children: [
-    { name: "child #1" },
+    { name: 'child #1' },
     {
-      name: "child #2",
+      name: 'child #2',
       children: [
-        { name: "grandchild #1" },
-        { name: "grandchild #2" },
-        { name: "grandchild #3" },
+        { name: 'grandchild #1' },
+        { name: 'grandchild #2' },
+        { name: 'grandchild #3' },
       ],
     },
   ],
@@ -39,7 +39,9 @@ interface TreeNode {
 
 type HierarchyNode = HierarchyPointNode<TreeNode>;
 
-const defaultMargin = { top: 30, left: 30, right: 55, bottom: 70 };
+const defaultMargin = {
+  top: 30, left: 30, right: 55, bottom: 70,
+};
 
 export type LinkTypesProps = {
   width: number;
@@ -53,17 +55,17 @@ export default function ComponentMap({
   width: totalWidth,
   height: totalHeight,
   margin = defaultMargin,
-  snapshots: snapshots,
+  snapshots,
 }: LinkTypesProps) {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   // This is where we select the last object in the snapshots array from props to allow hierarchy to parse the data for render on the component map per hierarchy layout specifications.
   const lastNode = snapshots.length - 1;
   const data: {} = snapshots[lastNode];
 
   // importing custom hooks for the selection tabs.
-  const [layout, setLayout] = useState("cartesian");
-  const [orientation, setOrientation] = useState("horizontal");
-  const [linkType, setLinkType] = useState("diagonal");
+  const [layout, setLayout] = useState('cartesian');
+  const [orientation, setOrientation] = useState('horizontal');
+  const [linkType, setLinkType] = useState('diagonal');
   const [stepPercent, setStepPercent] = useState(10);
 
   // Declared this variable and assigned it to the useForceUpdate function that forces a state to change causing that component to re-render and display on the map
@@ -79,7 +81,7 @@ export default function ComponentMap({
 
   // This sets the starting position for the root node on the maps display. the polar layout sets the root node to the relative center of the display box based on the size of the browser window.
   // the else conditional statements determines the root nodes location either in the left middle or top middle of the browser window relative to the size of the browser.
-  if (layout === "polar") {
+  if (layout === 'polar') {
     origin = {
       x: innerWidth / 2,
       y: innerHeight / 2,
@@ -88,7 +90,7 @@ export default function ComponentMap({
     sizeHeight = Math.min(innerWidth, innerHeight) / 2;
   } else {
     origin = { x: 0, y: 0 };
-    if (orientation === "vertical") {
+    if (orientation === 'vertical') {
       sizeWidth = innerWidth;
       sizeHeight = innerHeight;
     } else {
@@ -97,7 +99,7 @@ export default function ComponentMap({
     }
   }
 
-  //Tooltip stuff:
+  // Tooltip stuff:
   const {
     tooltipData,
     tooltipLeft,
@@ -122,7 +124,7 @@ export default function ComponentMap({
     fontFamily: 'Roboto',
   };
 
-  const formatRenderTime = (time) => {
+  const formatRenderTime = time => {
     time = time.toFixed(3);
     return `${time} ms `;
   };
@@ -147,11 +149,11 @@ export default function ComponentMap({
         <rect width={totalWidth} height={totalHeight} rx={14} fill="#242529" />
         <Group top={margin.top} left={margin.left}>
           <Tree
-            root={hierarchy(data, (d) => (d.isExpanded ? null : d.children))}
+            root={hierarchy(data, d => (d.isExpanded ? null : d.children))}
             size={[sizeWidth, sizeHeight]}
             separation={(a, b) => (a.parent === b.parent ? 1 : 0.5) / a.depth}
           >
-            {(tree) => (
+            {tree => (
               <Group top={origin.y} left={origin.x}>
                 {tree.links().map((link, i) => (
                   <LinkComponent
@@ -165,8 +167,8 @@ export default function ComponentMap({
                 ))}
 
                 {tree.descendants().map((node, key) => {
-                  const widthFunc = (name) => {
-                    let nodeLength = name.length;
+                  const widthFunc = name => {
+                    const nodeLength = name.length;
                     if (nodeLength < 5) return nodeLength + 40;
                     if (nodeLength < 10) return nodeLength + 60;
                     return nodeLength + 70;
@@ -176,28 +178,27 @@ export default function ComponentMap({
 
                   let top: number;
                   let left: number;
-                  if (layout === "polar") {
+                  if (layout === 'polar') {
                     const [radialX, radialY] = pointRadial(node.x, node.y);
                     top = radialY;
                     left = radialX;
-                  } else if (orientation === "vertical") {
+                  } else if (orientation === 'vertical') {
                     top = node.y;
                     left = node.x;
                   } else {
                     top = node.x;
                     left = node.y;
                   }
 
-                  //mousing controls & Tooltip display logic
-                  const handleMouseOver = (event) => {
+                  // mousing controls & Tooltip display logic
+                  const handleMouseOver = event => {
                     () => dispatch(onHover(node.data.rtid));
                     const coords = localPoint(
                       event.target.ownerSVGElement,
-                      event
+                      event,
                     );
-                    const tooltipObj = Object.assign({}, node.data);
-                    if (typeof tooltipObj.state === 'object')
-                      tooltipObj.state = 'stateful';
+                    const tooltipObj = { ...node.data };
+                    if (typeof tooltipObj.state === 'object') tooltipObj.state = 'stateful';
                     showTooltip({
                       tooltipLeft: coords.x,
                       tooltipTop: coords.y,
@@ -218,25 +219,25 @@ export default function ComponentMap({
                           }}
                         />
                       )}
-                      {/* This creates the rectangle boxes for each component and sets it relative position to other parent nodes of the same level.*/}
+                      {/* This creates the rectangle boxes for each component and sets it relative position to other parent nodes of the same level. */}
                       {node.depth !== 0 && (
                         <rect
                           height={height}
                           width={width}
                           y={-height / 2}
                           x={-width / 2}
-                          fill={node.children ? "#161521" : "#62d6fb"}
-                          stroke={node.children ? "#62d6fb" : "#161521"}
+                          fill={node.children ? '#161521' : '#62d6fb'}
+                          stroke={node.children ? '#62d6fb' : '#161521'}
                           strokeWidth={1}
-                          strokeDasharray={node.children ? "0" : "2,2"}
+                          strokeDasharray={node.children ? '0' : '2,2'}
                           strokeOpacity="1"
                           rx={node.children ? 4 : 10}
                           onClick={() => {
                             node.data.isExpanded = !node.data.isExpanded;
                             forceUpdate();
                           }}
-                          //Tooltip event handlers
-                          //test feature
+                          // Tooltip event handlers
+                          // test feature
                           onMouseOver={handleMouseOver}
                           onMouseOut={hideTooltip}
                           onMouseEnter={() => dispatch(onHover(node.data.rtid))}
@@ -249,13 +250,13 @@ export default function ComponentMap({
                         fontSize={10}
                         fontFamily="Roboto"
                         textAnchor="middle"
-                        style={{ pointerEvents: "none" }}
+                        style={{ pointerEvents: 'none' }}
                         fill={
                           node.depth === 0
-                            ? "#161521"
+                            ? '#161521'
                             : node.children
-                            ? "white"
-                            : "#161521"
+                              ? 'white'
+                              : '#161521'
                         }
                       >
                         {node.data.name}
@@ -278,13 +279,19 @@ export default function ComponentMap({
         >
           <div style={{}}>
             {' '}
-            <strong>{tooltipData.name}</strong>{' '}
+            <strong>{tooltipData.name}</strong>
+            {' '}
+          </div>
+          <div>
+            State:
+            {tooltipData.state}
           </div>
-          <div>State: {tooltipData.state}</div>
           <div>
             {' '}
-            Render time:{' '}
-            {formatRenderTime(tooltipData.componentData.actualDuration)}{' '}
+            Render time:
+            {' '}
+            {formatRenderTime(tooltipData.componentData.actualDuration)}
+            {' '}
           </div>
         </TooltipInPortal>
       )}