Skip to content

Commit 7cdc126

Browse files
NkmaiNkmai
committed
Map working with collapsing feature and children styling, UI in PerformanceVisx improved
1 parent c75d378 commit 7cdc126

File tree

5 files changed

+97
-86
lines changed

5 files changed

+97
-86
lines changed

‎src/app/components/ComponentMap.tsx

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@ export default function ComponentMap({
5353
const [layout, setLayout] = useState('cartesian');
5454
const [orientation, setOrientation] = useState('horizontal');
5555
const [linkType, setLinkType] = useState('diagonal');
56-
5756
const [stepPercent, setStepPercent] = useState(10);
5857
// 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
5958
const forceUpdate = useForceUpdate();
@@ -103,7 +102,7 @@ export default function ComponentMap({
103102

104103
<svg width={totalWidth} height={totalHeight}>
105104
<LinearGradient id='links-gradient' from='#fd9b93' to='#fe6e9e' />
106-
<rect width={totalWidth} height={totalHeight} rx={14} fill='#242529' />
105+
<rect width={totalWidth} height={totalHeight} rx={14} fill='#242529'/>
107106
<Group top={margin.top} left={margin.left}>
108107
<Tree
109108
root={hierarchy(data, (d) => (d.isExpanded ? null : d.children))}
@@ -117,15 +116,16 @@ export default function ComponentMap({
117116
key={i}
118117
data={link}
119118
percent={stepPercent}
120-
stroke='rgb(254,110,158,0.6)'
119+
// stroke='rgb(254,110,158,0.6)'
120+
stroke='#ff6569'
121121
strokeWidth='1'
122122
fill='none'
123123
/>
124124
))}
125125

126126
{tree.descendants().map((node, key) => {
127-
const width = 40;
128-
const height = 15;
127+
const width = 55;
128+
const height = 20;
129129

130130
let top: number;
131131
let left: number;
@@ -162,15 +162,17 @@ export default function ComponentMap({
162162
y={-height / 2}
163163
x={-width / 2}
164164
fill='#272b4d'
165-
stroke={node.data.children ? '#03c0dc' : '#26deb0'}
165+
//changed all the node.data.children to node.children and was causing pb rendering and expanding
166+
stroke={node.children ? '#03c0dc' : '#26deb0'}
166167
strokeWidth={1}
167-
strokeDasharray={node.data.children ? '0' : '2,2'}
168-
strokeOpacity={node.data.children ? 1 : 0.6}
169-
rx={node.data.children ? 0 : 10}
168+
strokeDasharray={node.children ? '0' : '2,2'}
169+
strokeOpacity={node.children ? 1 : 0.6}
170+
rx={node.children ? 4 : 10}
170171
onClick={() => {
171172
node.data.isExpanded = !node.data.isExpanded;
172173
forceUpdate();
173174
}}
175+
//check with recoil
174176
onMouseLeave={()=> {
175177
if(Object.keys(node.data.recoilDomNode).length > 0){
176178
dispatch(onHoverExit(node.data.recoilDomNode[node.data.name]))
@@ -191,7 +193,7 @@ export default function ComponentMap({
191193
<text
192194
dy='.33em'
193195
fontSize={9}
194-
fontFamily='Arial'
196+
fontFamily='Roboto'
195197
textAnchor='middle'
196198
style={{ pointerEvents: 'none' }}
197199
fill={

‎src/app/components/LinkControls.tsx

Lines changed: 73 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
11

22
import React from 'react';
33
// Font size of the Controls label and Dropdowns
4-
const controlStyles = { fontSize: 10 };
4+
const controlStyles = {
5+
fontSize: '12px',
6+
padding: '10px',
7+
};
8+
9+
const dropDownStyle = {
10+
margin: '0.5em',
11+
fontSize: '12px',
12+
borderRadius: '4px',
13+
backgroundColor: 'rgb(231, 231, 231)'
14+
}
515

616
type Props = {
717
layout: string;
@@ -25,64 +35,66 @@ export default function LinkControls({
2535
setStepPercent,
2636
}: Props) {
2737
return (
28-
<div style={controlStyles}>
29-
{/* Controls for the layout selection */}
30-
<label>Layout:</label>
31-
&nbsp;
32-
<select
33-
onClick={(e) => e.stopPropagation()}
34-
onChange={(e) => setLayout(e.target.value)}
35-
value={layout}
36-
>
37-
<option value='cartesian'>Cartesian</option>
38-
<option value='polar'>Polar</option>
39-
</select>
40-
&nbsp;&nbsp;
41-
{/* Controls for the Orientation selection, this dropdown will be disabled when the polar layout is selected as it is not needed */}
42-
<label>Orientation:</label>
43-
&nbsp;
44-
<select
45-
onClick={(e) => e.stopPropagation()}
46-
onChange={(e) => setOrientation(e.target.value)}
47-
value={orientation}
48-
disabled={layout === 'polar'}
49-
>
50-
<option value='horizontal'>Horizontal</option>
51-
<option value='vertical'>Vertical</option>
52-
</select>
53-
&nbsp;&nbsp;
54-
{/* Controls for the link selections. When Cartesian and Horizontal are selection the link has been disabled as it was causing a rendering issue */}
55-
<label>Link:</label>
56-
&nbsp;
57-
<select
58-
onClick={(e) => e.stopPropagation()}
59-
onChange={(e) => setLinkType(e.target.value)}
60-
value={linkType}
61-
disabled={layout === 'cartesian' && orientation === 'horizontal'}
62-
>
63-
<option value='diagonal'>Diagonal</option>
64-
<option value='step'>Step</option>
65-
<option value='curve'>Curve</option>
66-
<option value='line'>Line</option>
67-
</select>
68-
{/* This is the slider control for the step option */}
69-
{linkType === 'step' && layout !== 'polar' && (
70-
<>
71-
&nbsp;&nbsp;
72-
<label>Step:</label>
73-
&nbsp;
74-
<input
75-
onClick={(e) => e.stopPropagation()}
76-
type='range'
77-
min={0}
78-
max={1}
79-
step={0.1}
80-
onChange={(e) => setStepPercent(Number(e.target.value))}
81-
value={stepPercent}
82-
disabled={linkType !== 'step' || layout === 'polar'}
83-
/>
84-
</>
85-
)}
86-
</div>
87-
);
38+
<div style={controlStyles}>
39+
{/* Controls for the layout selection */}
40+
<label>Layout:</label>
41+
&nbsp;
42+
<select
43+
onClick={(e) => e.stopPropagation()}
44+
onChange={(e) => setLayout(e.target.value)}
45+
value={layout}
46+
style={dropDownStyle}
47+
>
48+
<option value="cartesian">Cartesian</option>
49+
<option value="polar">Polar</option>
50+
</select>
51+
&nbsp;&nbsp;
52+
{/* Controls for the Orientation selection, this dropdown will be disabled when the polar layout is selected as it is not needed */}
53+
<label>Orientation:</label>
54+
&nbsp;
55+
<select
56+
onClick={(e) => e.stopPropagation()}
57+
onChange={(e) => setOrientation(e.target.value)}
58+
value={orientation}
59+
disabled={layout === 'polar'}
60+
style={dropDownStyle}
61+
>
62+
<option value="horizontal">Horizontal</option>
63+
<option value="vertical">Vertical</option>
64+
</select>
65+
&nbsp;&nbsp;
66+
{/* Controls for the link selections. When Cartesian and Horizontal are selection the link has been disabled as it was causing a rendering issue */}
67+
{/* <label>Link:</label>
68+
&nbsp;
69+
<select
70+
onClick={(e) => e.stopPropagation()}
71+
onChange={(e) => setLinkType(e.target.value)}
72+
value={linkType}
73+
disabled={layout === 'cartesian' && orientation === 'horizontal'}
74+
>
75+
<option value="diagonal">Diagonal</option>
76+
<option value="step">Step</option>
77+
<option value="curve">Curve</option>
78+
<option value="line">Line</option>
79+
</select> */}
80+
{/* This is the slider control for the step option */}
81+
{/* {linkType === 'step' && layout !== 'polar' && (
82+
<>
83+
&nbsp;&nbsp;
84+
<label>Step:</label>
85+
&nbsp;
86+
<input
87+
onClick={(e) => e.stopPropagation()}
88+
type="range"
89+
min={0}
90+
max={1}
91+
step={0.1}
92+
onChange={(e) => setStepPercent(Number(e.target.value))}
93+
value={stepPercent}
94+
disabled={linkType !== 'step' || layout === 'polar'}
95+
/>
96+
</>
97+
)} */}
98+
</div>
99+
);
88100
}

‎src/app/components/PerformanceVisx.tsx

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { Group } from '@visx/group';
66
import { Grid } from '@visx/grid';
77
import { AxisBottom, AxisLeft } from '@visx/axis';
88
import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
9-
// import { scaleBand, scaleLinear, scaleOrdinal } from 'd3-scale';
109
import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
1110
import { Text } from '@visx/text';
1211
import { schemeSet3 } from 'd3-scale-chromatic';
@@ -60,13 +59,17 @@ interface snapshot {
6059

6160
/* DEFAULTS */
6261
const margin = { top: 60, right: 30, bottom: 0, left: 50 };
63-
const axisColor = '#679DCA';
62+
// const axisColor = '#679DCA';
63+
const axisColor = '#58c1e2';
6464
const background = '#242529';
6565
const tooltipStyles = {
6666
...defaultStyles,
6767
minWidth: 60,
6868
backgroundColor: 'rgba(0,0,0,0.9)',
6969
color: 'white',
70+
fontSize: '14px',
71+
lineHeight: '18px',
72+
fontFamily: 'Roboto'
7073
};
7174

7275
/* DATA HANDLING HELPER FUNCTIONS */
@@ -78,7 +81,7 @@ const traverse = (snapshot, fetchData, data = {}) => {
7881
const componentName = child.name + -[idx + 1];
7982
// Get component Type
8083
if (fetchData === 'getComponentType') {
81-
if (child.state !== 'stateless') data[componentName] = 'STATEFUL';
84+
if (child.state !== 'stateless') data[componentName] = 'stateful';
8285
else data[componentName] = child.state;
8386
}
8487
// Get component Rendering Time
@@ -122,9 +125,6 @@ const PerformanceVisx = (props: BarStackProps) => {
122125
const {
123126
tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip,
124127
} = useTooltip<TooltipData>();
125-
// console.log('tooltipData at line 125: ', tooltipData)
126-
// console.log('tooltipTop at line 126: ', tooltipTop)
127-
// console.log('tooltipLeft at line 127: ', tooltipLeft);
128128
let tooltipTimeout: number;
129129

130130
const { containerRef, TooltipInPortal } = useTooltipInPortal();
@@ -133,7 +133,6 @@ const PerformanceVisx = (props: BarStackProps) => {
133133
const data = getPerfMetrics(snapshots, getSnapshotIds(hierarchy));
134134
const keys = Object.keys(data[0]).filter(d => d !== 'snapshotId');
135135
const allComponentStates = traverse(snapshots[0], 'getComponentType');
136-
// console.log('snapshots:', snapshots);
137136
const allComponentRtids = traverse(snapshots[snapshots.length-1], 'getRtid');
138137

139138
// create array of total render times for each snapshot
@@ -164,7 +163,6 @@ const PerformanceVisx = (props: BarStackProps) => {
164163
nice: true,
165164
});
166165

167-
// console.log('schemSet3: ', schemeSet3, 'typed: ', typeof schemeSet3);
168166
const colorScale = scaleOrdinal<string>({
169167
domain: keys,
170168
range: schemeSet3,
@@ -176,8 +174,7 @@ const PerformanceVisx = (props: BarStackProps) => {
176174
const yMax = height - margin.top - 150;
177175
snapshotIdScale.rangeRound([0, xMax]);
178176
renderingScale.range([yMax, 0]);
179-
// console.log('snapshotIdScale: ', snapshotIdScale);
180-
// console.log('tooltipbar:', tooltipData);
177+
181178
// if performance tab is too small it will not return VISX component
182179
return width < 10 ? null : (
183180
<div style={{ position: 'relative' }}>
@@ -273,8 +270,8 @@ const PerformanceVisx = (props: BarStackProps) => {
273270
textAnchor: 'middle',
274271
})}
275272
/>
276-
<Text x={-xMax / 2} y="15" transform="rotate(-90)" fontSize={10} fill="#FFFFFF"> Rendering Time (ms) </Text>
277-
<Text x={xMax / 2} y={yMax + 100} fontSize={10} fill="#FFFFFF"> Snapshot Id </Text>
273+
<Text x={-xMax / 2} y="15" transform="rotate(-90)" fontSize={12} fill="#FFFFFF"> Rendering Time (ms) </Text>
274+
<Text x={xMax / 2} y={yMax + 100} fontSize={12} fill="#FFFFFF"> Snapshot Id </Text>
278275
</svg>
279276

280277
{/* FOR HOVER OVER DISPLAY */}

‎src/app/components/useForceUpdate.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@ import { useState } from 'react';
22

33
// This function will force a change in state and cause a re-render of the component. The state information is irrelevant but an update is needed to force a re-render
44
export default function useForceUpdate() {
5-
const [setValue] = useState(0);
5+
const [, setValue] = useState(0);
66
return () => setValue((value) => value + 1);
77
}

‎src/app/containers/ButtonsContainer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import React from 'react';
88
import { importSnapshots, toggleMode } from '../actions/actions';
99
import { useStoreContext } from '../store';
1010
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
11-
import { faUpload, faQuestion, faDownload, faMapMarker, faRedoAlt, faUnlock, faLock} from '@fortawesome/free-solid-svg-icons'
11+
import { faUpload, faQuestion, faDownload, faMapMarker, faMapPin, faRedoAlt, faUnlock, faLock} from '@fortawesome/free-solid-svg-icons'
1212

1313
function exportHandler(snapshots:[]) {
1414
// create invisible download anchor link
@@ -80,7 +80,7 @@ function ButtonsContainer() {
8080
type="button"
8181
onClick={() => dispatch(toggleMode('persist'))}
8282
>
83-
{persist? <FontAwesomeIcon icon={faRedoAlt} /> : <FontAwesomeIcon icon={faMapMarker} /> }
83+
{persist? <FontAwesomeIcon icon={faRedoAlt} /> : <FontAwesomeIcon icon={faMapPin} /> }
8484
{persist ? 'Unpersist' : 'Persist'}
8585
</button>
8686
<button

0 commit comments

Comments
 (0)