import React , { useState } from 'react' ; import { ParentSize } from '@vx/responsive' ; import { dataDurationArr } from '../../../types' ; import FlameGraph from './FlameGraph.js' ; import RankedGraph from './RankedGraph' ; import { useAppSelector } from '../../state-management/hooks' ; const Metrics = ( ) => { const cleanedComponentAtomTree = useAppSelector ( state => state . snapshot . cleanComponentAtomTree ) ; const [ graphType , setGraphType ] = useState < boolean > ( true ) ; const toggleGraphFunc = ( flame ) : void => { flame ? setGraphType ( false ) : setGraphType ( true ) ; } ; const dataDurationArr = [ ] ; let length = 0 ; const namesAndDurations = ( node ) => { if ( node === undefined ) return ; if ( node . name && node . actualDuration ) { const obj = { } ; if ( node . name . length > length ) { length = node . name . length ; } obj [ 'name' ] = node . name ; obj [ 'actualDuration' ] = node . actualDuration ; dataDurationArr . push ( obj ) ; } node . children . forEach ( ( child ) => namesAndDurations ( child ) ) ; } ; namesAndDurations ( cleanedComponentAtomTree ) ; const determineRender = ( ) => { if ( graphType ) { return ( < ParentSize > { size => size . ref && ( < FlameGraph cleanedComponentAtomTree = { cleanedComponentAtomTree } width = { size . width } height = { 600 } / > ) } < /ParentSize>); } else { return ( < ParentSize > { size => size . ref && ( < RankedGraph data = { dataDurationArr } width = { size . width } height = { size . height } / > ) } < /ParentSize>); } } ; return ( < div id = "metricsWrapper" > < div data - testid = "canvas" className = "graphContainer" > < button className = "graphButton" autoFocus = { true } onClick = { ( ) => { toggleGraphFunc ( false ) ; } } > Flame Graph < /button> < button className = "graphButton" onClick = { ( ) => { toggleGraphFunc ( true ) ; } } > Ranked Graph < /button> < /div> { determineRender ( ) } < /div>); } ; export default Metrics ;