Skip to content

Commit cbd339a

Browse files
jrosengrantjrosengrant
committed
merging dev with BJohn
2 parents 7330f9e + 79fa2e9 commit cbd339a

File tree

5 files changed

+103
-21
lines changed

5 files changed

+103
-21
lines changed

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

Lines changed: 93 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,13 @@ const defaultMargin: DefaultMargin = {
3636
bottom: 70,
3737
};
3838

39+
const nodeCoords: object = {};
40+
let count: number = 0;
41+
let aspect: number = 1;
42+
let nodeCoordTier = 0;
43+
let nodeOneLeft = 0;
44+
let nodeTwoLeft = 2;
45+
3946
export default function ComponentMap({
4047
// imported props to be used to display the dendrogram
4148
width: totalWidth,
@@ -206,18 +213,18 @@ export default function ComponentMap({
206213
onClick={() => {
207214
hideTooltip();
208215
}}
209-
width={totalWidth}
210-
height={totalHeight}
216+
width={sizeWidth / aspect}
217+
height={sizeHeight / aspect}
211218
rx={14}
212219
/>
213-
<Group top={margin.top} left={margin.left}>
220+
<Group transform={`scale(${aspect})`} top={margin.top} left={margin.left}>
214221
<Tree
215222
root={hierarchy(startNode, (d) => (d.isExpanded ? d.children : null))}
216-
size={[sizeWidth, sizeHeight]}
223+
size={[sizeWidth / aspect, sizeHeight / aspect]}
217224
separation={(a, b) => (a.parent === b.parent ? 1 : 0.5) / a.depth}
218225
>
219226
{(tree) => (
220-
<Group top={origin.y} left={origin.x}>
227+
<Group top={origin.y + 25} left={origin.x}>
221228
{tree.links().map((link, i) => (
222229
<LinkComponent
223230
className='compMapLink'
@@ -255,20 +262,88 @@ export default function ComponentMap({
255262
top = node.x;
256263
left = node.y;
257264
}
265+
//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
266+
count < nodeList.length
267+
? !nodeCoords[top]
268+
? (nodeCoords[top] = [left - width / 2, left + width / 2])
269+
: nodeCoords[top].push(left - width / 2, left + width / 2)
270+
: null;
271+
count++;
272+
273+
//check if the node coordinate object has been constructed
274+
if (count === nodeList.length) {
275+
//check if there is still a tier of the node tree to collision check
276+
while (Object.values(nodeCoords)[nodeCoordTier]) {
277+
//check if there are atleast two nodes on the current tier
278+
if (
279+
Object.values(nodeCoords)[nodeCoordTier][nodeOneLeft] &&
280+
Object.values(nodeCoords)[nodeCoordTier][nodeTwoLeft]
281+
) {
282+
//check if the left side of the righthand node is to the right of the right side of the lefthand node (i.e. collision)
283+
if (
284+
Object.values(nodeCoords)[nodeCoordTier][nodeTwoLeft] <
285+
Object.values(nodeCoords)[nodeCoordTier][nodeOneLeft + 1]
286+
) {
287+
//check if the visible percentage of the left hand node is less than the current lowest (this will be used to resize and rescale the map)
288+
if (
289+
Math.abs(
290+
Object.values(nodeCoords)[nodeCoordTier][nodeTwoLeft] -
291+
Object.values(nodeCoords)[nodeCoordTier][nodeOneLeft],
292+
) /
293+
Math.abs(
294+
Object.values(nodeCoords)[nodeCoordTier][nodeOneLeft + 1] -
295+
Object.values(nodeCoords)[nodeCoordTier][nodeOneLeft],
296+
) <
297+
aspect
298+
) {
299+
console.log(aspect);
300+
//assign a new lowest percentage if one is found
301+
aspect =
302+
Math.abs(
303+
Object.values(nodeCoords)[nodeCoordTier][nodeTwoLeft] -
304+
Object.values(nodeCoords)[nodeCoordTier][nodeOneLeft],
305+
) /
306+
Math.abs(
307+
Object.values(nodeCoords)[nodeCoordTier][nodeOneLeft + 1] -
308+
Object.values(nodeCoords)[nodeCoordTier][nodeOneLeft],
309+
);
310+
}
311+
//move the node pointers down the list after checking the current overlap percentage
312+
else {
313+
nodeOneLeft += 2;
314+
nodeTwoLeft += 2;
315+
}
316+
}
317+
//move the node pointers if no collision is found
318+
else {
319+
nodeOneLeft += 2;
320+
nodeTwoLeft += 2;
321+
}
322+
}
323+
//move to the next tier of the node tree if done checking the current one
324+
else {
325+
nodeOneLeft = 0;
326+
nodeTwoLeft = 2;
327+
nodeCoordTier++;
328+
}
329+
}
330+
} else {
331+
null;
332+
}
258333

259334
// mousing controls & Tooltip display logic
260-
const handleMouseAndClickOver: void = (event) => {
261-
const coords = localPoint(event.target.ownerSVGElement, event);
262-
const tooltipObj = { ...node.data };
263-
264-
showTooltip({
265-
tooltipLeft: coords.x,
266-
tooltipTop: coords.y,
267-
tooltipData: tooltipObj,
268-
// this is where the data for state and render time is displayed
269-
// but does not show props functions and etc
270-
});
271-
};
335+
// const handleMouseAndClickOver: void = (event) => {
336+
// const coords = localPoint(event.target.ownerSVGElement, event);
337+
// const tooltipObj = { ...node.data };
338+
339+
// showTooltip({
340+
// tooltipLeft: coords.x,
341+
// tooltipTop: coords.y,
342+
// tooltipData: tooltipObj,
343+
// // this is where the data for state and render time is displayed
344+
// // but does not show props functions and etc
345+
// });
346+
// };
272347

273348
return (
274349
<Group top={top} left={left} key={key} className='rect'>
@@ -366,6 +441,7 @@ export default function ComponentMap({
366441
</Group>
367442
);
368443
})}
444+
{console.log(nodeCoords)}
369445
</Group>
370446
)}
371447
</Tree>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
178178
<form className='routesForm' id='routes-formcontrol'>
179179
<label id='routes-dropdown'>Select Snapshot: </label>
180180
<select
181-
labelId='demo-simple-select-label' //come back maybe
181+
labelid='demo-simple-select-label'
182182
id='snapshot-select'
183183
onChange={(e) => setSnapshot(e.target.value)}
184184
>

‎src/extension/background.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Import snapshots from "../app/components/snapshots".
1+
// import snapshots from "../app/components/snapshots"
22
// import 'core-js';
33

44
import { invoke } from 'lodash';
@@ -271,6 +271,7 @@ chrome.runtime.onConnect.addListener((port) => {
271271
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
272272
// AUTOMATIC MESSAGE SENT BY CHROME WHEN CONTENT SCRIPT IS FIRST LOADED: set Content
273273
if (request.type === 'SIGN_CONNECT') {
274+
console.log('sign connected!!');
274275
return true;
275276
}
276277
const tabTitle = sender.tab.title;
@@ -279,6 +280,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
279280
let isReactTimeTravel = false;
280281

281282
if (name) {
283+
//console.log(value);
282284
metrics[name] = value;
283285
}
284286

‎src/extension/build/manifest.json

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,11 @@
1414
},
1515
"content_scripts": [
1616
{
17-
"matches": ["http://localhost/*"],
18-
"js": ["bundles/content.bundle.js"]
17+
"matches": ["<all_urls>"],
18+
"js": ["bundles/content.bundle.js"],
19+
"run_at": "document_start",
20+
"all_frames": false,
21+
"isolated_world": true
1922
}
2023
],
2124
"web_accessible_resources": [

‎src/extension/contentScript.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ let isRecording = true;
1212

1313
// INCOMING MESSAGE FROM BACKEND (index.ts) TO CONTENT SCRIPT
1414
window.addEventListener('message', (msg) => {
15+
console.log('we made it to line 14');
1516
// Event listener runs constantly based on actions
1617
// recorded on the test application from backend files (linkFiber.ts).
1718
// Background.js has a listener that includes switch cases, depending on

0 commit comments

Comments
 (0)