Fiber debugger enhancements (#10393)
* Add effect tag * Add graph settings (direction and trackActive) * Support multiple effect tags
Rodrigo Pombo committed
Aug 8, 2017 at 07:31 UTC
fc3fb4bd72f1b33fb788f49665891dc267ebaec4
3 files changed
+121
-44
fixtures/fiber-debugger/src/App.js
+86
-38
@@ -42,6 +42,10 @@ class App extends Component {
42
return: false,
43
fx: false,
44
},
45
+ graphSettings: {
46
+ rankdir: 'TB',
47
+ trackActive: true,
48
+ },
49
};
50
}
51
@@ -158,7 +162,11 @@ class App extends Component {
162
<div style={{height: '100%'}}>
163
{fibers &&
164
<Draggable>
161
- <Fibers fibers={fibers} show={this.state.show} />
165
+ <Fibers
166
+ fibers={fibers}
167
+ show={this.state.show}
168
+ graphSettings={this.state.graphSettings}
169
+ />
170
</Draggable>}
171
<div
172
style={{
@@ -171,43 +179,83 @@ class App extends Component {
179
backgroundColor: '#fafafa',
180
border: '1px solid #ccc',
181
}}>
174
- <input
175
- type="range"
176
- style={{width: '25%'}}
177
- min={0}
178
- max={history.length - 1}
179
- value={currentStep}
180
- onChange={e => this.setState({currentStep: Number(e.target.value)})}
181
- />
182
- <p>
183
- Step
184
- {' '}
185
- {currentStep}
186
- :
187
- {' '}
188
- {friendlyAction}
189
- {' '}
190
- (
191
- <a style={{color: 'gray'}} onClick={this.handleEdit} href="#">
192
- Edit
193
- </a>
194
- )
195
- </p>
196
- {stage && <p>Stage: {stage}</p>}
197
- {Object.keys(this.state.show).map(key => (
198
- <label style={{marginRight: '10px'}} key={key}>
199
- <input
200
- type="checkbox"
201
- checked={this.state.show[key]}
202
- onChange={e => {
203
- this.setState(({show}) => ({
204
- show: {...show, [key]: !show[key]},
205
- }));
206
- }}
207
- />
208
- {key}
209
- </label>
210
- ))}
182
+ <div style={{width: '50%', float: 'left'}}>
183
+ <input
184
+ type="range"
185
+ style={{width: '25%'}}
186
+ min={0}
187
+ max={history.length - 1}
188
+ value={currentStep}
189
+ onChange={e =>
190
+ this.setState({currentStep: Number(e.target.value)})}
191
+ />
192
+ <p>
193
+ Step
194
+ {' '}
195
+ {currentStep}
196
+ :
197
+ {' '}
198
+ {friendlyAction}
199
+ {' '}
200
+ (
201
+ <a style={{color: 'gray'}} onClick={this.handleEdit} href="#">
202
+ Edit
203
+ </a>
204
+ )
205
+ </p>
206
+ {stage && <p>Stage: {stage}</p>}
207
+ {Object.keys(this.state.show).map(key => (
208
+ <label style={{marginRight: '10px'}} key={key}>
209
+ <input
210
+ type="checkbox"
211
+ checked={this.state.show[key]}
212
+ onChange={e => {
213
+ this.setState(({show}) => ({
214
+ show: {...show, [key]: !show[key]},
215
+ }));
216
+ }}
217
+ />
218
+ {key}
219
+ </label>
220
+ ))}
221
+ </div>
222
+ <div style={{width: '50%', float: 'right'}}>
223
+ <h5>Graph Settings</h5>
224
+ <p>
225
+ <label style={{display: ''}}>
226
+ Direction:
227
+ <select
228
+ onChange={e => {
229
+ const rankdir = e.target.value;
230
+ this.setState(({graphSettings}) => ({
231
+ graphSettings: {...graphSettings, rankdir},
232
+ }));
233
+ }}>
234
+ <option value="TB">top-down</option>
235
+ <option value="BT">down-top</option>
236
+ <option value="LR">left-right</option>
237
+ <option value="RL">right-left</option>
238
+ </select>
239
+ </label>
240
+ </p>
241
+ <p>
242
+ <label style={{marginRight: '10px'}}>
243
+ <input
244
+ type="checkbox"
245
+ checked={this.state.graphSettings.trackActive}
246
+ onChange={e => {
247
+ this.setState(({graphSettings}) => ({
248
+ graphSettings: {
249
+ ...graphSettings,
250
+ trackActive: !graphSettings.trackActive,
251
+ },
252
+ }));
253
+ }}
254
+ />
255
+ Track active fiber
256
+ </label>
257
+ </p>
258
+ </div>
259
</div>
260
</div>
261
);
fixtures/fiber-debugger/src/Fibers.js
+17
-6
@@ -15,15 +15,17 @@ function getFiberColor(fibers, id) {
15
}
16
17
function Graph(props) {
18
+ const {rankdir, trackActive} = props.settings;
19
var g = new dagre.graphlib.Graph();
20
g.setGraph({
21
width: 1000,
22
height: 1000,
23
nodesep: 50,
24
edgesep: 150,
24
- ranksep: 150,
25
+ ranksep: 100,
26
marginx: 100,
27
marginy: 100,
28
+ rankdir,
29
});
30
31
var edgeLabels = {};
@@ -63,8 +65,8 @@ function Graph(props) {
65
.map(v => g.node(v))
66
.find(node => node.label.props.isActive);
67
const [winX, winY] = [window.innerWidth / 2, window.innerHeight / 2];
66
- var focusDx = activeNode ? winX - activeNode.x : 0;
67
- var focusDy = activeNode ? winY - activeNode.y : 0;
68
+ var focusDx = trackActive && activeNode ? winX - activeNode.x : 0;
69
+ var focusDy = trackActive && activeNode ? winY - activeNode.y : 0;
70
71
var nodes = g.nodes().map(v => {
72
var node = g.node(v);
@@ -250,7 +252,7 @@ function formatPriority(priority) {
252
}
253
}
254
253
-export default function Fibers({fibers, show, ...rest}) {
255
+export default function Fibers({fibers, show, graphSettings, ...rest}) {
256
const items = Object.keys(fibers.descriptions).map(
257
id => fibers.descriptions[id]
258
);
@@ -274,11 +276,16 @@ export default function Fibers({fibers, show, ...rest}) {
276
...rest.style,
277
transform: null,
278
}}>
277
- <Graph className="graph" dx={dx} dy={dy} isDragging={isDragging}>
279
+ <Graph
280
+ className="graph"
281
+ dx={dx}
282
+ dy={dy}
283
+ isDragging={isDragging}
284
+ settings={graphSettings}>
285
{items.map(fiber => [
286
<Vertex
287
key={fiber.id}
281
- width={200}
288
+ width={150}
289
height={100}
290
isActive={fiber.id === fibers.workInProgressID}>
291
<div
@@ -314,6 +321,10 @@ export default function Fibers({fibers, show, ...rest}) {
321
: <small>
322
Committed
323
</small>}
324
+ {fiber.effectTag && [
325
+ <br key="br" />,
326
+ <small key="small">Effect: {fiber.effectTag}</small>,
327
+ ]}
328
</div>
329
</Vertex>,
330
fiber.child &&
fixtures/fiber-debugger/src/describeFibers.js
+18
@@ -37,6 +37,23 @@ function getFriendlyTag(tag) {
37
}
38
}
39
40
+function getFriendlyEffect(effectTag) {
41
+ const effects = {
42
+ 1: 'Performed Work',
43
+ 2: 'Placement',
44
+ 4: 'Update',
45
+ 8: 'Deletion',
46
+ 16: 'Content reset',
47
+ 32: 'Callback',
48
+ 64: 'Err',
49
+ 128: 'Ref',
50
+ };
51
+ return Object.keys(effects)
52
+ .filter(flag => flag & effectTag)
53
+ .map(flag => effects[flag])
54
+ .join(' & ');
55
+}
56
+
57
export default function describeFibers(rootFiber, workInProgress) {
58
let descriptions = {};
59
function acknowledgeFiber(fiber) {
@@ -55,6 +72,7 @@ export default function describeFibers(rootFiber, workInProgress) {
72
...fiber,
73
id: id,
74
tag: getFriendlyTag(fiber.tag),
75
+ effectTag: getFriendlyEffect(fiber.effectTag),
76
type: fiber.type && '<' + (fiber.type.name || fiber.type) + '>',
77
stateNode: `[${typeof fiber.stateNode}]`,
78
return: acknowledgeFiber(fiber.return),