Merge pull request #39 from oslabs-beta/reactime7

Removing unused npm packages and added styling in linksControls and cleaned front end files

Author: lind-tania

README.md

@@ -70,47 +70,47 @@ Then open up your Chrome DevTools and navigate to the Reactime panel.
 
 ## <b>Troubleshooting</b>
 
-### <b>Why is Reactime telling me that no React application is found?</b>
+### ❓ <b>Why is Reactime telling me that no React application is found?</b>
 
 Reactime initially runs using the dev tools global hook from the Chrome API. It takes time for Chrome to load this. Try refreshing your application a couple times until you see Reactime running.
 
-### <b>There is a black screen instead of the Reactime extension</b>
+### ❓ <b>There is a black screen instead of the Reactime extension</b>
 
 Try refreshing the application you want to test and refresh the DevTools by clicking the right mouse button “Reload frame”.
 
-### <b>I found a bug in Reactime</b>
+### ❓ <b>I found a bug in Reactime</b>
 
 Reactime is an open source project, and we’d really appreciate your help with improving user experience. Please, create a pull request (or issue) to propose and collaborate on changes to a repository.
 
 ## <b>Features</b>
 
-### Re-render Optimization
+### 🔹 Re-render Optimization
 
 One of the most common issues that affects performance in React is unnecessary render cycles. This problem can be fixed by checking your renders in the Performance tab in Chrome DevTools under the Reactime panel.
 
-### Gatsby
+### 🔹 Gatsby
 Reactime offers fully support for Gatsy applications. You would be able to identify unnecessary renders, duration of each rendering, travel-debugging features and visual representation of the tree components. 
 
-### Next.js
+### 🔹 Next.js
 Reactime offers debugging and performance tools for Next.js apps: time-traveling debugging, preventing unnecessary components re-renders and making your application faster. 
 
-### Recording
+### 🔹 Recording
 
 Whenever state is changed (whenever setState, useState is called), this extension will create a snapshot of the current state tree and record it. Each snapshot will be displayed in Chrome DevTools under the Reactime panel.
 
-### Viewing
+### 🔹 Viewing
 
 You can click on a snapshot to view your app's state. State can be visualized in a Component Graph, JSON Tree, or Performance Graph. Snapshots can be diffed with the previous snapshot, which can be viewed in Diff mode.
 
-### Jumping
+### 🔹 Jumping
 
 Using the actions sidebar, a user can jump to any previous recorded snapshots. Hitting the jump button on any snapshot will allow a user to view state data at any point in the history of the target application.
 
-### TypeScript Support
+### 🔹 TypeScript Support
 
 Reactime offers beta support for TypeScript applications using stateful class components and functional components. Further testing and development is required for custom hooks, Context API, and Concurrent Mode.
 
-### Documentation
+### 🔹 Documentation
 
 After cloning this repository, developers can simply run `npm run docs` at the root level and serve the dynamically generated `/docs/index.html` file on a browser. Doing so will provide a readable, extensible, and interactive GUI view of the structure and interfaces of the codebase.
 <br>

package.json

@@ -25,7 +25,12 @@
     "state",
     "debug",
     "react dev tool",
-    "reactime"
+    "reactime",
+    "performance",
+    "gatsby",
+    "next.js",
+    "rendering",
+    "optimization"
   ],
   "repository": {
     "type": "git",
@@ -35,6 +40,8 @@
     "Abaas Khorrami",
     "Andy Wong",
     "Bryan Lee",
+    "Becca Viner",
+    "Caitlin Chan",
     "Carlos Perez",
     "Chris Flannery",
     "David Chai",
@@ -48,6 +55,7 @@
     "Josh Kim",
     "Joshua Howard",
     "Kevin Fey",
+    "Kim Mai Nguyen",
     "Nathanael Wa Mwenze",
     "Prasanna Malla",
     "Rajeeb Banstola",
@@ -56,6 +64,7 @@
     "Ruth Anam",
     "Ryan Dang",
     "Sierra Swaby",
+    "Tania Lind",
     "Yujin Kang"
   ],
   "license": "ISC",
@@ -90,8 +99,6 @@
     "jest-diff": "^26.1.0",
     "jest-puppeteer": "^4.4.0",
     "jest-runner-eslint": "^0.7.7",
-    "minimatch": "^3.0.4",
-    "node-sass": "^4.14.1",
     "puppeteer": "^5.1.0",
     "sass": "^1.26.10",
     "sass-loader": "^7.3.1",
@@ -131,13 +138,11 @@
     "@visx/zoom": "^1.0.0",
     "acorn": "^7.3.1",
     "acorn-jsx": "^5.2.0",
-    "bower": "^1.8.8",
     "cookie": "^0.4.1",
     "d3": "^5.16.0",
     "d3-scale-chromatic": "^2.0.0",
     "d3-shape": "^2.0.0",
     "d3-zoom": "^1.8.3",
-    "flatted": "^3.0.4",
     "immer": "^3.3.0",
     "jest-runner": "^26.1.0",
     "jsondiffpatch": "^0.3.11",
@@ -148,14 +153,10 @@
     "rc-tooltip": "^3.7.3",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-google-chart": "^0.1.2",
-    "react-google-charts": "^3.0.15",
-    "react-google-charts-ts": "^0.1.1",
     "react-html-parser": "^2.0.2",
     "react-json-tree": "^0.11.2",
     "react-router-dom": "^5.2.0",
     "react-select": "^3.1.0",
-    "recoil": "0.0.10",
-    "sankey": "^2.0.2"
+    "recoil": "0.0.10"
   }
 }

src/app/components/AtomsRelationship.tsx

@@ -1,9 +1,6 @@
-
-
 import React, { useMemo } from 'react';
 import { Group } from '@visx/group';
 import { Cluster, hierarchy } from '@visx/hierarchy';
-//import { HierarchyPointNode, HierarchyPointLink } from '@visx/hierarchy/lib/types';
 import { LinkVertical } from '@visx/shape';
 import { LinearGradient } from '@visx/gradient';
 import { StateRouteProps} from './StateRoute'
@@ -69,7 +66,6 @@ function clusterDataPopulate(props:StateRouteProps) {
         bothObj[key] = []
       }
 
-
       if(props[0].atomSelectors[key].length){
       for(let i=0; i<props[0].atomSelectors[key].length;i++){
         if(!outerobj.children) outerobj.children = []
@@ -88,7 +84,6 @@ function clusterDataPopulate(props:StateRouteProps) {
             if(!innerobj.children) innerobj.children = []
             innerobj.children.push({name:atomCompObj[props[0].atomSelectors[key][i]]})
             bothObj[key].push(atomCompObj[props[0].atomSelectors[key][i]][0])
-            
           }
         }
         outerobj.children.push(innerobj)
@@ -105,8 +100,7 @@ function clusterDataPopulate(props:StateRouteProps) {
             } 
             bothObj[key].push(atomCompObj[key][i])
           }
-        }
-        
+        }   
     clusterData.children.push(outerobj)
     }
   }
@@ -125,10 +119,8 @@ function clusterDataPopulate(props:StateRouteProps) {
     }    
   }
   initialFire = true 
-
 }
 
-
 function reorganizedCompObj(props) {
   let atomsComponentObj = props[0].atomsComponents;
   let reorganizedCompObj = {};
@@ -146,7 +138,6 @@ function reorganizedCompObj(props) {
 }
 
 function Node({ node, snapshots, dispatch, bothObj}) {
-  // const [dispatch] = useStoreContext();
   const selector = node.depth === 1 && node.height === 2
   const isRoot = node.depth === 0;
   const isParent = !!node.children;
@@ -209,12 +200,9 @@ function RootNode({ node }) {
         x={centerX}
         rx="10"
         ry="10"
-        // fill="url('#top')"
       />
       <text
         dy=".33em"
-        // top={node.y}
-        // left={node.x}
         fontSize={9}
         fontFamily="Arial"
         textAnchor="middle"
@@ -277,12 +265,6 @@ function removeDup(bothObj){
 
 const defaultMargin = { top: 40, left: 0, right: 0, bottom: 40 };
 
-// export type DendrogramProps = {
-//   width: number;
-//   height: number;
-//   margin?: { top: number; right: number; bottom: number; left: number };
-// };
-
 export default function AtomsRelationship({
   width,
   height,
@@ -306,9 +288,7 @@ export default function AtomsRelationship({
   return width < 10 ? null : (
     <>
     <div>
-      <Legend 
-      // hierarchy = {hierarchy}
-      />
+      <Legend />
     </div>
     <svg width={width} height={height}>