Skip to content

Commit 6165841

Browse files
DennisLpzDennisLpz
authored
Merge pull request #7 from kev-ngo/coli-branch
Fix styling on dropdown and add on-hover functionality
2 parents 0e939e7 + c3e9ada commit 6165841

File tree

5 files changed

+269
-190
lines changed

5 files changed

+269
-190
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: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,13 @@ import useForceUpdate from './useForceUpdate';
88
import LinkControls from './LinkControls';
99
import getLinkComponent from './getLinkComponent';
1010
import { localPoint } from '@visx/event';
11-
import { useTooltip, useTooltipInPortal, TooltipWithBounds, defaultStyles } from '@visx/tooltip';
12-
import { onHover, onHoverExit } from '../actions/actions';
11+
import {
12+
useTooltip,
13+
useTooltipInPortal,
14+
TooltipWithBounds,
15+
defaultStyles,
16+
} from '@visx/tooltip';
17+
import { onHover, onHoverExit } from '../actions/actions';
1318
import { useStoreContext } from '../store';
1419

1520
const root = hierarchy({
@@ -32,7 +37,6 @@ interface TreeNode {
3237
children?: TreeNode[];
3338
}
3439

35-
3640
type HierarchyNode = HierarchyPointNode<TreeNode>;
3741

3842
const defaultMargin = { top: 30, left: 30, right: 55, bottom: 70 };
@@ -93,8 +97,7 @@ export default function ComponentMap({
9397
}
9498
}
9599

96-
97-
//Tooltip stuff:
100+
//Tooltip stuff:
98101
const {
99102
tooltipData,
100103
tooltipLeft,
@@ -122,8 +125,7 @@ export default function ComponentMap({
122125
const formatRenderTime = (time) => {
123126
time = time.toFixed(3);
124127
return `${time} ms `;
125-
}
126-
128+
};
127129

128130
// controls for the map
129131
const LinkComponent = getLinkComponent({ layout, linkType, orientation });
@@ -172,8 +174,6 @@ export default function ComponentMap({
172174
const width = widthFunc(node.data.name);
173175
const height = 25;
174176

175-
176-
177177
let top: number;
178178
let left: number;
179179
if (layout === 'polar') {
@@ -191,17 +191,20 @@ export default function ComponentMap({
191191
//mousing controls
192192
const handleMouseOver = (event) => {
193193
() => dispatch(onHover(node.data.rtid));
194-
const coords = localPoint(event.target.ownerSVGElement, event);
194+
const coords = localPoint(
195+
event.target.ownerSVGElement,
196+
event
197+
);
195198
const tooltipObj = Object.assign({}, node.data);
196-
if (typeof tooltipObj.state === 'object') tooltipObj.state = 'stateful';
197-
console.log("tooltipObj", tooltipObj)
199+
if (typeof tooltipObj.state === 'object')
200+
tooltipObj.state = 'stateful';
201+
console.log('tooltipObj', tooltipObj);
198202
showTooltip({
199203
tooltipLeft: coords.x,
200204
tooltipTop: coords.y,
201-
tooltipData: tooltipObj
205+
tooltipData: tooltipObj,
202206
});
203-
}
204-
207+
};
205208

206209
return (
207210
<Group top={top} left={left} key={key}>
@@ -264,23 +267,26 @@ export default function ComponentMap({
264267
</Tree>
265268
</Group>
266269
</svg>
267-
{tooltipOpen && tooltipData && (
270+
{tooltipOpen && tooltipData && (
268271
<TooltipInPortal
269272
// set this to random so it correctly updates with parent bounds
270273
key={Math.random()}
271274
top={tooltipTop}
272275
left={tooltipLeft}
273276
style={tooltipStyles}
274277
>
275-
<div style={{ }}>
278+
<div style={{}}>
276279
{' '}
277280
<strong>{tooltipData.name}</strong>{' '}
278281
</div>
279282
<div>State: {tooltipData.state}</div>
280-
<div> Render time: {formatRenderTime(tooltipData.componentData.actualDuration)} </div>
281-
283+
<div>
284+
{' '}
285+
Render time:{' '}
286+
{formatRenderTime(tooltipData.componentData.actualDuration)}{' '}
287+
</div>
282288
</TooltipInPortal>
283-
)}
289+
)}
284290
</div>
285291
);
286292
}

‎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)