Filter Feature

build/app/view/netcreate/NetCreate.jsx

@@ -127,9 +127,14 @@ const FILTERLOGIC  = require('./filter-logic'); // handles filtering functions
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /*/ Define the component structure of the web application
   /*/ render() {
-    const { isLoggedIn, disconnectMsg } = this.state;
-        let hideGraph = false;
-        if (this.state.requireLogin && !isLoggedIn) hideGraph = true;
+        const { isLoggedIn, disconnectMsg } = this.state;
+
+        // show or hide graph
+        // Use 'visibiliity' css NOT React's 'hidden' so size is properly
+        // calculated on init
+        let hideGraph = 'visible';
+        if (this.state.requireLogin && !isLoggedIn) hideGraph = 'hidden';
+
         return (
           <div>
             <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
             <Route path='/edit/:token' exact={true} component={SessionShell}/>
             <Route path='/edit' exact={true} component={SessionShell}/>
             <Route path='/' exact={true} component={SessionShell}/>
-            <div hidden={hideGraph} style={{display:'flex', flexFlow:'row nowrap',
-                width:'100%', height:'100vh',overflow:'hidden'}}>
+            <div style={{display:'flex', flexFlow:'row nowrap',
+              width: '100%', height: '100vh', overflow: 'hidden',
+              visibility: hideGraph
+            }}>
               <div id="left" style={{backgroundColor:'#EEE',flex:'1 1 25%',maxWidth:'400px',padding:'10px',overflow:'scroll',marginTop:'38px'}}>
                 <div style={{display:'flex',flexFlow:'column nowrap'}}>
                   <Search/>

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

@@ -4,6 +4,9 @@
 
     EdgeTable is used to to display a table of edges for review.
 
+    It displays D3DATA.
+    But also read FILTEREDD3DATA to show highlight/filtered state
+
 
   ## TO USE
 
@@ -51,11 +54,13 @@ class EdgeTable extends UNISYS.Component {
       this.state = {
         edgePrompts:  this.AppState('TEMPLATE').edgePrompts,
         edges:        [],
+        filteredEdges: [],
         isExpanded:   true,
         sortkey:      'Relationship'
       };
 
       this.handleDataUpdate = this.handleDataUpdate.bind(this);
+      this.handleFilterDataUpdate = this.handleFilterDataUpdate.bind(this);
       this.OnTemplateUpdate = this.OnTemplateUpdate.bind(this);
       this.onButtonClick            = this.onButtonClick.bind(this);
       this.onToggleExpanded         = this.onToggleExpanded.bind(this);
@@ -77,7 +82,48 @@ class EdgeTable extends UNISYS.Component {
 
       // Handle Template updates
       this.OnAppStateChange('TEMPLATE', this.OnTemplateUpdate);
-    } // constructor
+
+      // Track Filtered Data Updates too
+      this.OnAppStateChange('FILTEREDD3DATA', this.handleFilterDataUpdate);
+
+  } // constructor
+
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/*/
+/*/ componentDidMount () {
+      if (DBG) console.log('EdgeTable.componentDidMount!');
+      // Explicitly retrieve data because we may not have gotten a D3DATA
+      // update while we were hidden.
+      // filtered data needs to be set before D3Data
+      const FILTEREDD3DATA = UDATA.AppState('FILTEREDD3DATA');
+      this.setState({ filteredEdges: FILTEREDD3DATA.edges },
+        () => {
+          let D3DATA = this.AppState('D3DATA');
+          this.handleDataUpdate(D3DATA);
+        }
+      )
+}
+
+    componentWillUnmount() {
+      this.AppStateChangeOff('D3DATA', this.handleDataUpdate);
+      this.AppStateChangeOff('FILTEREDD3DATA', this.handleFilterDataUpdate);
+      this.AppStateChangeOff('TEMPLATE', this.OnTemplateUpdate);
+    }
+
+  displayUpdated(nodeEdge) {
+      var d = new Date(nodeEdge.meta.revision > 0 ? nodeEdge.meta.updated : nodeEdge.meta.created);
+
+      var year = "" + d.getFullYear();
+      var date = (d.getMonth()+1)+"/"+d.getDate()+"/"+ year.substr(2,4);
+      var time = d.toTimeString().substr(0,5);
+      var dateTime = date+' at '+time;
+      var titleString = "v" + nodeEdge.meta.revision;
+      if(nodeEdge._nlog)
+        titleString += " by " + nodeEdge._nlog[nodeEdge._nlog.length-1];
+      var tag = <span title={titleString}> {dateTime} </span>;
+
+      return tag;
+  }
 
 
 
@@ -94,11 +140,25 @@ class EdgeTable extends UNISYS.Component {
     // {
 
     if (data && data.edges) {
-      const edges = this.sortTable(this.state.sortkey, data.edges);
+      let edges = this.sortTable(this.state.sortkey, data.edges);
+      const { filteredEdges } = this.state;
+      // add highlight/filter status
+      if (filteredEdges.length > 0) {
+        edges = edges.map(edge => {
+          const filteredEdge = filteredEdges.find(n => n.id === edge.id);
+          if (!filteredEdge) edge.isFiltered = true;
+          return edge;
+        });
+      }
       this.setState({edges});
     }
   }
 
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  handleFilterDataUpdate(data) {
+    if (data.edges) this.setState( { filteredEdges: data.edges } );
+  }
+
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   OnTemplateUpdate(data) {
     this.setState({edgePrompts: data.edgePrompts});
@@ -335,11 +395,11 @@ class EdgeTable extends UNISYS.Component {
 
 
       let { tableHeight } = this.props;
-      let styles = `
-                    thead, tbody { }
+      let styles = `thead, tbody { font-size: 0.8em }
                     thead { position: relative; }
                     tbody { overflow: auto; }
-`
+                    .btn-sm { font-size: 0.6rem; padding: 0.1rem 0.2rem }
+                    `
       return (
            <div style={{overflow:'auto',
                      position:'relative',display: 'block',  left: '1px', right:'10px',maxHeight: tableHeight, backgroundColor:'#f3f3ff'
@@ -354,11 +414,11 @@ class EdgeTable extends UNISYS.Component {
           >
             <thead>
               <tr>
-                <th width="5%" hidden={!DBG}><Button size="sm"
+                <th width="4%" hidden={!DBG}><Button size="sm"
                       onClick={()=>this.setSortKey("id")}
                     >ID {this.sortSymbol("id")}</Button></th>
                 <th hidden={!DBG}>Size</th>
-                <th width="5%"><div style={{color: '#f3f3ff'}}>_Edit_</div></th>
+                <th width="4%"><div style={{color: '#f3f3ff'}}>_Edit_</div></th>
                 <th hidden={!DBG}>Src ID</th>
                 <th  width="10%"><Button size="sm"
                       onClick={()=>this.setSortKey("source")}
@@ -376,21 +436,25 @@ class EdgeTable extends UNISYS.Component {
                 <th width="10%" hidden={edgePrompts.citation.hidden}><Button size="sm"
                       onClick={()=>this.setSortKey("Citations")}
                     >{edgePrompts.citation.label} {this.sortSymbol("Citations")}</Button></th>
-                <th width="16%" hidden={edgePrompts.notes.hidden}><Button size="sm"
+                <th width="20%" hidden={edgePrompts.notes.hidden}><Button size="sm"
                       onClick={()=>this.setSortKey("Notes")}
                     >{edgePrompts.notes.label} {this.sortSymbol("Notes")}</Button></th>
-                <th  width="16%"hidden={edgePrompts.info.hidden}><Button size="sm"
+                <th  width="10%"hidden={edgePrompts.info.hidden}><Button size="sm"
                       onClick={()=>this.setSortKey("Info")}
                     >{edgePrompts.info.label} {this.sortSymbol("Info")}</Button></th>
-                <th  width="16%"hidden={!isLocalHost}><Button size="sm"
+                <th  width="10%"hidden={!isLocalHost}><Button size="sm"
                       onClick={()=>this.setSortKey("Updated")}
                     >Updated {this.sortSymbol("Updated")}</Button></th>
 
               </tr>
             </thead>
             <tbody style={{ maxHeight: tableHeight }}>
             {this.state.edges.map( (edge,i) => (
-              <tr key={i}>
+              <tr key={i}
+                style={{
+                  color: edge.isFiltered ? 'red' : 'black',
+                  opacity: edge.filteredTransparency
+                }}>
                 <td hidden={!DBG}>{edge.id}</td>
                 <td hidden={!DBG}>{edge.size}</td>
                 <td><Button size="sm" outline
@@ -419,36 +483,6 @@ class EdgeTable extends UNISYS.Component {
         </div>
       );
     }
-/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-/*/
-/*/ componentDidMount () {
-      if (DBG) console.log('EdgeTable.componentDidMount!');
-      // Explicitly retrieve data because we may not have gotten a D3DATA
-      // update while we were hidden.
-      let D3DATA = this.AppState('D3DATA');
-      this.handleDataUpdate(D3DATA);
-    }
-
-    componentWillUnmount() {
-      this.AppStateChangeOff('D3DATA', this.handleDataUpdate);
-      this.AppStateChangeOff('TEMPLATE', this.OnTemplateUpdate);
-    }
-
-  displayUpdated(nodeEdge)
-  {
-      var d = new Date(nodeEdge.meta.revision > 0 ? nodeEdge.meta.updated : nodeEdge.meta.created);
-
-      var year = "" + d.getFullYear();
-      var date = (d.getMonth()+1)+"/"+d.getDate()+"/"+ year.substr(2,4);
-      var time = d.toTimeString().substr(0,5);
-      var dateTime = date+' at '+time;
-      var titleString = "v" + nodeEdge.meta.revision;
-      if(nodeEdge._nlog)
-        titleString += " by " + nodeEdge._nlog[nodeEdge._nlog.length-1];
-      var tag = <span title={titleString}> {dateTime} </span>;
-
-      return tag;
-  }
 } // class EdgeTable
 
 

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

@@ -179,9 +179,9 @@ class InfoPanel extends UNISYS.Component {
             <NavItem>
               <NavLink
                 className={classnames({ active: activeTab === '2' })}
-                onClick={() => { this.toggle('2'); this.sendGA('Filter', window.location); }}
+                onClick={() => { this.toggle('2'); this.sendGA('Highlight', window.location); }}
               >
-                Filters
+                Highlight / Filter
               </NavLink>
             </NavItem>
             <NavItem>
@@ -221,7 +221,7 @@ class InfoPanel extends UNISYS.Component {
             <TabPane tabId="1">
             </TabPane>
             <TabPane tabId="2">
-              <FiltersPanel tableHeight={tableHeight} />
+              <FiltersPanel tableHeight={tableHeight}/>
             </TabPane>
             <TabPane tabId="3">
               <Row>
@@ -265,7 +265,7 @@ class InfoPanel extends UNISYS.Component {
         <div hidden={!hideDragger || filtersSummary===''}
           style={{ padding: '3px', fontSize: '0.8em', color:'#999', backgroundColor:'#eef'}}
         >
-          FILTERED BY: {filtersSummary} <Button size="sm" outline onClick={this.OnClearBtnClick}>Clear Filters</Button>
+          {filtersSummary} <Button size="sm" outline onClick={this.OnClearBtnClick}>Clear Filters</Button>
         </div>
       </div>
     );

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

@@ -80,7 +80,6 @@ class NetGraph extends UNISYS.Component {
       let el = ReactDOM.findDOMNode(this);
       let d3NetGraph = new D3NetGraph(el, this.AppState('TEMPLATE').nodePrompts);
       this.setState({ d3NetGraph });
-
     }
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /*/