Skip to content

Commit a67e312

Browse files
nianliu18nianliu18
authored
Merge pull request #88 from Gossamer-React/fix-layering
filter components - recursive update issue
2 parents 99b5a61 + 34ad4e0 commit a67e312

File tree

7 files changed

+186
-112
lines changed

7 files changed

+186
-112
lines changed

‎build/webpack-bundle.js‎

Lines changed: 0 additions & 38 deletions
Large diffs are not rendered by default.

‎build/webpack-bundle.js.map‎

Lines changed: 5 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/StatePropsBox.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React from 'react';
33
const StatePropsBox = (props) => {
44
const stateObj = props.nodeData.State;
55
const propObj = props.nodeData.Props
6-
console.log(stateObj, propObj, 'state and props objects')
76
return (
87
<div className='state-prop-display'>
98
{(props.nodeData.Props !== null || props.nodeData.State !== null) ?

‎src/components/Tool.js‎

Lines changed: 7 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,12 @@
11
import React from "react";
22

3-
class Tool extends React.Component {
4-
constructor(props) {
5-
super(props);
6-
this.state = {
7-
toggle: false,
8-
hoverNodeData: []
9-
}
10-
this.handleMouseOver = this.handleMouseOver.bind(this);
11-
this.handleMouseOut = this.handleMouseOut.bind(this);
12-
}
13-
14-
handleMouseOver(data) {
15-
let timeout;
16-
timeout = setTimeout(() => {
17-
this.setState({
18-
toggle: true,
19-
// hoverNodeData: data
20-
})}, 500)
21-
}
22-
handleMouseOut() {
23-
this.setState({
24-
toggle: false
25-
})
26-
}
27-
28-
render() {
29-
const stateObj = this.props.nodeData.State;
30-
const propObj = this.props.nodeData.Props;
31-
const nodeData = this.props.nodeData
32-
return (
33-
<div className='tool-tip' onMouseOut={() => this.handleMouseOut()} onMouseOver={() => this.props.handleMouseOver(this.props.nodeData)} >
34-
<h4 className='tree-names'>{this.props.nodeData.name}</h4>
35-
</div>
36-
);
37-
}
3+
4+
const Tool = (props) => {
5+
return (
6+
<div className='tool-tip' onMouseOver={() => props.handleMouseOver(props.nodeData)} >
7+
<h4 className='tree-names'>{props.nodeData.name}</h4>
8+
</div>
9+
);
3810
}
3911

4012
export default Tool;

‎src/components/TreeDiagram.jsx‎

Lines changed: 45 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react';
22
import Tree from 'react-d3-tree';
33
import Tool from './Tool';
44
import filterComponents from '../filterComponents';
5-
import filter from '../filterDOM';
65

76
class TreeDiagram extends React.Component {
87
constructor(props) {
@@ -12,25 +11,53 @@ class TreeDiagram extends React.Component {
1211
orientation: 'vertical',
1312
foreignObjectWrapper: {y: -5, x: 10},
1413
nodeSize: {x: 75, y: 75},
15-
componentsToFilter: []
14+
// domData: []
1615
};
1716
this.handleFlip = this.handleFlip.bind(this);
18-
this.handleFilter = this.handleFilter.bind(this);
1917
}
2018

2119

2220
componentDidMount() {
2321
//from reactD3 library *centering
22+
// console.log(this.props.filteredData, 'did filteredData arrive to Tree diagram --console.log from componentDidMount line 22 TreeDiagram')
2423
const dimensions = this.treeContainer.getBoundingClientRect();
25-
console.log(dimensions, 'these are the dimensions')
2624
this.setState({
2725
translate: {
2826
x: dimensions.width / 2,
2927
y: dimensions.height / 8
3028
},
29+
// domData: this.props.appState,
3130
});
3231
}
3332

33+
//* when theres a change in any of the toggles, filteredDdata stores the filtered components
34+
//* check for any toggles to be true, and filteredData to be not empty, if so setState.
35+
//* issue is we keep running into a repetitive recursive loop and app breaks/
36+
// componentDidUpdate() {
37+
// if(this.props.filteredData.length !== 0 && this.props.toggleRedux === true || this.props.toggleRouter === true || this.props.toggleApollo === true) {
38+
// this.setState({
39+
// domData: this.props.filteredData
40+
// });
41+
// }
42+
// }
43+
44+
//* before props are being passed, we want to compare the old props with the newly updated props.
45+
//* if they're not the same (comparing lengths after filter) then we set our state accordingly.
46+
//* wanted to see diff from this and update.
47+
48+
// componentWillReceiveProps(nextProps) {
49+
// if(this.props.filteredData.length !== nextProps.filteredData.length) {
50+
// this.setState({
51+
// domData: this.props.filteredData
52+
// })
53+
// } else {
54+
// this.setState({
55+
// domData: this.props.appState
56+
// })
57+
// }
58+
// }
59+
60+
3461
handleFlip() {
3562
if(this.state.orientation === 'vertical') {
3663
this.setState({
@@ -46,25 +73,6 @@ class TreeDiagram extends React.Component {
4673
}
4774
}
4875

49-
handleFilter(arr) {
50-
if (!this.state.componentsToFilter.includes(arr[0])) {
51-
let componentsArr = this.state.componentsToFilter.concat(arr);
52-
this.setState({
53-
componentsToFilter: componentsArr
54-
})
55-
} else {
56-
let list = this.state.componentsToFilter;
57-
for (let i = 0; i < list.length; i++) {
58-
if (arr.includes(list[i])) {
59-
list.splice(i, 1);
60-
}
61-
}
62-
this.setState({
63-
componentsToFilter: list
64-
})
65-
}
66-
}
67-
6876

6977
render() {
7078
const styles = {
@@ -96,31 +104,33 @@ class TreeDiagram extends React.Component {
96104
}
97105
};
98106

99-
let data = this.props.appState;
100107

101-
if (this.state.componentsToFilter.length) {
102-
let result = [];
103-
filter(data, this.state.componentsToFilter, result);
104-
data = result;
105-
}
108+
//* eterna's initial code
109+
// let data = this.props.appState;
110+
111+
// if (this.state.componentsToFilter.length) {
112+
// let result = [];
113+
// filter(data, this.state.componentsToFilter, result);
114+
// data = result;
115+
// }
106116

107117
return (
108118
<div id="treeWrapper" ref={tc => (this.treeContainer = tc)}>
109119
<button onClick={() => {this.handleFlip()}}> {this.state.orientation[0].toUpperCase() + this.state.orientation.slice(1)} </button>
110-
<button onClick={() => { this.handleFilter(filterComponents.reduxComponents) }}>Filter Redux</button>
111-
<button onClick={() => { this.handleFilter(filterComponents.reactRouterComponents) }}>Filter React-Router</button>
112-
<button onClick={() => { this.handleFilter(filterComponents.apolloComponents) }}>Filter Apollo-GraphQL</button>
120+
<button onClick={() => { this.props.handleReduxFilter(filterComponents.reduxComponents) }}>Filter Redux</button>
121+
<button onClick={() => { this.props.handleRouterFilter(filterComponents.reactRouterComponents) }}>Filter React-Router</button>
122+
<button onClick={() => { this.props.handleApolloFilter(filterComponents.apolloComponents) }}>Filter Apollo-GraphQL</button>
113123

114-
{/* when appState has a length we populate tree */}
115-
{this.props.appState.length !== 0 ? (
124+
{this.state.domData.length !== 0 ? (
116125
<Tree
117-
data={data}
126+
data={this.state.domData}
118127
nodeSize={{ x: 75, y: 75 }}
119128
orientation={this.state.orientation}
120129
styles={styles}
121130
translate={this.state.translate}
122131
separation={{ siblings: 1, nonSiblings: 1 }}
123132
allowForeignObjects
133+
//* Placing this tool component in the render property of "nodeLabelComponent", we are allowed access to each tree node's data.
124134
nodeLabelComponent={{
125135
render: <Tool handleMouseOver = {this.props.handleMouseOver} />,
126136
foreignObjectWrapper: this.state.foreignObjectWrapper

‎src/devtools.js‎

Lines changed: 128 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import StateContainer from './containers/StateContainer.jsx';
88
import TreeDiagram from './components/TreeDiagram.jsx';
99
import recurseDiff from './stateDiff';
1010
import StatePropsBox from './components/StatePropsBox';
11+
import filter from './filterDOM';
12+
import filterComponents from './filterComponents.js';
1113

1214
class App extends Component {
1315
constructor() {
@@ -16,15 +18,24 @@ class App extends Component {
1618
window: 'Graphql',
1719
logs: [],
1820
appReactDOM: [],
19-
appFilteredDOM: [],
21+
// appFilteredDOM: [],
2022
appState: [],
2123
nodeData: [],
2224
schema: 'GraphQL schema not available.',
2325
stateDiff: [],
26+
componentsToFilter: [],
27+
toggleRouter: false,
28+
toggleRedux: false,
29+
toggleApollo: false,
30+
// filteredData: []
2431
logView: null
2532
};
2633

2734
this.handleMouseOver = this.handleMouseOver.bind(this);
35+
this.handleApolloFilter = this.handleApolloFilter.bind(this);
36+
this.handleReduxFilter = this.handleReduxFilter.bind(this);
37+
this.handleRouterFilter = this.handleRouterFilter.bind(this);
38+
this.filterOutComponents = this.filterOutComponents.bind(this);
2839

2940
chrome.devtools.panels.create("Lucid", null, "devtools.html");
3041
}
@@ -112,6 +123,11 @@ class App extends Component {
112123

113124
//* invoke schema fetch only after a log object from a previous response is available
114125
componentDidUpdate() {
126+
console.log(this.state.componentsToFilter,
127+
'componentsToFilter updated after filter button click --- componentDidUpdate line 128 devtools.js')
128+
if(this.state.toggleRedux === true || this.state.toggleApollo === true || this.state.toggleRouter === true) {
129+
this.filterOutComponents();
130+
}
115131
if (this.state.schema === "GraphQL schema not available.") {
116132
this.fetchSchemaFromGraphQLServer();
117133
}
@@ -136,7 +152,106 @@ class App extends Component {
136152
this.setState({
137153
nodeData: data
138154
})
139-
console.log(data, 'data came thru from mouse hover')
155+
}
156+
157+
filterOutComponents() {
158+
let data = this.state.appState;
159+
if(this.state.componentsToFilter.length) {
160+
let result = [];
161+
filter(data, this.state.componentsToFilter, result);
162+
data = result;
163+
//*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.
164+
//* 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.
165+
//* 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.
166+
//* 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.
167+
//* filtering data after its already arrived with two traverse functions seem constly, and is the cause of our glitch.
168+
//* 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.
169+
// this.setState({
170+
// filteredData: data
171+
// });
172+
this.setState({
173+
appState: data
174+
});
175+
console.log(data, 'filterOutComponents function ran successfully, filteredData is set to this object --coming from devtools line 169')
176+
}
177+
}
178+
179+
handleApolloFilter(arr) {
180+
//* if first index of arr is not in componentsToFilter arr, set incoming array to componentsToFilter
181+
if(!this.state.componentsToFilter.includes(arr[0]) && arr[0] === 'ApolloProvider') {
182+
console.log('did i hit apollo?')
183+
let componentsArr = this.state.componentsToFilter.concat(arr);
184+
this.setState({
185+
componentsToFilter: componentsArr,
186+
toggleApollo: true
187+
})
188+
}
189+
else {
190+
//* if componentsToFilter is not empty iterate through
191+
let list = this.state.componentsToFilter;
192+
let output = [];
193+
for (let i = 0; i < list.length; i++) {
194+
if (!arr.includes(list[i])) {
195+
output.push(list[i]);
196+
}
197+
}
198+
this.setState({
199+
componentsToFilter: output,
200+
toggleApollo: false
201+
})
202+
}
203+
}
204+
205+
handleReduxFilter(arr) {
206+
//* if first index of arr is not in componentsToFilter arr, set incoming array to componentsToFilter
207+
if(!this.state.componentsToFilter.includes(arr[0]) && arr[0] === 'Provider') {
208+
console.log('did i hit redux?')
209+
let componentsArr = this.state.componentsToFilter.concat(arr);
210+
this.setState({
211+
componentsToFilter: componentsArr,
212+
toggleRedux: true
213+
})
214+
}
215+
else {
216+
//* if componentsToFilter is not empty iterate through
217+
let list = this.state.componentsToFilter;
218+
let output = [];
219+
for (let i = 0; i < list.length; i++) {
220+
if (!arr.includes(list[i])) {
221+
output.push(list[i]);
222+
}
223+
}
224+
this.setState({
225+
componentsToFilter: output,
226+
toggleRedux: false
227+
})
228+
}
229+
}
230+
231+
handleRouterFilter(arr) {
232+
//* if first index of arr is not in componentsToFilter arr, set incoming array to componentsToFilter
233+
if(!this.state.componentsToFilter.includes(arr[0]) && arr[0] === 'BrowserRouter') {
234+
console.log('did i hit router?')
235+
let componentsArr = this.state.componentsToFilter.concat(arr);
236+
this.setState({
237+
componentsToFilter: componentsArr,
238+
toggleRouter: true
239+
})
240+
}
241+
else {
242+
//* if componentsToFilter is not empty iterate through
243+
let list = this.state.componentsToFilter;
244+
let output = [];
245+
for (let i = 0; i < list.length; i++) {
246+
if (!arr.includes(list[i])) {
247+
output.push(list[i]);
248+
}
249+
}
250+
this.setState({
251+
componentsToFilter: output,
252+
toggleRouter: false
253+
})
254+
}
140255
}
141256

142257
// * handles the clearing of both the request log and diff log
@@ -189,6 +304,17 @@ class App extends Component {
189304
) : (
190305
<div class='reactTab'>
191306
<StateContainer clearLog={this.handleClearLog.bind(this)} stateDiffs={this.state.stateDiff} />
307+
<TreeDiagram
308+
appState = {this.state.appState}
309+
handleMouseOver = {this.handleMouseOver}
310+
handleApolloFilter = {this.handleApolloFilter}
311+
handleReduxFilter = {this.handleReduxFilter}
312+
handleRouterFilter = {this.handleRouterFilter}
313+
// filteredData = {this.state.filteredData}
314+
// toggleRedux = {this.state.toggleRedux}
315+
// toggleRouter = {this.state.toggleRouter}
316+
// toggleApolo = {this.state.toggleApollo}
317+
/>
192318
<TreeDiagram appState={this.state.appState} handleMouseOver={this.handleMouseOver} />
193319
<StatePropsBox nodeData={this.state.nodeData} />
194320
</div>

‎src/filterDOM.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
const filter = (node, componentsArr, childrenArr) => {
2+
console.log(node.name, 'name from filterDOM.js is it there?')
23
if (node.name === undefined) {
34
filter(node[0], componentsArr, childrenArr)
45
} else {

0 commit comments

Comments
 (0)