Skip to content

Commit 26fd771

Browse files
aquinojardimaquinojardim
committed
filter data performance
2 parents c3c449c + 4889332 commit 26fd771

File tree

13 files changed

+249
-191
lines changed

13 files changed

+249
-191
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,4 @@ src/extension/build.crx
1010
src/extension/build.pem
1111
bower_components
1212
sandboxes/manual-tests/NextJS/.next
13+
.vscode

‎dev-reactime/linkFiber.js

Lines changed: 48 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,9 @@ module.exports = (snap, mode) => {
104104
//
105105
function createTree(currentFiber, tree = new Tree('root')) {
106106
// Base case: child or sibling pointed to null
107-
if (!currentFiber) return tree;
107+
if (!currentFiber) return null;
108+
if (!tree) return tree;
109+
108110

109111
// These have the newest state. We update state and then
110112
// called updateSnapshotTree()
@@ -115,44 +117,48 @@ module.exports = (snap, mode) => {
115117
memoizedState,
116118
elementType,
117119
tag,
120+
actualDuration,
121+
actualStartTime,
122+
selfBaseDuration,
123+
treeBaseDuration,
118124
} = currentFiber;
119125

120-
let index;
126+
let newState = null;
127+
let componentData = {};
128+
let componentFound = false;
121129
// Check if node is a stateful component
122130
if (stateNode && stateNode.state && (tag === 0 || tag === 1)) {
123131
console.log('in create tree if')
124132
console.log('this is currentFiber from createTree', currentFiber)
125133
// Save component's state and setState() function to our record for future
126134
// time-travel state changing. Add record index to snapshot so we can retrieve.
127-
index = componentActionsRecord.saveNew(stateNode.state, stateNode);
128-
if(elementType.name){
129-
tree.appendChild(stateNode.state, elementType.name, index); // Add component to tree
130-
}
131-
} 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)
135+
componentData.index = componentActionsRecord.saveNew(stateNode.state, stateNode);
136+
newState = stateNode.state;
137+
componentFound = true;
138+
// tree.appendToChild(stateNode.state, elementType.name, index); // Add component to tree
139+
} else if (tag === 0 || tag === 1) {
135140
// 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-
}
141+
newState = 'stateless';
142+
// tree.appendChild({}, elementType.name) // Add component to tree
143143
}
144144

145145
// Check if node is a hooks function
146+
let hooksIndex;
146147
if (memoizedState && (tag === 0 || tag === 1 || tag === 10)) {
147148
console.log('in create tree if')
148149
console.log('this is currentFiber from createTree', currentFiber)
149150
if (memoizedState.queue) {
150151
const hooksComponents = traverseHooks(memoizedState);
151152
hooksComponents.forEach(c => {
152-
if (elementType.name) {
153-
index = componentActionsRecord.saveNew(c.state, c.component);
154-
tree.appendChild(c.state, elementType.name ? elementType.name : 'nameless', index);
153+
hooksIndex = componentActionsRecord.saveNew(c.state, c.component);
154+
if (newState.hooksState) {
155+
newState.hooksState.push([c.state, hooksIndex]);
156+
} else {
157+
newState.hooksState = [[c.state, hooksIndex]];
155158
}
159+
componentFound = true;
160+
// newState = { ...newState, hooksState: c.state };
161+
// tree.appendSibling(c.state, elementType.name ? elementType.name : 'nameless', index);
156162
});
157163
}
158164
} else {
@@ -169,14 +175,30 @@ module.exports = (snap, mode) => {
169175
}
170176
}
171177

172-
// Recurse on siblings
173-
createTree(sibling, tree);
178+
componentData = {
179+
...componentData,
180+
actualDuration,
181+
actualStartTime,
182+
selfBaseDuration,
183+
treeBaseDuration,
184+
};
185+
186+
if (componentFound) {
187+
tree.addChild(newState, elementType.name ? elementType.name : elementType, componentData);
188+
} else if (newState === 'stateless') {
189+
tree.addChild(newState, elementType.name ? elementType.name : elementType, componentData);
190+
}
191+
174192
// Recurse on children
175-
if (tree.children.length > 0) {
176-
createTree(child, tree.children[0]);
177-
} else {
178-
createTree(child, tree);
193+
if (child) {
194+
if (tree.children.length > 0) {
195+
createTree(child, tree.children[tree.children.length - 1]);
196+
} else {
197+
createTree(child, tree);
198+
}
179199
}
200+
// Recurse on siblings
201+
if (sibling) createTree(sibling, tree);
180202

181203
return tree;
182204
}

‎dev-reactime/timeJump.js

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,20 +20,11 @@ module.exports = (origin, mode) => {
2020
// Carlos: target is past state we are travelling to
2121

2222
function jump(target, originNode = origin.tree) {
23-
console.log('origin (link to current app state) in jump():', origin);
24-
console.log('target state is: ', target);
2523
// Set the state of the origin tree if the component is stateful
2624
if (!target) return;
27-
const component = componentActionsRecord.getComponentByIndex(target.index);
28-
if (component) {
29-
console.log('time-travel component is true');
30-
if (component.setState) {
31-
console.log('time-travel component setState is true');
32-
}
33-
}
34-
25+
if (target.state === 'stateless') target.children.forEach(child => jump(child));
26+
const component = componentActionsRecord.getComponentByIndex(target.componentData.index);
3527
if (component && component.setState) {
36-
console.log('time-travel calling setState', component);
3728
component.setState(prevState => {
3829
Object.keys(prevState).forEach(key => {
3930
if (target.state[key] === undefined) {
@@ -43,16 +34,24 @@ module.exports = (origin, mode) => {
4334
return target.state;
4435
// Iterate through new children after state has been set
4536
}, () => target.children.forEach(child => jump(child)));
46-
} else if (component && component.dispatch) {
47-
// ** not entering here
48-
console.log('time-travel calling dispatch', component);
49-
component.dispatch(target.state);
37+
}
38+
39+
if (target.state.hooksState) {
40+
target.state.hooksState.forEach(hooksState => {
41+
if (component && component.dispatch) {
42+
const hooksComponent = componentActionsRecord.getComponentByIndex(hooksState[1]);
43+
hooksComponent.dispatch(target.state.hooksState[0]);
44+
}
45+
});
5046
target.children.forEach(child => jump(child));
51-
} else {
52-
console.log('time-travel did not call setState nor dispatch', component);
47+
}
48+
49+
if ((!component || !component.state) && !target.state.hooksState) {
5350
target.children.forEach(child => jump(child));
5451
}
5552

53+
54+
5655
/*
5756
if (originNode.component.setState) {
5857
console.log('stateful component jump, originNode: ', originNode.component);

‎dev-reactime/tree.js

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

1616
// this is the current snapshot that is being sent to the snapshots array.
1717
class Tree {
18-
constructor(state = 'stateless', name = 'nameless', index) {
18+
constructor(state, name = 'nameless', componentData = {}) {
1919
this.state = state === 'root' ? 'root' : JSON.parse(JSON.stringify(state));
2020
this.name = name;
21-
this.index = index;
21+
this.componentData = JSON.parse(JSON.stringify(componentData));
2222
this.children = [];
2323
}
2424

25-
appendChild(state, name, index) {
26-
const child = new Tree(state, name, index);
27-
this.children.push(child);
25+
addChild(state, name = this.name, componentData = this.componentData) {
26+
this.children.push(new Tree(state, name, componentData));
2827
}
2928

3029
cleanTreeCopy() {
31-
const copy = new Tree(this.state, this.name, this.index);
30+
const copy = new Tree(this.state, this.name, this.componentData);
3231
let newChild;
3332
copy.children = this.children.map(child => {
34-
newChild = new Tree(child.state, child.name, child.index);
33+
newChild = new Tree(child.state, child.name, child.componentData);
3534
newChild.children = child.children;
3635
return scrubUnserializableMembers(newChild);
3736
});
@@ -45,6 +44,91 @@ class Tree {
4544
});
4645
}
4746
return copy;
47+
48+
// This is a regular old tree version of the above, but above version
49+
// is better suited for D3 chart displays
50+
// class Tree {
51+
// constructor(state, name = 'nameless', index) {
52+
// this.state = state === 'root' ? 'root' : JSON.parse(JSON.stringify(state));
53+
// this.name = name;
54+
// this.index = index;
55+
// this.child = null;
56+
// this.sibling = null;
57+
// }
58+
59+
// setNode(state, name, index) {
60+
// this.state = { ...this.child.state, ...state };
61+
// this.name = name;
62+
// this.index = index;
63+
// }
64+
65+
// appendToChild(state, name = this.name, index = this.index) {
66+
// if (this.child) {
67+
// this.child.state = { ...this.child.state, ...state };
68+
// this.child.name = name;
69+
// this.child.index = index;
70+
// } else {
71+
// this.child = new Tree(state, name, index);
72+
// }
73+
// }
74+
75+
// appendToSibling(state, name = this.name, index = this.index) {
76+
// if (this.sibling) {
77+
// state = { ...this.sibling.state, ...state };
78+
// this.sibling.name = name;
79+
// this.sibling.index = index;
80+
// } else {
81+
// this.sibling = new Tree(state, name, index);
82+
// }
83+
// }
84+
85+
// cleanTreeCopy() {
86+
// const copy = new Tree(this.state, this.name, this.index);
87+
// if (this.sibling) {
88+
// copy.sibling = new Tree(this.sibling.state, this.sibling.name, this.sibling.index);
89+
// copy.sibling = scrubUnserializableMembers(copy.sibling);
90+
// copy.sibling = this.sibling.sibling;
91+
// copy.sibling.cleanTreeCopy();
92+
// }
93+
94+
// if (this.child) {
95+
// copy.child = new Tree(this.child.state, this.child.name, this.child.index);
96+
// copy.child = scrubUnserializableMembers(copy.child);
97+
// copy.child = this.child.child;
98+
// copy.child.cleanTreeCopy();
99+
// }
100+
//
101+
// // unfinished:
102+
// cleanD3Copy(children = []) {
103+
// copy = D3Tree(this.state, this.name, this.index, this.isStateless);
104+
// let nextSibling = this.sibling;
105+
// while(nextSibling = this.sibling) {
106+
// copy.cleanD3Copy(copy.)
107+
// }
108+
109+
}
110+
111+
// return copy;
112+
// }
113+
114+
// print out the tree structure in the console
115+
// DEV: Process may be different for useState components
116+
// BUG FIX: Don't print the Router as a component
117+
// Change how the children are printed
118+
print() {
119+
// console.log('current tree structure for *this : ', this);
120+
const children = ['children: '];
121+
// DEV: What should we push instead for components using hooks (it wouldn't be state)
122+
this.children.forEach(child => { // if this.children is always initialized to empty array, when would there ever be anything to iterate through here?
123+
children.push(child.state || child.component.state);
124+
});
125+
if (this.name) console.log('this.name if exists: ', this.name);
126+
if (children.length === 1) {
127+
console.log(`children length 1. ${this.state ? 'this.state: ' : 'this.component.state: '}`, this.state || this.component.state);
128+
} else console.log(`children length !== 1. ${this.state ? 'this.state: ' : 'this.component.state, children: '}`, this.state || this.component.state, ...children);
129+
this.children.forEach(child => {
130+
child.print();
131+
});
48132
}
49133
}
50134

‎src/app/components/Action.jsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,19 @@ import { changeView, changeSlider } from '../actions/actions';
66
// viewIndex and handleonkeyDown added to props
77
const Action = props => {
88
const {
9-
selected, index, sliderIndex, dispatch, displayName, componentName, state, viewIndex, handleOnkeyDown,
9+
selected, last, index, sliderIndex, dispatch, displayName, componentName, state, viewIndex, handleOnkeyDown,
1010
} = props;
11+
console.log('last', last)
12+
console.log('index', index)
13+
console.log('viewIndex', viewIndex)
14+
console.log('selected', selected)
15+
selected
1116

1217
return (
1318
<div
1419
// Edwin: invoking keyboard functionality; functionality is in ActionContainer;
1520
onKeyDown={e => handleOnkeyDown(e, viewIndex)}
16-
className={selected || index == sliderIndex ? 'action-component selected' : 'action-component'}
21+
className={selected || last ? 'action-component selected' : 'action-component'}
1722
onClick={() => {
1823
dispatch(changeView(index));
1924
}}

0 commit comments

Comments
 (0)