Merge pull request #89 from Gossamer-React/revert-88-fix-layering

Reverted "filter components - recursive update issue  "

Author: nianliu18

build/webpack-bundle.js

@@ -3,6 +3,7 @@ import React from 'react';
 const StatePropsBox = (props) => {
     const stateObj = props.nodeData.State; 
     const propObj = props.nodeData.Props
+    console.log(stateObj, propObj, 'state and props objects')
     return (
         <div className='state-prop-display'>
          {(props.nodeData.Props !== null || props.nodeData.State !== null) ?

build/webpack-bundle.js.map

@@ -1,12 +1,40 @@
 import React from "react";
 
- 
-const Tool = (props) => {
-    return (
-        <div className='tool-tip' onMouseOver={() => props.handleMouseOver(props.nodeData)} >
-            <h4 className='tree-names'>{props.nodeData.name}</h4>
-        </div>
-    );
+class Tool extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            toggle: false,
+            hoverNodeData: []
+        }
+        this.handleMouseOver = this.handleMouseOver.bind(this);
+        this.handleMouseOut = this.handleMouseOut.bind(this);
+    }
+
+    handleMouseOver(data) {
+        let timeout; 
+        timeout = setTimeout(() => {
+            this.setState({
+            toggle: true,
+            // hoverNodeData: data
+        })}, 500)
+    }
+    handleMouseOut() {
+        this.setState({
+            toggle: false
+        })
+    }
+
+    render() {
+        const stateObj = this.props.nodeData.State;
+        const propObj = this.props.nodeData.Props;
+        const nodeData = this.props.nodeData
+        return (
+            <div className='tool-tip' onMouseOut={() => this.handleMouseOut()} onMouseOver={() => this.props.handleMouseOver(this.props.nodeData)} >
+                <h4 className='tree-names'>{this.props.nodeData.name}</h4>
+            </div>
+        );
+    }
 }
 
 export default Tool;

src/components/StatePropsBox.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Tree from 'react-d3-tree';
 import Tool from './Tool';
 import filterComponents from '../filterComponents';
+import filter from '../filterDOM';
 
 class TreeDiagram extends React.Component {
   constructor(props) {
@@ -11,53 +12,25 @@ class TreeDiagram extends React.Component {
       orientation: 'vertical',
       foreignObjectWrapper: {y: -5, x: 10},
       nodeSize: {x: 75, y: 75},
-      // domData: []
+      componentsToFilter: []
     };
     this.handleFlip = this.handleFlip.bind(this);
+    this.handleFilter = this.handleFilter.bind(this);
   }
 
 
   componentDidMount() {
     //from reactD3 library *centering
-    // console.log(this.props.filteredData, 'did filteredData arrive to Tree diagram --console.log from componentDidMount line 22 TreeDiagram')
     const dimensions = this.treeContainer.getBoundingClientRect();
+    console.log(dimensions, 'these are the dimensions')
     this.setState({
       translate: {
         x: dimensions.width / 2,
         y: dimensions.height / 8
       },
-      // domData: this.props.appState,
     });
   }
 
-  //* when theres a change in any of the toggles, filteredDdata stores the filtered components
-  //* check for any toggles to be true, and filteredData to be not empty, if so setState. 
-  //* issue is we keep running into a repetitive recursive loop and app breaks/ 
-  // componentDidUpdate() {
-  //   if(this.props.filteredData.length !== 0 && this.props.toggleRedux === true || this.props.toggleRouter === true || this.props.toggleApollo === true) {
-  //     this.setState({
-  //       domData: this.props.filteredData
-  //     });
-  //   }
-  // }
-
-//* before props are being passed, we want to compare the old props with the newly updated props.
-//* if they're not the same (comparing lengths after filter) then we set our state accordingly.
-//* wanted to see diff from this and update. 
-
-  // componentWillReceiveProps(nextProps) {
-  //   if(this.props.filteredData.length !== nextProps.filteredData.length) {
-  //     this.setState({
-  //       domData: this.props.filteredData
-  //     })
-  //   } else {
-  //     this.setState({
-  //       domData: this.props.appState
-  //     })
-  //   }
-  // }
-
-
   handleFlip() {
     if(this.state.orientation === 'vertical') {
       this.setState({
@@ -73,6 +46,25 @@ class TreeDiagram extends React.Component {
     }
   }  
 
+  handleFilter(arr) {
+    if (!this.state.componentsToFilter.includes(arr[0])) {
+      let componentsArr = this.state.componentsToFilter.concat(arr);
+      this.setState({
+        componentsToFilter: componentsArr
+      })
+    } else {
+      let list = this.state.componentsToFilter;
+      for (let i = 0; i < list.length; i++) {
+        if (arr.includes(list[i])) {
+          list.splice(i, 1);
+        }
+      }
+      this.setState({
+        componentsToFilter: list
+      })
+    }
+  }
+
 
   render() {
     const styles = {
@@ -104,33 +96,31 @@ class TreeDiagram extends React.Component {
       }
     };
 
+    let data = this.props.appState;
 
-    //* eterna's initial code 
-    // let data = this.props.appState;
-
-    // if (this.state.componentsToFilter.length) {
-    //   let result = [];
-    //   filter(data, this.state.componentsToFilter, result);
-    //   data = result;
-    // }
+    if (this.state.componentsToFilter.length) {
+      let result = [];
+      filter(data, this.state.componentsToFilter, result);
+      data = result;
+    }
 
     return (
       <div id="treeWrapper" ref={tc => (this.treeContainer = tc)}>
         <button onClick={() => {this.handleFlip()}}> {this.state.orientation[0].toUpperCase() + this.state.orientation.slice(1)} </button>
-        <button onClick={() => { this.props.handleReduxFilter(filterComponents.reduxComponents) }}>Filter Redux</button>
-        <button onClick={() => { this.props.handleRouterFilter(filterComponents.reactRouterComponents) }}>Filter React-Router</button>
-        <button onClick={() => { this.props.handleApolloFilter(filterComponents.apolloComponents) }}>Filter Apollo-GraphQL</button>
+        <button onClick={() => { this.handleFilter(filterComponents.reduxComponents) }}>Filter Redux</button>
+        <button onClick={() => { this.handleFilter(filterComponents.reactRouterComponents) }}>Filter React-Router</button>
+        <button onClick={() => { this.handleFilter(filterComponents.apolloComponents) }}>Filter Apollo-GraphQL</button>
 
-        {this.state.domData.length !== 0 ? (
+        {/* when appState has a length we populate tree */}
+        {this.props.appState.length !== 0 ? (
           <Tree
-            data={this.state.domData}
+            data={data}
             nodeSize={{ x: 75, y: 75 }}
             orientation={this.state.orientation}
             styles={styles}
             translate={this.state.translate}
             separation={{ siblings: 1, nonSiblings: 1 }}
             allowForeignObjects
-            //* Placing this tool component in the render property of "nodeLabelComponent", we are allowed access to each tree node's data.
             nodeLabelComponent={{
               render: <Tool handleMouseOver = {this.props.handleMouseOver} />,
               foreignObjectWrapper: this.state.foreignObjectWrapper

src/components/Tool.js

@@ -8,8 +8,6 @@ import StateContainer from './containers/StateContainer.jsx';
 import TreeDiagram from './components/TreeDiagram.jsx';
 import recurseDiff from './stateDiff';
 import StatePropsBox from './components/StatePropsBox';
-import filter from './filterDOM';
-import filterComponents from './filterComponents.js';
 
 class App extends Component {
   constructor() {
@@ -18,24 +16,15 @@ class App extends Component {
       window: 'Graphql',
       logs: [],
       appReactDOM: [],
-      // appFilteredDOM: [],
+      appFilteredDOM: [],
       appState: [],
       nodeData: [],
       schema: 'GraphQL schema not available.',
       stateDiff: [],
-      componentsToFilter: [],
-      toggleRouter: false, 
-      toggleRedux: false,
-      toggleApollo: false,
-      // filteredData: [] 
       logView: null
     };
 
     this.handleMouseOver = this.handleMouseOver.bind(this);
-    this.handleApolloFilter = this.handleApolloFilter.bind(this);
-    this.handleReduxFilter = this.handleReduxFilter.bind(this);
-    this.handleRouterFilter = this.handleRouterFilter.bind(this);
-    this.filterOutComponents = this.filterOutComponents.bind(this);
 
     chrome.devtools.panels.create("Lucid", null, "devtools.html");
   }
@@ -123,11 +112,6 @@ class App extends Component {
 
   //* invoke schema fetch only after a log object from a previous response is available
   componentDidUpdate() {
-    console.log(this.state.componentsToFilter, 
-      'componentsToFilter updated after filter button click --- componentDidUpdate line 128 devtools.js')
-    if(this.state.toggleRedux === true || this.state.toggleApollo === true || this.state.toggleRouter === true) {
-      this.filterOutComponents();
-    }
     if (this.state.schema === "GraphQL schema not available.") {
       this.fetchSchemaFromGraphQLServer();
     }
@@ -152,106 +136,7 @@ class App extends Component {
     this.setState({
       nodeData: data
     })
-  }
-
-  filterOutComponents() {
-    let data = this.state.appState; 
-    if(this.state.componentsToFilter.length) {
-      let result = []; 
-      filter(data, this.state.componentsToFilter, result);
-      data = result; 
-      //*whether i use filteredData or actual appState we run into a recursive breakage. For now instead of seprating the data, we will try to manipulate appState directly, since same breakage occurs in both situations. 
-      //* I suspect the appState and the changed data are in constant conflict with one another, and we might need to make changes in traverse when a toggle button is clicked. so all freshly new DOM data will have everything filtered upon arrival.
-      //* else newly arrived DOM data information on user's app will setState, then on update in our dev tool we'll rerun and change state.
-      //* best to have a toggle change a set of conditions in traverser, where if toggle is set to false, traverse and leave out these set of words apoloProvider etc. 
-      //* filtering data after its already arrived with two traverse functions seem constly, and is the cause of our glitch.
-      //* throwing the filtering to dev and resetting appState is causing breakage, if cant find solution, go to the source of the issue, the traverser and set toggling conditions there. 
-      // this.setState({
-      //   filteredData: data
-      // });
-      this.setState({
-        appState: data
-      });
-      console.log(data, 'filterOutComponents function ran successfully, filteredData is set to this object --coming from devtools line 169')
-    }
-  }
-
-  handleApolloFilter(arr) {
-    //* if first index of arr is not in componentsToFilter arr, set incoming array to componentsToFilter
-    if(!this.state.componentsToFilter.includes(arr[0]) && arr[0] === 'ApolloProvider') {
-      console.log('did i hit apollo?')
-      let componentsArr = this.state.componentsToFilter.concat(arr);
-      this.setState({
-        componentsToFilter: componentsArr, 
-        toggleApollo: true
-      })  
-    }
-    else {
-      //* if componentsToFilter is not empty iterate through 
-      let list = this.state.componentsToFilter;
-      let output = []; 
-      for (let i = 0; i < list.length; i++) {
-        if (!arr.includes(list[i])) {
-          output.push(list[i]);
-        }
-      }
-      this.setState({
-        componentsToFilter: output,
-        toggleApollo: false
-      })
-    }
-  }
-
-  handleReduxFilter(arr) {
-    //* if first index of arr is not in componentsToFilter arr, set incoming array to componentsToFilter
-    if(!this.state.componentsToFilter.includes(arr[0]) && arr[0] === 'Provider') {
-      console.log('did i hit redux?')
-      let componentsArr = this.state.componentsToFilter.concat(arr);
-      this.setState({
-        componentsToFilter: componentsArr, 
-        toggleRedux: true
-      })  
-    }
-    else {
-      //* if componentsToFilter is not empty iterate through 
-      let list = this.state.componentsToFilter;
-      let output = []; 
-      for (let i = 0; i < list.length; i++) {
-        if (!arr.includes(list[i])) {
-          output.push(list[i]);
-        }
-      }
-      this.setState({
-        componentsToFilter: output,
-        toggleRedux: false
-      })
-    }
-  }
-
-  handleRouterFilter(arr) {
-    //* if first index of arr is not in componentsToFilter arr, set incoming array to componentsToFilter
-    if(!this.state.componentsToFilter.includes(arr[0]) && arr[0] === 'BrowserRouter') {
-      console.log('did i hit router?')
-      let componentsArr = this.state.componentsToFilter.concat(arr);
-      this.setState({
-        componentsToFilter: componentsArr, 
-        toggleRouter: true
-      })  
-    }
-    else {
-      //* if componentsToFilter is not empty iterate through 
-      let list = this.state.componentsToFilter;
-      let output = []; 
-      for (let i = 0; i < list.length; i++) {
-        if (!arr.includes(list[i])) {
-          output.push(list[i]);
-        }
-      }
-      this.setState({
-        componentsToFilter: output,
-        toggleRouter: false
-      })
-    }
+    console.log(data, 'data came thru from mouse hover')
   }
 
   // * handles the clearing of both the  request log and diff log
@@ -304,17 +189,6 @@ class App extends Component {
               ) : (
                   <div class='reactTab'>
                     <StateContainer clearLog={this.handleClearLog.bind(this)} stateDiffs={this.state.stateDiff} />
-                    <TreeDiagram 
-                      appState = {this.state.appState} 
-                      handleMouseOver = {this.handleMouseOver} 
-                      handleApolloFilter = {this.handleApolloFilter} 
-                      handleReduxFilter = {this.handleReduxFilter} 
-                      handleRouterFilter = {this.handleRouterFilter}
-                      // filteredData = {this.state.filteredData} 
-                      // toggleRedux = {this.state.toggleRedux}
-                      // toggleRouter = {this.state.toggleRouter}
-                      // toggleApolo = {this.state.toggleApollo}
-                    />
                     <TreeDiagram appState={this.state.appState} handleMouseOver={this.handleMouseOver} />
                     <StatePropsBox nodeData={this.state.nodeData} />
                   </div>

src/components/TreeDiagram.jsx

@@ -1,5 +1,4 @@
 const filter = (node, componentsArr, childrenArr) => {
-  console.log(node.name, 'name from filterDOM.js is it there?')
   if (node.name === undefined) {
     filter(node[0], componentsArr, childrenArr)
   } else {