Skip to content

Commit

Permalink
Merge pull request #4 from caitlinchan23/perfChange
Browse files Browse the repository at this point in the history 
PerformanceVisx traverse function update
  • Loading branch information
@caitlinchan23
caitlinchan23 authored Dec 4, 2020
2 parents 625a64a + 100e0b4 commit ee609c3
Showing 1 changed file with 95 additions and 36 deletions.
131 changes: 95 additions & 36 deletions src/app/components/PerformanceVisx.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand All @@ -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();

Expand All @@ -128,19 +148,40 @@ const PerformanceVisx = (props: BarStackProps) => {
tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip,
} = useTooltip<TooltipData>();
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);
Expand All @@ -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<string>({
domain: data.map(getSnapshotId),
Expand Down Expand Up @@ -203,15 +259,15 @@ const PerformanceVisx = (props: BarStackProps) => {
/>
<Group top={margin.top} left={margin.left}>
<BarStack
data={data}
data={barstackData}
keys={keys}
x={getSnapshotId}
xScale={snapshotIdScale}
yScale={renderingScale}
color={colorScale}
>
{barStacks =>
barStacks.map(barStack =>
{barStacks =>
barStacks.map(barStack =>
barStack.bars.map(((bar, idx) => (
<rect
key={`bar-stack-${barStack.index}-${bar.index}`}
Expand All @@ -223,14 +279,17 @@ const PerformanceVisx = (props: BarStackProps) => {
/* 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;
Expand Down Expand Up @@ -290,7 +349,7 @@ const PerformanceVisx = (props: BarStackProps) => {
<strong>{tooltipData.key}</strong>
{' '}
</div>
<div>{allComponentStates[tooltipData.key]}</div>
<div>{tooltipStates[tooltipData.bar.data.snapshotId][tooltipData.key]}</div>
<div>
{' '}
{formatRenderTime(tooltipData.bar.data[tooltipData.key])}
Expand Down

0 comments on commit ee609c3

Please sign in to comment.