Skip to content

Commit e2c0e8a

Browse files
CourageWolfCourageWolf
committed
merge
2 parents bff118b + 52ee002 commit e2c0e8a

File tree

5 files changed

+302
-194
lines changed

5 files changed

+302
-194
lines changed

‎src/app/components/BarGraph.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,10 @@ const BarGraph = (props) => {
7070
showTooltip,
7171
} = useTooltip<TooltipData>();
7272
let tooltipTimeout: number;
73-
const { containerRef, TooltipInPortal } = useTooltipInPortal();
73+
const { containerRef, TooltipInPortal } = useTooltipInPortal({
74+
detectBounds: true,
75+
scroll: true,
76+
});
7477

7578
const keys = Object.keys(data.componentData);
7679

@@ -139,9 +142,10 @@ const BarGraph = (props) => {
139142
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
140143
bar.height = 0;
141144
}
145+
console.log('bar in BarGraph.tsx', bar);
142146
return (
143147
<rect
144-
key={`bar-stack-${barStack.index}-${bar.index}`}
148+
key={`bar-stack-${barStack.id}-${bar.id}`}
145149
x={bar.x}
146150
y={bar.y}
147151
height={bar.height === 0 ? null : bar.height}

‎src/app/components/BarGraphComparison.tsx

Lines changed: 71 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { AxisBottom, AxisLeft } from '@visx/axis';
88
import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
99
import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
1010
import { Text } from '@visx/text';
11+
1112
import { schemeSet3 } from 'd3-scale-chromatic';
1213
import { makeStyles } from '@material-ui/core/styles';
1314
import Select from '@material-ui/core/Select';
@@ -18,7 +19,6 @@ import FormHelperText from '@material-ui/core/FormHelperText';
1819
import snapshots from './snapshots';
1920
import { onHover, onHoverExit } from '../actions/actions';
2021
import { useStoreContext } from '../store';
21-
2222
/* TYPESCRIPT */
2323
interface data {
2424
snapshotId?: string;
@@ -112,7 +112,6 @@ const BarGraphComparison = (props) => {
112112

113113
// data accessor (used to generate scales) and formatter (add units for on hover box)
114114
const getSnapshotId = (d: snapshot) => d.snapshotId;
115-
// const getSeriesId = (d: series) => d.currentTab;
116115
const formatSnapshotId = (id) => `Snapshot ID: ${id}`;
117116
const formatRenderTime = (time) => `${time} ms `;
118117

@@ -121,8 +120,8 @@ const BarGraphComparison = (props) => {
121120
// domain: getSnapshotId(data.barStack[currentIndex]),
122121
// domain: [currentTab, comparison[series].currentTab],
123122
domain: [
124-
`Series ${!currentTab ? null : currentTab} (Current Tab)`,
125-
`Series ${!comparison[series] ? null : comparison[series].currentTab}`,
123+
`Current Tab Series`,
124+
`Series ${!comparison[series] ? null : series + 1}`,
126125
],
127126
padding: 0.2,
128127
});
@@ -131,16 +130,14 @@ const BarGraphComparison = (props) => {
131130
const currentSeriesBarStacks = !comparison[series]
132131
? []
133132
: comparison[series].data.barStack;
134-
console.log(
135-
'currentSeriesBarStacks index in Max func',
136-
currentSeriesBarStacks[series]
137-
);
138-
let renderTimes = Object.values(currentSeriesBarStacks[series]);
139-
renderTimes = renderTimes.slice(1);
140-
// console.log('RendERrrrTimes', renderTimes);
141-
const renderTotal = renderTimes.reduce((a, b) => a + b);
142-
// console.log('renderTotal', renderTotal);
143-
return renderTotal;
133+
if (currentSeriesBarStacks.length === 0) return 0;
134+
let currentMax = -Infinity;
135+
for (let i = 0; i < currentSeriesBarStacks.length; i += 1) {
136+
const renderTimes = Object.values(currentSeriesBarStacks[i]).slice(1);
137+
const renderTotal = renderTimes.reduce((acc, curr) => acc + curr);
138+
if (renderTotal > currentMax) currentMax = renderTotal;
139+
}
140+
return currentMax;
144141
};
145142

146143
const renderingScale = scaleLinear<number>({
@@ -169,21 +166,26 @@ const BarGraphComparison = (props) => {
169166
const useStyles = makeStyles((theme) => ({
170167
formControl: {
171168
margin: theme.spacing(1),
172-
minWidth: 150,
169+
minWidth: 80,
170+
// padding: '0.5rem',
171+
height: 30,
172+
},
173+
select: {
174+
minWidth: 80,
173175
border: '1px solid grey',
174176
borderRadius: 4,
175-
borderColor: 'grey',
177+
color: 'grey',
178+
height: 30,
176179
},
177180
}));
178181

179182
const classes = useStyles();
180183

181184
const handleChange = (event) => {
182185
setSeries(event.target.value);
183-
const renderTime = calculateMaxTotalRender(series);
184-
console.log('handleCh renderTime', renderTime);
185-
// setMaxRender(renderTime);
186-
console.log('maxRender', maxRender);
186+
// console.log('handleCh renderTime', renderTime);
187+
// // setMaxRender(renderTime);
188+
// console.log('maxRender', maxRender);
187189
};
188190

189191
const handleClose = () => {
@@ -204,31 +206,52 @@ const BarGraphComparison = (props) => {
204206
return (
205207
<div>
206208
{/* <h1>{`Current Snapshot: ${currentIndex + 1}`}</h1> */}
207-
<FormHelperText style={{ color: 'white' }}> Select Series</FormHelperText>
208-
<FormControl variant="outlined" className={classes.formControl}>
209-
<Select
210-
style={{ color: 'white' }}
211-
labelId="simple-select-outlined-label"
212-
id="simple-select-outlined"
213-
open={open}
214-
onClose={handleClose}
215-
onOpen={handleOpen}
216-
value={series}
217-
//data={data.barStack}
218-
// value={titleFilter(comparison)}
219-
onChange={handleChange}
220-
>
221-
{!comparison
222-
? null
223-
: titleFilter(comparison).map((tabElem, index) => {
224-
return (
225-
<MenuItem value={index}>
226-
{`Series ${tabElem.currentTab}`}
227-
</MenuItem>
228-
);
229-
})}
230-
</Select>
231-
</FormControl>
209+
{/* <div class="dropdown dropdown-dark">
210+
<select name="two" class="dropdown-select">
211+
{!comparison[series] ? (
212+
<option value={series}>No series available</option>
213+
) : (
214+
titleFilter(comparison).map((tabElem, index) => {
215+
return <option value={index}>{`Series ${index + 1}`}</option>;
216+
})
217+
)}
218+
</select>
219+
</div> */}
220+
<div className="series-options-container">
221+
<div className="snapshotId-container">
222+
<h1 className="snashotId-header">
223+
{' '}
224+
Snapshot ID: {currentIndex + 1}{' '}
225+
</h1>
226+
</div>
227+
<div className="dropdown-and-save-series-container">
228+
<FormControl variant="outlined" className={classes.formControl}>
229+
<Select
230+
style={{ color: 'white' }}
231+
labelId="simple-select-outlined-label"
232+
id="simple-select-outlined"
233+
className={classes.select}
234+
open={open}
235+
onClose={handleClose}
236+
onOpen={handleOpen}
237+
value={series}
238+
//data={data.barStack}
239+
// value={titleFilter(comparison)}
240+
onChange={handleChange}
241+
>
242+
{!comparison[series] ? (
243+
<MenuItem>No series available</MenuItem>
244+
) : (
245+
titleFilter(comparison).map((tabElem, index) => {
246+
return (
247+
<MenuItem value={index}>{`Series ${index + 1}`}</MenuItem>
248+
);
249+
})
250+
)}
251+
</Select>
252+
</FormControl>
253+
</div>
254+
</div>
232255
<svg ref={containerRef} width={width} height={height}>
233256
{}
234257
<rect
@@ -268,6 +291,7 @@ const BarGraphComparison = (props) => {
268291
const bar = barStack.bars[currentIndex];
269292
// console.log('Y SCALEEE', barStacks);
270293
// console.log('data.barStack >>>', data.barStack);
294+
console.log('OG bar.x', bar.x);
271295

272296
return (
273297
<rect
@@ -322,10 +346,11 @@ const BarGraphComparison = (props) => {
322346
}
323347
// console.log('barStacks in Comparison', barStacks);
324348
const bar = barStack.bars[currentIndex];
349+
console.log('Comparison bar.x', bar.x);
325350
return (
326351
<rect
327352
key={`bar-stack-${idx}-${bar.index}`}
328-
x={300}
353+
x={275}
329354
y={bar.y}
330355
height={bar.height === 0 ? null : bar.height}
331356
width={bar.width}

‎src/app/components/ComponentMap.tsx

Lines changed: 59 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
// @ts-nocheck
2-
import React, { useState } from "react";
3-
import { Group } from "@visx/group";
4-
import { hierarchy, Tree } from "@visx/hierarchy";
5-
import { LinearGradient } from "@visx/gradient";
6-
import { pointRadial } from "d3-shape";
7-
import useForceUpdate from "./useForceUpdate";
8-
import LinkControls from "./LinkControls";
9-
import getLinkComponent from "./getLinkComponent";
10-
import { localPoint } from "@visx/event";
2+
import React, { useState } from 'react';
3+
import { Group } from '@visx/group';
4+
import { hierarchy, Tree } from '@visx/hierarchy';
5+
import { LinearGradient } from '@visx/gradient';
6+
import { pointRadial } from 'd3-shape';
7+
import useForceUpdate from './useForceUpdate';
8+
import LinkControls from './LinkControls';
9+
import getLinkComponent from './getLinkComponent';
10+
import { localPoint } from '@visx/event';
1111
import {
1212
useTooltip,
1313
useTooltipInPortal,
1414
TooltipWithBounds,
15-
} from "@visx/tooltip";
16-
import { onHover, onHoverExit } from "../actions/actions";
17-
import { useStoreContext } from "../store";
15+
defaultStyles,
16+
} from '@visx/tooltip';
17+
import { onHover, onHoverExit } from '../actions/actions';
18+
import { useStoreContext } from '../store';
1819

1920
const root = hierarchy({
2021
name: "root",
@@ -106,18 +107,24 @@ export default function ComponentMap({
106107
hideTooltip,
107108
} = useTooltip();
108109

109-
const { containerRef, TooltipInPortal } = useTooltipInPortal();
110+
const { containerRef, TooltipInPortal } = useTooltipInPortal({
111+
detectBounds: true,
112+
scroll: true,
113+
});
110114

111-
//mousing controls
112-
const handleMouseOver = (event) => {
113-
// console.log("mouse entered");
114-
const coords = localPoint(event.target.ownerSVGElement, event);
115-
// console.log("I'm coords", coords);
116-
showTooltip({
117-
tooltipLeft: coords.x,
118-
tooltipTop: coords.y,
119-
tooltipData: "test",
120-
});
115+
const tooltipStyles = {
116+
...defaultStyles,
117+
minWidth: 60,
118+
backgroundColor: 'rgba(0,0,0,0.9)',
119+
color: 'white',
120+
fontSize: '14px',
121+
lineHeight: '18px',
122+
fontFamily: 'Roboto',
123+
};
124+
125+
const formatRenderTime = (time) => {
126+
time = time.toFixed(3);
127+
return `${time} ms `;
121128
};
122129

123130
// controls for the map
@@ -181,6 +188,24 @@ export default function ComponentMap({
181188
left = node.y;
182189
}
183190

191+
//mousing controls
192+
const handleMouseOver = (event) => {
193+
() => dispatch(onHover(node.data.rtid));
194+
const coords = localPoint(
195+
event.target.ownerSVGElement,
196+
event
197+
);
198+
const tooltipObj = Object.assign({}, node.data);
199+
if (typeof tooltipObj.state === 'object')
200+
tooltipObj.state = 'stateful';
201+
console.log('tooltipObj', tooltipObj);
202+
showTooltip({
203+
tooltipLeft: coords.x,
204+
tooltipTop: coords.y,
205+
tooltipData: tooltipObj,
206+
});
207+
};
208+
184209
return (
185210
<Group top={top} left={left} key={key}>
186211
{node.depth === 0 && (
@@ -248,8 +273,18 @@ export default function ComponentMap({
248273
key={Math.random()}
249274
top={tooltipTop}
250275
left={tooltipLeft}
276+
style={tooltipStyles}
251277
>
252-
Tooltip Data: <strong>{tooltipData}</strong>
278+
<div style={{}}>
279+
{' '}
280+
<strong>{tooltipData.name}</strong>{' '}
281+
</div>
282+
<div>State: {tooltipData.state}</div>
283+
<div>
284+
{' '}
285+
Render time:{' '}
286+
{formatRenderTime(tooltipData.componentData.actualDuration)}{' '}
287+
</div>
253288
</TooltipInPortal>
254289
)}
255290
</div>

‎src/app/components/PerformanceVisx.tsx

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,18 @@ const traverse = (snapshot, data, currTotalRender = 0) => {
7676
return data;
7777
};
7878

79+
const allStorage = () => {
80+
const values = [];
81+
const keys = Object.keys(localStorage);
82+
let i = keys.length;
83+
84+
while (i--) {
85+
const series = localStorage.getItem(keys[i]);
86+
values.push(JSON.parse(series));
87+
}
88+
return values;
89+
};
90+
7991
const getSnapshotIds = (obj, snapshotIds = []): string[] => {
8092
snapshotIds.push(`${obj.name}.${obj.branch}`);
8193
if (obj.children) {
@@ -116,18 +128,6 @@ const PerformanceVisx = (props: BarStackProps) => {
116128
const [comparisonView, setComparisonView] = useState('barStack');
117129
const [comparisonData, setComparisonData] = useState();
118130

119-
const allStorage = () => {
120-
const values = [];
121-
const keys = Object.keys(localStorage);
122-
let i = keys.length;
123-
124-
while (i--) {
125-
const series = localStorage.getItem(keys[i]);
126-
values.push(JSON.parse(series));
127-
}
128-
return values;
129-
};
130-
131131
const toggleComponentDetailsView = () => {
132132
detailsView === 'frequencyCards'
133133
? setDetailsView('barStack')

0 commit comments

Comments
 (0)