@@ -48,18 +48,11 @@ interface StateRouteProps {
4848const StateRoute = ( props : StateRouteProps ) => {
4949 const { snapshot, hierarchy, snapshots, viewIndex } = props ;
5050
51- console . log ( hierarchy )
51+ console . log ( hierarchy ) ;
5252
5353 const isRecoil = snapshot . atomsComponents ? true : false ;
5454 const [ noRenderData , setNoRenderData ] = useState ( false ) ;
5555
56- // component map zoom state
57- const [ { x, y, k } , setZoomState ] : any = useState ( {
58- x : 150 ,
59- y : 250 ,
60- k : 1 ,
61- } ) ;
62-
6356 // Map
6457 const renderComponentMap = ( ) => {
6558 if ( hierarchy ) {
@@ -71,12 +64,12 @@ const StateRoute = (props: StateRouteProps) => {
7164 </ ParentSize >
7265 ) ;
7366 }
74- return < div className = " noState" > { NO_STATE_MSG } </ div > ;
67+ return < div className = ' noState' > { NO_STATE_MSG } </ div > ;
7568 } ;
7669
7770 // the hierarchy gets set on the first click in the page
7871 // when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
79- // if true involk render chart with hierarchy
72+ // if true invoke render chart with hierarchy
8073 const renderHistory = ( ) => {
8174 if ( hierarchy ) {
8275 return (
@@ -90,41 +83,41 @@ const StateRoute = (props: StateRouteProps) => {
9083 </ div >
9184 ) ;
9285 }
93- return < div className = " noState" > { NO_STATE_MSG } </ div > ;
86+ return < div className = ' noState' > { NO_STATE_MSG } </ div > ;
9487 } ;
9588
9689 const renderAtomsRelationship = ( ) => (
97-
98- < ParentSize > { ( { width, height } ) =>
99- < Example
100- width = { width }
101- height = { height }
102- snapshots = { snapshots } /> }
90+ < ParentSize >
91+ { ( { width, height } ) => (
92+ < Example width = { width } height = { height } snapshots = { snapshots } />
93+ ) }
10394 </ ParentSize >
10495 ) ;
10596
10697 // the hierarchy gets set on the first click in the page
10798 // when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
108- // if true involk render Tree with snapshot
99+ // if true invoke render Tree with snapshot
109100 const renderTree = ( ) => {
110101 if ( hierarchy ) {
111102 return < Tree snapshot = { snapshot } /> ;
112103 }
113- return < div className = " noState" > { NO_STATE_MSG } </ div > ;
104+ return < div className = ' noState' > { NO_STATE_MSG } </ div > ;
114105 } ;
115106
116107 const renderPerfView = ( ) => {
117108 if ( hierarchy ) {
118109 return (
119- < ParentSize > { ( { width, height } ) =>
120- < PerformanceVisx
121- width = { width }
122- height = { height }
123- snapshots = { snapshots }
124- hierarchy = { hierarchy }
125- /> }
110+ < ParentSize >
111+ { ( { width, height } ) => (
112+ < PerformanceVisx
113+ width = { width }
114+ height = { height }
115+ snapshots = { snapshots }
116+ hierarchy = { hierarchy }
117+ />
118+ ) }
126119 </ ParentSize >
127-
120+
128121 // <PerfView
129122 // viewIndex={viewIndex}
130123 // snapshots={snapshots}
@@ -134,55 +127,55 @@ const StateRoute = (props: StateRouteProps) => {
134127 // />
135128 ) ;
136129 }
137- return < div className = " noState" > { NO_STATE_MSG } </ div > ;
130+ return < div className = ' noState' > { NO_STATE_MSG } </ div > ;
138131 } ;
139132
140133 return (
141134 < Router >
142- < div className = " navbar" >
135+ < div className = ' navbar' >
143136 < NavLink
144- className = " router-link"
145- activeClassName = " is-active"
137+ className = ' router-link'
138+ activeClassName = ' is-active'
146139 exact
147- to = "/"
140+ to = '/'
148141 >
149142 Tree
150143 </ NavLink >
151144 < NavLink
152- className = " router-link"
153- activeClassName = " is-active"
154- to = " /history"
145+ className = ' router-link'
146+ activeClassName = ' is-active'
147+ to = ' /history'
155148 >
156149 History
157150 </ NavLink >
158- < NavLink className = " router-link" activeClassName = " is-active" to = " /map" >
151+ < NavLink className = ' router-link' activeClassName = ' is-active' to = ' /map' >
159152 Map
160153 </ NavLink >
161154
162155 { isRecoil && (
163156 < NavLink
164- className = " router-link"
165- activeClassName = " is-active"
166- to = " /relationship"
157+ className = ' router-link'
158+ activeClassName = ' is-active'
159+ to = ' /relationship'
167160 >
168161 AtomsRecoil
169162 </ NavLink >
170163 ) }
171164
172165 < NavLink
173- className = " router-link"
174- activeClassName = " is-active"
175- to = " /performance"
166+ className = ' router-link'
167+ activeClassName = ' is-active'
168+ to = ' /performance'
176169 >
177170 Performance
178171 </ NavLink >
179172 </ div >
180173 < Switch >
181- < Route path = " /map" render = { renderComponentMap } />
182- < Route path = " /history" render = { renderHistory } />
183- < Route path = " /relationship" render = { renderAtomsRelationship } />
184- < Route path = " /performance" render = { renderPerfView } />
185- < Route path = "/" render = { renderTree } />
174+ < Route path = ' /map' render = { renderComponentMap } />
175+ < Route path = ' /history' render = { renderHistory } />
176+ < Route path = ' /relationship' render = { renderAtomsRelationship } />
177+ < Route path = ' /performance' render = { renderPerfView } />
178+ < Route path = '/' render = { renderTree } />
186179 </ Switch >
187180 </ Router >
188181 ) ;
0 commit comments