Merge branch 'master' into staging

README.md

@@ -1,24 +1,26 @@
 <p align="center">
-  <img src ="./assets/readme-logo-300.png" width="300"/>
+  <img src ="./assets/readme-logo-300-no-version.png" width="300"/>
 </p>
+<h1 align="center">
+  State Debugger for React
+
+  <br>Nominated for the Productivity Booster award 
+  <br><a href="https://osawards.com/react/">👑 React Open Source Awards 2020 👑</a>
+</h1>
 
-<h1 align="center"><b>State Debugger for React</b></h1>
 
 [![GitHub](https://img.shields.io/github/license/oslabs-beta/reactime)](https://github.com/oslabs-beta/reactime) [![Build Status](https://travis-ci.com/oslabs-beta/reactime.svg?branch=master)](https://travis-ci.com/oslabs-beta/reactime) [![npm version](https://badge.fury.io/js/reactime.svg)](http://badge.fury.io/js/reactime) [![Vulnerabilities](https://snyk.io/test/github/oslabs-beta/reactime/badge.svg)](https://snyk.io/test/github/oslabs-beta/reactime)![BabelPresetPrefs](https://img.shields.io/badge/babel%20preset-airbnb-ff69b4)![LintPrefs](https://img.shields.io/badge/linted%20with-eslint-blueviolet)
 
 <p align="center">
-<img src="./assets/hooks-demo.gif" />
-<img src="./assets/recoil-demo.gif" />
+<img src="./assets/react-calculator-demo.gif" />
+<img src="./assets/recoil-todo-demo.gif" />
 </p>
 
-👑   Nominated for the Productivity Booster award at [React Open Source Awards 2020](https://osawards.com/react/)! 👑  
-
-
 <b>Reactime</b> is a debugging tool for React developers. It records a snapshot whenever a target application's state is changed and allows the user to jump to any previously recorded state.
 
 Currently, Reactime supports React apps using stateful components and Hooks, with beta support for Recoil and Context API.
 
-Reactime 5.0 beta extends the core functionality by including support for [Recoil](https://recoiljs.org/). The latest release incorporates additional visualizations for component relationships as well as atom-selector relationships for Recoil applications. Reactime 5.0 includes expanded [typedoc](https://typedoc.org/api/) documentation for developers looking to contribute to the source code. 
+Reactime verision 6.0 beta extends the core functionality by including support for [Recoil](https://recoiljs.org/). The latest release incorporates additional visualizations for component relationships as well as atom-selector relationships for Recoil applications. Reactime 6.0 includes expanded [typedoc](https://typedoc.org/api/) documentation for developers looking to contribute to the source code. 
 
 After installing Reactime, you can test its functionalities with the following demo repositories:
 
@@ -78,6 +80,11 @@ After cloning this repository, developers can simply run `npm run docs` at the r
 - declarative titles in the actions sidebar
 
 ## <b>Authors</b>
+- **Alex Landeros** - [@AlexanderLanderos](https://github.com/AlexanderLanderos)
+- **Chris Guizzetti** - [@guizzettic](https://github.com/guizzettic)
+- **Jason Victor** - [@theqwertypusher](https://github.com/Theqwertypusher)
+- **Sanjay Lavingia** - [@sanjaylavingia](https://github.com/sanjaylavingia)
+- **Vincent Nguyen** - [@guizzettic](https://github.com/VNguyenCode)
 - **Haejin Jo** - [@haejinjo](https://github.com/haejinjo)
 - **Hien Nguyen** - [@hienqn](https://github.com/hienqn)
 - **Jack Crish** - [@JackC27](https://github.com/JackC27)

src/app/components/ComponentMap.tsx

@@ -24,7 +24,7 @@ export type LinkTypesProps = {
 };
 
 export default function ComponentMap({
-  // importing props
+  // imported props to be used to display the dendrogram
   width: totalWidth,
   height: totalHeight,
   margin = defaultMargin,
@@ -36,21 +36,25 @@ export default function ComponentMap({
   const lastNode = snapshots.length - 1;
   const data = snapshots[lastNode];
   // importing custom hooks for the selection tabs.
-
   const [layout, setLayout] = useState<string>('cartesian');
   const [orientation, setOrientation] = useState<string>('horizontal');
   const [linkType, setLinkType] = useState<string>('diagonal');
-  const [stepPercent, setStepPercent] = useState<number>(0.5);
+
+  const [stepPercent, setStepPercent] = useState<number>(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
   const forceUpdate = useForceUpdate();
-  // setting the margins for the Map to render in the tab
+  // setting the margins for the Map to render in the tab window.
+
   const innerWidth = totalWidth - margin.left - margin.right;
   const innerHeight = totalHeight - margin.top - margin.bottom;
 
   let origin: { x: number; y: number };
   let sizeWidth: number;
   let sizeHeight: number;
 
-  // rendering for the different tab selections
+  // 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') {
     origin = {
       x: innerWidth / 2,
@@ -136,6 +140,7 @@ 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.   */}
                       {node.depth !== 0 && (
                         <rect
                           height={height}
@@ -168,6 +173,7 @@ export default function ComponentMap({
                           }
                         />
                       )}
+                      {/* Display text inside of each component node */}
                       <text
                         dy='.33em'
                         fontSize={9}

src/app/components/LinkControls.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-
+// Font size of the Controls label and Dropdowns
 const controlStyles = { fontSize: 10 };
 
 type Props = {
@@ -25,7 +25,9 @@ export default function LinkControls({
 }: Props) {
   return (
     <div style={controlStyles}>
-      <label>Layout:</label>&nbsp;
+      {/* Controls for the layout selection */}
+      <label>Layout:</label>
+      &nbsp;
       <select
         onClick={(e) => e.stopPropagation()}
         onChange={(e) => setLayout(e.target.value)}
@@ -35,32 +37,39 @@ export default function LinkControls({
         <option value='polar'>Polar</option>
       </select>
       &nbsp;&nbsp;
-      <label>Orientation:</label>&nbsp;
+      {/* Controls for the Orientation selection, this dropdown will be disabled when the polar layout is selected as it is not needed */}
+      <label>Orientation:</label>
+      &nbsp;
       <select
         onClick={(e) => e.stopPropagation()}
         onChange={(e) => setOrientation(e.target.value)}
         value={orientation}
         disabled={layout === 'polar'}
       >
-        <option value='vertical'>Vertical</option>
         <option value='horizontal'>Horizontal</option>
+        <option value='vertical'>Vertical</option>
       </select>
       &nbsp;&nbsp;
-      <label>Link:</label>&nbsp;
+      {/* Controls for the link selections. When Cartesian and Horizontal are selection the link has been disabled as it was causing a rendering issue */}
+      <label>Link:</label>
+      &nbsp;
       <select
         onClick={(e) => e.stopPropagation()}
         onChange={(e) => setLinkType(e.target.value)}
         value={linkType}
+        disabled={layout === 'cartesian' && orientation === 'horizontal'}
       >
         <option value='diagonal'>Diagonal</option>
         <option value='step'>Step</option>
         <option value='curve'>Curve</option>
         <option value='line'>Line</option>
       </select>
+      {/* This is the slider control for the step option */}
       {linkType === 'step' && layout !== 'polar' && (
         <>
           &nbsp;&nbsp;
-          <label>Step:</label>&nbsp;
+          <label>Step:</label>
+          &nbsp;
           <input
             onClick={(e) => e.stopPropagation()}
             type='range'

src/app/components/useForceUpdate.ts

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 
+// This function will force a change in state and cause a re-render of the component. The state information is irrelevant but an update is needed to force a re-render
 export default function useForceUpdate() {
-  const [, setValue] = useState<number>(0);
-  return () => setValue((value) => value + 1); // update state to force render
+  const [setValue] = useState<number>(0);
+  return () => setValue((value) => value + 1);
 }

src/app/containers/HeadContainer.tsx

@@ -6,7 +6,7 @@ import SwitchAppDropdown from '../components/SwitchApp';
 function HeadContainer() {
   return (
     <div className="head-container">
-      <img src="../assets/logo.png" height="30px" />
+      <img src="../assets/logo-no-version.png" height="30px" />
       <SwitchAppDropdown />
     </div>
   );