Skip to content

Commit d5183ba

Browse files
elliesimenselliesimens
authored
Merge pull request #10 from oslabs-beta/feature/ellie
fix: Feature/ellie
2 parents 2b0aec0 + dfa5eb6 commit d5183ba

File tree

12 files changed

+331
-144
lines changed

12 files changed

+331
-144
lines changed

‎src/app/FrontendTypes.ts

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -297,12 +297,10 @@ export interface StepsObj {
297297
}
298298

299299
export interface LinkControlProps {
300-
layout: string;
301300
orientation: string;
302301
linkType: string;
303302
stepPercent: number;
304303
selectedNode: string;
305-
setLayout: (layout: string) => void;
306304
setOrientation: (orientation: string) => void;
307305
setLinkType: (linkType: string) => void;
308306
setStepPercent: (percent: number) => void;
@@ -333,7 +331,6 @@ export interface Node {
333331
}
334332

335333
export interface LinkComponent {
336-
layout: string;
337334
linkType: string;
338335
orientation: string;
339336
}

‎src/app/components/StateRoute/AxMap/Ax.tsx

Lines changed: 17 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export default function AxTree(props) {
5252
showTooltip, // function to set tooltip state
5353
hideTooltip, // function to close a tooltip
5454
} = useTooltip(); // returns an object with several properties that you can use to manage the tooltip state of your component
55-
55+
5656
const {
5757
containerRef, // Access to the container's bounding box. This will be empty on first render.
5858
TooltipInPortal, // TooltipWithBounds in a Portal, outside of your component DOM tree
@@ -75,7 +75,6 @@ export default function AxTree(props) {
7575
pointerEvents: 'all !important',
7676
};
7777

78-
const [layout, setLayout] = useState('cartesian');
7978
const [orientation, setOrientation] = useState('horizontal');
8079
const [linkType, setLinkType] = useState('diagonal');
8180
const [stepPercent, setStepPercent] = useState(0.5);
@@ -87,32 +86,23 @@ export default function AxTree(props) {
8786
let sizeWidth: number;
8887
let sizeHeight: number;
8988

90-
if (layout === 'polar') {
91-
origin = {
92-
x: innerWidth / 2,
93-
y: innerHeight / 2,
94-
};
95-
sizeWidth = 2 * Math.PI;
96-
sizeHeight = Math.min(innerWidth, innerHeight) / 2;
89+
origin = { x: 0, y: 0 };
90+
if (orientation === 'vertical') {
91+
sizeWidth = innerWidth;
92+
sizeHeight = innerHeight;
9793
} else {
98-
origin = { x: 0, y: 0 };
99-
if (orientation === 'vertical') {
100-
sizeWidth = innerWidth;
101-
sizeHeight = innerHeight;
102-
} else {
103-
sizeWidth = innerHeight;
104-
sizeHeight = innerWidth;
105-
}
94+
sizeWidth = innerHeight;
95+
sizeHeight = innerWidth;
10696
}
10797

108-
const LinkComponent = getLinkComponent({ layout, linkType, orientation });
98+
const LinkComponent = getLinkComponent({ linkType, orientation });
10999

110100
const currAxSnapshot = JSON.parse(JSON.stringify(axSnapshots[currLocation.index]));
111101

112102
// root node of currAxSnapshot
113103
const rootAxNode = JSON.parse(JSON.stringify(currAxSnapshot[0]));
114104

115-
// array that holds each ax tree node with children property
105+
// array that holds each ax tree node with children property
116106
const nodeAxArr = [];
117107

118108
// populates ax nodes with children property; visx recognizes 'children' in order to properly render a nested tree
@@ -164,11 +154,9 @@ export default function AxTree(props) {
164154
<div>
165155
<div id='axControls'>
166156
<LinkControls
167-
layout={layout}
168157
orientation={orientation}
169158
linkType={linkType}
170159
stepPercent={stepPercent}
171-
setLayout={setLayout}
172160
setOrientation={setOrientation}
173161
setLinkType={setLinkType}
174162
setStepPercent={setStepPercent}
@@ -179,17 +167,18 @@ export default function AxTree(props) {
179167
</button>
180168
</div>
181169

182-
<svg ref={containerRef} width={totalWidth + 0.2*totalWidth} height={totalHeight}>
170+
<svg ref={containerRef} width={totalWidth + 0.2 * totalWidth} height={totalHeight}>
183171
<LinearGradient id='root-gradient' from='#488689' to='#3c6e71' />
184172
<LinearGradient id='parent-gradient' from='#488689' to='#3c6e71' />
185173
<rect
186174
className='componentMapContainer'
187175
width={sizeWidth / aspect}
188176
height={sizeHeight / aspect + 0}
189177
rx={14}
190-
onClick={() => {
178+
onClick={() => {
191179
hideTooltip();
192-
}}/>
180+
}}
181+
/>
193182
<Group transform={`scale(${aspect})`} top={margin.top} left={margin.left}>
194183
<Tree
195184
root={hierarchy(nodeAxArr[0], (d) => (d.isExpanded ? null : d.children))}
@@ -223,11 +212,7 @@ export default function AxTree(props) {
223212
let top: number;
224213
let left: number;
225214

226-
if (layout === 'polar') {
227-
const [radialX, radialY] = pointRadial(node.x, node.y);
228-
top = radialY;
229-
left = radialX;
230-
} else if (orientation === 'vertical') {
215+
if (orientation === 'vertical') {
231216
top = node.y;
232217
left = node.x;
233218
} else {
@@ -430,8 +415,8 @@ export default function AxTree(props) {
430415
<div>
431416
<div>
432417
{/*tooltipData['name'].value cannot be referred to using dot notation so using brackets here overrides typescript's strict data typing which was interfering with accessiccing this property */}
433-
<strong>{JSON.stringify(tooltipData['name'].value)}</strong>
434-
</div>
418+
<strong>{JSON.stringify(tooltipData['name'].value)}</strong>
419+
</div>
435420
<div>
436421
{/* Ax Node Info below names the tooltip title because of how its passed to the ToolTipDataDisplay container*/}
437422
<ToolTipDataDisplay containerName='Ax Node Info' dataObj={tooltipData} />
@@ -440,12 +425,7 @@ export default function AxTree(props) {
440425
</TooltipInPortal>
441426
)}
442427

443-
<div>
444-
{ axLegendButtonClicked ?
445-
<AxLegend /> : ''
446-
}
447-
</div>
448-
428+
<div>{axLegendButtonClicked ? <AxLegend /> : ''}</div>
449429
</div>
450430
);
451431
}

‎src/app/components/StateRoute/AxMap/axLinkControls.tsx

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,33 @@ import React from 'react';
33
const controlStyles = { fontSize: 10 };
44

55
type Props = {
6-
layout: string;
76
orientation: string;
87
linkType: string;
98
stepPercent: number;
10-
setLayout: (layout: string) => void;
119
setOrientation: (orientation: string) => void;
1210
setLinkType: (linkType: string) => void;
1311
setStepPercent: (percent: number) => void;
1412
};
1513

1614
export default function LinkControls({
17-
layout,
1815
orientation,
1916
linkType,
2017
stepPercent,
21-
setLayout,
2218
setOrientation,
2319
setLinkType,
2420
setStepPercent,
2521
}: Props) {
2622
return (
2723
<div style={controlStyles}>
28-
<label>layout:</label>&nbsp;
29-
<select
30-
onClick={(e) => e.stopPropagation()}
31-
onChange={(e) => setLayout(e.target.value)}
32-
value={layout}
33-
>
34-
<option value="cartesian">cartesian</option>
35-
<option value="polar">polar</option>
36-
</select>
3724
&nbsp;&nbsp;
3825
<label>orientation:</label>&nbsp;
3926
<select
4027
onClick={(e) => e.stopPropagation()}
4128
onChange={(e) => setOrientation(e.target.value)}
4229
value={orientation}
43-
disabled={layout === 'polar'}
4430
>
45-
<option value="vertical">vertical</option>
46-
<option value="horizontal">horizontal</option>
31+
<option value='vertical'>vertical</option>
32+
<option value='horizontal'>horizontal</option>
4733
</select>
4834
&nbsp;&nbsp;
4935
<label>link:</label>&nbsp;
@@ -52,24 +38,24 @@ export default function LinkControls({
5238
onChange={(e) => setLinkType(e.target.value)}
5339
value={linkType}
5440
>
55-
<option value="diagonal">diagonal</option>
56-
<option value="step">step</option>
57-
<option value="curve">curve</option>
58-
<option value="line">line</option>
41+
<option value='diagonal'>diagonal</option>
42+
<option value='step'>step</option>
43+
<option value='curve'>curve</option>
44+
<option value='line'>line</option>
5945
</select>
60-
{linkType === 'step' && layout !== 'polar' && (
46+
{linkType === 'step' && (
6147
<>
6248
&nbsp;&nbsp;
6349
<label>step:</label>&nbsp;
6450
<input
6551
onClick={(e) => e.stopPropagation()}
66-
type="range"
52+
type='range'
6753
min={0}
6854
max={1}
6955
step={0.1}
7056
onChange={(e) => setStepPercent(Number(e.target.value))}
7157
value={stepPercent}
72-
disabled={linkType !== 'step' || layout === 'polar'}
58+
disabled={linkType !== 'step'}
7359
/>
7460
</>
7561
)}

‎src/app/components/StateRoute/AxMap/getAxLinkComponents.tsx

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,27 +15,15 @@ import {
1515
} from '@visx/shape';
1616

1717
export default function getLinkComponent({
18-
layout,
1918
linkType,
2019
orientation,
2120
}: {
22-
layout: string;
2321
linkType: string;
2422
orientation: string;
2523
}) {
2624
let LinkComponent;
2725

28-
if (layout === 'polar') {
29-
if (linkType === 'step') {
30-
LinkComponent = LinkRadialStep;
31-
} else if (linkType === 'curve') {
32-
LinkComponent = LinkRadialCurve;
33-
} else if (linkType === 'line') {
34-
LinkComponent = LinkRadialLine;
35-
} else {
36-
LinkComponent = LinkRadial;
37-
}
38-
} else if (orientation === 'vertical') {
26+
if (orientation === 'vertical') {
3927
if (linkType === 'step') {
4028
LinkComponent = LinkVerticalStep;
4129
} else if (linkType === 'curve') {

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

Lines changed: 10 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@ export default function ComponentMap({
5757
margin = defaultMargin,
5858
currentSnapshot, // from 'tabs[currentTab].stateSnapshot object in 'MainContainer'
5959
}: LinkTypesProps): JSX.Element {
60-
const [layout, setLayout] = useState('cartesian'); // We create a local state "layout" and set it to a string 'cartesian'
6160
const [orientation, setOrientation] = useState('vertical'); // We create a local state "orientation" and set it to a string 'vertical'.
6261
const [linkType, setLinkType] = useState('diagonal'); // We create a local state "linkType" and set it to a string 'diagonal'.
6362
const [stepPercent, setStepPercent] = useState(0.5); // We create a local state "stepPercent" and set it to a number '0.5'. This will be used to scale the Map component's link: Step to 50%
@@ -80,33 +79,20 @@ export default function ComponentMap({
8079

8180
/*
8281
We begin setting the starting position for the root node on the maps display.
83-
The 'polar layout' sets the root node to the relative center of the display box based on the size of the browser window.
84-
The 'cartesian layout' (else conditional) sets the root nodes location either in the left middle *or top middle of the browser window relative to the size of the browser.
82+
The default view sets the root nodes location either in the left middle *or top middle of the browser window relative to the size of the browser.
8583
*/
8684

87-
if (layout === 'polar') {
88-
// 'polar layout' option
89-
origin = {
90-
x: innerWidth / 2,
91-
y: innerHeight / 2,
92-
};
9385

94-
// set the sizeWidth and sizeHeight
95-
sizeWidth = 2 * Math.PI;
96-
sizeHeight = Math.min(innerWidth, innerHeight) / 2;
86+
origin = { x: 0, y: 0 };
87+
if (orientation === 'vertical') {
88+
sizeWidth = innerWidth;
89+
sizeHeight = innerHeight;
9790
} else {
98-
// 'cartesian layout' option
99-
origin = { x: 0, y: 0 };
100-
if (orientation === 'vertical') {
101-
sizeWidth = innerWidth;
102-
sizeHeight = innerHeight;
103-
} else {
104-
// if the orientation isn't vertical, swap the width and the height
105-
sizeWidth = innerHeight;
106-
sizeHeight = innerWidth;
107-
}
91+
// if the orientation isn't vertical, swap the width and the height
92+
sizeWidth = innerHeight;
93+
sizeHeight = innerWidth;
10894
}
109-
95+
//}
11096
const {
11197
tooltipData, // value/data that tooltip may need to render
11298
tooltipLeft, // number used for tooltip positioning
@@ -268,20 +254,17 @@ export default function ComponentMap({
268254

269255
// controls for the map
270256
const LinkComponent: React.ComponentType<unknown> = getLinkComponent({
271-
layout,
272257
linkType,
273258
orientation,
274259
});
275260
return totalWidth < 10 ? null : (
276261
<div>
277262
<LinkControls
278-
layout={layout}
279263
orientation={orientation}
280264
linkType={linkType}
281265
stepPercent={stepPercent}
282266
snapShots={currentSnapshot}
283267
selectedNode={selectedNode}
284-
setLayout={setLayout}
285268
setOrientation={setOrientation}
286269
setLinkType={setLinkType}
287270
setStepPercent={setStepPercent}
@@ -374,11 +357,7 @@ export default function ComponentMap({
374357
let top: number;
375358
let left: number;
376359

377-
if (layout === 'polar') {
378-
const [radialX, radialY] = pointRadial(node.x, node.y);
379-
top = radialY;
380-
left = radialX;
381-
} else if (orientation === 'vertical') {
360+
if (orientation === 'vertical') {
382361
top = node.y;
383362
left = node.x;
384363
} else {

0 commit comments

Comments
 (0)