Skip to content

Commit 74123d8

Browse files
Jbanks123Jbanks123
committed
Co-authored-by: Liam Donaher <[email protected]>
1 parent a044adc commit 74123d8

File tree

7 files changed

+114
-28
lines changed

7 files changed

+114
-28
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@
134134
"@types/d3-scale-chromatic": "^2.0.0",
135135
"@types/jest": "^29.5.0",
136136
"@types/lodash.isequal": "^4.5.5",
137-
"@types/node": "^12.19.6",
137+
"@types/node": "^12.20.55",
138138
"@types/react": "^17.0.43",
139139
"@types/react-router": "^5.1.20",
140140
"@typescript-eslint/eslint-plugin": "^3.6.1",

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

Lines changed: 100 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,14 @@ const defaultMargin: DefaultMargin = {
2929
bottom: 70,
3030
};
3131

32+
let stepHeight: number = 0;
33+
const nodeCoords: object = {};
34+
let count: number = 0;
35+
let aspect: number = 1;
36+
let nodeCoordTier = 0;
37+
let nodeOneLeft = 0;
38+
let nodeTwoLeft = 2;
39+
3240
export default function ComponentMap({
3341
// imported props to be used to display the dendrogram
3442
width: totalWidth,
@@ -127,7 +135,7 @@ export default function ComponentMap({
127135
};
128136

129137
const formatRenderTime: string = (time: number): string => {
130-
const renderTime = time.toFixed(3);
138+
const renderTime = parseFloat(time).toFixed(3);
131139
return `${renderTime} ms `;
132140
};
133141

@@ -189,21 +197,25 @@ export default function ComponentMap({
189197
setSelectedNode={setSelectedNode}
190198
/>
191199

192-
<svg ref={containerRef} width={totalWidth} height={totalHeight}>
200+
<svg
201+
ref={containerRef}
202+
width={totalWidth / aspect}
203+
height={(totalHeight + stepHeight) / aspect}
204+
>
193205
<LinearGradient id='links-gradient' from='#e75e62' to='#f00008' />
194206
<rect
195207
onClick={() => {
196208
hideTooltip();
197209
}}
198-
width={totalWidth}
199-
height={totalHeight}
210+
width={totalWidth / aspect}
211+
height={(totalHeight + stepHeight) / aspect}
200212
rx={14}
201213
fill='#242529'
202214
/>
203-
<Group top={margin.top} left={margin.left}>
215+
<Group transform={`scale(${aspect})`} top={margin.top} left={margin.left}>
204216
<Tree
205217
root={hierarchy(startNode, (d) => (d.isExpanded ? d.children : null))}
206-
size={[sizeWidth, sizeHeight]}
218+
size={[sizeWidth / aspect, (sizeHeight + stepHeight) / aspect]}
207219
separation={(a, b) => (a.parent === b.parent ? 1 : 0.5) / a.depth}
208220
>
209221
{(tree) => (
@@ -213,7 +225,7 @@ export default function ComponentMap({
213225
key={i}
214226
data={link}
215227
percent={stepPercent}
216-
stroke='#F00008'
228+
stroke='#FFFFFF'
217229
strokeWidth='1'
218230
fill='none'
219231
/>
@@ -245,19 +257,87 @@ export default function ComponentMap({
245257
left = node.y;
246258
}
247259

260+
count < nodeList.length
261+
? !nodeCoords[top]
262+
? (nodeCoords[top] = [left - width / 2, left + width / 2])
263+
: nodeCoords[top].push(left - width / 2, left + width / 2)
264+
: null;
265+
count++;
266+
267+
//check if the node coordinate object has been constructed
268+
if (count === nodeList.length) {
269+
//check if there is still a tier of the node tree to collision check
270+
while (Object.values(nodeCoords)[nodeCoordTier]) {
271+
//check if there are atleast two nodes on the current tier
272+
if (
273+
Object.values(nodeCoords)[nodeCoordTier][nodeOneLeft] &&
274+
Object.values(nodeCoords)[nodeCoordTier][nodeTwoLeft]
275+
) {
276+
//check if the left side of the righthand node is to the right of the right side of the lefthand node (i.e. collision)
277+
if (
278+
Object.values(nodeCoords)[nodeCoordTier][nodeTwoLeft] <
279+
Object.values(nodeCoords)[nodeCoordTier][nodeOneLeft + 1]
280+
) {
281+
//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)
282+
if (
283+
Math.abs(
284+
Object.values(nodeCoords)[nodeCoordTier][nodeTwoLeft] -
285+
Object.values(nodeCoords)[nodeCoordTier][nodeOneLeft],
286+
) /
287+
Math.abs(
288+
Object.values(nodeCoords)[nodeCoordTier][nodeOneLeft + 1] -
289+
Object.values(nodeCoords)[nodeCoordTier][nodeOneLeft],
290+
) <
291+
aspect
292+
) {
293+
console.log(aspect);
294+
//assign a new lowest percentage if one is found
295+
aspect =
296+
Math.abs(
297+
Object.values(nodeCoords)[nodeCoordTier][nodeTwoLeft] -
298+
Object.values(nodeCoords)[nodeCoordTier][nodeOneLeft],
299+
) /
300+
Math.abs(
301+
Object.values(nodeCoords)[nodeCoordTier][nodeOneLeft + 1] -
302+
Object.values(nodeCoords)[nodeCoordTier][nodeOneLeft],
303+
);
304+
}
305+
//move the node pointers down the list after checking the current overlap percentage
306+
else {
307+
nodeOneLeft += 2;
308+
nodeTwoLeft += 2;
309+
}
310+
}
311+
//move the node pointers if no collision is found
312+
else {
313+
nodeOneLeft += 2;
314+
nodeTwoLeft += 2;
315+
}
316+
}
317+
//move to the next tier of the node tree if done checking the current one
318+
else {
319+
nodeOneLeft = 0;
320+
nodeTwoLeft = 2;
321+
nodeCoordTier++;
322+
}
323+
}
324+
} else {
325+
null;
326+
}
327+
248328
// mousing controls & Tooltip display logic
249-
const handleMouseAndClickOver: void = (event) => {
250-
const coords = localPoint(event.target.ownerSVGElement, event);
251-
const tooltipObj = { ...node.data };
252-
253-
showTooltip({
254-
tooltipLeft: coords.x,
255-
tooltipTop: coords.y,
256-
tooltipData: tooltipObj,
257-
// this is where the data for state and render time is displayed
258-
// but does not show props functions and etc
259-
});
260-
};
329+
// const handleMouseAndClickOver: void = (event) => {
330+
// const coords = localPoint(event.target.ownerSVGElement, event);
331+
// const tooltipObj = { ...node.data };
332+
333+
// showTooltip({
334+
// tooltipLeft: coords.x,
335+
// tooltipTop: coords.y,
336+
// tooltipData: tooltipObj,
337+
// // this is where the data for state and render time is displayed
338+
// // but does not show props functions and etc
339+
// });
340+
// };
261341

262342
return (
263343
<Group top={top} left={left} key={key} className='rect'>
@@ -344,6 +424,7 @@ export default function ComponentMap({
344424
</Group>
345425
);
346426
})}
427+
{console.log(nodeCoords)}
347428
</Group>
348429
)}
349430
</Tree>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
155155
<form className='routesForm' id='routes-formcontrol'>
156156
<label id='routes-dropdown'>Select Route: </label>
157157
<select
158-
labelId='demo-simple-select-label'
158+
labelid='demo-simple-select-label'
159159
id='routes-select'
160160
onChange={(e) => {
161161
setRoute(e.target.value);
@@ -173,7 +173,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
173173
<form className='routesForm' id='routes-formcontrol'>
174174
<label id='routes-dropdown'>Select Snapshot: </label>
175175
<select
176-
labelId='demo-simple-select-label'
176+
labelid='demo-simple-select-label'
177177
id='snapshot-select'
178178
onChange={(e) => setSnapshot(e.target.value)}
179179
>

‎src/app/styles/layout/_mainContainer.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
overflow: hidden;
66
}
77

8-
.state-container-container{
8+
.state-container-container {
99
display: contents;
1010
}
11-

‎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
// Store ports in an array.
@@ -260,6 +260,7 @@ chrome.runtime.onConnect.addListener((port) => {
260260
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
261261
// AUTOMATIC MESSAGE SENT BY CHROME WHEN CONTENT SCRIPT IS FIRST LOADED: set Content
262262
if (request.type === 'SIGN_CONNECT') {
263+
console.log('sign connected!!');
263264
return true;
264265
}
265266
const tabTitle = sender.tab.title;
@@ -268,6 +269,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
268269
let isReactTimeTravel = false;
269270

270271
if (name) {
272+
//console.log(value);
271273
metrics[name] = value;
272274
}
273275

‎src/extension/build/manifest.json

Lines changed: 6 additions & 3 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": [
@@ -24,6 +27,6 @@
2427
"matches": ["<all_urls>"]
2528
}
2629
],
27-
"permissions": ["contextMenus", "tabs", "activeTab", "scripting"],
30+
"permissions": ["contextMenus", "tabs", "activeTab", "scripting", "http://*/*", "https://*/*"],
2831
"host_permissions": ["<all_urls>"]
2932
}

‎src/extension/contentScript.ts

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

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

0 commit comments

Comments
 (0)