Skip to content

Commit bdc5006

Browse files
andytsou19andytsou19
committed
fixed double click feature as well as the state/props in the map tab
1 parent 511737c commit bdc5006

File tree

4 files changed

+30
-288
lines changed

4 files changed

+30
-288
lines changed

‎src/app/components/ComponentMap.tsx‎

Lines changed: 26 additions & 254 deletions
Original file line numberDiff line numberDiff line change
@@ -261,231 +261,7 @@ export default function ComponentMap({
261261
};
262262
findSelectedNode();
263263

264-
const collapsedState = 'collapsedState';/// /THIS IS VIET'S CODEEEE!@
265-
266-
// collapsed comes from reducer state so you can grab it from cloud and use it as a value here
267-
// collapsedState is just a style you create in css
268-
269-
// Adding overlay component to close out with tooltipwhen clicking anywhere on screen
270-
// const overlayComp = hooks => (
271-
// // eslint-disable-next-line jsx-a11y/click-events-have-key-events
272-
// <div
273-
// // className={`overlay ${(node.data.isExpanded && collapsedState)}`} // 'overlay collapsedState' or 'overlay'
274-
// className={tooltip ? 'overlay' : 'collapsedState'}
275-
// onClick={() => {
276-
// setTooltip(false);
277-
// // console.log('Testing to see if the setToolTip works');
278-
// // console.log('this is toolTip', tooltip);
279-
// }}
280-
// >
281-
// {/* onDoubleClick={() => {
282-
// node.data.isExpanded = !node.data.isExpanded;
283-
// forceUpdate();
284-
// }} */}
285-
// <TooltipInPortal
286-
// // set this to random so it correctly updates with parent bounds
287-
// key={Math.random()}
288-
// top={tooltipTop}
289-
// left={tooltipLeft}
290-
// style={tooltipStyles}
291-
// >
292-
// <div>
293-
// <div style={{}}>
294-
// {' '}
295-
// <strong>{tooltipData.name}</strong>
296-
// {' '}
297-
// </div>
298-
// <div>
299-
// {' '}
300-
// Render time:
301-
// {' '}
302-
// {formatRenderTime(tooltipData.componentData.actualDuration)}
303-
// {' '}
304-
// </div>
305-
// <div>
306-
// State:
307-
// {tooltipData.state}
308-
// </div>
309-
// <div style={scrollStyle}>
310-
// Props:
311-
// {makePropsPretty(tooltipData.componentData.props)}
312-
// {/* {JSON.stringify(tooltipData.componentData.props)} */}
313-
// </div>
314-
// </div>
315-
// </TooltipInPortal>
316-
// </div>
317-
// );
318-
// // controls for the map
319-
// const LinkComponent = getLinkComponent({ layout, linkType, orientation });
320-
// return totalWidth < 10 ? null : (
321-
// <div>
322-
// <LinkControls
323-
// layout={layout}
324-
// orientation={orientation}
325-
// linkType={linkType}
326-
// stepPercent={stepPercent}
327-
// snapShots={snapshots[lastNode]}
328-
// selectedNode={selectedNode}
329-
// setLayout={setLayout}
330-
// setOrientation={setOrientation}
331-
// setLinkType={setLinkType}
332-
// setStepPercent={setStepPercent}
333-
// setSelectedNode={setSelectedNode}
334-
// />
335-
336-
// <svg ref={containerRef} width={totalWidth} height={totalHeight}>
337-
// <LinearGradient id="links-gradient" from="#fd9b93" to="#fe6e9e" />
338-
// <rect width={totalWidth} height={totalHeight} rx={14} fill="#242529" />
339-
// <Group top={margin.top} left={margin.left}>
340-
// {/* {console.log('This is the SelectedNode:', selectedNode)} */}
341-
// <Tree
342-
// root={hierarchy(startNode || data, d => (d.isExpanded ? null : d.children))}
343-
// size={[sizeWidth, sizeHeight]}
344-
// separation={(a, b) => (a.parent === b.parent ? 1 : 0.5) / a.depth}
345-
// >
346-
// {tree => (
347-
// <Group top={origin.y} left={origin.x}>
348-
// {tree.links().map((link, i) => (
349-
// <LinkComponent
350-
// key={i}
351-
// data={link}
352-
// percent={stepPercent}
353-
// stroke="#ff6569"
354-
// strokeWidth="1"
355-
// fill="none"
356-
// />
357-
// ))}
358-
359-
// {tree.descendants().map((node, key) => {
360-
// const widthFunc = name => {
361-
// const nodeLength = name.length;
362-
// if (nodeLength < 5) return nodeLength + 40;
363-
// if (nodeLength < 10) return nodeLength + 60;
364-
// return nodeLength + 70;
365-
// };
366-
// const width = widthFunc(node.data.name);
367-
// const height = 25;
368-
369-
// let top: number;
370-
// let left: number;
371-
// if (layout === 'polar') {
372-
// const [radialX, radialY] = pointRadial(node.x, node.y);
373-
// top = radialY;
374-
// left = radialX;
375-
// } else if (orientation === 'vertical') {
376-
// top = node.y;
377-
// left = node.x;
378-
// } else {
379-
// top = node.x;
380-
// left = node.y;
381-
// }
382-
383-
// // mousing controls & Tooltip display logic
384-
// const handleMouseOver = event => {
385-
// () => dispatch(onHover(node.data.rtid));
386-
// // console.log('line 197 event.target', event.target.ownerSVGElement);
387-
// // console.log('line 199 This is DATA: ', data);
388-
// // console.log('line 200 This is TREE: ', tree);
389-
// // console.log('line 201 This is NODE: ', node);
390-
// const coords = localPoint(
391-
// event.target.ownerSVGElement,
392-
// event,
393-
// );
394-
// const tooltipObj = { ...node.data };
395-
// // console.log('NODE DATAAAAAAAAAAAAA', node);
396-
// if (typeof tooltipObj.state === 'object') tooltipObj.state = 'stateful';
397-
// showTooltip({
398-
// tooltipLeft: coords.x,
399-
// tooltipTop: coords.y,
400-
// tooltipData: tooltipObj, // this is where the data for state and render time is displayed but does not show props functions and etc
401-
// });
402-
// };
403-
404-
// return (
405-
// <Group top={top} left={left} key={key}>
406-
// {node.depth === 0 && (
407-
// <circle
408-
// r={12}
409-
// fill="url('#links-gradient')"
410-
// stroke="#ff6569"
411-
// onClick={() => {
412-
// node.data.isExpanded = !node.data.isExpanded;
413-
// forceUpdate();
414-
// }}
415-
// />
416-
// )}
417-
// {/* This creates the rectangle boxes for each component and sets it relative position to other parent nodes of the same level. */}
418-
// {node.depth !== 0 && (
419-
// <rect
420-
// className="rect"
421-
// height={height}
422-
// width={width}
423-
// y={-height / 2}
424-
// x={-width / 2}
425-
// // node.children = if node has children
426-
// fill={node.children ? '#161521' : '#62d6fb'}
427-
// // node.data.isExpanded = if node is collapsed
428-
// // stroke={(node.data.isExpanded && node.child) ? '#95fb62' : '#a69ff5'} => node.child is gone when clicked, even if it actually has children. Maybe better call node.children => node.leaf
429-
// stroke={(node.data.isExpanded && node.data.children.length > 0) ? '#95fb62' : '#a69ff5'}
430-
431-
// // if already child in fill do not all stroke to change change color later but it works!!!!!!!!
432-
// strokeWidth={3}
433-
// // strokeDasharray={node.children ? '0' : '2,2'}
434-
// strokeOpacity="1"
435-
// rx={node.children ? 4 : 10}
436-
// onDoubleClick={() => {
437-
// node.data.isExpanded = !node.data.isExpanded;
438-
// forceUpdate();
439-
// }}
440-
// // Tooltip event handlers
441-
// // test feature
442-
// // onClick = {handleMouseOver}
443-
// onClick={event => {
444-
// if (tooltip) { // cohort 45
445-
// hideTooltip();
446-
// setTooltip(false);
447-
// } else {
448-
// handleMouseOver(event);
449-
// setTooltip(true);
450-
// }
451-
// }}
452-
// onMouseEnter={() => dispatch(onHover(node.data.rtid))} // fix this not working
453-
// onMouseLeave={() => dispatch(onHoverExit(node.data.rtid))}
454-
// />
455-
// )}
456-
// {/* Display text inside of each component node */}
457-
// <text
458-
// dy=".33em"
459-
// fontSize={10}
460-
// fontFamily="Roboto"
461-
// textAnchor="middle"
462-
// style={{ pointerEvents: 'none' }}
463-
// fill={
464-
// node.depth === 0
465-
// ? '#161521'
466-
// : node.children
467-
// ? 'white'
468-
// : '#161521'
469-
// }
470-
// >
471-
// {node.data.name}
472-
// </text>
473-
// </Group>
474-
// );
475-
// })}
476-
// </Group>
477-
// )}
478-
// </Tree>
479-
// </Group>
480-
// </svg>
481-
// {tooltip && tooltipData && (
482-
// overlayComp()
483-
// )}
484-
// </div>
485-
// );
486-
// }
487-
488-
// controls for the map ////// old code!!!!!! not from viet
264+
// controls for the map
489265
const LinkComponent = getLinkComponent({ layout, linkType, orientation });
490266
return totalWidth < 10 ? null : (
491267
<div>
@@ -551,7 +327,7 @@ export default function ComponentMap({
551327
}
552328

553329
// mousing controls & Tooltip display logic
554-
const handleMouseOver = event => {
330+
const handleMouseAndClickOver = event => {
555331
() => dispatch(onHover(node.data.rtid));
556332
console.log('line 197 event.target', event.target.ownerSVGElement);
557333
console.log('line 199 This is DATA: ', data);
@@ -572,7 +348,7 @@ export default function ComponentMap({
572348
};
573349

574350
return (
575-
<Group top={top} left={left} key={key}>
351+
<Group top={top} left={left} key={key} className="rect">
576352
{node.depth === 0 && (
577353
<circle
578354
r={12}
@@ -583,7 +359,7 @@ export default function ComponentMap({
583359
forceUpdate();
584360
}}
585361
/>
586-
)}
362+
)}
587363
{/* This creates the rectangle boxes for each component and sets it relative position to other parent nodes of the same level. */}
588364
{node.depth !== 0 && (
589365
<rect
@@ -604,46 +380,48 @@ export default function ComponentMap({
604380
rx={node.children ? 4 : 10}
605381
onDoubleClick={() => {
606382
node.data.isExpanded = !node.data.isExpanded;
383+
hideTooltip();
384+
setTooltip(false);
607385
forceUpdate();
608386
}}
609387
// Tooltip event handlers
610388
// test feature
611-
// onClick = {handleMouseOver}
389+
// onClick = {handleMouseAndClickOver}
612390
onClick={event => {
613-
if (!tooltip){
614-
handleMouseOver(event);
391+
if (!tooltip) {
392+
handleMouseAndClickOver(event);
615393
setTooltip(true);
616394
}
617395
// if (tooltip) { // cohort 45
618396
// hideTooltip();
619397
// setTooltip(false);
620398
// } else {
621-
// handleMouseOver(event);
399+
// handleMouseAndClickOver(event);
622400
// setTooltip(true);
623401
// }
624402
}}
625403
onMouseEnter={() => dispatch(onHover(node.data.rtid))} // fix this not working
626404
onMouseLeave={() => dispatch(onHoverExit(node.data.rtid))}
627405
/>
628-
)}
406+
)}
629407
{/* Display text inside of each component node */}
630408
<text
631-
dy=".33em"
632-
fontSize={10}
633-
fontFamily="Roboto"
634-
textAnchor="middle"
635-
style={{ pointerEvents: 'none' }}
636-
fill={
409+
dy=".33em"
410+
fontSize={10}
411+
fontFamily="Roboto"
412+
textAnchor="middle"
413+
style={{ pointerEvents: 'none' }}
414+
fill={
637415
node.depth === 0
638416
? '#161521'
639417
: node.children
640418
? 'white'
641419
: '#161521'
642420
}
643-
z
644-
>
645-
{node.data.name}
646-
</text>
421+
z
422+
>
423+
{node.data.name}
424+
</text>
647425
</Group>
648426
);
649427
})}
@@ -661,7 +439,11 @@ export default function ComponentMap({
661439
style={tooltipStyles}
662440
onClick={hideTooltip}
663441
>
664-
<div>
442+
<div onClick={() => {
443+
setTooltip(false);
444+
hideTooltip();
445+
}}
446+
>
665447
<div style={{}}>
666448
{' '}
667449
<strong>{tooltipData.name}</strong>
@@ -682,21 +464,11 @@ export default function ComponentMap({
682464
<div className="props">
683465
Props:
684466
{makePropsPretty(tooltipData.componentData.props)}
685-
{/* {JSON.stringify(tooltipData.componentData.props)} */}
686467
</div>
687468
</div>
688469
</div>
689470
</TooltipInPortal>
690-
691471
)}
692-
<div
693-
className={tooltip ? 'overlay' : 'collapsedState'}
694-
onClick={() => {
695-
setTooltip(false);
696-
console.log('this is toolTip', tooltip);
697-
hideTooltip()
698-
}}
699-
/>
700472
</div>
701473
);
702474
}

‎src/app/components/PerformanceVisx.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ const getPerfMetrics = (snapshots, snapshotsIds): {} => {
113113
componentData: {},
114114
maxTotalRender: 0,
115115
};
116+
console.log('show me all of the snapshots', snapshots);
116117
snapshots.forEach((snapshot, i) => {
117118
perfData.barStack.push({ snapshotId: snapshotsIds[i] });
118119
traverse(snapshot, perfData);

‎src/app/styles/layout/_mainContainer.scss‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,3 @@
44
background-color: $brand-color;
55
overflow: hidden;
66
}
7-
8-
// viet
9-
.overlay {
10-
content: " ";
11-
z-index: 100;
12-
display: block;
13-
position: absolute;
14-
height: 100%;
15-
width: 100%;
16-
top: 0;
17-
left: 0;
18-
right: 0;
19-
background: transparent;
20-
}
21-
22-
.collapsedState {
23-
display: none;
24-
}
25-
26-
.rect {
27-
z-index: 101;
28-
}

0 commit comments

Comments
 (0)