Skip to content

Commit b2e1af4

Browse files
demircanerdemircaner
authored
Merge pull request #11 from kev-ngo/coli-branch
Clean up UI
2 parents 839b56d + ec96ed2 commit b2e1af4

File tree

7 files changed

+348
-360
lines changed

7 files changed

+348
-360
lines changed

‎src/app/components/BarGraph.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,6 @@ const BarGraph = (props) => {
142142
if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
143143
bar.height = 0;
144144
}
145-
console.log('bar in BarGraph.tsx', bar);
146145
return (
147146
<rect
148147
key={`bar-stack-${barStack.id}-${bar.id}`}
@@ -214,12 +213,10 @@ const BarGraph = (props) => {
214213
fontSize={12}
215214
fill="#FFFFFF"
216215
>
217-
{' '}
218-
Rendering Time (ms){' '}
216+
Rendering Time (ms)
219217
</Text>
220218
<Text x={xMax / 2} y={yMax + 65} fontSize={12} fill="#FFFFFF">
221-
{' '}
222-
Snapshot Id{' '}
219+
Snapshot Id
223220
</Text>
224221
</svg>
225222
{/* FOR HOVER OVER DISPLAY */}

‎src/app/components/BarGraphComparison.tsx

Lines changed: 30 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ 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';
2223
/* TYPESCRIPT */
2324
interface data {
2425
snapshotId?: string;
@@ -71,31 +72,18 @@ const tooltipStyles = {
7172
const BarGraphComparison = (props) => {
7273
const [{ tabs, currentTab }, dispatch] = useStoreContext();
7374
const { width, height, data, comparison } = props;
74-
7575
const [series, setSeries] = React.useState(0);
7676
const [open, setOpen] = React.useState(false);
7777
const [maxRender, setMaxRender] = React.useState(data.maxTotalRender);
7878

79-
// console.log('comparison >>>', comparison);
80-
// console.log('tabs[currentTab] >>>', tabs[currentTab]);
81-
// console.log('props in comparison graph >>>', props);
82-
// console.log('data >>>>>', data);
83-
// change scale of graph based on clicking of forward and backwards buttons effect
84-
// useEffect(() => {
85-
// console.log('setSeries is changing everytime currentIndex changes');
86-
// //change the state with setChangeSeries
87-
// setSeries(tabs[currentTab].sliderIndex);
88-
// }, [tabs[currentTab].sliderIndex]);
89-
90-
// console.log('tabs in Bargraphs comparison >>', tabs);
9179
function titleFilter(comparisonArray) {
9280
return comparisonArray.filter(
9381
(elem) => elem.title === tabs[currentTab].title
9482
);
9583
}
96-
// console.log('tabs in BGComp >>>', tabs);
84+
9785
const currentIndex = tabs[currentTab].sliderIndex;
98-
// console.log('sliderIndx outside of bargraph >>>', currentIndex);
86+
9987
const {
10088
tooltipOpen,
10189
tooltipLeft,
@@ -116,16 +104,15 @@ const BarGraphComparison = (props) => {
116104
const formatRenderTime = (time) => `${time} ms `;
117105

118106
// create visualization SCALES with cleaned data
107+
//the domain array elements will place the bars along the x-axis
119108
const snapshotIdScale = scaleBand<string>({
120-
// domain: getSnapshotId(data.barStack[currentIndex]),
121-
// domain: [currentTab, comparison[series].currentTab],
122109
domain: [
123110
`Current Tab Series`,
124111
`Series ${!comparison[series] ? null : series + 1}`,
125112
],
126113
padding: 0.2,
127114
});
128-
115+
// calculateMax
129116
const calculateMaxTotalRender = (series) => {
130117
const currentSeriesBarStacks = !comparison[series]
131118
? []
@@ -150,28 +137,23 @@ const BarGraphComparison = (props) => {
150137
range: schemeSet3,
151138
});
152139

153-
// console.log('rendering scale invocation', renderingScale);
154140
// setting max dimensions and scale ranges
155141
const xMax = width - margin.left - margin.right;
156-
const yMax = height - margin.top - 150;
142+
const yMax = height - margin.top - 200;
157143
snapshotIdScale.rangeRound([0, xMax]);
158144
renderingScale.range([yMax, 0]);
159145

160-
// const filterSeries = (comparisonArray) => {
161-
// return comparisonArray.map((sessionName, idx) => {
162-
// return <MenuItem>{sessionName}</MenuItem>;
163-
// });
164-
// };
165146
// Dropdown to select series.
166147
const useStyles = makeStyles((theme) => ({
167148
formControl: {
168149
margin: theme.spacing(1),
169150
minWidth: 80,
170-
// padding: '0.5rem',
171151
height: 30,
172152
},
173153
select: {
174154
minWidth: 80,
155+
fontSize: '.75rem',
156+
fontWeight: '200',
175157
border: '1px solid grey',
176158
borderRadius: 4,
177159
color: 'grey',
@@ -183,9 +165,6 @@ const BarGraphComparison = (props) => {
183165

184166
const handleChange = (event) => {
185167
setSeries(event.target.value);
186-
// console.log('handleCh renderTime', renderTime);
187-
// // setMaxRender(renderTime);
188-
// console.log('maxRender', maxRender);
189168
};
190169

191170
const handleClose = () => {
@@ -196,34 +175,20 @@ const BarGraphComparison = (props) => {
196175
setOpen(true);
197176
};
198177

199-
//this function creates a dropdown selection for each series of snapshots saved
200-
// const filterSeries = (comparisonArray) => {
201-
// return comparisonArray.map((sessionName, idx) => {
202-
// return <MenuItem>{sessionName}</MenuItem>;
203-
// });
204-
// };
178+
const toStorage = {
179+
currentTab,
180+
title: tabs[currentTab]['title'],
181+
data,
182+
};
205183

206184
return (
207185
<div>
208-
{/* <h1>{`Current Snapshot: ${currentIndex + 1}`}</h1> */}
209-
{/* <div class="dropdown dropdown-dark">
210-
<select name="two" class="dropdown-select">
211-
{!comparison[series] ? (
212-
<option value={series}>No series available</option>
213-
) : (
214-
titleFilter(comparison).map((tabElem, index) => {
215-
return <option value={index}>{`Series ${index + 1}`}</option>;
216-
})
217-
)}
218-
</select>
219-
</div> */}
220186
<div className="series-options-container">
221-
<div className="snapshotId-container">
222-
<h1 className="snashotId-header">
223-
{' '}
224-
Snapshot ID: {currentIndex + 1}{' '}
225-
</h1>
187+
<div className="snapshotId-header">
188+
{' '}
189+
Snapshot ID: {currentIndex + 1}{' '}
226190
</div>
191+
227192
<div className="dropdown-and-save-series-container">
228193
<FormControl variant="outlined" className={classes.formControl}>
229194
<Select
@@ -235,8 +200,6 @@ const BarGraphComparison = (props) => {
235200
onClose={handleClose}
236201
onOpen={handleOpen}
237202
value={series}
238-
//data={data.barStack}
239-
// value={titleFilter(comparison)}
240203
onChange={handleChange}
241204
>
242205
{!comparison[series] ? (
@@ -250,8 +213,16 @@ const BarGraphComparison = (props) => {
250213
)}
251214
</Select>
252215
</FormControl>
216+
217+
<button
218+
className="save-series-button"
219+
onClick={() => dispatch(save(toStorage))}
220+
>
221+
Save Series
222+
</button>
253223
</div>
254224
</div>
225+
255226
<svg ref={containerRef} width={width} height={height}>
256227
{}
257228
<rect
@@ -276,27 +247,21 @@ const BarGraphComparison = (props) => {
276247
<Group top={margin.top} left={margin.left}>
277248
<BarStack
278249
// OG Barstack
279-
// data={!comparison ? [] : comparison}
280250
data={data.barStack}
281251
keys={keys}
282-
// x={getSnapshotId}
283252
x={getSnapshotId}
284253
xScale={snapshotIdScale}
285254
yScale={renderingScale}
286255
color={colorScale}
287256
>
288257
{(barStacks) =>
289258
barStacks.map((barStack, idx) => {
290-
console.log('maxTotalRender 1st Barstack', data.maxTotalRender);
291259
const bar = barStack.bars[currentIndex];
292-
// console.log('Y SCALEEE', barStacks);
293-
// console.log('data.barStack >>>', data.barStack);
294-
console.log('OG bar.x', bar.x);
295260

296261
return (
297262
<rect
298263
key={`bar-stack-${idx}-NewView`}
299-
x={bar.x + 50}
264+
x={bar.x + 30}
300265
y={bar.y}
301266
height={bar.height === 0 ? null : bar.height}
302267
width={bar.width}
@@ -331,10 +296,8 @@ const BarGraphComparison = (props) => {
331296
<BarStack
332297
// Comparison Barstack
333298
data={!comparison[series] ? [] : comparison[series].data.barStack}
334-
// data={data.barStack}
335299
keys={keys}
336300
x={getSnapshotId}
337-
// x={getSeriesId}
338301
xScale={snapshotIdScale}
339302
yScale={renderingScale}
340303
color={colorScale}
@@ -344,13 +307,12 @@ const BarGraphComparison = (props) => {
344307
if (!barStack.bars[currentIndex]) {
345308
return <h1>No Comparison</h1>;
346309
}
347-
// console.log('barStacks in Comparison', barStacks);
348310
const bar = barStack.bars[currentIndex];
349-
console.log('Comparison bar.x', bar.x);
311+
350312
return (
351313
<rect
352314
key={`bar-stack-${idx}-${bar.index}`}
353-
x={275}
315+
x={225}
354316
y={bar.y}
355317
height={bar.height === 0 ? null : bar.height}
356318
width={bar.width}
@@ -417,12 +379,10 @@ const BarGraphComparison = (props) => {
417379
fontSize={12}
418380
fill="#FFFFFF"
419381
>
420-
{' '}
421-
Rendering Time (ms){' '}
382+
Rendering Time (ms)
422383
</Text>
423384
<Text x={xMax / 2} y={yMax + 65} fontSize={12} fill="#FFFFFF">
424-
{' '}
425-
Series ID{' '}
385+
Series ID
426386
</Text>
427387
</svg>
428388
{/* FOR HOVER OVER DISPLAY */}

‎src/app/components/ComponentMap.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,6 @@ export default function ComponentMap({
198198
const tooltipObj = Object.assign({}, node.data);
199199
if (typeof tooltipObj.state === 'object')
200200
tooltipObj.state = 'stateful';
201-
console.log('tooltipObj', tooltipObj);
202201
showTooltip({
203202
tooltipLeft: coords.x,
204203
tooltipTop: coords.y,

0 commit comments

Comments
 (0)