Merge branch 'implementAtomsMap' of https://github.com/kevinfey/reactime into implementAtomsMap

Author: hienqn

src/app/components/AtomsRelationship.jsx

@@ -1,219 +1,57 @@
 import React, { Component, useEffect, useState } from 'react';
 // import * as d3 from 'd3';
 // import {sankey} from 'sankey';
-import { Chart } from "react-google-charts";
-/**
- * @var colors: Colors array for the diffrerent node branches, each color is for a different branch
- */
-const colors = [
-  '#95B6B7',
-  '#475485',
-  '#519331',
-  '#AA5039',
-  '#8B2F5F',
-  '#C5B738',
-  '#858DFF',
-  '#FF8D02',
-  '#FFCD51',
-  '#ACDAE6',
-  '#FC997E',
-  '#CF93AD',
-  '#AA3939',
-  '#AA6C39',
-  '#226666',
-  '#2C4870',
-];
-
-// interface HistoryProps {
-//   hierarchy: Record<string, unknown>;
-// }
-
-const data = {
-  nodes: [ 
-    {
-      name: 'atom 1',
-      category: 1
-    },
-    {
-      name: 'atom 2',
-      category: 1
-    },
-    {
-      name: 'atom 3',
-      category: 1
-    },
-    {
-      name: 'selector 1',
-      category: 2
-    },
-    {
-      name: 'selector 2',
-      category: 2
-    },
-    {
-      name: 'component 1',
-      category: 3
-    },
-    {
-      name: 'component 2',
-      category: 3
-    },
-    {
-      name: 'component 3',
-      category: 3
-    },
-  ],
-  links: [
-    {
-      source: "atom 1",
-      target: "select 1",
-      value: 100
-    },
-    {
-      source: "atom 1",
-      target: "component 1",
-      value: 100
-    },
-    {
-      source: "atom 2",
-      target: "component 2",
-      value: 100
-    },
-    {
-      source: "atom 2",
-      target: "select 2",
-      value: 100
-    },
-    {
-      source: "atom 3",
-      target: "component 3",
-      value: 100
-    },
-    {
-      source: "selector 2",
-      target: "component 1",
-      value: 100
-    },
-    {
-      source: "selector 1",
-      target: "component 1",
-      value: 100
-    },
-  ]
-
-}
-
-
+import { Chart } from 'react-google-charts';
 
 /**
  * @method maked3Tree :Creates a new D3 Tree
  */
 
 function AtomsRelationship(props) {
-  // let { hierarchy } = props;
-  // let root = JSON.parse(JSON.stringify(hierarchy));
-  // let HistoryRef = React.createRef(root); //React.createRef(root);
   console.log('Props', props.atomsRel);
-  useEffect(() => {
-    maked3Tree();
-  }, [root]);
-
-  let removed3Tree = function () {
-    const { current } = HistoryRef;
-    while (current.hasChildNodes()) {
-      current.removeChild(current.lastChild);
-    }
-  };
 
-  /**
-   * @method maked3Tree Creates a new Tree History
-   * @var
-   */
-  let maked3Tree = function () {
-    // removed3Tree();
-    // const dimension = {width: 800, height: 500};
-    // const margin = {left: 10, right: 10, top:10, bottom:10};
+  const {atomsRel} = props
 
-    // const svg = d3.select(HistoryRef.current)
-    //               .append('svg')
-    //               .attr('width', dimension.width)
-    //               .attr('height', dimension.height);
-    
-    // const graph = svg.append('g')
-    //         .attr('width', dimension.width - margin.left - margin.right)
-    //         .attr('width', dimension.height - margin.top - margin.bottom);
-    
-    // // const sankey = d3.sankey()
-    // //                   .nodeWidth(36)
-    // //                   .nodePadding(290)
-    // //                   .size([dimension.width, dimension.height])
-    // console.log(data);
-    // let a = sankey.nodes(data.nodes).links(data.links).layout(1);
-    // console.log(a);
-    // console.log(d3);
-    return 2
-  };
 
   return (
     <div className="history-d3-container">
-      {/* <div ref={HistoryRef} className="history-d3-div" /> */}
-<Chart
-  width={600}
-  height={'300px'}
-  chartType="Sankey"
-  loader={<div>Loading Chart</div>}
-  data={[
-    ['From', 'To', 'Weight'],
-        ...props.atomsRel
-    // ['Brazil', 'Portugal', 5],
-    // ['Brazil', 'France', 1],
-    // ['Brazil', 'Spain', 1],
-    // ['Brazil', 'England', 1],
-    // ['Canada', 'Portugal', 1],
-    // ['Canada', 'France', 5],
-    // ['Canada', 'England', 1],
-    // ['Mexico', 'Portugal', 1],
-    // ['Mexico', 'France', 1],
-    // ['Mexico', 'Spain', 5],
-    // ['Mexico', 'England', 1],
-    // ['USA', 'Portugal', 1],
-    // ['USA', 'France', 1],
-    // ['USA', 'Spain', 1],
-    // ['USA', 'England', 5],
-    // ['Portugal', 'Angola', 2],
-    // ['Portugal', 'Senegal', 1],
-    // ['Portugal', 'Morocco', 1],
-    // ['Portugal', 'South Africa', 3],
-    // ['France', 'Angola', 1],
-    // ['France', 'Senegal', 3],
-    // ['France', 'Mali', 3],
-    // ['France', 'Morocco', 3],
-    // ['France', 'South Africa', 1],
-    // ['Spain', 'Senegal', 1],
-    // ['Spain', 'Morocco', 3],
-    // ['Spain', 'South Africa', 1],
-    // ['England', 'Angola', 1],
-    // ['England', 'Senegal', 1],
-    // ['England', 'Morocco', 2],
-    // ['England', 'South Africa', 7],
-    // ['South Africa', 'China', 5],
-    // ['South Africa', 'India', 1],
-    // ['South Africa', 'Japan', 3],
-    // ['Angola', 'China', 5],
-    // ['Angola', 'India', 1],
-    // ['Angola', 'Japan', 3],
-    // ['Senegal', 'China', 5],
-    // ['Senegal', 'India', 1],
-    // ['Senegal', 'Japan', 3],
-    // ['Mali', 'China', 5],
-    // ['Mali', 'India', 1],
-    // ['Mali', 'Japan', 3],
-    // ['Morocco', 'China', 5],
-    // ['Morocco', 'India', 1],
-    // ['Morocco', 'Japan', 3],
-  ]}
-  rootProps={{ 'data-testid': '2' }}
-/>
+     {atomsRel && (
+       <Chart
+        width={'100%'}
+        height={'100%'}
+        chartType="Sankey"
+        options={{
+          sankey: {
+            link: { color: { fill: '#gray', fillOpacity: 0.1 } },
+            node: {
+              colors: [
+                '#4a91c7',
+                '#5b9bce',
+                '#6ba6d5',
+                '#7bb0dc',
+                '#8abbe3',
+                '#99c6ea',
+                '#a8d0f1',
+                '#b7dbf8',
+                '#c6e6ff',
+                '#46edf2',
+                '#76f5f3',
+                '#95B6B7',
+                '#76dcde',
+                '#5fdaed',
+              ],
+
+              label: { color: '#fff', fontSize: '14' },
+              nodePadding: 50,
+              width: 15,
+            },
+          },
+          tooltip: { textStyle: { color: 'gray', fontSize: 12 }},
+        }}
+        loader={<div>Loading Chart</div>}
+        data={[['Atom', 'Selector', ''], ...atomsRel]}
+        rootProps={{ 'data-testid': '1' }}
+      />)}
     </div>
   );
 }

src/app/components/ComponentMap.tsx

@@ -145,9 +145,7 @@ const ComponentMap = (props: componentMapProps) => {
 
         //TODO -> Alter incoming snapshots so there is useful data to show on hover.
         nodeEnter.on('mouseover', function (d: any, i: number): any {
-          if (!d.children) {
-            console.log(d);
-            console.log(d.data);
+       
             d3.select(this)
               .append('text')
               .text(() => {
@@ -160,7 +158,7 @@ const ComponentMap = (props: componentMapProps) => {
               .attr('stroke', 'white')
               .attr('stroke-width', .5)
               .attr('id', `popup${i}`);
-          }
+          
         });
         nodeEnter.on('mouseout', function (d: any, i: number): any {
           d3.select(`#popup${i}`).remove();

src/app/components/History.tsx

@@ -30,10 +30,6 @@ const filterHooks = (data: any[]) => {
   return JSON.stringify(data[0].state);
 };
 
-interface HistoryProps {
-  hierarchy: Record<string, unknown>;
-}
-
 
 /**
  * @method maked3Tree :Creates a new D3 Tree
@@ -44,7 +40,6 @@ function History(props) {
   let root = JSON.parse(JSON.stringify(hierarchy));
   let isRecoil = false;
   let HistoryRef = React.createRef(root); //React.createRef(root);
-
   useEffect(() => {
     maked3Tree();
   }, [root]);

src/app/components/StateRoute.tsx

@@ -32,7 +32,7 @@ interface StateRouteProps {
     children?: any[];
     AtomsRelationship?: any[];
   };
-  hierarchy: object;
+  hierarchy: any;
   snapshots: [];
   viewIndex: number;
 }
@@ -44,6 +44,8 @@ const StateRoute = (props: StateRouteProps) => {
   // console.log(snapshot.AtomsRelationship)
   let isRecoil = snapshot.AtomsRelationship ? true : false;
   const [noRenderData, setNoRenderData] = useState(false);
+
+  // component map zoom state
   const [{ x, y, k }, setZoomState]: any = useState({
     x: 150,
     y: 250,
@@ -63,10 +65,11 @@ const StateRoute = (props: StateRouteProps) => {
   // when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
   // if true involk render chart with hierarchy
   const renderHistory = () => {
-    if (hierarchy) {
+    if (hierarchy.children.length > 0) {
+
       return <History hierarchy={hierarchy} />;
     }
-    return <div className="noState">{NO_STATE_MSG}</div>;
+    return <div className="noState">Application not compatible with history</div>;
   };
 
   const renderAtomsRelationship = () => {

src/app/styles/layout/_bodyContainer.scss

@@ -1,5 +1,6 @@
 .body-container {
   height: 94%;
+  overflow: hidden;
   display: grid;
   grid-template-columns: 1fr 2fr;
   grid-template-rows: 8fr 1fr;

src/app/styles/layout/_stateContainer.scss

@@ -1,6 +1,6 @@
 .state-container {
   font-size: 12px;
-  overflow: auto;
+  overflow: hidden;
 
   background-color: $brand-color;
 }

src/backend/linkFiber.ts

@@ -67,7 +67,7 @@ function getRecoilState() : any {
   nodeToNodeSubsKeys.forEach( 
     node => {
       nodeToNodeSubs.get(node).forEach(
-        nodeSubs => allAtomsRelationship.push([node, nodeSubs, 2])
+        nodeSubs => allAtomsRelationship.push([node, nodeSubs, 1])
       )
     }
   )
@@ -166,13 +166,13 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
       if (pointer?.memoizedState[1]?.[0].current) {
         let atomName = pointer.memoizedState[1]?.[0].current.keys().next().value;
         console.log('atom', pointer.memoizedState[1]?.[0].current.keys().next().value);
-        allAtomsRelationship.push([atomName, elementType?.name, 2])
+        allAtomsRelationship.push([atomName, elementType?.name, 1])
       }
 
       if (pointer?.memoizedState[1]?.[0].key) {
         let atomName = pointer.memoizedState[1]?.[0].key;
         console.log('atom', pointer.memoizedState[1]?.[0].key);
-        allAtomsRelationship.push([atomName, elementType?.name, 2])
+        allAtomsRelationship.push([atomName, elementType?.name, 1])
       }
     }
 

src/extension/build/assets/logo.png

@@ -1,6 +1,6 @@
 {
   "name": "Reactime",
-  "version": "4.0.2",
+  "version": "5.0.0",
   "devtools_page": "devtools.html",
   "description": "A Chrome extension that helps debug React applications by memorizing the state of components with every render.",
   "manifest_version": 2,