Skip to content

Commit 0f97009

Browse files
kev-ngokev-ngo
authored
Merge pull request #3 from oslabs-beta/staging
2 parents 2c1d0dc + c698086 commit 0f97009

File tree

12 files changed

+1171
-512
lines changed

12 files changed

+1171
-512
lines changed

‎src/app/actions/actions.ts

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
11
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
22
import * as types from '../constants/actionTypes';
33

4-
export const toggleMode = mode => ({
4+
export const save = (tabsObj) => ({
5+
type: types.SAVE,
6+
payload: tabsObj,
7+
});
8+
9+
export const toggleMode = (mode) => ({
510
type: types.TOGGLE_MODE,
611
payload: mode,
712
});
813

9-
export const addNewSnapshots = tabsObj => ({
14+
export const addNewSnapshots = (tabsObj) => ({
1015
type: types.NEW_SNAPSHOTS,
1116
payload: tabsObj,
1217
});
1318

14-
export const initialConnect = tabsObj => ({
19+
export const initialConnect = (tabsObj) => ({
1520
type: types.INITIAL_CONNECT,
1621
payload: tabsObj,
1722
});
1823

19-
export const setPort = port => ({
24+
export const setPort = (port) => ({
2025
type: types.SET_PORT,
2126
payload: port,
2227
});
@@ -25,12 +30,12 @@ export const emptySnapshots = () => ({
2530
type: types.EMPTY,
2631
});
2732

28-
export const changeView = index => ({
33+
export const changeView = (index) => ({
2934
type: types.CHANGE_VIEW,
3035
payload: index,
3136
});
3237

33-
export const changeSlider = index => ({
38+
export const changeSlider = (index) => ({
3439
type: types.CHANGE_SLIDER,
3540
payload: index,
3641
});
@@ -54,22 +59,22 @@ export const pause = () => ({
5459
type: types.PAUSE,
5560
});
5661

57-
export const startPlaying = intervalId => ({
62+
export const startPlaying = (intervalId) => ({
5863
type: types.PLAY,
5964
payload: intervalId,
6065
});
6166

62-
export const importSnapshots = newSnaps => ({
67+
export const importSnapshots = (newSnaps) => ({
6368
type: types.IMPORT,
6469
payload: newSnaps,
6570
});
6671

67-
export const setTab = tab => ({
72+
export const setTab = (tab) => ({
6873
type: types.SET_TAB,
6974
payload: tab,
7075
});
7176

72-
export const deleteTab = tab => ({
77+
export const deleteTab = (tab) => ({
7378
type: types.DELETE_TAB,
7479
payload: tab,
7580
});
@@ -79,12 +84,12 @@ export const resetSlider = () => ({
7984
});
8085

8186
export const onHover = (rtid) => ({
82-
type: types.ON_HOVER,
87+
type: types.ON_HOVER,
8388
//the payload should be something to relate the component we're hovering and highlight that component on the DOM
84-
payload: rtid
85-
})
89+
payload: rtid,
90+
});
8691

8792
export const onHoverExit = (rtid) => ({
8893
type: types.ON_HOVER_EXIT,
89-
payload: rtid
90-
})
94+
payload: rtid,
95+
});

‎src/app/components/BarGraph.tsx

Lines changed: 53 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,19 @@ import { Text } from '@visx/text';
1111
import { schemeSet3 } from 'd3-scale-chromatic';
1212
import snapshots from './snapshots';
1313
import { onHover, onHoverExit } from '../actions/actions';
14-
import { useStoreContext } from '../store'
14+
import { useStoreContext } from '../store';
1515

1616
/* TYPESCRIPT */
1717
interface data {
1818
snapshotId?: string;
1919
}
2020

21-
interface margin { top: number; right: number; bottom: number; left: number };
21+
interface margin {
22+
top: number;
23+
right: number;
24+
bottom: number;
25+
left: number;
26+
}
2227

2328
interface snapshot {
2429
snapshotId?: string;
@@ -50,14 +55,19 @@ const tooltipStyles = {
5055
color: 'white',
5156
fontSize: '14px',
5257
lineHeight: '18px',
53-
fontFamily: 'Roboto'
58+
fontFamily: 'Roboto',
5459
};
5560

5661
const BarGraph = (props) => {
5762
const [{ tabs, currentTab }, dispatch] = useStoreContext();
5863
const { width, height, data } = props;
5964
const {
60-
tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip,
65+
tooltipOpen,
66+
tooltipLeft,
67+
tooltipTop,
68+
tooltipData,
69+
hideTooltip,
70+
showTooltip,
6171
} = useTooltip<TooltipData>();
6272
let tooltipTimeout: number;
6373
const { containerRef, TooltipInPortal } = useTooltipInPortal();
@@ -91,7 +101,7 @@ const BarGraph = (props) => {
91101
snapshotIdScale.rangeRound([0, xMax]);
92102
renderingScale.range([yMax, 0]);
93103
return (
94-
<div>
104+
<div>
95105
<svg ref={containerRef} width={width} height={height}>
96106
{}
97107
<rect
@@ -122,9 +132,9 @@ const BarGraph = (props) => {
122132
yScale={renderingScale}
123133
color={colorScale}
124134
>
125-
{barStacks =>
126-
barStacks.map(barStack =>
127-
barStack.bars.map(((bar, idx) => {
135+
{(barStacks) =>
136+
barStacks.map((barStack) =>
137+
barStack.bars.map((bar, idx) => {
128138
// hides new components if components don't exist in previous snapshots
129139
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
130140
bar.height = 0;
@@ -140,14 +150,16 @@ const BarGraph = (props) => {
140150
/* TIP TOOL EVENT HANDLERS */
141151
// Hides tool tip once cursor moves off the current rect
142152
onMouseLeave={() => {
143-
dispatch(onHoverExit(data.componentData[bar.key].rtid),
144-
tooltipTimeout = window.setTimeout(() => {
145-
hideTooltip()
146-
}, 300))
153+
dispatch(
154+
onHoverExit(data.componentData[bar.key].rtid),
155+
(tooltipTimeout = window.setTimeout(() => {
156+
hideTooltip();
157+
}, 300))
158+
);
147159
}}
148160
// Cursor position in window updates position of the tool tip
149-
onMouseMove={event => {
150-
dispatch(onHover(data.componentData[bar.key].rtid))
161+
onMouseMove={(event) => {
162+
dispatch(onHover(data.componentData[bar.key].rtid));
151163
if (tooltipTimeout) clearTimeout(tooltipTimeout);
152164
const top = event.clientY - margin.top - bar.height;
153165
const left = bar.x + bar.width / 2;
@@ -158,8 +170,10 @@ const BarGraph = (props) => {
158170
});
159171
}}
160172
/>
161-
)})))
162-
}
173+
);
174+
})
175+
)
176+
}
163177
</BarStack>
164178
</Group>
165179
<AxisLeft
@@ -189,8 +203,20 @@ const BarGraph = (props) => {
189203
textAnchor: 'middle',
190204
})}
191205
/>
192-
<Text x={-xMax / 2} y="15" transform="rotate(-90)" fontSize={12} fill="#FFFFFF"> Rendering Time (ms) </Text>
193-
<Text x={xMax / 2} y={yMax + 65} fontSize={12} fill="#FFFFFF"> Snapshot Id </Text>
206+
<Text
207+
x={-xMax / 2}
208+
y="15"
209+
transform="rotate(-90)"
210+
fontSize={12}
211+
fill="#FFFFFF"
212+
>
213+
{' '}
214+
Rendering Time (ms){' '}
215+
</Text>
216+
<Text x={xMax / 2} y={yMax + 65} fontSize={12} fill="#FFFFFF">
217+
{' '}
218+
Snapshot Id{' '}
219+
</Text>
194220
</svg>
195221
{/* FOR HOVER OVER DISPLAY */}
196222
{tooltipOpen && tooltipData && (
@@ -201,23 +227,21 @@ const BarGraph = (props) => {
201227
style={tooltipStyles}
202228
>
203229
<div style={{ color: colorScale(tooltipData.key) }}>
204-
{' '}
205-
<strong>{tooltipData.key}</strong>
206-
{' '}
207-
</div>
208-
<div>{data.componentData[tooltipData.key].stateType}</div>
209-
<div>
210-
{' '}
211-
{formatRenderTime(tooltipData.bar.data[tooltipData.key])}
212230
{' '}
231+
<strong>{tooltipData.key}</strong>{' '}
213232
</div>
233+
<div>{data.componentData[tooltipData.key].stateType}</div>
234+
<div> {formatRenderTime(tooltipData.bar.data[tooltipData.key])} </div>
214235
<div>
215236
{' '}
216-
<small>{formatSnapshotId(getSnapshotId(tooltipData.bar.data))}</small>
237+
<small>
238+
{formatSnapshotId(getSnapshotId(tooltipData.bar.data))}
239+
</small>
217240
</div>
218241
</TooltipInPortal>
219242
)}
220243
</div>
221-
)};
244+
);
245+
};
222246

223-
export default BarGraph;
247+
export default BarGraph;

0 commit comments

Comments
 (0)