Skip to content

Commit 36d64a6

Browse files
garrettlchowgarrettlchow
authored
Merge pull request #22 from oslabs-beta/feature/garrett
Feature/garrett
2 parents 0efea9b + 0019d3f commit 36d64a6

File tree

17 files changed

+383
-440
lines changed

17 files changed

+383
-440
lines changed

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

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,13 @@ import { useDispatch, useSelector } from 'react-redux';
33
import { Group } from '@visx/group';
44
import { hierarchy, Tree } from '@visx/hierarchy';
55
import { LinearGradient } from '@visx/gradient';
6-
import { pointRadial } from 'd3-shape';
76
import LinkControls from './axLinkControls';
87
import getLinkComponent from './getAxLinkComponents';
98
import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
109
import ToolTipDataDisplay from './ToolTipDataDisplay';
1110
import { ToolTipStyles } from '../../../FrontendTypes';
1211
import { localPoint } from '@visx/event';
13-
import AxLegend from './axLegend';
14-
import { renderAxLegend } from '../../../slices/AxSlices/axLegendSlice';
15-
import type { RootState } from '../../../store';
12+
import { toggleExpanded, setCurrentTabInApp } from '../../../slices/mainSlice';
1613

1714
const defaultMargin = {
1815
top: 30,
@@ -76,7 +73,7 @@ export default function AxTree(props) {
7673
};
7774

7875
const [orientation, setOrientation] = useState('horizontal');
79-
const [linkType, setLinkType] = useState('diagonal');
76+
const [linkType, setLinkType] = useState('step');
8077
const [stepPercent, setStepPercent] = useState(0.0);
8178

8279
const innerWidth: number = totalWidth - margin.left - margin.right;
@@ -147,7 +144,6 @@ export default function AxTree(props) {
147144
populateNodeAxArr(rootAxNode);
148145

149146
// Conditionally render ax legend component (RTK)
150-
const { axLegendButtonClicked } = useSelector((state: RootState) => state.axLegend);
151147
const dispatch = useDispatch();
152148

153149
return totalWidth < 10 ? null : (
@@ -161,10 +157,6 @@ export default function AxTree(props) {
161157
setLinkType={setLinkType}
162158
setStepPercent={setStepPercent}
163159
/>
164-
165-
<button id='axLegendButton' onClick={() => dispatch(renderAxLegend())}>
166-
Generate Ax Tree Legend
167-
</button>
168160
</div>
169161

170162
<svg ref={containerRef} width={totalWidth + 0.2 * totalWidth} height={totalHeight}>
@@ -197,7 +189,6 @@ export default function AxTree(props) {
197189
fill='none'
198190
/>
199191
))}
200-
// code relating to each node in tree
201192
{tree.descendants().map((node, key) => {
202193
const widthFunc = (name): number => {
203194
// returns a number that is related to the length of the name. Used for determining the node width.
@@ -284,7 +275,7 @@ export default function AxTree(props) {
284275
}
285276
}
286277
} else {
287-
aspect = Math.max(aspect, 0.2);
278+
aspect = Math.max(aspect, 0.5);
288279
}
289280
const handleMouseAndClickOver = (event): void => {
290281
const coords = localPoint(event.target.ownerSVGElement, event);
@@ -303,17 +294,16 @@ export default function AxTree(props) {
303294
<Group top={top} left={left} key={key} className='rect'>
304295
{node.depth === 0 && (
305296
<rect
306-
className={node.children ? 'compMapParent' : 'compMapChild'}
297+
className={'compMapRoot'}
307298
height={height}
308299
width={width}
309300
y={-height / 2}
310301
x={-width / 2}
311-
fill="url('#parent-gradient')"
312302
strokeWidth={1.5}
313303
strokeOpacity='1'
314-
rx={node.children ? 4 : 10}
304+
rx={8}
315305
onClick={() => {
316-
node.data.isExpanded = !node.data.isExpanded;
306+
dispatch(toggleExpanded(node.data));
317307
hideTooltip();
318308
}}
319309
/>
@@ -325,12 +315,11 @@ export default function AxTree(props) {
325315
width={width}
326316
y={-height / 2}
327317
x={-width / 2}
328-
fill="url('#parent-gradient')"
329318
strokeWidth={1.5}
330319
strokeOpacity='1'
331-
rx={node.children ? 4 : 10}
320+
rx={8}
332321
onClick={() => {
333-
node.data.isExpanded = !node.data.isExpanded;
322+
dispatch(toggleExpanded(node.data));
334323
hideTooltip();
335324
}}
336325
// Mouse Enter Rect (Component Node) -----------------------------------------------------------------------
@@ -424,8 +413,6 @@ export default function AxTree(props) {
424413
</div>
425414
</TooltipInPortal>
426415
)}
427-
428-
<div>{axLegendButtonClicked ? <AxLegend /> : ''}</div>
429416
</div>
430417
);
431418
}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ const colors = {
1818
base07: '#e7e9db',
1919
base08: '#ef6155',
2020
base09: '#824508', //base09 is orange for booleans and numbers. This base in particular fails to match the entered color.
21-
// base09: '#592bad', // alternative purple
2221
base0A: '#fec418',
2322
base0B: '#48b685',
2423
base0C: '#5bc4bf',

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

Lines changed: 0 additions & 25 deletions
This file was deleted.

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

Lines changed: 38 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,46 @@
11
import React from 'react';
22

3-
const controlStyles = { fontSize: 10 };
4-
5-
type Props = {
6-
orientation: string;
7-
linkType: string;
8-
stepPercent: number;
9-
setOrientation: (orientation: string) => void;
10-
setLinkType: (linkType: string) => void;
11-
setStepPercent: (percent: number) => void;
12-
};
13-
14-
export default function LinkControls({
3+
const AxLinkControls = ({
154
orientation,
165
linkType,
176
stepPercent,
187
setOrientation,
198
setLinkType,
209
setStepPercent,
21-
}: Props) {
10+
}) => {
2211
return (
23-
<div style={controlStyles}>
24-
&nbsp;&nbsp;
25-
<label>orientation:</label>&nbsp;
26-
<select
27-
onClick={(e) => e.stopPropagation()}
28-
onChange={(e) => setOrientation(e.target.value)}
29-
value={orientation}
30-
>
31-
<option value='vertical'>vertical</option>
32-
<option value='horizontal'>horizontal</option>
33-
</select>
34-
&nbsp;&nbsp;
35-
<label>link:</label>&nbsp;
36-
<select
37-
onClick={(e) => e.stopPropagation()}
38-
onChange={(e) => setLinkType(e.target.value)}
39-
value={linkType}
40-
>
41-
<option value='diagonal'>diagonal</option>
42-
<option value='step'>step</option>
43-
<option value='curve'>curve</option>
44-
<option value='line'>line</option>
45-
</select>
12+
<div className='link-controls'>
13+
<div className='control-group'>
14+
<label className='control-label'>Orientation:</label>
15+
<select
16+
className='control-select'
17+
onClick={(e) => e.stopPropagation()}
18+
onChange={(e) => setOrientation(e.target.value)}
19+
value={orientation}
20+
>
21+
<option value='vertical'>vertical</option>
22+
<option value='horizontal'>horizontal</option>
23+
</select>
24+
</div>
25+
26+
<div className='control-group'>
27+
<label className='control-label'>Link:</label>
28+
<select
29+
className='control-select'
30+
onClick={(e) => e.stopPropagation()}
31+
onChange={(e) => setLinkType(e.target.value)}
32+
value={linkType}
33+
>
34+
<option value='diagonal'>diagonal</option>
35+
<option value='step'>step</option>
36+
<option value='curve'>curve</option>
37+
<option value='line'>line</option>
38+
</select>
39+
</div>
40+
4641
{linkType === 'step' && (
47-
<>
48-
&nbsp;&nbsp;
49-
<label>step:</label>&nbsp;
42+
<div className='control-group'>
43+
<label className='control-label'>step:</label>
5044
<input
5145
onClick={(e) => e.stopPropagation()}
5246
type='range'
@@ -56,9 +50,12 @@ export default function LinkControls({
5650
onChange={(e) => setStepPercent(Number(e.target.value))}
5751
value={stepPercent}
5852
disabled={linkType !== 'step'}
53+
className='control-range'
5954
/>
60-
</>
55+
</div>
6156
)}
6257
</div>
6358
);
64-
}
59+
};
60+
61+
export default AxLinkControls;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -276,7 +276,7 @@ export default function ComponentMap({
276276
separation={(a, b) => (a.parent === b.parent ? 0.5 : 0.5) / a.depth}
277277
>
278278
{(tree) => (
279-
<Group top={origin.y + 35} left={origin.x + 50 / aspect}>
279+
<Group top={origin.y + 35} left={origin.x + 50}>
280280
{tree.links().map((link, i) => {
281281
const linkName = link.source.data.name;
282282
const propsObj = link.source.data.componentData.props;

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,12 +38,15 @@ const ToolTipDataDisplay = ({ data }) => {
3838
};
3939

4040
const formatReducerData = (reducerStates) => {
41-
// Check if reducerStates exists and is an array
42-
if (!Array.isArray(reducerStates)) {
41+
// Check if reducerStates exists and is an object
42+
if (!reducerStates || typeof reducerStates !== 'object') {
4343
return {};
4444
}
4545

46-
return reducerStates.reduce((acc, reducer) => {
46+
// Handle both array and object formats
47+
const statesArray = Array.isArray(reducerStates) ? reducerStates : Object.values(reducerStates);
48+
49+
return statesArray.reduce((acc, reducer) => {
4750
// Add additional type checking for reducer object
4851
if (reducer && typeof reducer === 'object') {
4952
acc[reducer.hookName || 'Reducer'] = reducer.state;
@@ -67,9 +70,11 @@ const ToolTipDataDisplay = ({ data }) => {
6770
if (isReducer && parsedContent) {
6871
// Only try to format if we have valid content
6972
const formattedData = formatReducerData(parsedContent);
73+
console.log('formatted data', formattedData);
7074

7175
// Check if we have any formatted data to display
7276
if (Object.keys(formattedData).length === 0) {
77+
console.log('formatted data length', Object.keys(formattedData).length);
7378
return null;
7479
}
7580

0 commit comments

Comments
 (0)