Merge branch 'master' of https://github.com/guizzettic/reactime into newComponentMap

Author: AlexanderLanderos

package-lock.json

@@ -106,10 +106,16 @@
     "webpack-cli": "^3.3.12"
   },
   "dependencies": {
+    "@visx/axis": "^1.0.0",
+    "@visx/grid": "^1.0.0",
+    "@visx/legend": "^1.0.0",
+    "@visx/responsive": "^1.0.0",
+    "@visx/scale": "^1.0.0",
+    "@visx/tooltip": "^1.0.0",
     "@visx/gradient": "^1.0.0",
     "@visx/group": "^1.0.0",
     "@visx/hierarchy": "^1.0.0",
-    "@visx/responsive": "^1.0.0",
+    "@visx/glyph": "^1.0.0",
     "@visx/shape": "^1.0.0",
     "acorn": "^7.3.1",
     "acorn-jsx": "^5.2.0",

package.json

@@ -5,12 +5,15 @@ import { Cluster, hierarchy } from '@visx/hierarchy';
 import { LinkVertical } from '@visx/shape';
 import { LinearGradient } from '@visx/gradient';
 
-const citrus = '#ddf163';
-const white = '#ffffff';
-export const green = '#79d259';
-const aqua = '#37ac8c';
+const blue = '#acdbdf';
+const white = '#f0ece2';
+
+export const lightorange = '#F9D976';
+const orange = '#F39F86';
+
 const merlinsbeard = '#f7f7f3';
 export const background = '#242529';
+const root = '#d2f5e3';
 
 // interface NodeShape {
 //   name: string;
@@ -39,7 +42,7 @@ function clusterDataPopulate(props) {
         if (!memoizeObj[key].includes(atomCompObj[key][i])) {
           if (!clusterData.children[counter].children)
             clusterData.children[counter].children = [];
-            clusterData.children[counter].children.push({
+          clusterData.children[counter].children.push({
             name: atomCompObj[key][i],
           });
         }
@@ -77,8 +80,8 @@ function Node({ node }) {
       {node.depth !== 0 && (
         <circle
           r={12}
-          fill={background}
-          stroke={isParent ? white : citrus}
+          fill={isParent ? white : blue}
+          stroke={isParent ? white : blue}
           // onClick={() => {
           //   alert(`clicked: ${JSON.stringify(node.data.name)}`);
           // }}
@@ -89,8 +92,9 @@ function Node({ node }) {
         fontSize={9}
         fontFamily="Arial"
         textAnchor="middle"
+        y = "-20"
         style={{ pointerEvents: 'none' }}
-        fill={isParent ? white : citrus}
+        fill={isParent ? white : blue}
       >
         {node.data.name}
       </text>
@@ -105,18 +109,21 @@ function RootNode({ node }) {
   const centerY = -height / 2;
 
   return (
-    <Group top = {node.y} left = {node.x}>
+    <Group top={node.y} left={node.x}>
       <rect
         width={width}
         height={height}
+        fill={root}
         y={centerY}
         x={centerX}
+        rx="10"
+        ry="10"
         fill="url('#top')"
       />
       <text
         dy=".33em"
-        top= {node.y}
-        left = {node.x}
+        top={node.y}
+        left={node.x}
         fontSize={9}
         fontFamily="Arial"
         textAnchor="middle"
@@ -129,7 +136,7 @@ function RootNode({ node }) {
   );
 }
 
-const defaultMargin = { top: 40, left: 0, right: 0, bottom: 40};
+const defaultMargin = { top: 40, left: 0, right: 0, bottom: 40 };
 
 // export type DendrogramProps = {
 //   width: number;
@@ -143,7 +150,6 @@ export default function Example({
   margin = defaultMargin,
   snapshots,
 }) {
-
   clusterDataPopulate(snapshots);
 
   const data = useMemo(() => hierarchy(clusterData), []);
@@ -152,7 +158,8 @@ export default function Example({
 
   return width < 10 ? null : (
     <svg width={width} height={height}>
-      <LinearGradient id="top" from={green} to={aqua} />
+      <LinearGradient id="top" from={lightorange} to={orange} />
+
       <rect width={width} height={height} rx={14} fill={background} />
 
       <Cluster root={data} size={[xMax, yMax]}>

src/app/components/AtomsRelationship.jsx

@@ -30,7 +30,6 @@ const filterHooks = (data: any[]) => {
   return JSON.stringify(data[0].state);
 };
 
-
 /**
  * @method maked3Tree :Creates a new D3 Tree
  */
@@ -68,7 +67,7 @@ function History(props) {
     const g = svgContainer
       .append('g')
       // this is changing where the graph is located physically
-      .attr('transform', `translate(${width / 2 + 4}, ${height / 2 + 2})`)
+      .attr('transform', `translate(${width / 2 + 4}, ${height / 2 + 2})`);
 
     // d3.hierarchy constructs a root node from the specified hierarchical data
     // (our object titled dataset), which must be an object representing the root node
@@ -83,7 +82,6 @@ function History(props) {
 
     const d3root = tree(hierarchy);
 
-    
     g.selectAll('.link')
       // root.links() gets an array of all the links,
       // where each element is an object containing a
@@ -109,12 +107,12 @@ function History(props) {
       .append('g')
       .style('fill', function (d) {
         let loadTime;
-        if (d.data.stateSnapshot.children[0].componentData.actualDuration){
-          loadTime = d.data.stateSnapshot.children[0].componentData.actualDuration;
-        } else{
+        if (d.data.stateSnapshot.children[0].componentData.actualDuration) {
+          loadTime =
+            d.data.stateSnapshot.children[0].componentData.actualDuration;
+        } else {
           loadTime = 1;
         }
-          
 
         if (loadTime !== undefined) {
           if (loadTime > 16) {
@@ -255,7 +253,7 @@ function History(props) {
 
   return (
     <>
-      <div ref={HistoryRef} className="history-d3-div" id="historyContainer"/>
+      <div ref={HistoryRef} className="history-d3-div" id="historyContainer" />
     </>
   );
 }

src/app/components/History.tsx

@@ -31,10 +31,30 @@ interface PerfViewProps {
 }
 
 const PerfView = (props: PerfViewProps) => {
+
+  // ------------- CIRCLES ----------------------
   const { viewIndex, width, height, setNoRenderData } = props;
   let { snapshots } = props;
   const adjustedSize = Math.min(width, height);
   const svgRef = useRef(null);
+
+  console.log(snapshots)
+
+  // const performances = []  
+  // snapshot = {
+  //   component1: 10,
+  //   component2: 24,
+  //   component3: 35,
+  //   others: 32
+  // }
+
+  const performances = snapshots.reduce((acc,cur)=>{
+    const snapshot = {};
+    while (snapshot.keys.lenght 
+  }, []
+  // iterate snapshots array
+    // if i.children exists
+      // 
 
   let indexToDisplay: number | null = null;
   if (viewIndex < 0) indexToDisplay = snapshots.length - 1;
@@ -85,7 +105,7 @@ const PerfView = (props: PerfViewProps) => {
   }, [indexToDisplay, svgRef]);
 
   useEffect(() => {
-    // Error, no App-level component present
+    // Error, no App-level component presentnpm r
     if (snapshots[indexToDisplay].children.length < 1) return;
 
     // Generate tree with our data
@@ -228,6 +248,9 @@ const PerfView = (props: PerfViewProps) => {
     handleNoRenderData,
   ]);
 
+  // ------------- CIRCLES ----------------------
+  
+
   return (
     <div className="perf-d3-container">
       <svg className="perf-d3-svg" ref={svgRef} />