Merge branch 'staging' into mixpanel

Author: haejinjo

package-lock.json

@@ -118,10 +118,13 @@
     "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-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"
+    "recoil": "0.0.10",
+    "sankey": "^2.0.2"
   }
 }

package.json

@@ -0,0 +1,59 @@
+import React, { Component, useEffect, useState } from 'react';
+// import * as d3 from 'd3';
+// import {sankey} from 'sankey';
+import { Chart } from 'react-google-charts';
+
+/**
+ * @method maked3Tree :Creates a new D3 Tree
+ */
+
+function AtomsRelationship(props) {
+  console.log('Props', props.atomsRel);
+
+  const {atomsRel} = props
+
+
+  return (
+    <div className="history-d3-container">
+     {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>
+  );
+}
+
+export default AtomsRelationship;

src/app/components/AtomsRelationship.jsx

@@ -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/ComponentMap.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/History.tsx

@@ -14,6 +14,7 @@ import {
 import Tree from './Tree';
 import ComponentMap from './ComponentMap';
 import PerfView from './PerfView';
+import AtomsRelationship from './AtomsRelationship.jsx';
 
 const History = require('./History').default;
 
@@ -29,15 +30,22 @@ interface StateRouteProps {
     state?: string | object;
     stateSnaphot?: object;
     children?: any[];
+    AtomsRelationship?: any[];
   };
-  hierarchy: object;
+  hierarchy: any;
   snapshots: [];
   viewIndex: number;
 }
 
 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);
+
+  // component map zoom state
   const [{ x, y, k }, setZoomState]: any = useState({
     x: 150,
     y: 250,
@@ -52,14 +60,20 @@ const StateRoute = (props: StateRouteProps) => {
     return <div className="noState">{NO_STATE_MSG}</div>;
   };
 
+
   // the hierarchy gets set on the first click in the page
   // 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 = () => {
+    return <AtomsRelationship atomsRel={snapshot.AtomsRelationship} />;
   };
 
   // the hierarchy gets set on the first click in the page
@@ -119,6 +133,11 @@ const StateRoute = (props: StateRouteProps) => {
         <NavLink className="router-link" activeClassName="is-active" to="/map">
           Map
         </NavLink>
+        
+        {isRecoil && <NavLink className="router-link" activeClassName="is-active" to="/relationship">
+          Atoms Relationship
+        </NavLink>}
+
         <NavLink
           className="router-link"
           activeClassName="is-active"
@@ -130,6 +149,7 @@ const StateRoute = (props: StateRouteProps) => {
       <Switch>
         <Route path="/map" render={renderComponentMap} />
         <Route path="/history" render={renderHistory} />
+        <Route path="/relationship" render={renderAtomsRelationship} />
         <Route path="/performance" render={renderPerfView} />
         <Route path="/" render={renderTree} />
       </Switch>

src/app/components/StateRoute.tsx

@@ -12,8 +12,11 @@ import DiffRoute from '../components/DiffRoute';
 interface StateContainerProps {
   snapshot: Record<number,
   { name?: string; componentData?: Record<string, unknown>;
-    state?: Record<string, unknown>; stateSnaphot?: Record<string, unknown>; children?: unknown[]; }
+    state?: Record<string, unknown>; stateSnaphot?: Record<string, unknown>; children?: unknown[]; 
+    AtomsRelationship?: any[]
+  }
   > ;
+  AtomsRelationship?: any[];
   hierarchy:Record<string, unknown>;
   snapshots:[];
   viewIndex:number;

src/app/containers/StateContainer.tsx

@@ -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/_bodyContainer.scss

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