Skip to content

Commit 328fa7f

Browse files
kevinfeykevinfey
committed
remove history black screen bug, clean up StateRoute, remove comments from PerfView, fix styling issue in AtomsRelationship
1 parent 59f8fea commit 328fa7f

File tree

4 files changed

+132
-88
lines changed

4 files changed

+132
-88
lines changed

‎src/app/components/AtomsRelationship.jsx

Lines changed: 85 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,113 @@
11
import React, { Component, useEffect, useState, Fragment } from 'react';
2-
import { Chart } from 'react-google-charts'
2+
import { Chart } from 'react-google-charts';
33

44
function AtomsRelationship(props) {
5-
const {atomsRel} = props
5+
const { atomsRel } = props;
66

7-
const atomsAndComp = atomsRel.filter(e => e[2] !== 'atoms and selectors').map(e => {
8-
let copy = [...e];
9-
copy[2] = 1;
10-
return [...copy]
11-
});
7+
const atomsAndComp = atomsRel
8+
.filter((e) => e[2] !== 'atoms and selectors')
9+
.map((e) => {
10+
let copy = [...e];
11+
copy[2] = 1;
12+
return [...copy];
13+
});
1214

13-
const atomsAndSelectors = atomsRel.filter(e => e[2] === 'atoms and selectors').map(e => {
15+
const atomsAndSelectors = atomsRel
16+
.filter((e) => e[2] === 'atoms and selectors')
17+
.map((e) => {
18+
let copy = [...e];
19+
copy[2] = 1;
20+
return [...copy];
21+
});
22+
23+
const copyatomsRel = atomsRel.map((e) => {
1424
let copy = [...e];
1525
copy[2] = 1;
16-
return [...copy]
26+
return copy;
1727
});
18-
19-
const copyatomsRel = atomsRel.map(e => { let copy = [...e]; copy[2] = 1; return copy; });
2028
const [atoms, setAtoms] = useState([...copyatomsRel]);
2129
const [atomAndSelectorCheck, setAtomAndSelectorCheck] = useState(false);
2230
const [atomAndCompCheck, setAtomAndCompCheck] = useState(false);
2331

24-
useEffect( () => {
25-
if ((!atomAndSelectorCheck && !atomAndCompCheck) || (atomAndSelectorCheck && atomAndCompCheck)) {
32+
useEffect(() => {
33+
if (
34+
(!atomAndSelectorCheck && !atomAndCompCheck) ||
35+
(atomAndSelectorCheck && atomAndCompCheck)
36+
) {
2637
setAtoms(copyatomsRel);
2738
} else if (atomAndSelectorCheck) {
2839
setAtoms(atomsAndSelectors);
2940
} else {
3041
setAtoms(atomsAndComp);
3142
}
32-
}, [atomAndSelectorCheck, atomAndCompCheck, props])
43+
}, [atomAndSelectorCheck, atomAndCompCheck, props]);
3344

3445
return (
3546
<div className="history-d3-container">
3647
{atoms && (
37-
<Fragment>
38-
<Chart
39-
width={'100%'}
40-
height={'100%'}
41-
chartType="Sankey"
42-
options={{
43-
sankey: {
44-
link: { color: { fill: '#gray', fillOpacity: 0.1 } },
45-
node: {
46-
colors: [
47-
'#4a91c7',
48-
'#5b9bce',
49-
'#6ba6d5',
50-
'#7bb0dc',
51-
'#8abbe3',
52-
'#99c6ea',
53-
'#a8d0f1',
54-
'#b7dbf8',
55-
'#c6e6ff',
56-
'#46edf2',
57-
'#76f5f3',
58-
'#95B6B7',
59-
'#76dcde',
60-
'#5fdaed',
61-
],
48+
<Fragment>
49+
<Chart
50+
width={'100%'}
51+
height={'98%'}
52+
chartType="Sankey"
53+
options={{
54+
sankey: {
55+
link: { color: { fill: '#gray', fillOpacity: 0.1 } },
56+
node: {
57+
colors: [
58+
'#4a91c7',
59+
'#5b9bce',
60+
'#6ba6d5',
61+
'#7bb0dc',
62+
'#8abbe3',
63+
'#99c6ea',
64+
'#a8d0f1',
65+
'#b7dbf8',
66+
'#c6e6ff',
67+
'#46edf2',
68+
'#76f5f3',
69+
'#95B6B7',
70+
'#76dcde',
71+
'#5fdaed',
72+
],
6273

63-
label: { color: '#fff', fontSize: '13', fontName: 'Monaco', },
64-
nodePadding: 50,
65-
width: 15,
66-
},
67-
},
68-
tooltip: { textStyle: { color: 'white', fontSize: 0.1, }},
69-
}}
70-
loader={<div>Loading Chart</div>}
74+
label: { color: '#fff', fontSize: '13', fontName: 'Monaco' },
75+
nodePadding: 50,
76+
width: 15,
77+
},
78+
},
79+
tooltip: { textStyle: { color: 'white', fontSize: 0.1 } },
80+
}}
81+
loader={<div>Loading Chart</div>}
7182
data={[['Atom', 'Selector', ''], ...atoms]}
72-
rootProps={{ 'data-testid': '1' }}
73-
/>
74-
<div>
75-
<input type="checkbox" id='atomscomps' onClick={e => setAtomAndCompCheck(atomAndCompCheck ? false: true)}/>
76-
<label htmlFor="atomscomps"> Only Show Atoms (or Selectors) and Components </label>
77-
<input type="checkbox" id='atomsselectors' onClick={e => setAtomAndSelectorCheck(atomAndSelectorCheck ? false : true)} />
78-
<label htmlFor="atomsselectors"> Only Show Atoms and Selectors </label>
79-
</div>
83+
rootProps={{ 'data-testid': '1' }}
84+
/>
85+
<div>
86+
<input
87+
type="checkbox"
88+
id="atomscomps"
89+
onClick={(e) =>
90+
setAtomAndCompCheck(atomAndCompCheck ? false : true)
91+
}
92+
/>
93+
<label htmlFor="atomscomps">
94+
{' '}
95+
Only Show Atoms (or Selectors) and Components{' '}
96+
</label>
97+
<input
98+
type="checkbox"
99+
id="atomsselectors"
100+
onClick={(e) =>
101+
setAtomAndSelectorCheck(atomAndSelectorCheck ? false : true)
102+
}
103+
/>
104+
<label htmlFor="atomsselectors">
105+
{' '}
106+
Only Show Atoms and Selectors{' '}
107+
</label>
108+
</div>
80109
</Fragment>
81-
)
82-
83-
}
110+
)}
84111
</div>
85112
);
86113
}

‎src/app/components/History.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,8 +108,13 @@ function History(props) {
108108
.enter()
109109
.append('g')
110110
.style('fill', function (d) {
111-
let loadTime =
112-
d.data.stateSnapshot.children[0].componentData.actualDuration;
111+
let loadTime;
112+
if (d.data.stateSnapshot.children[0].componentData.actualDuration){
113+
loadTime = d.data.stateSnapshot.children[0].componentData.actualDuration;
114+
} else{
115+
loadTime = 1;
116+
}
117+
113118

114119
if (loadTime !== undefined) {
115120
if (loadTime > 16) {

‎src/app/components/PerfView.tsx

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,6 @@ const PerfView = (props: PerfViewProps) => {
5656
'#c6e6ff',
5757
]);
5858

59-
// Alternate color scaling function
60-
// const colorScale = d3.scaleLinear()
61-
// .domain([0, 7])
62-
// .range(['hsl(200,60%,60%)', 'hsl(255,30%,40%)'])
63-
// .interpolate(d3.interpolateHcl);
64-
6559
// Set up circle-packing layout function
6660
const packFunc = useCallback(
6761
(data: object) => {

‎src/app/components/StateRoute.tsx

Lines changed: 40 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ const History = require('./History').default;
2020

2121
const ErrorHandler = require('./ErrorHandler').default;
2222

23-
const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
23+
const NO_STATE_MSG =
24+
'No state change detected. Trigger an event to change state';
2425
// eslint-disable-next-line react/prop-types
2526

2627
interface StateRouteProps {
@@ -53,7 +54,16 @@ const StateRoute = (props: StateRouteProps) => {
5354
// Map
5455
const renderComponentMap = () => {
5556
if (hierarchy) {
56-
return <ComponentMap viewIndex={viewIndex} snapshots={snapshots} x={x} y={y} k={k} setZoomState={setZoomState} />;
57+
return (
58+
<ComponentMap
59+
viewIndex={viewIndex}
60+
snapshots={snapshots}
61+
x={x}
62+
y={y}
63+
k={k}
64+
setZoomState={setZoomState}
65+
/>
66+
);
5767
}
5868
return <div className="noState">{NO_STATE_MSG}</div>;
5969
};
@@ -62,13 +72,15 @@ const StateRoute = (props: StateRouteProps) => {
6272
// when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
6373
// if true involk render chart with hierarchy
6474
const renderHistory = () => {
65-
if (hierarchy.children.length > 0) {
75+
if (hierarchy) {
6676
return <History hierarchy={hierarchy} />;
6777
}
68-
return <div className="noState">History graph will render on first state change</div>;
78+
return <div className="noState">{NO_STATE_MSG}</div>;
6979
};
7080

71-
const renderAtomsRelationship = () => <AtomsRelationship atomsRel={snapshot.AtomsRelationship} />;
81+
const renderAtomsRelationship = () => (
82+
<AtomsRelationship atomsRel={snapshot.AtomsRelationship} />
83+
);
7284

7385
// the hierarchy gets set on the first click in the page
7486
// when the page is refreshed we may not have a hierarchy, so we need to check if hierarchy was initialized
@@ -80,17 +92,20 @@ const StateRoute = (props: StateRouteProps) => {
8092
return <div className="noState">{NO_STATE_MSG}</div>;
8193
};
8294

83-
const perfChart = (
84-
<PerfView
85-
viewIndex={viewIndex}
86-
snapshots={snapshots}
87-
setNoRenderData={setNoRenderData}
88-
width={600}
89-
height={1000}
90-
/>
91-
);
92-
93-
const renderPerfView = () => <ErrorHandler>{perfChart}</ErrorHandler>;
95+
const renderPerfView = () => {
96+
if (hierarchy) {
97+
return (
98+
<PerfView
99+
viewIndex={viewIndex}
100+
snapshots={snapshots}
101+
setNoRenderData={setNoRenderData}
102+
width={600}
103+
height={1000}
104+
/>
105+
);
106+
}
107+
return <div className="noState">{NO_STATE_MSG}</div>;
108+
};
94109

95110
return (
96111
<Router>
@@ -114,12 +129,15 @@ const StateRoute = (props: StateRouteProps) => {
114129
Map
115130
</NavLink>
116131

117-
{isRecoil
118-
&& (
119-
<NavLink className="router-link" activeClassName="is-active" to="/relationship">
120-
Relationships
121-
</NavLink>
122-
)}
132+
{isRecoil && (
133+
<NavLink
134+
className="router-link"
135+
activeClassName="is-active"
136+
to="/relationship"
137+
>
138+
Relationships
139+
</NavLink>
140+
)}
123141

124142
<NavLink
125143
className="router-link"

0 commit comments

Comments
 (0)