Skip to content

Commit cdb7559

Browse files
d28601581d28601581
committed
resolving merge conflicts
2 parents ba2f44f + 56a42b0 commit cdb7559

File tree

7 files changed

+131
-83
lines changed

7 files changed

+131
-83
lines changed

‎src/app/components/BarGraph.tsx

Lines changed: 89 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,8 @@ const BarGraph = props => {
232232
snapshotIdScale.rangeRound([0, xMax]);
233233
renderingScale.range([yMax, 0]);
234234

235+
componentScale.rangeRound([0, xMax]);
236+
235237
const toStorage = {
236238
currentTab,
237239
title: tabs[currentTab].title,
@@ -395,7 +397,48 @@ const BarGraph = props => {
395397
);
396398
}))}
397399
</BarStack>
398-
</Group></>
400+
</Group>
401+
<AxisLeft
402+
top={margin.top}
403+
left={margin.left}
404+
scale={renderingScale}
405+
stroke={axisColor}
406+
tickStroke={axisColor}
407+
strokeWidth={2}
408+
tickLabelProps={() => ({
409+
fill: 'rgb(231, 231, 231)',
410+
fontSize: 11,
411+
verticalAnchor: 'middle',
412+
textAnchor: 'end',
413+
})}
414+
/>
415+
<AxisBottom
416+
top={yMax + margin.top}
417+
left={margin.left}
418+
scale={snapshotIdScale}
419+
stroke={axisColor}
420+
tickStroke={axisColor}
421+
strokeWidth={2}
422+
tickLabelProps={() => ({
423+
fill: 'rgb(231, 231, 231)',
424+
fontSize: 11,
425+
textAnchor: 'middle',
426+
})}
427+
/>
428+
<Text
429+
x={-xMax / 2}
430+
y="15"
431+
transform="rotate(-90)"
432+
fontSize={12}
433+
fill="#FFFFFF"
434+
>
435+
Rendering Time (ms)
436+
</Text>
437+
<br />
438+
<Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill="#FFFFFF">
439+
Snapshot ID
440+
</Text>
441+
</>
399442
)
400443
: (
401444
<>
@@ -413,50 +456,52 @@ const BarGraph = props => {
413456
/>
414457
<Group top={margin.top} left={margin.left}>
415458
{HorizontalGraph()}
416-
</Group></>
417-
)
418-
}
459+
</Group>
460+
<AxisLeft
461+
top={margin.top}
462+
left={margin.left}
463+
scale={renderingScale}
464+
stroke={axisColor}
465+
tickStroke={axisColor}
466+
strokeWidth={2}
467+
tickLabelProps={() => ({
468+
fill: 'rgb(231, 231, 231)',
469+
fontSize: 11,
470+
verticalAnchor: 'middle',
471+
textAnchor: 'end',
472+
})}
473+
/>
474+
<AxisBottom
475+
top={yMax + margin.top}
476+
left={margin.left}
477+
scale={componentScale}
478+
stroke={axisColor}
479+
tickStroke={axisColor}
480+
strokeWidth={2}
481+
tickLabelProps={() => ({
482+
fill: 'rgb(231, 231, 231)',
483+
fontSize: 11,
484+
textAnchor: 'middle',
485+
})}
486+
/>
487+
<Text
488+
// x={-xMax / 2}
489+
// x={Math.max((-xMax / 2), (-yMax / 2))}
490+
x={-yMax / 2 - 75}
491+
y="15"
492+
transform="rotate(-90)"
493+
fontSize={12}
494+
fill="#FFFFFF"
495+
>
496+
Rendering Time (ms)
497+
</Text>
498+
<br />
499+
<Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill="#FFFFFF">
500+
Snapshot ID
501+
</Text>
502+
</>
503+
)}
419504

420-
<AxisLeft
421-
top={margin.top}
422-
left={margin.left}
423-
scale={renderingScale}
424-
stroke={axisColor}
425-
tickStroke={axisColor}
426-
strokeWidth={2}
427-
tickLabelProps={() => ({
428-
fill: 'rgb(231, 231, 231)',
429-
fontSize: 11,
430-
verticalAnchor: 'middle',
431-
textAnchor: 'end',
432-
})}
433-
/>
434-
<AxisBottom
435-
top={yMax + margin.top}
436-
left={margin.left}
437-
scale={snapshotIdScale}
438-
stroke={axisColor}
439-
tickStroke={axisColor}
440-
strokeWidth={2}
441-
tickLabelProps={() => ({
442-
fill: 'rgb(231, 231, 231)',
443-
fontSize: 11,
444-
textAnchor: 'middle',
445-
})}
446-
/>
447-
<Text
448-
x={-yMax / 2 - 75}
449-
y="15"
450-
transform="rotate(-90)"
451-
fontSize={12}
452-
fill="#FFFFFF"
453-
>
454-
Rendering Time (ms)
455-
</Text>
456-
<br />
457-
<Text x={xMax / 2 + 15} y={yMax + 70} fontSize={12} fill="#FFFFFF">
458-
Snapshot ID
459-
</Text>
460505
</svg>
461506
{/* FOR HOVER OVER DISPLAY */}
462507
{tooltipOpen && tooltipData && (

‎src/backend/linkFiber.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
/* eslint-disable no-param-reassign */
1313

1414
// import typescript types
15-
import { element } from 'prop-types';
1615
import {
1716
// tree
1817
Snapshot,
@@ -285,6 +284,7 @@ function createTree(
285284
};
286285
}
287286
} catch (error) {
287+
console.log(error);
288288
}
289289
}
290290

@@ -459,7 +459,7 @@ function createTree(
459459

460460
while (pointer !== null) {
461461
if (pointer.stateNode !== null) {
462-
rtid = `fromLinkFiber${rtidCounter++}`;
462+
rtid = `fromLinkFiber${rtidCounter += 1}`;
463463
// rtid = rtidCounter++;
464464
recoilDomNode[currentFiber.elementType.name].push(rtid);
465465
// check if rtid is already present
@@ -497,7 +497,7 @@ function createTree(
497497
}
498498
currentFiber.child.stateNode.classList.add(rtid);
499499
}
500-
rtidCounter++;
500+
rtidCounter += 1;
501501
}
502502
// checking if tree fromSibling is true
503503
if (fromSibling) {

‎src/backend/masterState.ts

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,12 @@ import {
1111
HookStates, // array of hook state items
1212
} from './types/backendTypes';
1313

14-
// HookState is an array that contains a "component" for every single state change that occurs in the app
14+
// HookState is an array that contains a "component" for
15+
// every single state change that occurs in the app
1516
// Information on these components include ComponentData as well as state
1617
// For class components, there will be one "component" for each snapshot
17-
// For functional components that utilize Hooks, there will be one "component" for each setter/getter every time we have a new snapshot
18+
// For functional components that utilize Hooks, there will be one "component"
19+
// for each setter/getter every time we have a new snapshot
1820
let componentActionsRecord: HookStates = [];
1921
let index = 0;
2022

@@ -30,19 +32,20 @@ export default {
3032

3133
return index - 1;
3234
},
33-
getRecordByIndex: (inputIndex: number): HookStateItem =>
34-
componentActionsRecord[inputIndex],
35-
// this is used for class components - inputIndex will always be a fixed number (coming in timeJump.ts)
36-
getComponentByIndex: (inputIndex: number): any =>
35+
getRecordByIndex: (inputIndex: number): HookStateItem => componentActionsRecord[inputIndex],
36+
// this is used for class components -
37+
/* inputIndex will always be a fixed number (coming in timeJump.ts) */
38+
getComponentByIndex: (inputIndex: number): any => (
3739
componentActionsRecord[inputIndex]
3840
? componentActionsRecord[inputIndex].component
39-
: undefined,
41+
: undefined),
4042
// this is used for react hooks - hooks will be passed in as an array from timeJump.ts
4143
getComponentByIndexHooks: (inputIndex: Array<number> = []): any => {
4244
const multiDispatch = [];
4345
for (let i = 0; i < inputIndex.length; i++) {
44-
if (componentActionsRecord[inputIndex[i]])
46+
if (componentActionsRecord[inputIndex[i]]) {
4547
multiDispatch.push(componentActionsRecord[inputIndex[i]].component);
48+
}
4649
}
4750
return multiDispatch;
4851
},

‎src/backend/timeJump.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,10 @@ export default (origin, mode) => {
6363
}
6464
});
6565

66-
//REACT HOOKS
66+
// REACT HOOKS
6767
// check if component states are set with hooks
68-
// if yes, grab all relevant components for this snapshot in numArr
69-
// call dispatch on each component passing in the corresponding currState value
68+
// if yes, grab all relevant components for this snapshot in numArr
69+
// call dispatch on each component passing in the corresponding currState value
7070
if (target.state && target.state.hooksState) {
7171
const currState = target.state.hooksState;
7272
const numArr: Array<number> = [];

‎src/backend/tree.ts

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@
77
/* eslint-disable no-console */
88
/* eslint-disable no-param-reassign */
99

10-
import { createGenerateClassName } from '@material-ui/styles';
11-
1210
let copyInstances = 0;
1311
const circularComponentTable = new Set<Tree>();
1412
let componentNames = {};
@@ -83,14 +81,12 @@ class Tree {
8381
}
8482

8583
// Returns a unique name ready to be used
86-
checkForDuplicates(name: string) {
84+
checkForDuplicates(name: string): string {
8785
// check for empty name
8886
if (name === '' && typeof this.rtid === 'string') {
8987
name = this.rtid.replace('fromLinkFiber', '');
9088
}
91-
if (this.state === 'root') {
92-
componentNames = {};
93-
}
89+
if (this.state === 'root') componentNames = {};
9490
// check for duplicate
9591
else if (componentNames[name] !== undefined) {
9692
const count = componentNames[name] + 1;

‎src/extension/background.js

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ function createTabObj(title) {
2727
snapshots: [],
2828
// index here is the tab index that shows total amount of state changes
2929
index: 0,
30-
//* this is our pointer so we know what the current state the user
31-
// is checking (this accounts for time travel aka when user clicks jump on the UI)
30+
//* this is our pointer so we know what the current state the user is checking
31+
// (this accounts for time travel aka when user clicks jump on the UI)
3232
currLocation: null,
3333
// points to the node that will generate the next child set by newest node or jump
3434
currParent: 0,
@@ -56,16 +56,32 @@ function createTabObj(title) {
5656
class Node {
5757
constructor(obj, tabObj) {
5858
// continues the order of number of total state changes
59-
this.index = tabObj.index++;
59+
this.index = tabObj.index;
60+
tabObj.index += 1;
6061
// continues the order of number of states changed from that parent
61-
this.name = tabObj.currParent += 1;
62+
tabObj.currParent += 1;
63+
this.name = tabObj.currParent;
6264
// marks from what branch this node is originated
6365
this.branch = tabObj.currBranch;
6466
this.stateSnapshot = obj;
6567
this.children = [];
6668
}
6769
}
6870

71+
function countCurrName(rootNode, name) {
72+
if (rootNode.name > name) {
73+
return 0;
74+
}
75+
if (rootNode.name === name) {
76+
return 1;
77+
}
78+
let branch = 0;
79+
rootNode.children.forEach(child => {
80+
branch += countCurrName(child, name);
81+
});
82+
return branch;
83+
}
84+
6985
// Adds a new node to the current location.
7086
// Invoked in the case 'recordSnap'.
7187
function sendToHierarchy(tabObj, newNode) {
@@ -81,23 +97,11 @@ function sendToHierarchy(tabObj, newNode) {
8197
}
8298
}
8399

84-
function countCurrName(rootNode, name) {
85-
if (rootNode.name > name) {
86-
return 0;
87-
}
88-
if (rootNode.name === name) {
89-
return 1;
90-
}
91-
let branch = 0;
92-
rootNode.children.forEach(child => {
93-
branch += countCurrName(child, name);
94-
});
95-
return branch;
96-
}
97-
98100
// This function is used when time jumping to a previous state,
99101
// so that it runs recursively until it finds the correct index,
100102
// and updates the tabsObject to the node at that index.
103+
/* eslint no-param-reassign: ["error", { "props": false }] */
104+
101105
function changeCurrLocation(tabObj, rootNode, index, name) {
102106
// index comes from the app's main reducer to locate the correct current location on tabObj
103107
// check if current node has the index wanted

‎tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"compilerOptions": {
33
"outDir": "./src/extension/build/bundles/",
44
"module": "es6",
5-
//"noImplicitAny": true,
5+
// "noImplicitAny": true,
66
"target": "es5",
77
"jsx": "react",
88
"removeComments": true,

0 commit comments

Comments
 (0)