Skip to content

Commit 06e5894

Browse files
andytsou19andytsou19
authored
Merge pull request #3 from oslabs-beta/andy
Andy
2 parents 46b11b1 + 52902e6 commit 06e5894

File tree

2 files changed

+98
-80
lines changed

2 files changed

+98
-80
lines changed

‎src/app/components/BarGraph.tsx

Lines changed: 60 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,8 @@ import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
99
import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
1010
import { Text } from '@visx/text';
1111
import { schemeSet3 } from 'd3-scale-chromatic';
12-
import { onHover, onHoverExit } from '../actions/actions';
12+
import { onHover, onHoverExit, save } from '../actions/actions';
1313
import { useStoreContext } from '../store';
14-
import { save } from '../actions/actions';
1514

1615
/* TYPESCRIPT */
1716
interface data {
@@ -45,7 +44,9 @@ interface TooltipData {
4544
}
4645

4746
/* DEFAULTS */
48-
const margin = { top: 30, right: 30, bottom: 0, left: 50 };
47+
const margin = {
48+
top: 30, right: 30, bottom: 0, left: 50,
49+
};
4950
const axisColor = '#62d6fb';
5051
const background = '#242529';
5152
const tooltipStyles = {
@@ -58,7 +59,7 @@ const tooltipStyles = {
5859
fontFamily: 'Roboto',
5960
};
6061

61-
const BarGraph = (props) => {
62+
const BarGraph = props => {
6263
const [{ tabs, currentTab }, dispatch] = useStoreContext();
6364
const { width, height, data } = props;
6465
const {
@@ -78,8 +79,8 @@ const BarGraph = (props) => {
7879

7980
// data accessor (used to generate scales) and formatter (add units for on hover box)
8081
const getSnapshotId = (d: snapshot) => d.snapshotId;
81-
const formatSnapshotId = (id) => `Snapshot ID: ${id}`;
82-
const formatRenderTime = (time) => `${time} ms `;
82+
const formatSnapshotId = id => `Snapshot ID: ${id}`;
83+
const formatRenderTime = time => `${time} ms `;
8384

8485
// create visualization SCALES with cleaned data
8586
const snapshotIdScale = scaleBand<string>({
@@ -105,7 +106,7 @@ const BarGraph = (props) => {
105106

106107
const toStorage = {
107108
currentTab,
108-
title: tabs[currentTab]['title'],
109+
title: tabs[currentTab].title,
109110
data,
110111
};
111112

@@ -119,14 +120,14 @@ const BarGraph = (props) => {
119120
} else {
120121
saveButtons[i].innerHTML = 'Save Series';
121122
saveButtons[i].classList.remove('animate');
122-
};
123-
};
123+
}
124+
}
124125
});
125126
return (
126-
<div className='bargraph-position'>
127+
<div className="bargraph-position">
127128
<button
128-
className='save-series-button'
129-
onClick={(e) => {
129+
className="save-series-button"
130+
onClick={e => {
130131
dispatch(save(toStorage));
131132
}}
132133
>
@@ -149,7 +150,7 @@ const BarGraph = (props) => {
149150
yScale={renderingScale}
150151
width={xMax}
151152
height={yMax}
152-
stroke='black'
153+
stroke="black"
153154
strokeOpacity={0.1}
154155
xOffset={snapshotIdScale.bandwidth() / 2}
155156
/>
@@ -162,48 +163,44 @@ const BarGraph = (props) => {
162163
yScale={renderingScale}
163164
color={colorScale}
164165
>
165-
{(barStacks) =>
166-
barStacks.map((barStack) =>
167-
barStack.bars.map((bar, idx) => {
168-
// Hides new components if components don't exist in previous snapshots.
169-
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
170-
bar.height = 0;
171-
}
172-
return (
173-
<rect
174-
key={`bar-stack-${barStack.id}-${bar.id}`}
175-
x={bar.x}
176-
y={bar.y}
177-
height={bar.height === 0 ? null : bar.height}
178-
width={bar.width}
179-
fill={bar.color}
166+
{barStacks => barStacks.map(barStack => barStack.bars.map((bar, idx) => {
167+
// Hides new components if components don't exist in previous snapshots.
168+
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
169+
bar.height = 0;
170+
}
171+
return (
172+
<rect
173+
key={`bar-stack-${barStack.id}-${bar.id}`}
174+
x={bar.x}
175+
y={bar.y}
176+
height={bar.height === 0 ? null : bar.height}
177+
width={bar.width}
178+
fill={bar.color}
180179
/* TIP TOOL EVENT HANDLERS */
181180
// Hides tool tip once cursor moves off the current rect.
182-
onMouseLeave={() => {
183-
dispatch(
184-
onHoverExit(data.componentData[bar.key].rtid),
185-
(tooltipTimeout = window.setTimeout(() => {
186-
hideTooltip();
187-
}, 300))
188-
);
189-
}}
181+
onMouseLeave={() => {
182+
dispatch(
183+
onHoverExit(data.componentData[bar.key].rtid),
184+
(tooltipTimeout = window.setTimeout(() => {
185+
hideTooltip();
186+
}, 300)),
187+
);
188+
}}
190189
// Cursor position in window updates position of the tool tip.
191-
onMouseMove={(event) => {
192-
dispatch(onHover(data.componentData[bar.key].rtid));
193-
if (tooltipTimeout) clearTimeout(tooltipTimeout);
194-
const top = event.clientY - margin.top - bar.height;
195-
const left = bar.x + bar.width / 2;
196-
showTooltip({
197-
tooltipData: bar,
198-
tooltipTop: top,
199-
tooltipLeft: left,
200-
});
201-
}}
202-
/>
203-
);
204-
})
205-
)
206-
}
190+
onMouseMove={event => {
191+
dispatch(onHover(data.componentData[bar.key].rtid));
192+
if (tooltipTimeout) clearTimeout(tooltipTimeout);
193+
const top = event.clientY - margin.top - bar.height;
194+
const left = bar.x + bar.width / 2;
195+
showTooltip({
196+
tooltipData: bar,
197+
tooltipTop: top,
198+
tooltipLeft: left,
199+
});
200+
}}
201+
/>
202+
);
203+
}))}
207204
</BarStack>
208205
</Group>
209206
<AxisLeft
@@ -235,15 +232,15 @@ const BarGraph = (props) => {
235232
/>
236233
<Text
237234
x={-xMax / 2}
238-
y='15'
239-
transform='rotate(-90)'
235+
y="15"
236+
transform="rotate(-90)"
240237
fontSize={12}
241-
fill='#FFFFFF'
238+
fill="#FFFFFF"
242239
>
243240
Rendering Time (ms)
244241
</Text>
245242
<br />
246-
<Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill='#FFFFFF'>
243+
<Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill="#FFFFFF">
247244
Snapshot ID
248245
</Text>
249246
</svg>
@@ -257,10 +254,15 @@ const BarGraph = (props) => {
257254
>
258255
<div style={{ color: colorScale(tooltipData.key) }}>
259256
{' '}
260-
<strong>{tooltipData.key}</strong>{' '}
257+
<strong>{tooltipData.key}</strong>
258+
{' '}
261259
</div>
262260
<div>{data.componentData[tooltipData.key].stateType}</div>
263-
<div> {formatRenderTime(tooltipData.bar.data[tooltipData.key])} </div>
261+
<div>
262+
{' '}
263+
{formatRenderTime(tooltipData.bar.data[tooltipData.key])}
264+
{' '}
265+
</div>
264266
<div>
265267
{' '}
266268
<small>

‎src/app/components/ComponentMap.tsx

Lines changed: 38 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,8 @@ export default function ComponentMap({
6767
const [orientation, setOrientation] = useState('horizontal');
6868
const [linkType, setLinkType] = useState('diagonal');
6969
const [stepPercent, setStepPercent] = useState(10);
70+
const [tooltip, setTooltip] = useState(false);
71+
const [expanded, setExpanded] = useState();
7072

7173
// Declared this variable and assigned it to the useForceUpdate function that forces a state to change causing that component to re-render and display on the map
7274
const forceUpdate = useForceUpdate();
@@ -193,16 +195,18 @@ export default function ComponentMap({
193195
// mousing controls & Tooltip display logic
194196
const handleMouseOver = event => {
195197
() => dispatch(onHover(node.data.rtid));
198+
console.log('line 197', event.target.ownerSVGElement);
196199
const coords = localPoint(
197200
event.target.ownerSVGElement,
198201
event,
199202
);
200203
const tooltipObj = { ...node.data };
204+
console.log('NODE DATAAAAAAAAAAAAA', node);
201205
if (typeof tooltipObj.state === 'object') tooltipObj.state = 'stateful';
202206
showTooltip({
203207
tooltipLeft: coords.x,
204208
tooltipTop: coords.y,
205-
tooltipData: tooltipObj,
209+
tooltipData: tooltipObj, // this is where the data for state and render time is displayed but does not show props functions and etc
206210
});
207211
};
208212

@@ -227,20 +231,28 @@ export default function ComponentMap({
227231
y={-height / 2}
228232
x={-width / 2}
229233
fill={node.children ? '#161521' : '#62d6fb'}
230-
stroke={node.children ? '#62d6fb' : '#161521'}
231-
strokeWidth={1}
232-
strokeDasharray={node.children ? '0' : '2,2'}
234+
stroke={node.data.isExpanded ? '#95fb62' : '#a69ff5'} // if already child in fill do not all stroke to change change color later but it works!!!!!!!!
235+
strokeWidth={3}
236+
strokeDasharray={node.children ? '0' : '1,2'}
233237
strokeOpacity="1"
234238
rx={node.children ? 4 : 10}
235-
onClick={() => {
239+
onDoubleClick={() => {
236240
node.data.isExpanded = !node.data.isExpanded;
237241
forceUpdate();
238242
}}
239243
// Tooltip event handlers
240244
// test feature
241-
onMouseOver={handleMouseOver}
242-
onMouseOut={hideTooltip}
243-
onMouseEnter={() => dispatch(onHover(node.data.rtid))}
245+
// onClick = {handleMouseOver}
246+
onClick={event => {
247+
if (tooltip) { // cohort 45
248+
hideTooltip();
249+
setTooltip(false);
250+
} else {
251+
handleMouseOver(event);
252+
setTooltip(true);
253+
}
254+
}}
255+
onMouseEnter={() => dispatch(onHover(node.data.rtid))} // fix this not working
244256
onMouseLeave={() => dispatch(onHoverExit(node.data.rtid))}
245257
/>
246258
)}
@@ -258,6 +270,7 @@ export default function ComponentMap({
258270
? 'white'
259271
: '#161521'
260272
}
273+
z
261274
>
262275
{node.data.name}
263276
</text>
@@ -276,22 +289,25 @@ export default function ComponentMap({
276289
top={tooltipTop}
277290
left={tooltipLeft}
278291
style={tooltipStyles}
292+
onClick={hideTooltip}
279293
>
280-
<div style={{}}>
281-
{' '}
282-
<strong>{tooltipData.name}</strong>
283-
{' '}
284-
</div>
285-
<div>
286-
State:
287-
{tooltipData.state}
288-
</div>
289294
<div>
290-
{' '}
291-
Render time:
292-
{' '}
293-
{formatRenderTime(tooltipData.componentData.actualDuration)}
294-
{' '}
295+
<div style={{}}>
296+
{' '}
297+
<strong>{tooltipData.name}</strong>
298+
{' '}
299+
</div>
300+
<div>
301+
State:
302+
{tooltipData.state}
303+
</div>
304+
<div>
305+
{' '}
306+
Render time:
307+
{' '}
308+
{formatRenderTime(tooltipData.componentData.actualDuration)}
309+
{' '}
310+
</div>
295311
</div>
296312
</TooltipInPortal>
297313
)}

0 commit comments

Comments
 (0)