Skip to content

Commit d340a1b

Browse files
benlohbenloh
authored
Merge pull request #169 from netcreateorg/dev-bl/filter
Filter Feature
2 parents f23c011 + 6868516 commit d340a1b

16 files changed

+505
-248
lines changed

‎build/app/assets/netcreate-config.js

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎build/app/view/netcreate/NetCreate.jsx

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -127,9 +127,14 @@ const FILTERLOGIC = require('./filter-logic'); // handles filtering functions
127127
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
128128
/*/ Define the component structure of the web application
129129
/*/ render() {
130-
const { isLoggedIn, disconnectMsg } = this.state;
131-
let hideGraph = false;
132-
if (this.state.requireLogin && !isLoggedIn) hideGraph = true;
130+
const { isLoggedIn, disconnectMsg } = this.state;
131+
132+
// show or hide graph
133+
// Use 'visibiliity' css NOT React's 'hidden' so size is properly
134+
// calculated on init
135+
let hideGraph = 'visible';
136+
if (this.state.requireLogin && !isLoggedIn) hideGraph = 'hidden';
137+
133138
return (
134139
<div>
135140
<div hidden={this.state.isConnected} style={{ width:'100%',height:'38px',position:'fixed',backgroundColor:'rgba(256,0,0,0.5',display:'flex',flexDirection:'column',justifyContent:'space-evenly',alignItems:'center',zIndex:'3000'}}>
@@ -140,8 +145,10 @@ const FILTERLOGIC = require('./filter-logic'); // handles filtering functions
140145
<Route path='/edit/:token' exact={true} component={SessionShell}/>
141146
<Route path='/edit' exact={true} component={SessionShell}/>
142147
<Route path='/' exact={true} component={SessionShell}/>
143-
<div hidden={hideGraph} style={{display:'flex', flexFlow:'row nowrap',
144-
width:'100%', height:'100vh',overflow:'hidden'}}>
148+
<div style={{display:'flex', flexFlow:'row nowrap',
149+
width: '100%', height: '100vh', overflow: 'hidden',
150+
visibility: hideGraph
151+
}}>
145152
<div id="left" style={{backgroundColor:'#EEE',flex:'1 1 25%',maxWidth:'400px',padding:'10px',overflow:'scroll',marginTop:'38px'}}>
146153
<div style={{display:'flex',flexFlow:'column nowrap'}}>
147154
<Search/>

‎build/app/view/netcreate/components/EdgeTable.jsx

Lines changed: 75 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
55
EdgeTable is used to to display a table of edges for review.
66
7+
It displays D3DATA.
8+
But also read FILTEREDD3DATA to show highlight/filtered state
9+
710
811
## TO USE
912
@@ -51,11 +54,13 @@ class EdgeTable extends UNISYS.Component {
5154
this.state = {
5255
edgePrompts: this.AppState('TEMPLATE').edgePrompts,
5356
edges: [],
57+
filteredEdges: [],
5458
isExpanded: true,
5559
sortkey: 'Relationship'
5660
};
5761

5862
this.handleDataUpdate = this.handleDataUpdate.bind(this);
63+
this.handleFilterDataUpdate = this.handleFilterDataUpdate.bind(this);
5964
this.OnTemplateUpdate = this.OnTemplateUpdate.bind(this);
6065
this.onButtonClick = this.onButtonClick.bind(this);
6166
this.onToggleExpanded = this.onToggleExpanded.bind(this);
@@ -77,7 +82,48 @@ class EdgeTable extends UNISYS.Component {
7782

7883
// Handle Template updates
7984
this.OnAppStateChange('TEMPLATE', this.OnTemplateUpdate);
80-
} // constructor
85+
86+
// Track Filtered Data Updates too
87+
this.OnAppStateChange('FILTEREDD3DATA', this.handleFilterDataUpdate);
88+
89+
} // constructor
90+
91+
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
92+
/*/
93+
/*/ componentDidMount () {
94+
if (DBG) console.log('EdgeTable.componentDidMount!');
95+
// Explicitly retrieve data because we may not have gotten a D3DATA
96+
// update while we were hidden.
97+
// filtered data needs to be set before D3Data
98+
const FILTEREDD3DATA = UDATA.AppState('FILTEREDD3DATA');
99+
this.setState({ filteredEdges: FILTEREDD3DATA.edges },
100+
() => {
101+
let D3DATA = this.AppState('D3DATA');
102+
this.handleDataUpdate(D3DATA);
103+
}
104+
)
105+
}
106+
107+
componentWillUnmount() {
108+
this.AppStateChangeOff('D3DATA', this.handleDataUpdate);
109+
this.AppStateChangeOff('FILTEREDD3DATA', this.handleFilterDataUpdate);
110+
this.AppStateChangeOff('TEMPLATE', this.OnTemplateUpdate);
111+
}
112+
113+
displayUpdated(nodeEdge) {
114+
var d = new Date(nodeEdge.meta.revision > 0 ? nodeEdge.meta.updated : nodeEdge.meta.created);
115+
116+
var year = "" + d.getFullYear();
117+
var date = (d.getMonth()+1)+"/"+d.getDate()+"/"+ year.substr(2,4);
118+
var time = d.toTimeString().substr(0,5);
119+
var dateTime = date+' at '+time;
120+
var titleString = "v" + nodeEdge.meta.revision;
121+
if(nodeEdge._nlog)
122+
titleString += " by " + nodeEdge._nlog[nodeEdge._nlog.length-1];
123+
var tag = <span title={titleString}> {dateTime} </span>;
124+
125+
return tag;
126+
}
81127

82128

83129

@@ -94,11 +140,25 @@ class EdgeTable extends UNISYS.Component {
94140
// {
95141

96142
if (data && data.edges) {
97-
const edges = this.sortTable(this.state.sortkey, data.edges);
143+
let edges = this.sortTable(this.state.sortkey, data.edges);
144+
const { filteredEdges } = this.state;
145+
// add highlight/filter status
146+
if (filteredEdges.length > 0) {
147+
edges = edges.map(edge => {
148+
const filteredEdge = filteredEdges.find(n => n.id === edge.id);
149+
if (!filteredEdge) edge.isFiltered = true;
150+
return edge;
151+
});
152+
}
98153
this.setState({edges});
99154
}
100155
}
101156

157+
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
158+
handleFilterDataUpdate(data) {
159+
if (data.edges) this.setState( { filteredEdges: data.edges } );
160+
}
161+
102162
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
103163
OnTemplateUpdate(data) {
104164
this.setState({edgePrompts: data.edgePrompts});
@@ -335,11 +395,11 @@ class EdgeTable extends UNISYS.Component {
335395

336396

337397
let { tableHeight } = this.props;
338-
let styles = `
339-
thead, tbody { }
398+
let styles = `thead, tbody { font-size: 0.8em }
340399
thead { position: relative; }
341400
tbody { overflow: auto; }
342-
`
401+
.btn-sm { font-size: 0.6rem; padding: 0.1rem 0.2rem }
402+
`
343403
return (
344404
<div style={{overflow:'auto',
345405
position:'relative',display: 'block', left: '1px', right:'10px',maxHeight: tableHeight, backgroundColor:'#f3f3ff'
@@ -354,11 +414,11 @@ class EdgeTable extends UNISYS.Component {
354414
>
355415
<thead>
356416
<tr>
357-
<th width="5%" hidden={!DBG}><Button size="sm"
417+
<th width="4%" hidden={!DBG}><Button size="sm"
358418
onClick={()=>this.setSortKey("id")}
359419
>ID {this.sortSymbol("id")}</Button></th>
360420
<th hidden={!DBG}>Size</th>
361-
<th width="5%"><div style={{color: '#f3f3ff'}}>_Edit_</div></th>
421+
<th width="4%"><div style={{color: '#f3f3ff'}}>_Edit_</div></th>
362422
<th hidden={!DBG}>Src ID</th>
363423
<th width="10%"><Button size="sm"
364424
onClick={()=>this.setSortKey("source")}
@@ -376,21 +436,25 @@ class EdgeTable extends UNISYS.Component {
376436
<th width="10%" hidden={edgePrompts.citation.hidden}><Button size="sm"
377437
onClick={()=>this.setSortKey("Citations")}
378438
>{edgePrompts.citation.label} {this.sortSymbol("Citations")}</Button></th>
379-
<th width="16%" hidden={edgePrompts.notes.hidden}><Button size="sm"
439+
<th width="20%" hidden={edgePrompts.notes.hidden}><Button size="sm"
380440
onClick={()=>this.setSortKey("Notes")}
381441
>{edgePrompts.notes.label} {this.sortSymbol("Notes")}</Button></th>
382-
<th width="16%"hidden={edgePrompts.info.hidden}><Button size="sm"
442+
<th width="10%"hidden={edgePrompts.info.hidden}><Button size="sm"
383443
onClick={()=>this.setSortKey("Info")}
384444
>{edgePrompts.info.label} {this.sortSymbol("Info")}</Button></th>
385-
<th width="16%"hidden={!isLocalHost}><Button size="sm"
445+
<th width="10%"hidden={!isLocalHost}><Button size="sm"
386446
onClick={()=>this.setSortKey("Updated")}
387447
>Updated {this.sortSymbol("Updated")}</Button></th>
388448

389449
</tr>
390450
</thead>
391451
<tbody style={{ maxHeight: tableHeight }}>
392452
{this.state.edges.map( (edge,i) => (
393-
<tr key={i}>
453+
<tr key={i}
454+
style={{
455+
color: edge.isFiltered ? 'red' : 'black',
456+
opacity: edge.filteredTransparency
457+
}}>
394458
<td hidden={!DBG}>{edge.id}</td>
395459
<td hidden={!DBG}>{edge.size}</td>
396460
<td><Button size="sm" outline
@@ -419,36 +483,6 @@ class EdgeTable extends UNISYS.Component {
419483
</div>
420484
);
421485
}
422-
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
423-
/*/
424-
/*/ componentDidMount () {
425-
if (DBG) console.log('EdgeTable.componentDidMount!');
426-
// Explicitly retrieve data because we may not have gotten a D3DATA
427-
// update while we were hidden.
428-
let D3DATA = this.AppState('D3DATA');
429-
this.handleDataUpdate(D3DATA);
430-
}
431-
432-
componentWillUnmount() {
433-
this.AppStateChangeOff('D3DATA', this.handleDataUpdate);
434-
this.AppStateChangeOff('TEMPLATE', this.OnTemplateUpdate);
435-
}
436-
437-
displayUpdated(nodeEdge)
438-
{
439-
var d = new Date(nodeEdge.meta.revision > 0 ? nodeEdge.meta.updated : nodeEdge.meta.created);
440-
441-
var year = "" + d.getFullYear();
442-
var date = (d.getMonth()+1)+"/"+d.getDate()+"/"+ year.substr(2,4);
443-
var time = d.toTimeString().substr(0,5);
444-
var dateTime = date+' at '+time;
445-
var titleString = "v" + nodeEdge.meta.revision;
446-
if(nodeEdge._nlog)
447-
titleString += " by " + nodeEdge._nlog[nodeEdge._nlog.length-1];
448-
var tag = <span title={titleString}> {dateTime} </span>;
449-
450-
return tag;
451-
}
452486
} // class EdgeTable
453487

454488

‎build/app/view/netcreate/components/InfoPanel.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -179,9 +179,9 @@ class InfoPanel extends UNISYS.Component {
179179
<NavItem>
180180
<NavLink
181181
className={classnames({ active: activeTab === '2' })}
182-
onClick={() => { this.toggle('2'); this.sendGA('Filter', window.location); }}
182+
onClick={() => { this.toggle('2'); this.sendGA('Highlight', window.location); }}
183183
>
184-
Filters
184+
Highlight / Filter
185185
</NavLink>
186186
</NavItem>
187187
<NavItem>
@@ -221,7 +221,7 @@ class InfoPanel extends UNISYS.Component {
221221
<TabPane tabId="1">
222222
</TabPane>
223223
<TabPane tabId="2">
224-
<FiltersPanel tableHeight={tableHeight} />
224+
<FiltersPanel tableHeight={tableHeight}/>
225225
</TabPane>
226226
<TabPane tabId="3">
227227
<Row>
@@ -265,7 +265,7 @@ class InfoPanel extends UNISYS.Component {
265265
<div hidden={!hideDragger || filtersSummary===''}
266266
style={{ padding: '3px', fontSize: '0.8em', color:'#999', backgroundColor:'#eef'}}
267267
>
268-
FILTERED BY: {filtersSummary} <Button size="sm" outline onClick={this.OnClearBtnClick}>Clear Filters</Button>
268+
{filtersSummary} <Button size="sm" outline onClick={this.OnClearBtnClick}>Clear Filters</Button>
269269
</div>
270270
</div>
271271
);

‎build/app/view/netcreate/components/NetGraph.jsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,6 @@ class NetGraph extends UNISYS.Component {
8080
let el = ReactDOM.findDOMNode(this);
8181
let d3NetGraph = new D3NetGraph(el, this.AppState('TEMPLATE').nodePrompts);
8282
this.setState({ d3NetGraph });
83-
8483
}
8584
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
8685
/*/

0 commit comments

Comments
 (0)