Skip to content

Commit e044280

Browse files
evaSUryevaSUry
committed
Merge branch 'develop' into eva/debugging
2 parents daf99c3 + fce58c6 commit e044280

File tree

3 files changed

+95
-71
lines changed

3 files changed

+95
-71
lines changed

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

Lines changed: 77 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Group } from '@visx/group';
33
import { hierarchy, Tree } from '@visx/hierarchy';
44
import { LinearGradient } from '@visx/gradient';
55
import { pointRadial } from 'd3-shape';
6+
import { useTooltipInPortal } from '@visx/tooltip';
67
import LinkControls from './axLinkControls';
78
import getLinkComponent from './getAxLinkComponents';
89
import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip';
@@ -81,7 +82,7 @@ const data: TreeNode = {
8182
}],
8283
};
8384

84-
const dataArray = [
85+
const nodeAxArr = [
8586
{
8687
name: {
8788
sources: [{attribute: 'aria-labelledby', type: 'relatedElement'}],
@@ -153,11 +154,18 @@ export type LinkTypesProps = {
153154
margin?: { top: number; right: number; bottom: number; left: number };
154155
};
155156

156-
export default function AxTree(props, {
157-
width: totalWidth,
158-
height: totalHeight,
159-
margin = defaultMargin,
160-
}: LinkTypesProps) {
157+
export default function AxTree(props) {
158+
const {
159+
currLocation,
160+
axSnapshots,
161+
width,
162+
height
163+
} = props;
164+
165+
let margin = defaultMargin;
166+
let totalWidth = width;
167+
let totalHeight = height;
168+
161169

162170

163171
const toolTipTimeoutID = useRef(null); //useRef stores stateful data that’s not needed for rendering.
@@ -207,8 +215,6 @@ export default function AxTree(props, {
207215
const [linkType, setLinkType] = useState('diagonal');
208216
const [stepPercent, setStepPercent] = useState(0.5);
209217

210-
console.log('total height access: ', totalHeight);
211-
212218
const innerWidth: number = totalWidth - margin.left - margin.right;
213219
const innerHeight: number = totalHeight - margin.top - margin.bottom - 60;
214220

@@ -234,74 +240,64 @@ export default function AxTree(props, {
234240
}
235241
}
236242

237-
const LinkComponent = getLinkComponent({ layout, linkType, orientation });
243+
console.log('size width height ax: ', sizeWidth, sizeHeight);
238244

239-
const {
240-
currLocation,
241-
axSnapshots
242-
} = props;
245+
const LinkComponent = getLinkComponent({ layout, linkType, orientation });
243246

244247
const currAxSnapshot = JSON.parse(JSON.stringify(axSnapshots[currLocation.index]));
248+
console.log('currAxSnapshot: ', currAxSnapshot);
245249

246250
// root node of currAxSnapshot
247251
const rootAxNode = JSON.parse(JSON.stringify(currAxSnapshot[0]));
248252

249253
// // array that holds the ax tree as a nested object and the root node initially
250254
const nodeAxArr = [];
251255

252-
// const organizeAxTree = (currNode, currAxSnapshot) => {
253-
// for (let i = 0; i < currNode.length; i++) {
254-
// if (currNode.childIds.length > 0) {
255-
// currNode.children = [];
256-
256+
// currNode.children = [];
257+
// // checks if there is more than 1 child
258+
// if (currNode.childIds.length > 1) {
259+
// for (let m = 0; m < currNode.childIds.length; m++) {
260+
// for (let j = 0; j < currAxSnapshot.length; j++) {
261+
// if (currNode.childIds.includes(currAxSnapshot[j].nodeId)) {
262+
// currNode.children.push(currAxSnapshot[j]);
263+
// }
264+
// }
265+
// }
266+
// } else if (currNode.childIds.length === 1) {
257267
// for (let j = 0; j < currAxSnapshot.length; j++) {
258-
259268
// if (currNode.childIds.includes(currAxSnapshot[j].nodeId)) {
260269
// currNode.children.push(currAxSnapshot[j]);
261-
262-
// organizeAxTree(currNode.children, currAxSnapshot);
263270
// }
264271
// }
272+
// organizeAxTree(currNode.children[0], currAxSnapshot);
265273
// }
274+
// organizeAxTree(currNode.children, currAxSnapshot);
266275
// }
267-
// }
268-
269-
// organizeAxTree(nodeAxArr, currAxSnapshot);
270-
271-
272-
// attempted refactored organizeAxTree
273-
// const organizeAxTree2 = (currNode, currAxSnapshot) => {
274-
// console.log('currNode: ', currNode);
275-
// if (currNode.childIds.length > 0) {
276-
// currNode.children = [];
277-
// for (let j = 0; j < currAxSnapshot.length; j++) {
278-
// if (currNode.childIds.includes(currAxSnapshot[j].nodeId)) {
279-
// currNode.children.push(currAxSnapshot[j]);
280-
// organizeAxTree2(currNode.children, currAxSnapshot);
281-
// }
282-
// }
283-
// }
284-
// }
285-
// organizeAxTree2(rootAxNode, currAxSnapshot);
286276

277+
// organizeAxTree([rootAxNode], currAxSnapshot);
287278
const organizeAxTree = (currNode, currAxSnapshot) => {
288279
if (currNode.childIds && currNode.childIds.length > 0) {
289280
currNode.children = [];
290281
for (let j = 0; j < currAxSnapshot.length; j++) {
291-
if (currNode.childIds.includes(currAxSnapshot[j].nodeId)) {
292-
currNode.children.push(currAxSnapshot[j]);
293-
organizeAxTree(currAxSnapshot[j], currAxSnapshot);
282+
for (const childEle of currNode.childIds) {
283+
if (childEle === currAxSnapshot[j].nodeId) {
284+
currNode.children.push(currAxSnapshot[j]);
285+
organizeAxTree(currAxSnapshot[j], currAxSnapshot);
286+
}
294287
}
288+
295289
}
296290
}
297291
}
298292

299293
organizeAxTree(rootAxNode, currAxSnapshot);
300-
console.log('nestedAxTree: ', rootAxNode);
294+
295+
console.log('rootAxNode: ', rootAxNode);
301296

302297
// store each individual node, now with children property in nodeAxArr
303298
// need to consider order, iterate through the children property first?
304299
const populateNodeAxArr = (currNode) => {
300+
nodeAxArr.splice(0, nodeAxArr.length);
305301
nodeAxArr.push(currNode);
306302
for (let i = 0; i < nodeAxArr.length; i += 1) {
307303
// iterate through the nodeList that contains our snapshot
@@ -319,6 +315,14 @@ export default function AxTree(props, {
319315
populateNodeAxArr(rootAxNode);
320316
console.log('nodeAxArr: ', nodeAxArr);
321317

318+
const {
319+
containerRef // Access to the container's bounding box. This will be empty on first render.
320+
} = useTooltipInPortal({
321+
// Visx hook
322+
detectBounds: true, // use TooltipWithBounds
323+
scroll: true, // when tooltip containers are scrolled, this will correctly update the Tooltip position
324+
});
325+
322326
return totalWidth < 10 ? null : (
323327
<div>
324328
<LinkControls
@@ -331,14 +335,22 @@ export default function AxTree(props, {
331335
setLinkType={setLinkType}
332336
setStepPercent={setStepPercent}
333337
/>
334-
<svg width={totalWidth} height={totalHeight + 0}>
335-
<LinearGradient id="links-gradient" from="#fd9b93" to="#fe6e9e" />
336-
<rect width={totalWidth} height={totalHeight} rx={14} fill="#272b4d" onClick={() => {
338+
339+
{/* svg references purple background */}
340+
<svg ref={containerRef} width={totalWidth} height={totalHeight + 0}>
341+
<LinearGradient id='root-gradient' from='#488689' to='#3c6e71' />
342+
<LinearGradient id='parent-gradient' from='#488689' to='#3c6e71' />
343+
<rect
344+
className='componentMapContainer'
345+
width={sizeWidth / aspect}
346+
height={sizeHeight / aspect + 0}
347+
rx={14}
348+
onClick={() => {
337349
hideTooltip();
338350
}}/>
339-
<Group top={margin.top} left={margin.left}>
351+
<Group transform={`scale(${aspect})`} top={margin.top} left={margin.left}>
340352
<Tree
341-
root={hierarchy(data, (d) => (d.isExpanded ? null : d.children))}
353+
root={hierarchy(nodeAxArr[0], (d) => (d.isExpanded ? null : d.children))}
342354
size={[sizeWidth / aspect, sizeHeight / aspect]}
343355
separation={(a, b) => (a.parent === b.parent ? 0.5 : 0.5) / a.depth}
344356
>
@@ -349,21 +361,21 @@ export default function AxTree(props, {
349361
key={i}
350362
data={link}
351363
percent={stepPercent}
364+
stroke="rgb(254,110,158,0.6)"
352365
strokeWidth="1"
353366
fill="none"
354367
/>
355368
))}
356369

357370
// code relating to each node in tree
358371
{tree.descendants().map((node, key) => {
359-
console.log('node.data: ', node.data);
360372
const widthFunc = (name): number => {
361373
//returns a number that is related to the length of the name. Used for determining the node width.
362374
const nodeLength = name.length;
363375
//return nodeLength * 7 + 20; //uncomment this line if we want each node to be directly proportional to the name.length (instead of nodes of similar sizes to snap to the same width)
364-
if (nodeLength <= 5) return nodeLength + 50;
365-
if (nodeLength <= 10) return nodeLength + 120;
366-
return nodeLength + 140;
376+
if (nodeLength <= 5) return nodeLength + 60;
377+
if (nodeLength <= 10) return nodeLength + 130;
378+
return nodeLength + 160;
367379
};
368380

369381
const width: number = widthFunc(node.data.name.value); // the width is determined by the length of the node.name
@@ -384,14 +396,14 @@ export default function AxTree(props, {
384396
}
385397

386398
//setup a nodeCoords Object that will have keys of unique y coordinates and value arrays of all the left and right x coordinates of the nodes on that level
387-
count < dataArray.length
399+
count < nodeAxArr.length
388400
? !nodeCoords[top]
389401
? (nodeCoords[top] = [left - width / 2, left + width / 2])
390402
: nodeCoords[top].push(left - width / 2, left + width / 2)
391403
: null;
392404
count++;
393405

394-
if (count === dataArray.length) {
406+
if (count === nodeAxArr.length) {
395407
//check if there is still a tier of the node tree to collision check
396408
while (Object.values(nodeCoords)[nodeCoordTier]) {
397409
//check if there are atleast two nodes on the current tier
@@ -466,10 +478,16 @@ export default function AxTree(props, {
466478
return (
467479
<Group top={top} left={left} key={key} className='rect'>
468480
{node.depth === 0 && (
469-
<circle
470-
className='compMapRoot'
471-
r={25}
472-
fill="url('#root-gradient')"
481+
<rect
482+
className={node.children ? 'compMapParent' : 'compMapChild'}
483+
height={height}
484+
width={width}
485+
y={-height / 2}
486+
x={-width / 2}
487+
fill="url('#parent-gradient')"
488+
strokeWidth={1.5}
489+
strokeOpacity='1'
490+
rx={node.children ? 4 : 10}
473491
onClick={() => {
474492
node.data.isExpanded = !node.data.isExpanded;
475493
hideTooltip();

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,7 @@ export default function ComponentMap({
167167
};
168168

169169
collectNodes(currentSnapshot);
170+
170171
// @ts
171172
// find the node that has been selected and use it as the root
172173
let startNode = null;

‎src/extension/background.js‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const pruneAxTree = (axTree) => {
2727
ignoredReasons,
2828
parentId,
2929
properties,
30+
role
3031
} = node;
3132

3233
if(!name){
@@ -40,20 +41,23 @@ const pruneAxTree = (axTree) => {
4041
if(!name.value){
4142
name.value = 'visible node with no name';
4243
}
43-
const axNode = {
44-
backendDOMNodeId: backendDOMNodeId,
45-
childIds: childIds,
46-
ignored: ignored,
47-
name: name,
48-
nodeId: nodeId,
49-
ignoredReasons: ignoredReasons,
50-
parentId: parentId,
51-
properties: properties,
52-
};
5344

54-
axArr.push(axNode);
45+
if (role.type === 'role') {
46+
const axNode = {
47+
backendDOMNodeId: backendDOMNodeId,
48+
childIds: childIds,
49+
ignored: ignored,
50+
name: name,
51+
nodeId: nodeId,
52+
ignoredReasons: ignoredReasons,
53+
parentId: parentId,
54+
properties: properties,
55+
};
56+
57+
axArr.push(axNode);
58+
}
5559
}
56-
60+
console.log('axArr: ', axArr);
5761
return axArr;
5862
};
5963

@@ -474,6 +478,7 @@ chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
474478
await attachDebugger(tabId, '1.3');
475479
await sendDebuggerCommand(tabId, 'Accessibility.enable');
476480
const response = await sendDebuggerCommand(tabId, 'Accessibility.getFullAXTree');
481+
console.log('response: ', response);
477482
const addedAxSnap = addAxSnap(response.nodes);
478483
await detachDebugger(tabId);
479484
return addedAxSnap;

0 commit comments

Comments
 (0)