Skip to content

Commit c735179

Browse files
jrosengrantjrosengrant
committed
merging consolidated-colors from origin
2 parents a12a184 + 4bf6683 commit c735179

36 files changed

+807
-291
lines changed

‎src/app/FrontendTypes.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,7 @@ export interface HandleProps {
247247
}
248248

249249
export interface MainSliderProps {
250+
className: string;
250251
snapshotsLength: number;
251252
}
252253

@@ -309,13 +310,12 @@ export interface LinkControlProps {
309310
}
310311

311312
export interface ControlStyles {
312-
fontSize: string;
313+
//fontSize: string;
313314
padding: string;
314315
}
315316

316317
export interface DropDownStyle {
317318
margin: string;
318-
fontSize: string;
319319
fontFamily: string;
320320
borderRadius: string;
321321
borderStyle: string;

‎src/app/components/Action.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,9 @@ const Action = (props: ActionProps): JSX.Element => {
117117
>
118118
<div className='action-component-text'>
119119
<input
120+
className='actionname'
120121
key={`ActionInput${displayName}`}
121122
type='text'
122-
className='actionname'
123123
placeholder={`Snapshot: ${displayName}`}
124124
/>
125125
</div>

‎src/app/components/MainSlider.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ const handle = (props: HandleProps): JSX.Element => {
1212

1313
return (
1414
<Tooltip // Tooltip that pop's up when clicking/dragging the slider thumb/handle that displays the current snapshot index
15+
className='travel-tooltip'
1516
prefixCls='rc-slider-tooltip'
1617
overlay={value} // the currentIndex
1718
visible={dragging} // tooltip only visible when slider thumb is click and/or dragged
@@ -45,6 +46,8 @@ function MainSlider(props: MainSliderProps): JSX.Element {
4546

4647
return (
4748
<Slider
49+
className='travel-slider'
50+
color= '#0af548'
4851
min={0} // index of our first snapshot
4952
max={snapshotsLength - 1} // index of our last snapshot
5053
value={sliderIndex} // currently slider thumb position

‎src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,13 @@ import { toggleExpanded, setCurrentTabInApp } from '../../../slices/mainSlice';
2222
import { useDispatch } from 'react-redux';
2323
import { LinkTypesProps, DefaultMargin, ToolTipStyles } from '../../../FrontendTypes';
2424

25+
const linkStroke = '#F00008'; //#F00008 original
26+
const rootStroke = '#F00008'; //#F00008 original
27+
const nodeParentFill = '#161521'; //#161521 original
28+
const nodeChildFill = '#62d6fb'; //#62d6fb original
29+
const nodeParentStroke = '#F00008'; //#F00008 original
30+
const nodeChildStroke = '#4D4D4D'; //#4D4D4D original
31+
2532
const defaultMargin: DefaultMargin = {
2633
top: 30,
2734
left: 30,
@@ -191,15 +198,17 @@ export default function ComponentMap({
191198
/>
192199

193200
<svg ref={containerRef} width={totalWidth} height={totalHeight}>
194-
<LinearGradient id='links-gradient' from='#e75e62' to='#f00008' />
201+
{/* <LinearGradient id='root-gradient' from='#e75e62' to='#f00008' /> */}
202+
<LinearGradient id='root-gradient' from='#488689' to='#3c6e71' />
203+
<LinearGradient id='parent-gradient' from='#488689' to='#3c6e71' />
195204
<rect
205+
className='componentMapContainer'
196206
onClick={() => {
197207
hideTooltip();
198208
}}
199209
width={totalWidth}
200210
height={totalHeight}
201211
rx={14}
202-
fill='#242529'
203212
/>
204213
<Group top={margin.top} left={margin.left}>
205214
<Tree
@@ -211,10 +220,11 @@ export default function ComponentMap({
211220
<Group top={origin.y} left={origin.x}>
212221
{tree.links().map((link, i) => (
213222
<LinkComponent
223+
className='compMapLink'
214224
key={i}
215225
data={link}
216226
percent={stepPercent}
217-
stroke='#F00008'
227+
//stroke={linkStroke}
218228
strokeWidth='1'
219229
fill='none'
220230
/>
@@ -264,9 +274,10 @@ export default function ComponentMap({
264274
<Group top={top} left={left} key={key} className='rect'>
265275
{node.depth === 0 && (
266276
<circle
277+
className='compMapRoot'
267278
r={25} // increase from 12 to 25 to improve visibility
268-
fill="url('#links-gradient')"
269-
stroke='#F00008' // changing to red #F00008 to increase readability with sharper contrast
279+
fill="url('#root-gradient')"
280+
//stroke={rootStroke}
270281
onClick={() => {
271282
dispatch(toggleExpanded(node.data));
272283
hideTooltip();
@@ -278,16 +289,19 @@ export default function ComponentMap({
278289
and sets it relative position to other parent nodes of the same level. */}
279290
{node.depth !== 0 && (
280291
<rect
292+
className={node.children ? 'compMapParent' : 'compMapChild'}
281293
height={height}
282294
width={width}
283295
y={-height / 2}
284296
x={-width / 2}
285-
fill={node.children ? '#161521' : '#62d6fb'}
286-
stroke={
287-
node.data.isExpanded && node.data.children.length > 0
288-
? '#F00008'
289-
: '#4D4D4D'
290-
}
297+
fill="url('#parent-gradient')"
298+
//color={'#ff0000'}
299+
//fill={node.children ? nodeParentFill : nodeChildFill}
300+
//stroke={
301+
// node.data.isExpanded && node.data.children.length > 0
302+
// ? nodeParentStroke
303+
// : nodeChildStroke
304+
// }
291305
strokeWidth={1.5}
292306
strokeOpacity='1'
293307
rx={node.children ? 4 : 10}
@@ -333,12 +347,19 @@ export default function ComponentMap({
333347

334348
{/* Display text inside of each component node */}
335349
<text
350+
className={
351+
node.depth === 0
352+
? 'compMapRootText'
353+
: node.children
354+
? 'compMapParentText'
355+
: 'compMapChildText'
356+
}
336357
dy='.33em'
337-
fontSize={10}
358+
fontSize='20px'
338359
fontFamily='Roboto'
339360
textAnchor='middle'
340361
style={{ pointerEvents: 'none' }}
341-
fill={node.depth === 0 ? '#161521' : node.children ? 'white' : '#161521'}
362+
//fill={node.depth === 0 ? '#161521' : node.children ? 'white' : '#161521'}
342363
>
343364
{node.data.name}
344365
</text>

‎src/app/components/StateRoute/ComponentMap/LinkControls.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import React from 'react';
33
import { LinkControlProps, ControlStyles, DropDownStyle, Node } from '../../../FrontendTypes';
44
// Font size of the Controls label and Dropdowns
55
const controlStyles: ControlStyles = {
6-
fontSize: '16px',
6+
//fontSize: '16px',
77
padding: '10px',
88
};
99

1010
const dropDownStyle: DropDownStyle = {
1111
margin: '0.5em',
12-
fontSize: '16px',
12+
//fontSize: '16px',
1313
fontFamily: 'Roboto, sans-serif',
1414
borderRadius: '4px',
1515
borderStyle: 'solid',
@@ -49,13 +49,14 @@ export default function LinkControls({
4949
collectNodes(snapShots);
5050

5151
return (
52-
<div style={controlStyles}>
52+
<div className="comp-map-options" style={controlStyles}>
5353
{' '}
5454
{/* Controls for the layout selection */}
5555
<label>Layout:</label>
5656
&nbsp;{' '}
5757
{/* This is a non-breaking space - Prevents an automatic line break at this position */}
5858
<select
59+
className="comp-map-dropdown"
5960
onClick={(e) => e.stopPropagation()}
6061
onChange={(e) => setLayout(e.target.value)}
6162
// value={layout}

‎src/app/components/StateRoute/History.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,8 @@ function History(props: Record<string, unknown>): JSX.Element {
195195
.enter()
196196
.append('path')
197197
.attr('class', 'link')
198+
.attr('stroke', '#161617')
199+
.attr('fill', 'none')
198200
.attr(
199201
//defines the path attribute (d) for each link (edge) between nodes, using a Bézier curve (C) to connect the source node's coordinates (d.x, d.y) to the midpoint between the source and target nodes and then to the target node's coordinates (d.parent.x, d.parent.y)
200202
'd',
@@ -293,7 +295,7 @@ function History(props: Record<string, unknown>): JSX.Element {
293295
.append('circle')
294296
.attr('fill', (d) => {
295297
if (d.data.index === currLocation.index) {
296-
return 'red';
298+
return '#284b63';
297299
}
298300
return d.color ? d.color : '#555';
299301
})
@@ -303,6 +305,7 @@ function History(props: Record<string, unknown>): JSX.Element {
303305
.append('text')
304306
.attr('dy', '0.31em')
305307
.attr('text-anchor', 'middle')
308+
.attr('fill', 'white')
306309
.text((d) => `${d.data.name}.${d.data.branch}`)
307310
.clone(true)
308311
.lower()

‎src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,12 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
8989
nice: true,
9090
});
9191

92+
const LMcolorScale = ['#a0c1d6','#669bbc','#105377','#003049','#55a8ac','#3c6e71','#1c494b','#c1676d','#c1121f','#780000']
93+
9294
const colorScale = scaleOrdinal<string>({
9395
// Gives each bar on the graph a color using schemeSet1 imported from D3
9496
domain: keys,
95-
range: schemeSet1,
97+
range: LMcolorScale,
9698
});
9799

98100
// setting max dimensions and scale ranges
@@ -155,6 +157,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
155157
<form className='routesForm' id='routes-formcontrol'>
156158
<label id='routes-dropdown'>Select Route: </label>
157159
<select
160+
className='performance-dropdown'
158161
labelId='demo-simple-select-label'
159162
id='routes-select'
160163
onChange={(e) => {
@@ -185,7 +188,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
185188
</form>
186189
</div>
187190
<svg ref={containerRef} width={width} height={height}>
188-
<rect x={0} y={0} width={width} height={height} fill={background} rx={14} />
191+
<rect className='perf-rect' x={0} y={0} width={width} height={height} rx={14} />
189192
<Grid
190193
top={margin.top}
191194
left={margin.left}

‎src/app/components/Tutorial.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -365,7 +365,7 @@ export default class Tutorial extends Component<TutorialProps, TutorialState> {
365365
type='button'
366366
onClick={() => startIntro()}
367367
>
368-
<HelpOutlineIcon sx={{ pr: 1 }} /> Tutorial
368+
<HelpOutlineIcon className="button-icon" sx={{ pr: 1 }} /> Tutorial
369369
</Button>
370370
</>
371371
);

‎src/app/components/WebMetrics.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const radialGraph = (props) => {
4949
},
5050
},
5151
track: {
52-
background: '#fff',
52+
background: '#161617',
5353
strokeWidth: '3%',
5454
margin: 0, // margin is in pixels
5555
dropShadow: {
@@ -66,12 +66,12 @@ const radialGraph = (props) => {
6666
name: {
6767
offsetY: -10,
6868
show: true,
69-
color: '#fff',
69+
color: '#161617',
7070
fontSize: '24px',
7171
},
7272
value: {
7373
formatter: props.formatted,
74-
color: '#fff',
74+
color: '#3c6e71',
7575
fontSize: '16px',
7676
show: true,
7777
},

‎src/app/components/theme.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import { createTheme } from '@mui/material/styles';
22
const theme = createTheme({
3+
// typography: {
4+
// fontSize: 2,
5+
// },
36
palette: {
47
primary: {
5-
main: '#b2f7a1',
8+
main: '#3c6e71',
69
},
710
secondary: {
8-
main: '#BF6DD2',
11+
main: '#3c6e71',
912
},
1013
},
1114
components: {

0 commit comments

Comments
 (0)