Skip to content

Commit 957db15

Browse files
C-STYRC-STYR
authored
Merge pull request #20 from DennisLpz/webmetric_feature
Merging Sidebar Animation and Webmetric feature
2 parents cdb5f88 + a7cab73 commit 957db15

File tree

13 files changed

+313
-180
lines changed

13 files changed

+313
-180
lines changed

‎src/app/actions/actions.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ export const save = (tabsObj) => ({
55
type: types.SAVE,
66
payload: tabsObj,
77
});
8-
8+
export const deleteSeries = () =>({
9+
type: types.DELETE_SERIES,
10+
})
911
export const toggleMode = (mode) => ({
1012
type: types.TOGGLE_MODE,
1113
payload: mode,

‎src/app/components/BarGraph.tsx

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,12 @@ const BarGraph = (props) => {
104104
snapshotIdScale.rangeRound([0, xMax]);
105105
renderingScale.range([yMax, 0]);
106106

107-
const toStorage = {
107+
const toStorage = {
108108
currentTab,
109109
title: tabs[currentTab]['title'],
110110
data,
111-
};
112-
111+
};
112+
113113
const animateButton = function (e) {
114114
e.preventDefault;
115115
e.target.classList.add('animate');
@@ -126,11 +126,12 @@ const BarGraph = (props) => {
126126
return (
127127
<div>
128128
<button
129-
className='save-series-button'
130-
onClick={(e) => {
131-
dispatch(save(toStorage))
132-
}}>
133-
Save Series
129+
className='save-series-button'
130+
onClick={(e) => {
131+
dispatch(save(toStorage));
132+
}}
133+
>
134+
Save Series
134135
</button>
135136
<svg ref={containerRef} width={width} height={height}>
136137
{}
@@ -165,6 +166,8 @@ const BarGraph = (props) => {
165166
{(barStacks) =>
166167
barStacks.map((barStack) =>
167168
barStack.bars.map((bar, idx) => {
169+
console.log('barstacks >>>', barStack);
170+
console.log('bars >>>', bar);
168171
// hides new components if components don't exist in previous snapshots
169172
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
170173
bar.height = 0;
@@ -205,8 +208,6 @@ const BarGraph = (props) => {
205208
)
206209
}
207210
</BarStack>
208-
209-
210211
</Group>
211212
<AxisLeft
212213
top={margin.top}

‎src/app/components/BarGraphComparison.tsx

Lines changed: 31 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @ts-nocheck
2-
import React, { useEffect } from 'react';
2+
import React, { useEffect, useForceUpdate } from 'react';
33
import { BarStack } from '@visx/shape';
44
import { SeriesPoint } from '@visx/shape/lib/types';
55
import { Group } from '@visx/group';
@@ -19,7 +19,8 @@ import FormHelperText from '@material-ui/core/FormHelperText';
1919
import snapshots from './snapshots';
2020
import { onHover, onHoverExit } from '../actions/actions';
2121
import { useStoreContext } from '../store';
22-
// import { save } from '../actions/actions';
22+
import { deleteSeries } from '../actions/actions';
23+
2324
/* TYPESCRIPT */
2425
interface data {
2526
snapshotId?: string;
@@ -192,6 +193,19 @@ const BarGraphComparison = (props) => {
192193
});
193194
return data.barStack;
194195
}
196+
const animateButton = function (e) {
197+
e.preventDefault;
198+
e.target.classList.add('animate');
199+
e.target.innerHTML = 'Deleted!';
200+
setTimeout(function () {
201+
e.target.innerHTML = 'Clear Series';
202+
e.target.classList.remove('animate');
203+
}, 1000);
204+
};
205+
const classname = document.getElementsByClassName('delete-button');
206+
for (let i = 0; i < classname.length; i++) {
207+
classname[i].addEventListener('click', animateButton, false);
208+
}
195209
//console.log('set x on current bar', setXpointsCurrentTab());
196210
return (
197211
<div>
@@ -201,7 +215,15 @@ const BarGraphComparison = (props) => {
201215
Snapshot ID: {currentIndex + 1}{' '}
202216
</div>
203217

204-
<div className='dropdown-and-save-series-container'>
218+
<div className='dropdown-and-delete-series-container'>
219+
<button
220+
className='delete-button'
221+
onClick={(e) => {
222+
dispatch(deleteSeries());
223+
}}
224+
>
225+
Clear All Series
226+
</button>
205227
<FormControl variant='outlined' className={classes.formControl}>
206228
<Select
207229
style={{ color: 'white' }}
@@ -262,6 +284,9 @@ const BarGraphComparison = (props) => {
262284
{(barStacks) =>
263285
barStacks.map((barStack, idx) => {
264286
const bar = barStack.bars[currentIndex];
287+
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
288+
bar.height = 0;
289+
}
265290
return (
266291
<rect
267292
key={`bar-stack-${idx}-NewView`}
@@ -312,6 +337,9 @@ const BarGraphComparison = (props) => {
312337
return <h1>No Comparison</h1>;
313338
}
314339
const bar = barStack.bars[currentIndex];
340+
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
341+
bar.height = 0;
342+
}
315343
return (
316344
<rect
317345
key={`bar-stack-${idx}-${bar.index}`}

‎src/app/components/StateRoute.tsx

Lines changed: 33 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import Legend from './AtomsRelationshipLegend';
2222
import AtomsRelationship from './AtomsRelationship';
2323
import WebMetrics from './WebMetrics';
2424

25-
2625
const History = require('./History').default;
2726
const ErrorHandler = require('./ErrorHandler').default;
2827

@@ -39,7 +38,6 @@ export interface StateRouteProps {
3938
children?: any[];
4039
atomsComponents?: any;
4140
atomSelectors?: any;
42-
4341
};
4442
hierarchy: any;
4543
snapshots: [];
@@ -52,14 +50,15 @@ const StateRoute = (props: StateRouteProps) => {
5250
const [{ tabs, currentTab }, dispatch] = useStoreContext();
5351
const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
5452
const isRecoil = snapshot.atomsComponents ? true : false;
53+
5554
const [noRenderData, setNoRenderData] = useState(false);
5655
// component map zoom state
5756
const [{ x, y, k }, setZoomState]: any = useState({
5857
x: 150,
5958
y: 250,
6059
k: 1,
6160
});
62-
61+
console.log('webMetrics in StateRoute Props >>>>', webMetrics);
6362
// Map
6463
const renderComponentMap = () => {
6564
if (hierarchy) {
@@ -71,7 +70,7 @@ const StateRoute = (props: StateRouteProps) => {
7170
</ParentSize>
7271
);
7372
}
74-
return <div className="noState">{NO_STATE_MSG}</div>;
73+
return <div className='noState'>{NO_STATE_MSG}</div>;
7574
};
7675

7776
// the hierarchy gets set upon the first click on the page
@@ -90,7 +89,7 @@ const StateRoute = (props: StateRouteProps) => {
9089
/>
9190
);
9291
}
93-
return <div className="noState">{NO_STATE_MSG}</div>;
92+
return <div className='noState'>{NO_STATE_MSG}</div>;
9493
};
9594

9695
const renderAtomsRelationship = () => (
@@ -114,8 +113,7 @@ const StateRoute = (props: StateRouteProps) => {
114113
if (hierarchy) {
115114
return <Tree snapshot={snapshot} />;
116115
}
117-
return <div className="noState">{NO_STATE_MSG}</div>;
118-
116+
return <div className='noState'>{NO_STATE_MSG}</div>;
119117
};
120118
const renderWebMetrics = () => {
121119
let LCPColor, FIDColor, CLSColor, FCPColor, TTFBColor;
@@ -145,7 +143,7 @@ const StateRoute = (props: StateRouteProps) => {
145143
<WebMetrics color={FCPColor} series={(webMetrics.FCP / 1000) * 100} formatted={(val) => ((val / 100) * 1000).toFixed(2) + ' ms'} label="FCP"/>
146144
<WebMetrics color={TTFBColor} series={(webMetrics.TTFB / 10) * 100} formatted={(val) => ((val / 100) * 10).toFixed(2) + ' ms'} label="TTFB"/>
147145
</div>
148-
)
146+
);
149147
};
150148

151149
const renderPerfView = () => {
@@ -165,62 +163,61 @@ const StateRoute = (props: StateRouteProps) => {
165163
</ParentSize>
166164
);
167165
}
168-
return <div className="noState">{NO_STATE_MSG}</div>;
166+
return <div className='noState'>{NO_STATE_MSG}</div>;
169167
};
170168

171169
return (
172170
<Router>
173-
<div className="navbar">
174-
<NavLink className="router-link"
175-
activeClassName="is-active"
176-
exact to="/">
171+
<div className='navbar'>
172+
<NavLink
173+
className='router-link'
174+
activeClassName='is-active'
175+
exact
176+
to='/'
177+
>
177178
Map
178179
</NavLink>
179180
<NavLink
180-
className="router-link"
181-
activeClassName="is-active"
182-
to="/performance"
181+
className='router-link'
182+
activeClassName='is-active'
183+
to='/performance'
183184
>
184185
Performance
185186
</NavLink>
186187
<NavLink
187-
className="router-link"
188-
activeClassName="is-active"
189-
to="/history"
188+
className='router-link'
189+
activeClassName='is-active'
190+
to='/history'
190191
>
191192
History
192193
</NavLink>
193194
<NavLink
194-
className="router-link"
195-
activeClassName="is-active"
196-
to="/webMetrics"
195+
className='router-link'
196+
activeClassName='is-active'
197+
to='/webMetrics'
197198
>
198199
Web Metrics
199200
</NavLink>
200-
<NavLink
201-
className="router-link"
202-
activeClassName="is-active"
203-
to="/tree"
204-
>
201+
<NavLink className='router-link' activeClassName='is-active' to='/tree'>
205202
Tree
206203
</NavLink>
207204
{isRecoil && (
208205
<NavLink
209-
className="router-link"
210-
activeClassName="is-active"
211-
to="/relationship"
206+
className='router-link'
207+
activeClassName='is-active'
208+
to='/relationship'
212209
>
213210
AtomsRecoil
214211
</NavLink>
215212
)}
216213
</div>
217214
<Switch>
218-
<Route path="/performance" render={renderPerfView} />
219-
<Route path="/history" render={renderHistory} />
220-
<Route path="/relationship" render={renderAtomsRelationship} />
221-
<Route path="/webMetrics" render={renderWebMetrics} />
222-
<Route path="/tree" render={renderTree} />
223-
<Route path="/" render={renderComponentMap} />
215+
<Route path='/performance' render={renderPerfView} />
216+
<Route path='/history' render={renderHistory} />
217+
<Route path='/relationship' render={renderAtomsRelationship} />
218+
<Route path='/webMetrics' render={renderWebMetrics} />
219+
<Route path='/tree' render={renderTree} />
220+
<Route path='/' render={renderComponentMap} />
224221
</Switch>
225222
</Router>
226223
);

‎src/app/constants/actionTypes.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,4 @@ export const SLIDER_ZERO = 'SLIDER_ZERO';
1616
export const ON_HOVER = 'ON_HOVER';
1717
export const ON_HOVER_EXIT = 'ON_HOVER_EXIT';
1818
export const SAVE = 'SAVE';
19+
export const DELETE_SERIES = 'DELETE_SERIES';

‎src/app/containers/ActionContainer.tsx

Lines changed: 35 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import SwitchAppDropdown from '../components/SwitchApp';
66

77
import { emptySnapshots, changeView, changeSlider } from '../actions/actions';
88
import { useStoreContext } from '../store';
9+
import { useEffect } from 'react';
910

1011
const resetSlider = () => {
1112
const slider = document.querySelector('.rc-slider-handle');
@@ -17,10 +18,9 @@ const resetSlider = () => {
1718
function ActionContainer(props) {
1819
const [{ tabs, currentTab }, dispatch] = useStoreContext();
1920
const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
21+
const { toggleActionContainer, actionView, setActionView } = props;
2022
let actionsArr = [];
2123
const hierarchyArr: any[] = [];
22-
const { timeTravel } = props;
23-
// React.useEffect(() => { console.log("component updated"); }, [timeTravel]);
2424

2525
// function to traverse state from hiararchy and also getting information on display name and component name
2626
const displayArray = (obj: {
@@ -113,38 +113,41 @@ function ActionContainer(props) {
113113
);
114114
}
115115
);
116+
useEffect(() => {
117+
setActionView(true);
118+
}, []);
116119

117-
if (!timeTravel) {
118-
return (
119-
//returns an empty div when timeTravel is false
120-
121-
<div></div>
122-
)
123-
}
124-
else {
125-
// this is not logging; the prop is not being udpdated or the component is not being re-rendered.
126-
return (
127-
<div className="action-container">
128-
<SwitchAppDropdown />
129-
<div className="action-component exclude">
130-
<button
131-
className="empty-button"
132-
onClick={() => {
133-
dispatch(emptySnapshots());
134-
// set slider back to zero
135-
resetSlider();
136-
}}
137-
type="button"
138-
>
139-
Empty
140-
</button>
141-
</div>
142-
<div>{actionsArr}</div>
120+
// this is not logging; the prop is not being udpdated or the component is not being re-rendered.
121+
return (
122+
<div id='action-id' className='action-container'>
123+
<div id='arrow'>
124+
<aside className='aside'>
125+
<a onClick={toggleActionContainer} className='toggle'>
126+
<i></i>
127+
</a>
128+
</aside>
143129
</div>
144-
);
145-
146-
}
147-
130+
{actionView ? (
131+
<div>
132+
<SwitchAppDropdown />
133+
<div className='action-component exclude'>
134+
<button
135+
className='empty-button'
136+
onClick={() => {
137+
dispatch(emptySnapshots());
138+
// set slider back to zero
139+
resetSlider();
140+
}}
141+
type='button'
142+
>
143+
Empty
144+
</button>
145+
</div>
146+
<div>{actionsArr}</div>
147+
</div>
148+
) : null}
149+
</div>
150+
);
148151
}
149152

150153
export default ActionContainer;

0 commit comments

Comments
 (0)