Skip to content

Commit 7c37975

Browse files
TheqwertypusherTheqwertypusher
committed
(fixed) linted indents
1 parent 2f011f7 commit 7c37975

File tree

1 file changed

+138
-135
lines changed

1 file changed

+138
-135
lines changed

‎src/app/components/PerformanceVisx.tsx

Lines changed: 138 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,27 @@
1-
import React from "react";
2-
import { BarStack } from "@visx/shape";
3-
import { SeriesPoint } from "@visx/shape/lib/types";
4-
import { Group } from "@visx/group";
5-
import { Grid } from "@visx/grid";
6-
import { AxisBottom, AxisLeft } from "@visx/axis";
7-
import { scaleBand, scaleLinear, scaleOrdinal } from "@visx/scale";
8-
import { useTooltip, useTooltipInPortal, defaultStyles } from "@visx/tooltip";
1+
import React from 'react';
2+
import { BarStack } from '@visx/shape';
3+
import { SeriesPoint } from '@visx/shape/lib/types';
4+
import { Group } from '@visx/group';
5+
import { Grid } from '@visx/grid';
6+
import { AxisBottom, AxisLeft } from '@visx/axis';
7+
import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
8+
import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
99
import { Text } from '@visx/text';
10-
import { schemeSet3 } from "d3-scale-chromatic";
11-
10+
import { schemeSet3 } from 'd3-scale-chromatic';
1211

1312
/* NOTES
1413
Current issues
15-
1. Not fully compatible with recoil apps. Reference the recoil-todo-test.
16-
Barstacks display inconsistently...however, almost always displays upon initial test app load or
14+
1. Not fully compatible with recoil apps. Reference the recoil-todo-test.
15+
Barstacks display inconsistently...however, almost always displays upon initial test app load or
1716
when empty button is clicked. Updating state after initial app load typically makes bars disappear.
18-
However, cycling between updating state and then emptying sometimes fixes the stack bars. Important to note - all snapshots
17+
However, cycling between updating state and then emptying sometimes fixes the stack bars. Important to note - all snapshots
1918
do render (check HTML doc) within the chrome extension but they do not display because height is not consistently passed to each bar.
2019
This side effect is only seen in recoil apps...
2120
*/
2221

23-
2422
/* TYPESCRIPT */
2523
type snapshot = any;
24+
2625
type TooltipData = {
2726
bar: SeriesPoint<snapshot>;
2827
key: CityName;
@@ -34,7 +33,8 @@ type TooltipData = {
3433
color: string;
3534
};
3635

37-
export type BarStackProps = {
36+
// typescript for PROPS from StateRoute.tsx
37+
type BarStackProps = {
3838
width: number;
3939
height: number;
4040
margin?: { top: number; right: number; bottom: number; left: number };
@@ -44,55 +44,53 @@ export type BarStackProps = {
4444
};
4545

4646
/* DEFAULTS */
47-
const defaultMargin = { top: 60, right: 30, bottom: 0, left: 50 };
47+
const defaultMargin = {
48+
top: 60, right: 30, bottom: 0, left: 50,
49+
};
4850
const axisColor = '#679DCA';
49-
const background = "#242529";
51+
const background = '#242529';
5052
const tooltipStyles = {
5153
...defaultStyles,
5254
minWidth: 60,
53-
backgroundColor: "rgba(0,0,0,0.9)",
54-
color: "white"
55+
backgroundColor: 'rgba(0,0,0,0.9)',
56+
color: 'white',
5557
};
5658

5759
/* DATA HANDLING HELPER FUNCTIONS */
58-
const getPerfMetrics = (snapshots, snapshotsIds) => {
59-
return snapshots.reduce((perfSnapshots, curSnapshot, idx)=> {
60-
return perfSnapshots.concat(traverse(curSnapshot, {snapshotId:snapshotsIds[idx]}))
61-
}, [])
62-
}
6360

64-
// traverses a single snapshot either returning all component rendering times OR all component state types. Depends on 2nd arg
61+
// Returns an array of objects (snapshots) with key-value pairs of each component and corresponding render time
62+
const getPerfMetrics = (snapshots, snapshotsIds) => snapshots.reduce((perfSnapshots, curSnapshot, idx) => perfSnapshots.concat(traverse(curSnapshot, { snapshotId: snapshotsIds[idx] })), []);
63+
64+
// traverses a single snapshot - returns either all component rendering times OR all component state types. Depends on 2nd arg
6565
const traverse = (snapshot, data = {}) => {
66-
if (!snapshot.children[0]) return
67-
for (let i = 0; i < snapshot.children.length; i++){
68-
const componentName = snapshot.children[i].name+-[i+1]
66+
if (!snapshot.children[0]) return;
67+
for (let i = 0; i < snapshot.children.length; i++) {
68+
const componentName = snapshot.children[i].name + -[i + 1];
6969
// Get component Type
70-
if (!data.snapshotId){
71-
if(snapshot.children[i].state !== 'stateless') data[componentName] = 'STATEFUL'
70+
if (!data.snapshotId) {
71+
if (snapshot.children[i].state !== 'stateless') data[componentName] = 'STATEFUL';
7272
else data[componentName] = snapshot.children[i].state;
73-
}
73+
}
7474
// Get component Rendering Time
75-
else if (snapshot.children[i].componentData.actualDuration){
75+
else if (snapshot.children[i].componentData.actualDuration) {
7676
const renderTime = Number(Number.parseFloat(snapshot.children[i].componentData.actualDuration).toPrecision(5));
7777
data[componentName] = renderTime;
7878
}
79-
traverse(snapshot.children[i], data)
79+
traverse(snapshot.children[i], data);
8080
}
81-
return data
82-
}
81+
return data;
82+
};
8383

8484
const getSnapshotIds = (obj, snapshotIds = []) => {
8585
snapshotIds.push(`${obj.name}.${obj.branch}`);
86-
if (obj.children) {
87-
obj.children.forEach(child => {
88-
getSnapshotIds(child, snapshotIds);
89-
});
90-
}
91-
return snapshotIds
86+
if (obj.children) {
87+
obj.children.forEach(child => {
88+
getSnapshotIds(child, snapshotIds);
89+
});
90+
}
91+
return snapshotIds;
9292
};
9393

94-
95-
9694
/* EXPORT COMPONENT */
9795
export default function PerformanceVisx({
9896
width,
@@ -101,69 +99,67 @@ export default function PerformanceVisx({
10199
margin = defaultMargin,
102100
snapshots,
103101
hierarchy,
104-
}: BarStackProps)
105-
106-
{
102+
}: BarStackProps) {
107103
const {
108104
tooltipOpen,
109105
tooltipLeft,
110106
tooltipTop,
111107
tooltipData,
112-
hideTooltip,ƒ
113-
showTooltip
108+
hideTooltip,
109+
showTooltip,
114110
} = useTooltip<TooltipData>();
115111

116-
let tooltipTimeout: number;
112+
let tooltipTimeout: number;
117113

118-
// filter and structure incoming data for VISX
119-
const data = getPerfMetrics(snapshots, getSnapshotIds(hierarchy))
120-
const keys = Object.keys(data[0]).filter((d) => d !== "snapshotId") as CityName[];
121-
const allComponentStates = traverse(snapshots[0])
114+
const { containerRef, TooltipInPortal } = useTooltipInPortal();
122115

123-
// create array of total render times for each snapshot
124-
const totalRenderArr = data.reduce((totalRender, curSnapshot) => {
125-
const curRenderTotal = keys.reduce((acc, cur) => {
126-
acc += Number(curSnapshot[cur]);
127-
return acc;
128-
}, 0);
129-
totalRender.push(curRenderTotal);
130-
return totalRender;
131-
}, [] as number[]);
116+
// filter and structure incoming data for VISX
117+
const data = getPerfMetrics(snapshots, getSnapshotIds(hierarchy));
118+
const keys = Object.keys(data[0]).filter(d => d !== 'snapshotId') as CityName[];
119+
const allComponentStates = traverse(snapshots[0]);
132120

133-
// data accessor (used to generate scales) and formatter (add units for on hover box)
134-
const getSnapshotId = (d: snapshot) => d.snapshotId;
135-
const formatSnapshotId = id => 'Snapshot ID: ' + id;
136-
const formatRenderTime = time => time + ' ms ';
121+
// create array of total render times for each snapshot
122+
const totalRenderArr = data.reduce((totalRender, curSnapshot) => {
123+
const curRenderTotal = keys.reduce((acc, cur) => {
124+
acc += Number(curSnapshot[cur]);
125+
return acc;
126+
}, 0);
127+
totalRender.push(curRenderTotal);
128+
return totalRender;
129+
}, [] as number[]);
137130

138-
// create visualization SCALES with cleaned data
139-
const snapshotIdScale = scaleBand<string>({
140-
domain: data.map(getSnapshotId),
141-
padding: 0.2
142-
});
131+
// data accessor (used to generate scales) and formatter (add units for on hover box)
132+
const getSnapshotId = (d: snapshot) => d.snapshotId;
133+
const formatSnapshotId = id => `Snapshot ID: ${id}`;
134+
const formatRenderTime = time => `${time} ms `;
143135

144-
const renderingScale = scaleLinear<number>({
145-
domain: [0, Math.max(...totalRenderArr)],
146-
nice: true
147-
});
136+
// create visualization SCALES with cleaned data
137+
const snapshotIdScale = scaleBand<string>({
138+
domain: data.map(getSnapshotId),
139+
padding: 0.2,
140+
});
148141

149-
const colorScale = scaleOrdinal<CityName, string>({
150-
domain: keys,
151-
range: schemeSet3
152-
});
142+
const renderingScale = scaleLinear<number>({
143+
domain: [0, Math.max(...totalRenderArr)],
144+
nice: true,
145+
});
153146

154-
const { containerRef, TooltipInPortal } = useTooltipInPortal();
147+
const colorScale = scaleOrdinal<CityName, string>({
148+
domain: keys,
149+
range: schemeSet3,
150+
});
155151

156-
// setting max dimensions and scale ranges
157-
if (width < 10) return null;
158-
const xMax = width - margin.left - margin.right
159-
const yMax = height - margin.top - 150;
160-
snapshotIdScale.rangeRound([0, xMax]);
161-
renderingScale.range([yMax, 0]);
152+
// setting max dimensions and scale ranges
153+
if (width < 10) return null;
154+
const xMax = width - margin.left - margin.right;
155+
const yMax = height - margin.top - 150;
156+
snapshotIdScale.rangeRound([0, xMax]);
157+
renderingScale.range([yMax, 0]);
162158

163159
return width < 10 ? null : (
164160
// relative position is needed for correct tooltip positioning
165161

166-
<div style={{ position: "relative" }}>
162+
<div style={{ position: 'relative' }}>
167163
<svg ref={containerRef} width={width} height={height}>
168164
<rect
169165
x={0}
@@ -193,52 +189,50 @@ renderingScale.range([yMax, 0]);
193189
yScale={renderingScale}
194190
color={colorScale}
195191
>
196-
{(barStacks) => barStacks.map(barStack => barStack.bars.map(((bar,idx) => (
197-
<rect
198-
key={`bar-stack-${barStack.index}-${bar.index}`}
199-
x={bar.x}
200-
y={bar.y}
201-
height={bar.height === 0 ? idx + 1 : bar.height}
202-
width={bar.width}
203-
fill={bar.color}
192+
{barStacks => barStacks.map(barStack => barStack.bars.map(((bar, idx) => (
193+
<rect
194+
key={`bar-stack-${barStack.index}-${bar.index}`}
195+
x={bar.x}
196+
y={bar.y}
197+
height={bar.height === 0 ? idx + 1 : bar.height}
198+
width={bar.width}
199+
fill={bar.color}
204200
/* TIP TOOL EVENT HANDLERS */
205201
// Hides tool tip once cursor moves off the current rect
206-
onMouseLeave={() => {
207-
tooltipTimeout = window.setTimeout(() => {
208-
hideTooltip();
209-
}, 300);
210-
}}
211-
// Cursor position in window updates position of the tool tip
212-
onMouseMove={event => {
213-
if (tooltipTimeout) clearTimeout(tooltipTimeout);
214-
const top = event.clientY - margin.top - bar.height;
215-
const left = bar.x + bar.width / 2;
216-
showTooltip({
217-
tooltipData: bar,
218-
tooltipTop: top,
219-
tooltipLeft: left,
220-
});
221-
}}
222-
/>
223-
)),
224-
)
225-
}
202+
onMouseLeave={() => {
203+
tooltipTimeout = window.setTimeout(() => {
204+
hideTooltip();
205+
}, 300);
206+
}}
207+
// Cursor position in window updates position of the tool tip
208+
onMouseMove={event => {
209+
if (tooltipTimeout) clearTimeout(tooltipTimeout);
210+
const top = event.clientY - margin.top - bar.height;
211+
const left = bar.x + bar.width / 2;
212+
showTooltip({
213+
tooltipData: bar,
214+
tooltipTop: top,
215+
tooltipLeft: left,
216+
});
217+
}}
218+
/>
219+
))))}
226220
</BarStack>
227221
</Group>
228222
<AxisLeft
229-
top={margin.top}
230-
left={margin.left}
231-
scale={renderingScale}
232-
stroke={axisColor}
233-
tickStroke={axisColor}
234-
strokeWidth={2}
235-
tickLabelProps={() => ({
236-
fill: axisColor,
237-
fontSize: 11,
238-
verticalAnchor: 'middle',
239-
textAnchor: 'end'
240-
})}
241-
/>
223+
top={margin.top}
224+
left={margin.left}
225+
scale={renderingScale}
226+
stroke={axisColor}
227+
tickStroke={axisColor}
228+
strokeWidth={2}
229+
tickLabelProps={() => ({
230+
fill: axisColor,
231+
fontSize: 11,
232+
verticalAnchor: 'middle',
233+
textAnchor: 'end',
234+
})}
235+
/>
242236
<AxisBottom
243237
top={yMax + margin.top}
244238
left={margin.left}
@@ -252,10 +246,9 @@ renderingScale.range([yMax, 0]);
252246
textAnchor: 'middle',
253247
})}
254248
/>
255-
<Text x={-xMax / 2} y="15" transform="rotate(-90)" fontSize={10} fill="#FFFFFF"> Rendering Time (ms) </Text>
256-
<Text x={xMax / 2} y={yMax + 100} fontSize={10} fill="#FFFFFF"> Snapshot Id </Text>
249+
<Text x={-xMax / 2} y="15" transform="rotate(-90)" fontSize={10} fill="#FFFFFF"> Rendering Time (ms) </Text>
250+
<Text x={xMax / 2} y={yMax + 100} fontSize={10} fill="#FFFFFF"> Snapshot Id </Text>
257251
</svg>
258-
259252

260253
{/* FOR HOVER OVER DISPLAY */}
261254
{tooltipOpen && tooltipData && (
@@ -265,11 +258,21 @@ renderingScale.range([yMax, 0]);
265258
left={tooltipLeft}
266259
style={tooltipStyles}
267260
>
268-
// Displays: component name, component state type, render time, snapshotID
269-
<div style={{ color: colorScale(tooltipData.key) }}> <strong>{tooltipData.key}</strong> </div>
261+
<div style={{ color: colorScale(tooltipData.key) }}>
262+
{' '}
263+
<strong>{tooltipData.key}</strong>
264+
{' '}
265+
</div>
270266
<div>{allComponentStates[tooltipData.key]}</div>
271-
<div> {formatRenderTime(tooltipData.bar.data[tooltipData.key])} </div>
272-
<div> <small>{formatSnapshotId(getSnapshotId(tooltipData.bar.data))}</small></div>
267+
<div>
268+
{' '}
269+
{formatRenderTime(tooltipData.bar.data[tooltipData.key])}
270+
{' '}
271+
</div>
272+
<div>
273+
{' '}
274+
<small>{formatSnapshotId(getSnapshotId(tooltipData.bar.data))}</small>
275+
</div>
273276
</TooltipInPortal>
274277
)}
275278
</div>

0 commit comments

Comments
 (0)