(modified) Renamed Example functino to AtomsRelationship in AtomsRelationship component

Author: VNguyenCode

src/app/components/AtomsRelationship.tsx

@@ -241,7 +241,7 @@ const defaultMargin = { top: 40, left: 0, right: 0, bottom: 40 };
 //   margin?: { top: number; right: number; bottom: number; left: number };
 // };
 
-export default function Example({
+export default function AtomsRelationship({
   width,
   height,
   margin = defaultMargin,

src/app/components/StateRoute.tsx

@@ -15,9 +15,11 @@ import Tree from './Tree';
 import ComponentMap from './ComponentMap';
 import PerformanceVisx from './PerformanceVisx';
 import Legend from './AtomsRelationshipLegend'
-import Example from './AtomsRelationship';
+// import Example from './AtomsRelationship';
 import { ParentSize } from '@visx/responsive';
 import Legendary from './legend';
+// import atomsRelationship from './AtomsRelationship';
+import AtomsRelationship from './AtomsRelationship'
 
 const History = require('./History').default;
 
@@ -60,7 +62,10 @@ const StateRoute = (props: StateRouteProps) => {
       return (
         <ParentSize>
           {({ width, height }) => (
-            <ComponentMap snapshots={snapshots} width={width} height={height} />
+            <ComponentMap 
+            snapshots={snapshots} 
+            width={width} 
+            height={height} />
           )}
         </ParentSize>
       );
@@ -90,13 +95,12 @@ const StateRoute = (props: StateRouteProps) => {
   const renderAtomsRelationship = () => (
     <ParentSize>{({ width, height })  => 
     <>
-    {/* <Legend /> */}
-    <Example 
+    <AtomsRelationship 
     width={width} 
     height={height}
     snapshots={snapshots} />
     </>
-    </ParentSize>
+    }</ParentSize>
   );
 
   // the hierarchy gets set on the first click in the page