AtomsRelationship loads new state on state change, History better error handeling, styling change

Author: kevinfey

src/app/components/AtomsRelationship.jsx

@@ -10,15 +10,19 @@ import { Chart } from 'react-google-charts';
 function AtomsRelationship(props) {
   console.log('Props', props.atomsRel);
 
+  const {atomsRel} = props
+
+
   return (
     <div className="history-d3-container">
-      <Chart
+     {atomsRel && (
+       <Chart
         width={'100%'}
         height={'100%'}
         chartType="Sankey"
         options={{
           sankey: {
-            link: { color: { fill: '#c6e6f', fillOpacity: 0.1 } },
+            link: { color: { fill: '#gray', fillOpacity: 0.1 } },
             node: {
               colors: [
                 '#4a91c7',
@@ -31,18 +35,23 @@ function AtomsRelationship(props) {
                 '#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', ''], ...props.atomsRel]}
+        data={[['Atom', 'Selector', ''], ...atomsRel]}
         rootProps={{ 'data-testid': '1' }}
-      />
+      />)}
     </div>
   );
 }

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 = () => {