Skip to content

Commit ecd0b14

Browse files
d28601581d28601581
committed
fixing black screen bug on changing snapshot
1 parent e728780 commit ecd0b14

File tree

2 files changed

+91
-16
lines changed

2 files changed

+91
-16
lines changed

‎src/app/components/BarGraph.tsx

Lines changed: 52 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -79,17 +79,56 @@ const BarGraph = props => {
7979
});
8080

8181
const HorizontalGraph = () => {
82+
// data.barStack =
83+
// [{snapshot: 1.0,
84+
// box1: 5.4,
85+
// box2: 3.7
86+
// box3: 2.3
87+
// box4: 5.9,
88+
// box5: 3.5
89+
// box6: 2.9
90+
// }]
91+
92+
// width = 50
93+
// -xxxxx-xxxxx
8294
const BarArray = [];
95+
// []
96+
//-----------:: :: 3 4
8397
let i = 0;
98+
let barWidth = (xMax / (Object.keys(data.barStack[0]).length) + 5);
99+
console.log(data, '<-- data from snapshot');
84100
for (const [key, value] of Object.entries(data.barStack[0])) {
85101
if (key !== 'snapshotId' && key !== 'route'){
86102
console.log(`${key}: ${value}`);
87103
BarArray.push(<Bar
88-
x={10 + 30 * i}
89-
y={10}
104+
x={10 + 10 * i + barWidth * i}
105+
y={yMax - value * 25}
90106
height={value * 25}
91-
width={20}
107+
key={key}
108+
width={barWidth}
92109
fill="rgba(23, 233, 217, .5)"
110+
onMouseLeave={() => {
111+
dispatch(
112+
onHoverExit(data.componentData[key].rtid),
113+
(tooltipTimeout = window.setTimeout(() => {
114+
hideTooltip();
115+
}, 300)),
116+
);
117+
}}
118+
// Cursor position in window updates position of the tool tip.
119+
onMouseMove={event => {
120+
console.log(event, '<-- event from onMouseMove')
121+
console.log(key, '<--key from onMouseMove');
122+
dispatch(onHover(data.componentData[key].rtid));
123+
if (tooltipTimeout) clearTimeout(tooltipTimeout);
124+
const top = event.clientY - margin.top - value * 25;
125+
const left = 10 + 10 * i + barWidth * i + barWidth / 2;
126+
showTooltip({
127+
tooltipData: value,
128+
tooltipTop: top,
129+
tooltipLeft: left,
130+
});
131+
}}
93132
/>);
94133
}
95134
i++;
@@ -105,11 +144,11 @@ const BarGraph = props => {
105144
const getSnapshotId = (d: snapshot) => {
106145
//d coming from data.barstack post filtered data
107146
//Object.keys(data.barStack[0]).map(keys => if ())
108-
console.log('snapshot object here: ', d);
147+
console.log('snapshot object here from getSnapshotId: ', d);
109148
return d.snapshotId;
110149
};
111150
const getComponentKeys = d => {
112-
console.log('snapshot object here: ', d);
151+
console.log('snapshot object here from getComponentKeys: ', d);
113152
return d.snapshotId;
114153
};
115154
const formatSnapshotId = id => `Snapshot ID: ${id}`;
@@ -188,7 +227,10 @@ const BarGraph = props => {
188227
<select
189228
labelId="demo-simple-select-label"
190229
id="routes-select"
191-
onChange={e => setRoute(e.target.value)}
230+
onChange={e => {
231+
setSnapshot('All Snapshots');
232+
setRoute(e.target.value);
233+
}}
192234
>
193235
<option>
194236
All Routes
@@ -205,7 +247,7 @@ const BarGraph = props => {
205247
<select
206248
labelId="demo-simple-select-label"
207249
id="routes-select"
208-
onChange={e => setSnapshot(e.target.value)}
250+
onChange={e => setSnapshot(e.target.value)}
209251
>
210252
<option>
211253
All Snapshots
@@ -238,8 +280,8 @@ const BarGraph = props => {
238280
strokeOpacity={0.1}
239281
xOffset={snapshotIdScale.bandwidth() / 2}
240282
/>
283+
{console.log('this is from the BarStack graph')}
241284
<Group top={margin.top} left={margin.left}>
242-
243285
{data.barStack.length > 1 ? (
244286
<BarStack
245287
data={data.barStack}
@@ -251,7 +293,7 @@ const BarGraph = props => {
251293
>
252294
{barStacks => barStacks.map(barStack => barStack.bars.map((bar, idx) => {
253295
console.log(filteredSnapshots, '<-- filtered snap shots');
254-
console.log(data, '<-- data');
296+
console.log(data, '<-- data from barStacks');
255297
console.log(data.barStack, '<-- data.barstack');
256298
console.log(barStacks, '<--barStacks');
257299
console.log(width, '<-- width');
@@ -299,9 +341,7 @@ const BarGraph = props => {
299341
: (
300342
HorizontalGraph()
301343
)
302-
}
303-
304-
344+
}
305345
</Group>
306346
<AxisLeft
307347
top={margin.top}

‎src/app/components/PerformanceVisx.tsx

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ const PerformanceVisx = (props: BarStackProps) => {
180180

181181
const [route, setRoute] = useState('All Routes');
182182
const [snapshot, setSnapshot] = useState('All Snapshots');
183-
183+
//snapshots = 3.0
184184
useEffect(() => {
185185
dispatch(setCurrentTabInApp('performance'));
186186
}, [dispatch]);
@@ -247,11 +247,46 @@ const PerformanceVisx = (props: BarStackProps) => {
247247
data.barStack = filteredSnapshots;
248248
}
249249
console.log(snapshot);
250+
// snapshot = '2.0' parseInt(snapshot) = 3
251+
// 2-1 =
252+
// data.barStack[] // 0: 1.0 snapshot 1: 2.0 snapshot 2: 3.0 snapshot
253+
// data.barStack[{123123},{123123},12312,12312]
254+
// && data.barStack[parseInt(snapshot, 10) - 1]
250255
if (snapshot !== 'All Snapshots') {
251-
console.log(data.barStack, '<---------data.barstack', snapshot, '<-----snapshot', (parseInt(snapshot, 10) - 1), '<-----parseInt-1' )
252-
data.barStack = [data.barStack[parseInt(snapshot, 10) - 1]];
256+
console.log(data.barStack, '<---------data.barstack', snapshot, '<-----snapshot');
257+
// const checkData = [];
258+
// for (let i = 0; i < data.barStack.length; i++) {
259+
// if (data.barStack[i].snapshotId === snapshot) {
260+
// console.log(data.barStack[i], '<----barstack[i]', i);
261+
// console.log(snapshot, '<--- snapshot from for loop inside performance');
262+
// console.log(route, '<--- this is a route');
263+
// checkData.push(data.barStack[i]);
264+
// break;
265+
// }
266+
// }
267+
// filter barStack to make it equal to an array of length 1 with object matching snapshot ID
268+
// const checkData = data.barStack.map(comp => {
269+
// console.log(comp);
270+
// if (comp.snapshotId === snapshot) return comp;
271+
// });
272+
const checkData = [data.barStack.find(comp => comp.snapshotId === snapshot)];
273+
// checkData = checkData.filter(element => { return element !== undefined; })
274+
console.log(checkData, '<-- checkData');
275+
if (checkData) data.barStack = checkData;
253276
}
254-
277+
// data.barStack = [
278+
// {snapshot: 1.0,
279+
// box1: 5.4,
280+
// box2: 3.7
281+
// },
282+
// {snapshot: 2.0,
283+
// box1: 5.4,
284+
// box2: 3.7},
285+
// {snapshot: 3.0,
286+
// box1: 5.4,
287+
// box2: 3.7
288+
// }
289+
// ]
255290
//console.log(filteredSnapshots, '<-- filtered snap shots');
256291
const renderBargraph = () => {
257292
if (hierarchy) {

0 commit comments

Comments
 (0)