diff --git a/src/app/components/PerformanceVisx.tsx b/src/app/components/PerformanceVisx.tsx index 375738d28..787c4eed8 100644 --- a/src/app/components/PerformanceVisx.tsx +++ b/src/app/components/PerformanceVisx.tsx @@ -74,32 +74,52 @@ const tooltipStyles = { /* DATA HANDLING HELPER FUNCTIONS */ -// traverses a snapshot for data: rendering time, component type, or rtid -const traverse = (snapshot, fetchData, data = {}) => { - console.log("data in beg of traverse: ", data ) +const traverse = (snapshot, data = {}) => { if (!snapshot.children[0]) return; snapshot.children.forEach((child, idx) => { const componentName = child.name + -[idx + 1]; - // Get component Type - if (fetchData === 'getComponentType') { - if (child.state !== 'stateless') data[componentName] = 'stateful'; - else data[componentName] = child.state; + if (!data.hasOwnProperty(componentName)) { + data[componentName] = {}; } + // Get component Type + if (child.state !== 'stateless') data[componentName].componentState = 'stateful'; + else data[componentName].componentState = child.state; // Get component Rendering Time - else if (fetchData === 'getRenderTime') { - const renderTime = Number(Number.parseFloat(child.componentData.actualDuration).toPrecision(5)); - data[componentName] = renderTime; - } - else if (fetchData === 'getRtid') { - data[componentName] = child.rtid; - } - traverse(snapshot.children[idx], fetchData, data); + const renderTime = Number(Number.parseFloat(child.componentData.actualDuration).toPrecision(5)); + data[componentName].renderTime = renderTime; + // Get rtid + data[componentName].rtid = child.rtid; + traverse(snapshot.children[idx], data); }) - console.log("data in end of traverse: ", data ) return data; }; -const getSnapshotIds = (obj, snapshotIds = []):string[] => { +// traverses a snapshot for data: rendering time, component type, or rtid +// const traverse = (snapshot, fetchData, data = {}) => { +// // console.log("data in beg of traverse: ", data ) +// if (!snapshot.children[0]) return; +// snapshot.children.forEach((child, idx) => { +// const componentName = child.name + -[idx + 1]; +// // Get component Type +// if (fetchData === 'getComponentType') { +// if (child.state !== 'stateless') data[componentName] = 'stateful'; +// else data[componentName] = child.state; +// } +// // Get component Rendering Time +// else if (fetchData === 'getRenderTime') { +// const renderTime = Number(Number.parseFloat(child.componentData.actualDuration).toPrecision(5)); +// data[componentName] = renderTime; +// } +// else if (fetchData === 'getRtid') { +// data[componentName] = child.rtid; +// } +// traverse(snapshot.children[idx], fetchData, data); +// }) +// // console.log("data in end of traverse: ", data ) +// return data; +// }; + +const getSnapshotIds = (obj, snapshotIds = []): string[] => { snapshotIds.push(`${obj.name}.${obj.branch}`); if (obj.children) { obj.children.forEach(child => { @@ -110,15 +130,15 @@ const getSnapshotIds = (obj, snapshotIds = []):string[] => { }; // Returns array of snapshot objs each with components and corresponding render times -const getPerfMetrics = (snapshots, snapshotsIds):any[] => { +const getPerfMetrics = (snapshots, snapshotsIds): any[] => { + console.log('snapshots: ', snapshots) return snapshots.reduce((perfSnapshots, curSnapshot, idx) => { - return perfSnapshots.concat(traverse(curSnapshot, 'getRenderTime', { snapshotId: snapshotsIds[idx] })); + return perfSnapshots.concat(traverse(curSnapshot, { snapshotId: snapshotsIds[idx] })); }, []); }; /* EXPORT COMPONENT */ const PerformanceVisx = (props: BarStackProps) => { - // hook used to dispatch onhover action in rect const [{ tabs, currentTab }, dispatch] = useStoreContext(); @@ -128,19 +148,40 @@ const PerformanceVisx = (props: BarStackProps) => { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip, } = useTooltip(); let tooltipTimeout: number; - + console.log('tooltipdata: ', tooltipData) const { containerRef, TooltipInPortal } = useTooltipInPortal(); // filter and structure incoming data for VISX const data = getPerfMetrics(snapshots, getSnapshotIds(hierarchy)); + console.log('data:', data); const keys = Object.keys(data[0]).filter(d => d !== 'snapshotId'); - const allComponentStates = traverse(snapshots[0], 'getComponentType'); - const allComponentRtids = traverse(snapshots[snapshots.length-1], 'getRtid'); + // const allComponentStates = traverse(snapshots[0], 'getComponentType'); + // const allComponentRtids = traverse(snapshots[snapshots.length - 1], 'getRtid'); + // console.log('allComponentRtids: ', allComponentRtids); + // const allComponentRtids = data.filter() + const getBarstackData = (data) => { + const dataArr = []; + data.forEach(snapshot => { + const dataObj = {}; + for (let key in snapshot) { + if (key !== 'snapshotId') { + dataObj[key] = snapshot[key]['renderTime']; + } else { + dataObj[key] = snapshot[key]; + } + } + dataArr.push(dataObj); + }); + return dataArr; + }; + const barstackData = getBarstackData(data); // create array of total render times for each snapshot const totalRenderArr = data.reduce((totalRender, curSnapshot) => { + // console.log('curSnapshot: ', curSnapshot); + // console.log('keys: ', keys); const curRenderTotal = keys.reduce((acc, cur) => { - acc += Number(curSnapshot[cur]); + acc += Number(curSnapshot[cur].renderTime); return acc; }, 0); totalRender.push(curRenderTotal); @@ -149,11 +190,26 @@ const PerformanceVisx = (props: BarStackProps) => { // data accessor (used to generate scales) and formatter (add units for on hover box) const getSnapshotId = (d: snapshot) => d.snapshotId; - + const formatSnapshotId = (id) => `Snapshot ID: ${id}`; - + const formatRenderTime = (time) => `${time} ms `; + const getTooltipStates = (data) => { + const snapshotObj = {}; + data.forEach(snapshot => { + snapshotObj[snapshot.snapshotId] = {}; + for (let key in snapshot) { + if (key !== 'snapshotId') { + snapshotObj[snapshot.snapshotId][key] = snapshot[key].componentState; + } + } + }); + return snapshotObj; + } + const tooltipStates = getTooltipStates(data); + console.log('tooltipStates: ', tooltipStates); + // create visualization SCALES with cleaned data const snapshotIdScale = scaleBand({ domain: data.map(getSnapshotId), @@ -203,15 +259,15 @@ const PerformanceVisx = (props: BarStackProps) => { /> - {barStacks => - barStacks.map(barStack => + {barStacks => + barStacks.map(barStack => barStack.bars.map(((bar, idx) => ( { /* TIP TOOL EVENT HANDLERS */ // Hides tool tip once cursor moves off the current rect onMouseLeave={() => { - dispatch(onHoverExit(allComponentRtids[bar.key]), - tooltipTimeout = window.setTimeout(() => { - hideTooltip() - }, 300)) + console.log('bar: ', bar); + console.log('barstack', barStack); + console.log('onHoverExit arg:', data[data.length-1][bar.key].rtid); + dispatch(onHoverExit(data[data.length-1][bar.key]['rtid']), + tooltipTimeout = window.setTimeout(() => { + hideTooltip() + }, 300)) }} - // Cursor position in window updates position of the tool tip + // Cursor position in window updates position of the tool tip onMouseMove={event => { - dispatch(onHover(allComponentRtids[bar.key])) + dispatch(onHover(data[data.length-1][bar.key]['rtid'])) if (tooltipTimeout) clearTimeout(tooltipTimeout); const top = event.clientY - margin.top - bar.height; const left = bar.x + bar.width / 2; @@ -290,7 +349,7 @@ const PerformanceVisx = (props: BarStackProps) => { {tooltipData.key} {' '} -
{allComponentStates[tooltipData.key]}
+
{tooltipStates[tooltipData.bar.data.snapshotId][tooltipData.key]}
{' '} {formatRenderTime(tooltipData.bar.data[tooltipData.key])}