Merge pull request #26 from kevinfey/styling

Removed Console Logs and Whitespace

Author: haejinjo

src/app/components/AtomsRelationship.jsx

@@ -1,34 +1,22 @@
 import React, { Component, useEffect, useState, Fragment } from 'react';
-// import * as d3 from 'd3';
-// import {sankey} from 'sankey';
 import { Chart } from 'react-google-charts'
 
-// import { Fragment } from '../../backend/types/backendTypes';
-
-/**
- * @method maked3Tree :Creates a new D3 Tree
- */
-
 function AtomsRelationship(props) {
-
   const {atomsRel} = props
 
-
   const atomsAndComp = atomsRel.filter(e => e[2] !== 'atoms and selectors').map(e => { 
     let copy = [...e];
     copy[2] = 1; 
     return [...copy] 
-  })
+  });
+
   const atomsAndSelectors = atomsRel.filter(e => e[2] === 'atoms and selectors').map(e => {
     let copy = [...e];
     copy[2] = 1;
     return [...copy]
-  })  
-  const copyatomsRel = atomsRel.map(e => { let copy = [...e]; copy[2] = 1; return copy; });
+  });
 
-  // console.log('atoms and selectors', atomsAndSelectors);
-  // console.log('copy Atom rel', copyatomsRel);
-  // console.log('initial atom rel', atomsRel);
+  const copyatomsRel = atomsRel.map(e => { let copy = [...e]; copy[2] = 1; return copy; });
   const [atoms, setAtoms] = useState([...copyatomsRel]);
   const [atomAndSelectorCheck, setAtomAndSelectorCheck] = useState(false);
   const [atomAndCompCheck, setAtomAndCompCheck] = useState(false);
@@ -46,7 +34,6 @@ function AtomsRelationship(props) {
   return (
     <div className="history-d3-container">
       {atoms && (
-      //  <div>
       <Fragment>
        <Chart
         width={'100%'}

src/app/components/History.tsx

@@ -140,7 +140,6 @@ function History(props) {
         tooltipDiv.transition().duration(50).style('opacity', 0.9);
 
         if (d.data.stateSnapshot.children[0].name === 'RecoilRoot') {
-          console.log('enter');
           isRecoil = true;
         }
         if (!isRecoil) {

src/app/components/PerfView.tsx

@@ -35,19 +35,11 @@ const PerfView = (props: PerfViewProps) => {
   let { snapshots } = props;
   const adjustedSize = Math.min(width, height);
   const svgRef = useRef(null);
-
-  //NEEDS REWRITE FOR RECOIL
-  // snapshots.forEach((snapshot) => snapshot.children[0].children.shift());
-  // console.log('SNAPSHOTS -------------------------->', snapshots);
-  // Figure out which snapshot index to use
 
   let indexToDisplay: number | null = null;
   if (viewIndex < 0) indexToDisplay = snapshots.length - 1;
   else indexToDisplay = viewIndex;
 
-  //console.log('SNAPSHOTS IN PERF VIEW', snapshots);
-  //console.log('VIEW INDEX', indexToDisplay);
-
   // Set up color scaling function
   const colorScale = d3
     .scaleOrdinal()

src/app/components/StateRoute.tsx

@@ -39,9 +39,7 @@ interface StateRouteProps {
 
 const StateRoute = (props: StateRouteProps) => {
   const { snapshot, hierarchy, snapshots, viewIndex } = props;
-  // let isRecoil = true;
-  // console.log('snapshot', snapshot)
-  // console.log(snapshot.AtomsRelationship)
+
   let isRecoil = snapshot.AtomsRelationship ? true : false;
   const [noRenderData, setNoRenderData] = useState(false);
 

src/app/components/Tree.tsx

@@ -6,23 +6,7 @@
 import React from 'react';
 import JSONTree from 'react-json-tree';
 
-
-
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-const colors =  {
+const colors = {
   scheme: 'paraiso',
   author: 'jan t. sott',
   base00: '#2f1e2e',
@@ -40,21 +24,30 @@ const colors =  {
   base0C: '#5bc4bf',
   base0D: '#06b6ef',
   base0E: '#815ba4',
-  base0F: '#e96ba8'
+  base0F: '#e96ba8',
 };
 
-const getItemString = (type, data:{state?:object|string, name:string, children:[]}) => {
+const getItemString = (
+  type,
+  data: { state?: object | string; name: string; children: [] }
+) => {
   if (data && data.name) {
     return <span>{data.name}</span>;
   }
   return <span />;
 };
 
 interface TreeProps {
-  snapshot: { name?: string; componentData?: object; state?: string | object; stateSnaphot?: object; children?: any[]; };
+  snapshot: {
+    name?: string;
+    componentData?: object;
+    state?: string | object;
+    stateSnaphot?: object;
+    children?: any[];
+  };
 }
 
-const Tree = (props:TreeProps) => {
+const Tree = (props: TreeProps) => {
   const { snapshot } = props;
 
   return (
@@ -65,8 +58,8 @@ const Tree = (props:TreeProps) => {
           theme={{ extend: colors, tree: () => ({ className: 'json-tree' }) }}
           shouldExpandNode={() => true}
           getItemString={getItemString}
-          labelRenderer={(raw:any[]) => {
-            return (typeof raw[0] !== 'number' ? <span>{raw[0]}</span> : null);
+          labelRenderer={(raw: any[]) => {
+            return typeof raw[0] !== 'number' ? <span>{raw[0]}</span> : null;
           }}
         />
       )}