Skip to content

Commit bb1c7ae

Browse files
gpancieragpanciera
committed
working version of d3 pre-merge; emptied tree and linkFiber for merge
1 parent 1331611 commit bb1c7ae

File tree

3 files changed

+31
-309
lines changed

3 files changed

+31
-309
lines changed

‎dev-reactime/linkFiber.js

Lines changed: 0 additions & 207 deletions
Original file line numberDiff line numberDiff line change
@@ -1,207 +0,0 @@
1-
/**
2-
* This file contains core module functionality.
3-
*
4-
* It exports an anonymous
5-
* @function
6-
* that is invoked on
7-
* @param snap --> Current snapshot
8-
* @param mode --> Current mode (jumping i.e. time-traveling, locked, or paused)
9-
* and @returns a function to be invoked on the rootContainer HTMLElement
10-
*
11-
* @function updateSnapShotTree
12-
* --> Middleware #1: Updates snap object with latest snapshot
13-
*
14-
* @function sendSnapshot
15-
* --> Middleware #2: Gets a copy of the current snap.tree and posts a message to the window
16-
*
17-
* @function changeSetState
18-
* @param component : stateNode property on a stateful class component's FiberNode object
19-
* --> Binds class component setState method to the component
20-
* --> Injects middleware into class component's setState method
21-
*
22-
* @function changeUseState
23-
* @param component : memoizedState property on a stateful functional component's FiberNode object
24-
* --> Binds functional component dispatch method to the component
25-
* --> Injects middleware into component's dispatch method
26-
* Note: dispatch is hook equivalent to setState()
27-
*
28-
* @function traverseHooks
29-
* @param memoizedState : memoizedState property on a stateful fctnl component's FiberNode object
30-
* --> Helper function to traverse through memoizedState
31-
* --> Invokes @changeUseState on each stateful functional component
32-
*
33-
* @function createTree
34-
* @param currentFiber : a FiberNode object
35-
* --> Recursive function to traverse from FiberRootNode and create
36-
* an instance of custom Tree class and build up state snapshot
37-
*/
38-
39-
/* eslint-disable no-underscore-dangle */
40-
/* eslint-disable func-names */
41-
/* eslint-disable no-use-before-define */
42-
/* eslint-disable no-param-reassign */
43-
44-
const Tree = require('./tree');
45-
const componentActionsRecord = require('./masterState');
46-
47-
module.exports = (snap, mode) => {
48-
let fiberRoot = null;
49-
let astHooks;
50-
let concurrent = false; // flag to check if we are in concurrent mode
51-
52-
async function sendSnapshot() {
53-
// Don't send messages while jumping or while paused
54-
if (mode.jumping || mode.paused) return;
55-
// console.log('PAYLOAD: before cleaning', snap.tree);
56-
const payload = snap.tree.cleanTreeCopy();// snap.tree.getCopy();
57-
// console.log('PAYLOAD: after cleaning', payload);
58-
try {
59-
await window.postMessage({
60-
action: 'recordSnap',
61-
payload,
62-
});
63-
} catch (e) {
64-
console.log('failed to send postMessage:', e);
65-
}
66-
}
67-
68-
// Carlos: Injects instrumentation to update our state tree every time
69-
// a hooks component changes state
70-
function traverseHooks(memoizedState) {
71-
const hooksComponents = [];
72-
while (memoizedState && memoizedState.queue) {
73-
// Carlos: these two are legacy comments, we should look into them later
74-
// prevents useEffect from crashing on load
75-
// if (memoizedState.next.queue === null) { // prevents double pushing snapshot updates
76-
if (memoizedState.memoizedState) {
77-
console.log('memoizedState in traverseHooks is:', memoizedState);
78-
hooksComponents.push({
79-
component: memoizedState.queue,
80-
state: memoizedState.memoizedState,
81-
});
82-
}
83-
// console.log('GOT STATE', memoizedState.memoizedState);
84-
memoizedState = memoizedState.next !== memoizedState
85-
? memoizedState.next : null;
86-
}
87-
return hooksComponents;
88-
}
89-
90-
// Carlos: This runs after EVERY Fiber commit. It creates a new snapshot,
91-
//
92-
function createTree(currentFiber, tree = new Tree('root')) {
93-
// Base case: child or sibling pointed to null
94-
if (!currentFiber) return tree;
95-
console.log("createTree -> currentFiber", currentFiber);
96-
97-
// These have the newest state. We update state and then
98-
// called updateSnapshotTree()
99-
const {
100-
sibling,
101-
stateNode,
102-
child,
103-
memoizedState,
104-
elementType,
105-
tag,
106-
actualDuration,
107-
// actualStartTime,
108-
// selfBaseDuration,
109-
// treeBaseDuration,
110-
} = currentFiber;
111-
112-
let index;
113-
// Check if node is a stateful component
114-
if (stateNode && stateNode.state && (tag === 0 || tag === 1)) {
115-
// Save component's state and setState() function to our record for future
116-
// time-travel state changing. Add record index to snapshot so we can retrieve.
117-
index = componentActionsRecord.saveNew(stateNode.state, stateNode);
118-
tree.appendChild(stateNode.state, elementType.name, index, actualDuration); // Add component to tree
119-
} else {
120-
// grab stateless components here
121-
}
122-
123-
// Check if node is a hooks function
124-
if (memoizedState && (tag === 0 || tag === 1 || tag === 10)) {
125-
if (memoizedState.queue) {
126-
const hooksComponents = traverseHooks(memoizedState);
127-
hooksComponents.forEach(c => {
128-
if (elementType.name) {
129-
index = componentActionsRecord.saveNew(c.state, c.component);
130-
tree.appendChild(c.state, elementType.name ? elementType.name : 'nameless', index, actualDuration);
131-
}
132-
});
133-
}
134-
}
135-
136-
// Recurse on siblings
137-
createTree(sibling, tree);
138-
// Recurse on children
139-
if (tree.children.length > 0) {
140-
createTree(child, tree.children[0]);
141-
} else {
142-
createTree(child, tree);
143-
}
144-
145-
return tree;
146-
}
147-
148-
// ! BUG: skips 1st hook click
149-
function updateSnapShotTree() {
150-
/* let current;
151-
// If concurrent mode, grab current.child
152-
if (concurrent) {
153-
// we need a way to wait for current child to populate
154-
const promise = new Promise((resolve, reject) => {
155-
setTimeout(() => resolve(fiberRoot.current.child), 400);
156-
});
157-
current = await promise;
158-
current = fiberRoot.current.child;
159-
} else {
160-
current = fiberRoot.current;
161-
} */
162-
const { current } = fiberRoot; // Carlos: get rid of concurrent mode for now
163-
164-
// console.log('FIBER COMMITTED, new fiber is:', util.inspect(current, false, 4));
165-
// fs.appendFile('fiberlog.txt', util.inspect(current, false, 10));
166-
snap.tree = createTree(current); // Carlos: pass new hooks state here?
167-
}
168-
169-
return async container => {
170-
// Point fiberRoot to FiberRootNode
171-
if (container._internalRoot) {
172-
fiberRoot = container._internalRoot;
173-
concurrent = true;
174-
} else {
175-
const {
176-
_reactRootContainer: { _internalRoot },
177-
_reactRootContainer,
178-
} = container;
179-
// Only assign internal root if it actually exists
180-
fiberRoot = _internalRoot || _reactRootContainer;
181-
// console.log('_reactRootContainer is:', _reactRootContainer);
182-
// console.log('linkFiber.js, fiberRoot:', fiberRoot);
183-
}
184-
const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
185-
const reactInstance = devTools ? devTools.renderers.get(1) : null;
186-
const overrideHookState = reactInstance ? reactInstance.overrideHookState : null;
187-
188-
if (reactInstance && reactInstance.version) {
189-
devTools.onCommitFiberRoot = (function (original) {
190-
return function (...args) {
191-
fiberRoot = args[1];
192-
updateSnapShotTree();
193-
sendSnapshot();
194-
return original(...args);
195-
};
196-
}(devTools.onCommitFiberRoot));
197-
}
198-
updateSnapShotTree();
199-
// Send the initial snapshot once the content script has started up
200-
// This message is sent from contentScript.js in chrome extension bundles
201-
window.addEventListener('message', ({ data: { action } }) => {
202-
if (action === 'contentScriptStarted') {
203-
sendSnapshot();
204-
}
205-
});
206-
};
207-
};

‎dev-reactime/tree.js

Lines changed: 0 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +0,0 @@
1-
/* eslint-disable no-console */
2-
/* eslint-disable no-param-reassign */
3-
4-
// removes unserializable state data such as functions
5-
function scrubUnserializableMembers(tree) {
6-
Object.entries(tree.state).forEach(keyValuePair => {
7-
if (typeof keyValuePair[1] === 'function') tree.state[keyValuePair[0]] = 'function';
8-
});
9-
// console.log('PAYLOAD: unserializable returns:', tree);
10-
return tree;
11-
}
12-
13-
// this is the current snapshot that is being sent to the snapshots array.
14-
class Tree {
15-
constructor(state, name = 'nameless', index, actualDuration) {
16-
this.state = state === 'root' ? 'root' : JSON.parse(JSON.stringify(state));
17-
this.name = name;
18-
this.index = index;
19-
this.children = [];
20-
this.actualDuration = actualDuration;
21-
}
22-
23-
appendChild(state, name, index, actualDuration) {
24-
const child = new Tree(state, name, index, actualDuration);
25-
this.children.push(child);
26-
}
27-
28-
cleanTreeCopy() {
29-
const copy = new Tree(this.state, this.name, this.index, this.actualDuration);
30-
let newChild;
31-
copy.children = this.children.map(child => {
32-
newChild = new Tree(child.state, child.name, child.index, child.actualDuration);
33-
newChild.children = child.children;
34-
return scrubUnserializableMembers(newChild);
35-
});
36-
if (copy.children.length > 0) {
37-
copy.children.forEach(child => {
38-
if (child !== copy.children) {
39-
child = child.cleanTreeCopy();
40-
} else {
41-
child = null;
42-
}
43-
});
44-
}
45-
return copy;
46-
}
47-
48-
// print out the tree structure in the console
49-
// DEV: Process may be different for useState components
50-
// BUG FIX: Don't print the Router as a component
51-
// Change how the children are printed
52-
print() {
53-
// console.log('current tree structure for *this : ', this);
54-
const children = ['children: '];
55-
// DEV: What should we push instead for components using hooks (it wouldn't be state)
56-
this.children.forEach(child => { // if this.children is always initialized to empty array, when would there ever be anything to iterate through here?
57-
children.push(child.state || child.component.state);
58-
});
59-
if (this.name) console.log('this.name if exists: ', this.name);
60-
if (children.length === 1) {
61-
console.log(`children length 1. ${this.state ? 'this.state: ' : 'this.component.state: '}`, this.state || this.component.state);
62-
} else console.log(`children length !== 1. ${this.state ? 'this.state: ' : 'this.component.state, children: '}`, this.state || this.component.state, ...children);
63-
this.children.forEach(child => {
64-
child.print();
65-
});
66-
}
67-
}
68-
69-
module.exports = Tree;

‎src/app/components/PerfView.jsx

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -10,42 +10,40 @@
1010
import React, { useEffect, useRef } from 'react';
1111
import * as d3 from 'd3';
1212

13-
const chartData = {
14-
name: 'App',
15-
children: [
16-
{ name: 'DisplayPanel', timeData: { actualDuration: 35000 }, value: 17010 },
17-
{ name: 'AltDisplay', timeData: { actualDuration: 35000 }, value: 5842 },
18-
{
19-
name: 'Button Panel',
20-
children: [
21-
{ name: 'Button', timeData: { actualDuration: 35000 }, value: 50000 },
22-
{ name: 'Button', timeData: { actualDuration: 35000 }, value: 2047 },
23-
{ name: 'Button', timeData: { actualDuration: 35000 }, value: 1375 },
24-
{ name: 'Button', timeData: { actualDuration: 35000 }, value: 8746 },
25-
{ name: 'Button', timeData: { actualDuration: 35000 }, value: 2202 },
26-
{ name: 'Button', timeData: { actualDuration: 35000 }, value: 1382 },
27-
{ name: 'Button', timeData: { actualDuration: 35000 }, value: 1629 },
28-
{ name: 'Button', timeData: { actualDuration: 35000 }, value: 1675 },
29-
{ name: 'Button', timeData: { actualDuration: 35000 }, value: 2042 },
30-
],
31-
},
32-
{ name: 'MarketSContainer', timeData: { actualDuration: 35000 }, value: 1041 },
33-
{ name: 'MainSlider', timeData: { actualDuration: 35000 }, value: 5176 },
34-
{ name: 'Tree',timeData: { actualDuration: 35000 }, value: 449 },
35-
{ name: 'AnotherTree', timeData: { actualDuration: 35000 }, value: 5593 },
36-
{ name: 'TreeOfTrees', timeData: { actualDuration: 35000 }, value: 5534 },
37-
{ name: 'KanyeWest', timeData: { actualDuration: 35000 }, value: 9201 },
38-
{ name: 'ElectricMeatloaf', timeData: { actualDuration: 35000 }, value: 19975 },
39-
{ name: 'GuidoTheKillerPimp', timeData: { actualDuration: 35000 }, value: 1116 },
40-
{ name: 'Gravy', timeData: { actualDuration: 35000 }, value: 6006 },
41-
],
42-
};
13+
// const chartData = {
14+
// name: 'App',
15+
// children: [
16+
// { name: 'DisplayPanel', timeData: { actualDuration: 35000 }, value: 17010 },
17+
// { name: 'AltDisplay', timeData: { actualDuration: 35000 }, value: 5842 },
18+
// {
19+
// name: 'Button Panel',
20+
// children: [
21+
// { name: 'Button', timeData: { actualDuration: 35000 }, value: 50000 },
22+
// { name: 'Button', timeData: { actualDuration: 35000 }, value: 2047 },
23+
// { name: 'Button', timeData: { actualDuration: 35000 }, value: 1375 },
24+
// { name: 'Button', timeData: { actualDuration: 35000 }, value: 8746 },
25+
// { name: 'Button', timeData: { actualDuration: 35000 }, value: 2202 },
26+
// { name: 'Button', timeData: { actualDuration: 35000 }, value: 1382 },
27+
// { name: 'Button', timeData: { actualDuration: 35000 }, value: 1629 },
28+
// { name: 'Button', timeData: { actualDuration: 35000 }, value: 1675 },
29+
// { name: 'Button', timeData: { actualDuration: 35000 }, value: 2042 },
30+
// ],
31+
// },
32+
// { name: 'MarketSContainer', timeData: { actualDuration: 35000 }, value: 1041 },
33+
// { name: 'MainSlider', timeData: { actualDuration: 35000 }, value: 5176 },
34+
// { name: 'Tree',timeData: { actualDuration: 35000 }, value: 449 },
35+
// { name: 'AnotherTree', timeData: { actualDuration: 35000 }, value: 5593 },
36+
// { name: 'TreeOfTrees', timeData: { actualDuration: 35000 }, value: 5534 },
37+
// { name: 'KanyeWest', timeData: { actualDuration: 35000 }, value: 9201 },
38+
// { name: 'ElectricMeatloaf', timeData: { actualDuration: 35000 }, value: 19975 },
39+
// { name: 'GuidoTheKillerPimp', timeData: { actualDuration: 35000 }, value: 1116 },
40+
// { name: 'Gravy', timeData: { actualDuration: 35000 }, value: 6006 },
41+
// ],
42+
// };
4343

4444
const PerfView = ({ width = 200, height = 200, chartData }) => {
45-
4645
console.log("PerfView -> chartData", chartData)
4746

48-
4947
const svgRef = useRef(null);
5048
// returns color scale function
5149
const color = d3.scaleLinear()
@@ -76,7 +74,7 @@ const PerfView = ({ width = 200, height = 200, chartData }) => {
7674

7775
const node = svg.append('g')
7876
.selectAll('circle')
79-
.data(packedRoot.descendants().slice(1))
77+
.data(packedRoot.descendants().slice(1))
8078
// .join('circle')
8179
.enter()
8280
.append('circle')

0 commit comments

Comments
 (0)