first commit - switchng recoil mode

Author: hienqn

src/app/components/AtomsRelationship.tsx

@@ -0,0 +1,74 @@
+import React, { Component, useEffect, useState } from 'react';
+import * as d3 from 'd3';
+
+/**
+ * @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',
+];
+
+const filterHooks = (data: any[]) => {
+  if (data[0].children && data[0].state === 'stateless') {
+    return filterHooks(data[0].children);
+  }
+  return JSON.stringify(data[0].state);
+};
+
+interface HistoryProps {
+  hierarchy: Record<string, unknown>;
+}
+
+
+/**
+ * @method maked3Tree :Creates a new D3 Tree
+ */
+
+function AtomsRelationship(props) {
+  let { hierarchy } = props;
+  let root = JSON.parse(JSON.stringify(hierarchy));
+  let isRecoil = false;
+  let HistoryRef = React.createRef(root); //React.createRef(root);
+
+  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();
+  };
+
+  return (
+    <div className="history-d3-container">
+      <div ref={HistoryRef} className="history-d3-div" />
+    </div>
+  );
+}
+
+export default AtomsRelationship;

src/app/components/StateRoute.tsx

@@ -14,6 +14,8 @@ import {
 import Tree from './Tree';
 import ComponentMap from './ComponentMap';
 import PerfView from './PerfView';
+import AtomsRelationship from './AtomsRelationship'
+
 
 const History = require('./History').default;
 
@@ -37,6 +39,7 @@ interface StateRouteProps {
 
 const StateRoute = (props: StateRouteProps) => {
   const { snapshot, hierarchy, snapshots, viewIndex } = props;
+  let isRecoil = snapshot.children[0].name === 'RecoilRoot';
   const [noRenderData, setNoRenderData] = useState(false);
   const [{ x, y, k }, setZoomState]: any = useState({
     x: 150,
@@ -52,6 +55,7 @@ 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
@@ -62,6 +66,13 @@ const StateRoute = (props: StateRouteProps) => {
     return <div className="noState">{NO_STATE_MSG}</div>;
   };
 
+  const renderAtomsRelationship = () => {
+    if (hierarchy) {
+      return <AtomsRelationship hierarchy={hierarchy} />;
+    }
+    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 Tree with snapshot
@@ -129,7 +140,7 @@ const StateRoute = (props: StateRouteProps) => {
       </div>
       <Switch>
         <Route path="/map" render={renderComponentMap} />
-        <Route path="/history" render={renderHistory} />
+        <Route path="/history" render={isRecoil ? renderAtomsRelationship:  renderHistory} />
         <Route path="/performance" render={renderPerfView} />
         <Route path="/" render={renderTree} />
       </Switch>