Merge branch 'dev' of https://github.com/oslabs-beta/Reactime into dev

Author: JoseSanchez1996

demo-app/src/client/Components/Board.tsx

@@ -30,7 +30,7 @@ class Board extends Component<{}, BoardState> {
 
   //added void
   componentDidUpdate(): void {
-    this.checkForWinner();
+    this.checkForWinner()
   }
 
   /**
@@ -116,8 +116,8 @@ class Board extends Component<{}, BoardState> {
   }
 
   //added type for render
-  render(): JSX.Element {
-    const rows: Array<JSX.Element> = [];
+  render(): JSX.Element { 
+    const rows: Array<JSX.Element> = [];  
     for (let i = 0; i < 3; i++) {
       rows.push(
         <Row key={i} row={i} handleBoxClick={this.handleBoxClick} values={this.state.board[i]} />,

reactime-website

@@ -28,6 +28,13 @@ const nodeParentFill = '#161521'; //#161521 original
 const nodeChildFill = '#62d6fb'; //#62d6fb original
 const nodeParentStroke = '#F00008'; //#F00008 original
 const nodeChildStroke = '#4D4D4D'; //#4D4D4D original
+let stroke = ''; 
+
+/* Heat Map Colors (for links) */
+const lightOrange = '#F1B476';
+const darkOrange = '#E4765B';
+const red = '#C64442';
+const plum = '#8C2743';
 
 const defaultMargin: DefaultMargin = {
   top: 30,
@@ -189,7 +196,7 @@ export default function ComponentMap({
     linkType,
     orientation,
   });
-  return totalWidth < 10 ? null : (
+  return totalWidth < 10 ? null : ( 
     <div>
       <LinkControls
         layout={layout}
@@ -224,19 +231,66 @@ export default function ComponentMap({
             size={[sizeWidth / aspect, sizeHeight / aspect]}
             separation={(a, b) => (a.parent === b.parent ? 0.5 : 0.5) / a.depth}
           >
+
             {(tree) => (
               <Group top={origin.y + 35} left={origin.x + 50 / aspect}>
-                {tree.links().map((link, i) => (
+                {tree.links().map((link, i) => {
+                  const linkName = link.source.data.name; 
+                  const propsObj = link.source.data.componentData.props;
+                  const childPropsObj = link.target.data.componentData.props;
+                  let propsLength;
+                  let childPropsLength;
+                  console.log(`------------------------------${i}:`);
+
+
+                  console.log(`LINK: ${linkName}`, link);
+                  console.log('>PROPS: ', propsObj);
+                  if (propsObj) {
+                    propsLength = Object.keys(propsObj).length;
+                    console.log('>> props_length: ', propsLength);
+                  }
+                  if (childPropsObj) {
+                    childPropsLength = Object.keys(childPropsObj).length;
+                    console.log('>> child_props_length: ', childPropsLength);
+                  }
+                  // go to https://en.wikipedia.org/wiki/Logistic_function 
+                  // for an explanation of Logistic functions and parameters used
+                  const yshift = -3;
+                  const x0 = 5;
+                  const L = 25;
+                  const k = .4;
+                  const strokeWidthIndex = yshift + L / (1 + Math.exp(-k * (childPropsLength - x0)));
+                  // const strokeWidthIndex = childPropsLength * 2.5 + 1;
+                  console.log('strokeWidthIndex: ', strokeWidthIndex);
+
+                  if (strokeWidthIndex <= 1) {
+                    stroke = '#808080';
+                  } else {
+                    if (childPropsLength <= 1) {
+                      stroke = lightOrange;
+                    } else if (childPropsLength <= 2) {
+                      stroke = darkOrange;
+                    } else if (childPropsLength <= 3) {
+                      stroke = red;
+                    } else {
+                      stroke = plum;
+                    }
+                    // stroke = '#df6f37'
+                  }
+
+                  return (
                   <LinkComponent
                     className='compMapLink'
                     key={i}
                     data={link}
                     percent={stepPercent}
-                    //stroke={linkStroke}
-                    strokeWidth='1'
+                    stroke={stroke} // color of the link --not used--
+                    strokeWidth= {strokeWidthIndex} /* strokeWidth */ // width of the link
                     fill='none'
                   />
-                ))}
+                  )
+                })
+                }
 
                 {tree.descendants().map((node, key) => {
                   const widthFunc: number = (name) => {

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -15,7 +15,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import PerformanceVisx from './PerformanceVisx/PerformanceVisx';
 import WebMetricsContainer from './WebMetrics/WebMetricsContainer';
 import { MainState, RootState, StateRouteProps } from '../../FrontendTypes';
-import AxContainer from './AxMap/AxMap';
+import type AxContainer from './AxMap/AxMap';
 
 /*
   Loads the appropriate StateRoute view and renders the Map, Performance, History, Webmetrics, and Tree navbar buttons after clicking on the 'State' button located near the top rightmost corner.

src/app/components/StateRoute/StateRoute.tsx

@@ -1,6 +1,10 @@
-.compMapLink {
-  stroke: $map-link;
-}
+// .compMapLink {
+//   // stroke: $map-link;
+//   stroke: $secondary-color;
+// }
+.compMapLink:hover {
+  box-shadow: 10px 10px rgb(163, 205, 24);
+};
 
 .comp-map-options {
   color: $map-options-label;
@@ -38,4 +42,6 @@
 
 .compMapRootText {
   fill: $map-root-text;
-}
+}
+
+

src/app/styles/components/_componentMap.scss

@@ -93,6 +93,9 @@
     background-color: $navbar-unselected;
     text-decoration: none;
     color: $navbar-unselected-text;
+
+    border-top-right-radius: 10px;
+    border-top-left-radius: 10px;
   }
 
   .router-link:hover {