Fiber debugger enhancements (#10393)

* Add effect tag

* Add graph settings (direction and trackActive)

* Support multiple effect tags

fixtures/fiber-debugger/src/App.js

@@ -42,6 +42,10 @@ class App extends Component {
         return: false,
         fx: false,
       },
+      graphSettings: {
+        rankdir: 'TB',
+        trackActive: true,
+      },
     };
   }
 
@@ -158,7 +162,11 @@ class App extends Component {
       <div style={{height: '100%'}}>
         {fibers &&
           <Draggable>
-            <Fibers fibers={fibers} show={this.state.show} />
+            <Fibers
+              fibers={fibers}
+              show={this.state.show}
+              graphSettings={this.state.graphSettings}
+            />
           </Draggable>}
         <div
           style={{
@@ -171,43 +179,83 @@ class App extends Component {
             backgroundColor: '#fafafa',
             border: '1px solid #ccc',
           }}>
-          <input
-            type="range"
-            style={{width: '25%'}}
-            min={0}
-            max={history.length - 1}
-            value={currentStep}
-            onChange={e => this.setState({currentStep: Number(e.target.value)})}
-          />
-          <p>
-            Step
-            {' '}
-            {currentStep}
-            :
-            {' '}
-            {friendlyAction}
-            {' '}
-            (
-            <a style={{color: 'gray'}} onClick={this.handleEdit} href="#">
-              Edit
-            </a>
-            )
-          </p>
-          {stage && <p>Stage: {stage}</p>}
-          {Object.keys(this.state.show).map(key => (
-            <label style={{marginRight: '10px'}} key={key}>
-              <input
-                type="checkbox"
-                checked={this.state.show[key]}
-                onChange={e => {
-                  this.setState(({show}) => ({
-                    show: {...show, [key]: !show[key]},
-                  }));
-                }}
-              />
-              {key}
-            </label>
-          ))}
+          <div style={{width: '50%', float: 'left'}}>
+            <input
+              type="range"
+              style={{width: '25%'}}
+              min={0}
+              max={history.length - 1}
+              value={currentStep}
+              onChange={e =>
+                this.setState({currentStep: Number(e.target.value)})}
+            />
+            <p>
+              Step
+              {' '}
+              {currentStep}
+              :
+              {' '}
+              {friendlyAction}
+              {' '}
+              (
+              <a style={{color: 'gray'}} onClick={this.handleEdit} href="#">
+                Edit
+              </a>
+              )
+            </p>
+            {stage && <p>Stage: {stage}</p>}
+            {Object.keys(this.state.show).map(key => (
+              <label style={{marginRight: '10px'}} key={key}>
+                <input
+                  type="checkbox"
+                  checked={this.state.show[key]}
+                  onChange={e => {
+                    this.setState(({show}) => ({
+                      show: {...show, [key]: !show[key]},
+                    }));
+                  }}
+                />
+                {key}
+              </label>
+            ))}
+          </div>
+          <div style={{width: '50%', float: 'right'}}>
+            <h5>Graph Settings</h5>
+            <p>
+              <label style={{display: ''}}>
+                Direction:
+                <select
+                  onChange={e => {
+                    const rankdir = e.target.value;
+                    this.setState(({graphSettings}) => ({
+                      graphSettings: {...graphSettings, rankdir},
+                    }));
+                  }}>
+                  <option value="TB">top-down</option>
+                  <option value="BT">down-top</option>
+                  <option value="LR">left-right</option>
+                  <option value="RL">right-left</option>
+                </select>
+              </label>
+            </p>
+            <p>
+              <label style={{marginRight: '10px'}}>
+                <input
+                  type="checkbox"
+                  checked={this.state.graphSettings.trackActive}
+                  onChange={e => {
+                    this.setState(({graphSettings}) => ({
+                      graphSettings: {
+                        ...graphSettings,
+                        trackActive: !graphSettings.trackActive,
+                      },
+                    }));
+                  }}
+                />
+                Track active fiber
+              </label>
+            </p>
+          </div>
         </div>
       </div>
     );

fixtures/fiber-debugger/src/Fibers.js

@@ -15,15 +15,17 @@ function getFiberColor(fibers, id) {
 }
 
 function Graph(props) {
+  const {rankdir, trackActive} = props.settings;
   var g = new dagre.graphlib.Graph();
   g.setGraph({
     width: 1000,
     height: 1000,
     nodesep: 50,
     edgesep: 150,
-    ranksep: 150,
+    ranksep: 100,
     marginx: 100,
     marginy: 100,
+    rankdir,
   });
 
   var edgeLabels = {};
@@ -63,8 +65,8 @@ function Graph(props) {
     .map(v => g.node(v))
     .find(node => node.label.props.isActive);
   const [winX, winY] = [window.innerWidth / 2, window.innerHeight / 2];
-  var focusDx = activeNode ? winX - activeNode.x : 0;
-  var focusDy = activeNode ? winY - activeNode.y : 0;
+  var focusDx = trackActive && activeNode ? winX - activeNode.x : 0;
+  var focusDy = trackActive && activeNode ? winY - activeNode.y : 0;
 
   var nodes = g.nodes().map(v => {
     var node = g.node(v);
@@ -250,7 +252,7 @@ function formatPriority(priority) {
   }
 }
 
-export default function Fibers({fibers, show, ...rest}) {
+export default function Fibers({fibers, show, graphSettings, ...rest}) {
   const items = Object.keys(fibers.descriptions).map(
     id => fibers.descriptions[id]
   );
@@ -274,11 +276,16 @@ export default function Fibers({fibers, show, ...rest}) {
         ...rest.style,
         transform: null,
       }}>
-      <Graph className="graph" dx={dx} dy={dy} isDragging={isDragging}>
+      <Graph
+        className="graph"
+        dx={dx}
+        dy={dy}
+        isDragging={isDragging}
+        settings={graphSettings}>
         {items.map(fiber => [
           <Vertex
             key={fiber.id}
-            width={200}
+            width={150}
             height={100}
             isActive={fiber.id === fibers.workInProgressID}>
             <div
@@ -314,6 +321,10 @@ export default function Fibers({fibers, show, ...rest}) {
                 : <small>
                     Committed
                   </small>}
+              {fiber.effectTag && [
+                <br key="br" />,
+                <small key="small">Effect: {fiber.effectTag}</small>,
+              ]}
             </div>
           </Vertex>,
           fiber.child &&

fixtures/fiber-debugger/src/describeFibers.js

@@ -37,6 +37,23 @@ function getFriendlyTag(tag) {
   }
 }
 
+function getFriendlyEffect(effectTag) {
+  const effects = {
+    1: 'Performed Work',
+    2: 'Placement',
+    4: 'Update',
+    8: 'Deletion',
+    16: 'Content reset',
+    32: 'Callback',
+    64: 'Err',
+    128: 'Ref',
+  };
+  return Object.keys(effects)
+    .filter(flag => flag & effectTag)
+    .map(flag => effects[flag])
+    .join(' & ');
+}
+
 export default function describeFibers(rootFiber, workInProgress) {
   let descriptions = {};
   function acknowledgeFiber(fiber) {
@@ -55,6 +72,7 @@ export default function describeFibers(rootFiber, workInProgress) {
       ...fiber,
       id: id,
       tag: getFriendlyTag(fiber.tag),
+      effectTag: getFriendlyEffect(fiber.effectTag),
       type: fiber.type && '<' + (fiber.type.name || fiber.type) + '>',
       stateNode: `[${typeof fiber.stateNode}]`,
       return: acknowledgeFiber(fiber.return),