Skip to content

Commit ea17dd4

Browse files
ay7991ay7991
authored
Merge pull request #22 from oslabs-beta/jesse/enableAxTreeButtons
Enable/Disable AxTree
2 parents f1c9f4c + b0e0ca5 commit ea17dd4

File tree

9 files changed

+339
-170
lines changed

9 files changed

+339
-170
lines changed

‎src/app/FrontendTypes.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -384,3 +384,16 @@ export interface Snapshots {
384384
export interface ErrorContainerProps {
385385
port: chrome.runtime.Port | null;
386386
}
387+
388+
export interface AxContainer {
389+
axSnapshots: [];
390+
snapshot: {
391+
name?: string;
392+
componentData?: object;
393+
state?: string | object;
394+
stateSnaphot?: object;
395+
children?: any[];
396+
};
397+
snapshots: [];
398+
currLocation: object;
399+
}

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

Lines changed: 52 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -57,91 +57,97 @@ interface TreeNode {
5757

5858
const data: TreeNode = {
5959
name: {
60-
sources: [{attribute: 'aria-labelledby', type: 'relatedElement'}],
61-
type: "computedString",
62-
value: "Reactime MVP"
60+
sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
61+
type: 'computedString',
62+
value: 'Reactime MVP',
6363
},
6464
backendDOMNodeId: 1,
6565
childIds: ['46'],
6666
ignored: false,
67-
children: [{
67+
children: [
68+
{
6869
name: {
69-
sources: [{attribute: 'aria-labelledby', type: 'relatedElement'}],
70-
type: "computedString",
71-
value: ""
70+
sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
71+
type: 'computedString',
72+
value: '',
7273
},
7374
backendDOMNodeId: 7,
7475
childIds: ['47'],
7576
ignored: true,
76-
}, {
77+
},
78+
{
7779
name: {
78-
sources: [{attribute: 'aria-labelledby', type: 'relatedElement'}],
79-
type: "computedString",
80-
value: "Tic-Tac-Toe"
80+
sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
81+
type: 'computedString',
82+
value: 'Tic-Tac-Toe',
8183
},
8284
backendDOMNodeId: 8,
8385
childIds: ['48'],
8486
ignored: false,
85-
}],
87+
},
88+
],
8689
};
8790

8891
const nodeAxArr = [
8992
{
9093
name: {
91-
sources: [{attribute: 'aria-labelledby', type: 'relatedElement'}],
92-
type: "computedString",
93-
value: "Reactime MVP"
94+
sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
95+
type: 'computedString',
96+
value: 'Reactime MVP',
9497
},
9598
backendDOMNodeId: 1,
9699
childIds: ['46'],
97100
ignored: false,
98-
children: [{
101+
children: [
102+
{
99103
name: {
100-
sources: [{attribute: 'aria-labelledby', type: 'relatedElement'}],
101-
type: "computedString",
102-
value: ""
104+
sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
105+
type: 'computedString',
106+
value: '',
103107
},
104108
backendDOMNodeId: 7,
105109
childIds: ['47'],
106110
ignored: true,
107-
}, {
111+
},
112+
{
108113
name: {
109-
sources: [{attribute: 'aria-labelledby', type: 'relatedElement'}],
110-
type: "computedString",
111-
value: "Tic-Tac-Toe"
114+
sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
115+
type: 'computedString',
116+
value: 'Tic-Tac-Toe',
112117
},
113118
backendDOMNodeId: 8,
114119
childIds: ['48'],
115120
ignored: false,
116-
}],
121+
},
122+
],
117123
},
118124
{
119125
name: {
120-
sources: [{attribute: 'aria-labelledby', type: 'relatedElement'}],
121-
type: "computedString",
122-
value: ""
126+
sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
127+
type: 'computedString',
128+
value: '',
123129
},
124130
backendDOMNodeId: 7,
125131
childIds: ['47'],
126132
ignored: true,
127133
},
128134
{
129135
name: {
130-
sources: [{attribute: 'aria-labelledby', type: 'relatedElement'}],
131-
type: "computedString",
132-
value: "Tic-Tac-Toe"
136+
sources: [{ attribute: 'aria-labelledby', type: 'relatedElement' }],
137+
type: 'computedString',
138+
value: 'Tic-Tac-Toe',
133139
},
134140
backendDOMNodeId: 8,
135141
childIds: ['48'],
136142
ignored: false,
137-
}
138-
]
143+
},
144+
];
139145

140-
const defaultMargin = {
146+
const defaultMargin = {
141147
top: 30,
142148
left: 30,
143149
right: 55,
144-
bottom: 70,
150+
bottom: 70,
145151
};
146152

147153
const nodeCoords: object = {};
@@ -158,18 +164,15 @@ export type LinkTypesProps = {
158164
};
159165

160166
export default function AxTree(props) {
161-
const {
162-
currLocation,
163-
axSnapshots,
164-
width,
165-
height
166-
} = props;
167+
const { currLocation, axSnapshots, width, height } = props;
168+
169+
167170

168171
let margin = defaultMargin;
169172
let totalWidth = width;
170173
let totalHeight = height;
171174

172-
175+
if (axSnapshots[currLocation.index] === 'emptyAxSnap') return;
173176

174177
const toolTipTimeoutID = useRef(null); //useRef stores stateful data that’s not needed for rendering.
175178
const {
@@ -180,7 +183,7 @@ export default function AxTree(props) {
180183
showTooltip, // function to set tooltip state
181184
hideTooltip, // function to close a tooltip
182185
} = useTooltip(); // returns an object with several properties that you can use to manage the tooltip state of your component
183-
console.log('tool tip data: ', tooltipData);
186+
184187
// let nameVal = JSON.stringify(tooltipData)
185188
// console.log('nameVal', nameVal);
186189
const {
@@ -243,12 +246,9 @@ export default function AxTree(props) {
243246
}
244247
}
245248

246-
console.log('size width height ax: ', sizeWidth, sizeHeight);
247-
248249
const LinkComponent = getLinkComponent({ layout, linkType, orientation });
249250

250251
const currAxSnapshot = JSON.parse(JSON.stringify(axSnapshots[currLocation.index]));
251-
console.log('currAxSnapshot: ', currAxSnapshot);
252252

253253
// root node of currAxSnapshot
254254
const rootAxNode = JSON.parse(JSON.stringify(currAxSnapshot[0]));
@@ -259,7 +259,7 @@ export default function AxTree(props) {
259259
// currNode.children = [];
260260
// // checks if there is more than 1 child
261261
// if (currNode.childIds.length > 1) {
262-
// for (let m = 0; m < currNode.childIds.length; m++) {
262+
// for (let m = 0; m < currNode.childIds.length; m++) {
263263
// for (let j = 0; j < currAxSnapshot.length; j++) {
264264
// if (currNode.childIds.includes(currAxSnapshot[j].nodeId)) {
265265
// currNode.children.push(currAxSnapshot[j]);
@@ -280,22 +280,19 @@ export default function AxTree(props) {
280280
// organizeAxTree([rootAxNode], currAxSnapshot);
281281
const organizeAxTree = (currNode, currAxSnapshot) => {
282282
if (currNode.childIds && currNode.childIds.length > 0) {
283-
currNode.children = [];
283+
currNode.children = [];
284284
for (let j = 0; j < currAxSnapshot.length; j++) {
285285
for (const childEle of currNode.childIds) {
286286
if (childEle === currAxSnapshot[j].nodeId) {
287287
currNode.children.push(currAxSnapshot[j]);
288288
organizeAxTree(currAxSnapshot[j], currAxSnapshot);
289289
}
290290
}
291-
292291
}
293292
}
294-
}
293+
};
295294

296295
organizeAxTree(rootAxNode, currAxSnapshot);
297-
298-
console.log('rootAxNode: ', rootAxNode);
299296

300297
// store each individual node, now with children property in nodeAxArr
301298
// need to consider order, iterate through the children property first?
@@ -316,7 +313,6 @@ export default function AxTree(props) {
316313
};
317314

318315
populateNodeAxArr(rootAxNode);
319-
console.log('nodeAxArr: ', nodeAxArr);
320316

321317
// ax Legend
322318
const { axLegendButtonClicked } = useSelector((state: RootState) => state.axLegend);
@@ -345,7 +341,7 @@ export default function AxTree(props) {
345341
<svg ref={containerRef} width={totalWidth + 0.2*totalWidth} height={totalHeight}>
346342
<LinearGradient id='root-gradient' from='#488689' to='#3c6e71' />
347343
<LinearGradient id='parent-gradient' from='#488689' to='#3c6e71' />
348-
<rect
344+
<rect
349345
className='componentMapContainer'
350346
width={sizeWidth / aspect}
351347
height={sizeHeight / aspect + 0}
@@ -366,12 +362,11 @@ export default function AxTree(props) {
366362
key={i}
367363
data={link}
368364
percent={stepPercent}
369-
stroke="rgb(254,110,158,0.6)"
370-
strokeWidth="1"
371-
fill="none"
365+
stroke='rgb(254,110,158,0.6)'
366+
strokeWidth='1'
367+
fill='none'
372368
/>
373369
))}
374-
375370
// code relating to each node in tree
376371
{tree.descendants().map((node, key) => {
377372
const widthFunc = (name): number => {
@@ -469,7 +464,6 @@ export default function AxTree(props) {
469464
const handleMouseAndClickOver = (event): void => {
470465
const coords = localPoint(event.target.ownerSVGElement, event);
471466
const tooltipObj = { ...node.data };
472-
console.log("tooltipobj: ", tooltipObj);
473467

474468
showTooltip({
475469
tooltipLeft: coords.x,
@@ -623,4 +617,3 @@ export default function AxTree(props) {
623617
</div>
624618
);
625619
}
626-

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from "react";
2+
import { ParentSize } from '@visx/responsive';
3+
import AxTree from "./Ax";
4+
import { AxContainer } from "../../../FrontendTypes";
5+
6+
// Container to hold AxTree. AxTree is conditionally rendered based on the state of the setter function "showTree" in StateRoute
7+
8+
const AxContainer = (props: AxContainer) => {
9+
const {
10+
axSnapshots, // from 'tabs[currentTab]' object in 'MainContainer'
11+
snapshot, // from 'tabs[currentTab]' object in 'MainContainer'
12+
snapshots, // from 'tabs[currentTab].snapshotDisplay' object in 'MainContainer'
13+
currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
14+
} = props;
15+
16+
return (
17+
<div style={{height: '90vh'}}>
18+
<ParentSize className='componentMapContainer'>
19+
{({ width, height }) => {
20+
// eslint-disable-next-line react/prop-types
21+
const maxHeight: number = 1200;
22+
const h = Math.min(height, maxHeight);
23+
console.log('h: ', h);
24+
console.log('width', width)
25+
return (
26+
<AxTree
27+
axSnapshots={axSnapshots}
28+
snapshot={snapshot}
29+
snapshots={snapshots}
30+
currLocation={currLocation}
31+
width={width}
32+
height={h}
33+
/>
34+
);
35+
}}
36+
</ParentSize>
37+
</div>
38+
)
39+
}
40+
41+
export default AxContainer;

0 commit comments

Comments
 (0)