Skip to content

Commit c3c449c

Browse files
aquinojardimaquinojardim
committed
broke
1 parent f24e5a3 commit c3c449c

File tree

11 files changed

+214
-159
lines changed

11 files changed

+214
-159
lines changed

‎dev-reactime/linkFiber.js

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,8 @@
4444
/* eslint-disable no-use-before-define */
4545
/* eslint-disable no-param-reassign */
4646

47-
<<<<<<< HEAD
48-
const { Tree, UnfilteredTreeNode } = require('./tree');
49-
const astParser = require('./astParser');
50-
const { saveState } = require('./masterState');
51-
// import * as reactWorkTags from './reactWorkTags';
52-
=======
5347
const Tree = require('./tree');
5448
const componentActionsRecord = require('./masterState');
55-
>>>>>>> 8e774670f36699322d70300c6382bcdcc7b349e0
5649

5750
module.exports = (snap, mode) => {
5851
let fiberRoot = null;
@@ -72,9 +65,9 @@ module.exports = (snap, mode) => {
7265
async function sendSnapshot() {
7366
// Don't send messages while jumping or while paused
7467
if (mode.jumping || mode.paused) return;
75-
// console.log('PAYLOAD: before cleaning', snap.tree);
68+
console.log('PAYLOAD: before cleaning', snap.tree);
7669
const payload = snap.tree.cleanTreeCopy();// snap.tree.getCopy();
77-
// console.log('PAYLOAD: after cleaning', payload);
70+
console.log('PAYLOAD: after cleaning', payload);
7871
try {
7972
await window.postMessage({
8073
action: 'recordSnap',
@@ -127,16 +120,32 @@ module.exports = (snap, mode) => {
127120
let index;
128121
// Check if node is a stateful component
129122
if (stateNode && stateNode.state && (tag === 0 || tag === 1)) {
123+
console.log('in create tree if')
124+
console.log('this is currentFiber from createTree', currentFiber)
130125
// Save component's state and setState() function to our record for future
131126
// time-travel state changing. Add record index to snapshot so we can retrieve.
132127
index = componentActionsRecord.saveNew(stateNode.state, stateNode);
133-
tree.appendChild(stateNode.state, elementType.name, index); // Add component to tree
128+
if(elementType.name){
129+
tree.appendChild(stateNode.state, elementType.name, index); // Add component to tree
130+
}
134131
} else {
132+
console.log('in create tree else')
133+
console.log('this is currentFiber from createTree', currentFiber)
134+
console.log('this is memoizedState from createTree', memoizedState)
135135
// grab stateless components here
136+
if(elementType){
137+
if(elementType.name){
138+
tree.appendChild('stateless', elementType.name, index);
139+
} else {
140+
tree.appendChild('stateless', elementType, index);
141+
}
142+
}
136143
}
137144

138145
// Check if node is a hooks function
139146
if (memoizedState && (tag === 0 || tag === 1 || tag === 10)) {
147+
console.log('in create tree if')
148+
console.log('this is currentFiber from createTree', currentFiber)
140149
if (memoizedState.queue) {
141150
const hooksComponents = traverseHooks(memoizedState);
142151
hooksComponents.forEach(c => {
@@ -146,6 +155,18 @@ module.exports = (snap, mode) => {
146155
}
147156
});
148157
}
158+
} else {
159+
console.log('in create tree else')
160+
console.log('this is currentFiber from createTree', currentFiber)
161+
console.log('this is memoizedState from createTree', memoizedState)
162+
// grab stateless components here
163+
if(elementType){
164+
if(elementType.name){
165+
tree.appendChild('stateless', elementType.name, index);
166+
} else {
167+
tree.appendChild('stateless', elementType, index);
168+
}
169+
}
149170
}
150171

151172
// Recurse on siblings
@@ -157,7 +178,7 @@ module.exports = (snap, mode) => {
157178
createTree(child, tree);
158179
}
159180

160-
return parentNode;
181+
return tree;
161182
}
162183

163184

@@ -208,16 +229,9 @@ module.exports = (snap, mode) => {
208229
} */
209230
const { current } = fiberRoot; // Carlos: get rid of concurrent mode for now
210231

211-
<<<<<<< HEAD
212-
snap.tree = createTree(current);
213-
console.log("updateSnapShotTree -> snap.tree", snap.tree)
214-
// snap.unfilteredTree = createUnfilteredTree(current);
215-
// console.log("updateSnapShotTree -> snap.unfilteredTree", snap.unfilteredTree)
216-
=======
217232
// console.log('FIBER COMMITTED, new fiber is:', util.inspect(current, false, 4));
218233
// fs.appendFile('fiberlog.txt', util.inspect(current, false, 10));
219234
snap.tree = createTree(current); // Carlos: pass new hooks state here?
220-
>>>>>>> 8e774670f36699322d70300c6382bcdcc7b349e0
221235
}
222236

223237
return async container => {
@@ -236,15 +250,15 @@ module.exports = (snap, mode) => {
236250
// console.log('linkFiber.js, fiberRoot:', fiberRoot);
237251
}
238252
const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
253+
console.log('this is devTools', devTools)
239254
const reactInstance = devTools ? devTools.renderers.get(1) : null;
240255
const overrideHookState = reactInstance ? reactInstance.overrideHookState : null;
241-
console.log('DEVTOOLS:', devTools);
242-
console.log('roots:', reactInstance.getCurrentFiber())
243256

244257
if (reactInstance && reactInstance.version) {
245258
devTools.onCommitFiberRoot = (function (original) {
246259
return function (...args) {
247260
fiberRoot = args[1];
261+
console.log('this is fiberRoot', fiberRoot)
248262
updateSnapShotTree();
249263
sendSnapshot();
250264
return original(...args);

‎dev-reactime/tree.js

Lines changed: 25 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ function scrubUnserializableMembers(tree) {
1515

1616
// this is the current snapshot that is being sent to the snapshots array.
1717
class Tree {
18-
constructor(state, name = 'nameless', index) {
18+
constructor(state = 'stateless', name = 'nameless', index) {
1919
this.state = state === 'root' ? 'root' : JSON.parse(JSON.stringify(state));
2020
this.name = name;
2121
this.index = index;
@@ -48,52 +48,32 @@ class Tree {
4848
}
4949
}
5050

51-
class UnfilteredTreeNode extends Tree {
52-
constructor(component, useStateInstead = false, name, unfilteredProps) {
53-
super(component, useStateInstead, name);
54-
// this.isStateful = unfilteredProps.isStateful;
55-
// this.tagLabel = reactWorkTags[unfilteredProps.tag];
56-
if(unfilteredProps) {
57-
this.tag = unfilteredProps.tag;
58-
this.actualDuration = unfilteredProps.actualDuration;
59-
this.actualStartTime = unfilteredProps.actualStartTime;
60-
this.selfBaseDuration = unfilteredProps.selfBaseDuration;
61-
this.treeBaseDuration = unfilteredProps.treeBaseDuration;
62-
}
63-
}
51+
// class UnfilteredTreeNode extends Tree {
52+
// constructor(component, useStateInstead = false, name, unfilteredProps) {
53+
// super(component, useStateInstead, name);
54+
// // this.isStateful = unfilteredProps.isStateful;
55+
// // this.tagLabel = reactWorkTags[unfilteredProps.tag];
56+
// if(unfilteredProps) {
57+
// this.tag = unfilteredProps.tag;
58+
// this.actualDuration = unfilteredProps.actualDuration;
59+
// this.actualStartTime = unfilteredProps.actualStartTime;
60+
// this.selfBaseDuration = unfilteredProps.selfBaseDuration;
61+
// this.treeBaseDuration = unfilteredProps.treeBaseDuration;
62+
// }
63+
// }
6464

65-
<<<<<<< HEAD
66-
appendChild(component) {
67-
const newChild = new UnfilteredTreeNode(component);
68-
this.children.push(newChild);
69-
return newChild;
70-
=======
71-
// print out the tree structure in the console
72-
// DEV: Process may be different for useState components
73-
// BUG FIX: Don't print the Router as a component
74-
// Change how the children are printed
75-
print() {
76-
// console.log('current tree structure for *this : ', this);
77-
const children = ['children: '];
78-
// DEV: What should we push instead for components using hooks (it wouldn't be state)
79-
this.children.forEach(child => { // if this.children is always initialized to empty array, when would there ever be anything to iterate through here?
80-
children.push(child.state || child.component.state);
81-
});
82-
if (this.name) console.log('this.name if exists: ', this.name);
83-
if (children.length === 1) {
84-
console.log(`children length 1. ${this.state ? 'this.state: ' : 'this.component.state: '}`, this.state || this.component.state);
85-
} else console.log(`children length !== 1. ${this.state ? 'this.state: ' : 'this.component.state, children: '}`, this.state || this.component.state, ...children);
86-
this.children.forEach(child => {
87-
child.print();
88-
});
89-
>>>>>>> 8e774670f36699322d70300c6382bcdcc7b349e0
90-
}
91-
}
65+
// appendChild(component) {
66+
// const newChild = new UnfilteredTreeNode(component);
67+
// this.children.push(newChild);
68+
// return newChild;
69+
// }
70+
// }
9271

93-
module.exports = {
94-
Tree,
95-
UnfilteredTreeNode,
96-
};
72+
module.exports = Tree
73+
// module.exports = {
74+
// Tree,
75+
// UnfilteredTreeNode,
76+
// };
9777

9878

9979

‎src/app/components/Action.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ const Action = props => {
1313
<div
1414
// Edwin: invoking keyboard functionality; functionality is in ActionContainer;
1515
onKeyDown={e => handleOnkeyDown(e, viewIndex)}
16-
className={selected ? 'action-component selected' : 'action-component'}
16+
className={selected || index == sliderIndex ? 'action-component selected' : 'action-component'}
1717
onClick={() => {
1818
dispatch(changeView(index));
1919
}}
2020
role="presentation"
21-
style={index >= sliderIndex ? { color: '#5f6369' } : {}}
21+
style={index > sliderIndex ? { color: '#5f6369' } : {}}
2222
tabIndex={index}
2323
>
2424
<div className="action-component-text">

‎src/app/components/PerfView.jsx

Lines changed: 45 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,39 +7,51 @@
77
/* eslint-disable no-console */
88
import React, { useEffect, useRef } from 'react';
99
import * as d3 from 'd3';
10-
11-
const chartData = {
12-
name: 'App',
13-
children: [
14-
{ name: 'DisplayPanel', value: 17010 },
15-
{ name: 'AltDisplay', value: 5842 },
16-
{
17-
name: 'Button Panel',
18-
children: [
19-
{ name: 'Button', value: 10000 },
20-
{ name: 'Button', value: 2047 },
21-
{ name: 'Button', value: 1375 },
22-
{ name: 'Button', value: 8746 },
23-
{ name: 'Button', value: 2202 },
24-
{ name: 'Button', value: 1382 },
25-
{ name: 'Button', value: 1629 },
26-
{ name: 'Button', value: 1675 },
27-
{ name: 'Button', value: 2042 },
28-
],
29-
},
30-
{ name: 'MarketSContainer', value: 1041 },
31-
{ name: 'MainSlider', value: 5176 },
32-
{ name: 'Tree', value: 449 },
33-
{ name: 'AnotherTree', value: 5593 },
34-
{ name: 'TreeOfTrees', value: 5534 },
35-
{ name: 'KanyeWest', value: 9201 },
36-
{ name: 'ElectricMeatloaf', value: 19975 },
37-
{ name: 'GuidoTheKillerPimp', value: 1116 },
38-
{ name: 'Gravy', value: 6006 },
39-
],
40-
};
41-
42-
const PerfView = ({ width=200, height=200 }) => {
10+
import { addNewSnapshots } from '../actions/actions';
11+
12+
// const chartData = {
13+
// name: 'App',
14+
// children: [
15+
// { name: 'DisplayPanel', value: 17010 },
16+
// { name: 'AltDisplay', value: 5842 },
17+
// {
18+
// name: 'Button Panel',
19+
// children: [
20+
// { name: 'Button', value: 10000 },
21+
// { name: 'Button', value: 2047 },
22+
// { name: 'Button', value: 1375 },
23+
// { name: 'Button', value: 8746 },
24+
// { name: 'Button', value: 2202 },
25+
// { name: 'Button', value: 1382 },
26+
// { name: 'Button', value: 1629 },
27+
// { name: 'Button', value: 1675 },
28+
// { name: 'Button', value: 2042 },
29+
// ],
30+
// },
31+
// { name: 'MarketSContainer', value: 1041 },
32+
// { name: 'MainSlider', value: 5176 },
33+
// { name: 'Tree', value: 449 },
34+
// { name: 'AnotherTree', value: 5593 },
35+
// { name: 'TreeOfTrees', value: 5534 },
36+
// { name: 'KanyeWest', value: 9201 },
37+
// { name: 'ElectricMeatloaf', value: 19975 },
38+
// { name: 'GuidoTheKillerPimp', value: 1116 },
39+
// { name: 'Gravy', value: 6006 },
40+
// ],
41+
// };
42+
43+
const PerfView = ({
44+
width=200,
45+
height=200,
46+
// relationship
47+
snapshots
48+
}) => {
49+
// console.log('this is relationship at PerfView',relationship)
50+
// console.log('this is relationship[relationship.length-1] at PerfView', relationship[relationship.length-1])
51+
// const chartData = relationship[relationship.length-1]
52+
console.log('this is snapshots at PerfView',snapshots)
53+
console.log('this is snapshots[snapshots.length-1] at PerfView', snapshots[snapshots.length-1])
54+
const chartData = snapshots[snapshots.length - 1];
4355
const svgRef = useRef(null);
4456
// returns color scale function
4557
const color = d3.scaleLinear()

‎src/app/components/StateRoute.jsx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,12 @@ import PerfView from './PerfView';
1010
const NO_STATE_MSG = 'No state change detected. Trigger an event to change state';
1111
// eslint-disable-next-line react/prop-types
1212

13-
const StateRoute = ({ snapshot, hierarchy }) => {
13+
const StateRoute = ({
14+
snapshot,
15+
hierarchy,
16+
// relationship
17+
snapshots
18+
}) => {
1419
const windowRef = useRef(null);
1520
const winWidth = null;
1621
const winHeight = null;
@@ -40,7 +45,7 @@ const StateRoute = ({ snapshot, hierarchy }) => {
4045

4146
const renderPerfView = () => {
4247
if (hierarchy) {
43-
return <PerfView width={600} height={600} />; // ref={windowRef}
48+
return <PerfView width={600} height={600} snapshots={snapshots} />; // ref={windowRef}
4449
}
4550
return <div className="noState">{NO_STATE_MSG}</div>;
4651
};
@@ -49,13 +54,13 @@ const StateRoute = ({ snapshot, hierarchy }) => {
4954
<Router>
5055
<div className="navbar">
5156
<NavLink className="router-link" activeClassName="is-active" exact to="/">
52-
State
57+
Tree
5358
</NavLink>
5459
<NavLink className="router-link" activeClassName="is-active" to="/chart">
55-
History
60+
History Chart
5661
</NavLink>
5762
<NavLink className="router-link" activeClassName="is-active" to="/performance">
58-
Rendering
63+
Performance Chart
5964
</NavLink>
6065
</div>
6166
<Switch>

‎src/app/components/Tree.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const getItemString = (type, data) => {
2020

2121
const Tree = props => {
2222
const { snapshot } = props;
23+
console.log('this is snapshot at tree', snapshot)
2324
return (
2425
<>
2526
{snapshot && (

‎src/app/containers/ActionContainer.jsx

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,16 +38,9 @@ function ActionContainer() {
3838
});
3939
}
4040
}
41-
<<<<<<< HEAD
42-
};
43-
// gabi :: the hierarchy get set on the first click in the page, when page in refreshed we don't have a hierarchy so we need to check if hierarchy was inicialize involk displayArray to display the hierarchy
44-
if (hierarchy) displayArray(hierarchy);
45-
// console.log('this is hierarchyArr', hierarchyArr)
46-
=======
4741
}
4842
// gabi :: the hierarchy get set on the first click in the page, when page in refreshed we don't have a hierarchy so we need to check if hierarchy was inicialize involk displayArray to display the hierarchy
4943
if (hierarchy) displayArray(hierarchy)
50-
>>>>>>> master
5144

5245
// Edwin: handles keyboard presses, function passes an event and index of each action-component
5346
function handleOnKeyDown(e, i) {

0 commit comments

Comments
 (0)