diff --git a/build/app/assets/netcreate-config.js b/build/app/assets/netcreate-config.js
deleted file mode 100644
index fd489140..00000000
--- a/build/app/assets/netcreate-config.js
+++ /dev/null
@@ -1,9 +0,0 @@
-
-// this file generated by NC command
-const NC_CONFIG = {
-  dataset: "CHAT",
-  port: "3000",
-  googlea: "0"
-};
-if (typeof process === "object") module.exports = NC_CONFIG;
-if (typeof window === "object") window.NC_CONFIG = NC_CONFIG;
\ No newline at end of file
diff --git a/build/app/view/netcreate/NetCreate.jsx b/build/app/view/netcreate/NetCreate.jsx
index 9c9ac6e7..2bf69c45 100644
--- a/build/app/view/netcreate/NetCreate.jsx
+++ b/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/>
diff --git a/build/app/view/netcreate/components/EdgeTable.jsx b/build/app/view/netcreate/components/EdgeTable.jsx
index 96889d3a..cc14da6f 100644
--- a/build/app/view/netcreate/components/EdgeTable.jsx
+++ b/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,13 +436,13 @@ 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>
 
@@ -390,7 +450,11 @@ class EdgeTable extends UNISYS.Component {
             </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
 
 
diff --git a/build/app/view/netcreate/components/InfoPanel.jsx b/build/app/view/netcreate/components/InfoPanel.jsx
index 82705a85..d2105df9 100644
--- a/build/app/view/netcreate/components/InfoPanel.jsx
+++ b/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>
     );
diff --git a/build/app/view/netcreate/components/NetGraph.jsx b/build/app/view/netcreate/components/NetGraph.jsx
index fc0991cf..7e4f98b8 100644
--- a/build/app/view/netcreate/components/NetGraph.jsx
+++ b/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 });
-
     }
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /*/
diff --git a/build/app/view/netcreate/components/NodeTable.jsx b/build/app/view/netcreate/components/NodeTable.jsx
index be95f1c2..6df2edb4 100644
--- a/build/app/view/netcreate/components/NodeTable.jsx
+++ b/build/app/view/netcreate/components/NodeTable.jsx
@@ -4,6 +4,8 @@
 
     NodeTable is used to to display a table of nodes for review.
 
+    It displays D3DATA.
+    But also checks FILTEREDD3DATA to show highlight/filtered state
 
   ## TO USE
 
@@ -43,43 +45,87 @@ var   UDATA    = null;
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /// export a class object for consumption by brunch/require
 class NodeTable extends UNISYS.Component {
-    constructor (props) {
-      super(props);
+  constructor(props) {
+    super(props);
 
-      this.state = {
-        nodePrompts:  this.AppState('TEMPLATE').nodePrompts,
-        nodes: [],
-        edgeCounts: {},         // {nodeID:count,...}
-        isExpanded:   true,
-        sortkey:      'label'
-      };
+    this.state = {
+      nodePrompts: this.AppState('TEMPLATE').nodePrompts,
+      nodes: [],
+      filteredNodes: [],
+      isExpanded: true,
+      sortkey: 'label'
+    };
 
-      this.handleDataUpdate = this.handleDataUpdate.bind(this);
-      this.OnTemplateUpdate = this.OnTemplateUpdate.bind(this);
-      this.onButtonClick = this.onButtonClick.bind(this);
-      this.onToggleExpanded         = this.onToggleExpanded.bind(this);
-      this.setSortKey               = this.setSortKey.bind(this);
-      this.sortSymbol               = this.sortSymbol.bind(this);
+    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);
+    this.setSortKey = this.setSortKey.bind(this);
+    this.sortSymbol = this.sortSymbol.bind(this);
 
-      this.sortDirection = -1;
+    this.sortDirection = -1;
 
-      /// Initialize UNISYS DATA LINK for REACT
-      UDATA = UNISYS.NewDataLink(this);
+    /// Initialize UNISYS DATA LINK for REACT
+    UDATA = UNISYS.NewDataLink(this);
 
-      // Always make sure class methods are bind()'d before using them
-      // as a handler, otherwise object context is lost
-      this.OnAppStateChange('D3DATA', this.handleDataUpdate);
+    // Always make sure class methods are bind()'d before using them
+    // as a handler, otherwise object context is lost
+    this.OnAppStateChange('D3DATA', this.handleDataUpdate);
 
-      // Handle Template updates
-      this.OnAppStateChange('TEMPLATE', this.OnTemplateUpdate);
-    } // constructor
+    // Handle Template updates
+    this.OnAppStateChange('TEMPLATE', this.OnTemplateUpdate);
+
+    // Track Filtered Data Updates too
+    // UDATA.HandleMessage('FILTEREDD3DATA', (data) => {
+    this.OnAppStateChange('FILTEREDD3DATA', this.handleFilterDataUpdate);
+
+  } // constructor
+
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/*/
+/*/ componentDidMount () {
+      if (DBG) console.error('NodeTable.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({ filteredNodes: FILTEREDD3DATA.nodes },
+        () => {
+          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;
+
+    }
 
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /*/ Handle updated SELECTION
   /*/
   handleDataUpdate(data) {
-    if(DBG)
-      console.log('handle data update')
+    if (DBG) console.log('handle data update')
 
     // 2020-09-09 Removing this check and relying on other NodeTable optimizations. BL
     // if (data.bMarkedNode)
@@ -92,31 +138,29 @@ class NodeTable extends UNISYS.Component {
     // {}
 
     if (data.nodes) {
-      // const edgeCounts = this.countEdges(data.edges);
-      const nodes = this.sortTable(this.state.sortkey, data.nodes);
-      this.setState({
-        nodes: nodes,
-        // edgeCounts: edgeCounts
-      });
+      let nodes = this.sortTable(this.state.sortkey, data.nodes);
+      const { filteredNodes } = this.state;
+      // add highlight/filter status
+      if (filteredNodes.length > 0) {
+        nodes = nodes.map(node => {
+          const filteredNode = filteredNodes.find(n => n.id === node.id);
+          if (!filteredNode) node.isFiltered = true; // not in filteredNode, so it's been removed
+          return node
+        });
+      }
+      this.setState({ nodes });
     }
   }
-/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-OnTemplateUpdate(data) {
-  this.setState({nodePrompts: data.nodePrompts});
-}
-/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-/*/ Build table of counts
-/*/
-// JD removed because "size" seemed to work just fine? (I added a degrees that is size - 1)
-countEdges(edges) {
-  let edgeCounts = {}; // this.state.edgeCounts;
-  edges.forEach(edge => {
-    edgeCounts[edge.source.id] = edgeCounts[edge.source.id] !== undefined ? edgeCounts[edge.source.id] + 1 : 1;
-    edgeCounts[edge.target.id] = edgeCounts[edge.target.id] !== undefined ? edgeCounts[edge.target.id] + 1 : 1;
-  });
-  return edgeCounts;
-}
 
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  handleFilterDataUpdate(data) {
+    if (data.nodes) this.setState( { filteredNodes: data.nodes } );
+  }
+
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  OnTemplateUpdate(data) {
+    this.setState({nodePrompts: data.nodePrompts});
+  }
 
 /// UTILITIES /////////////////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -136,7 +180,6 @@ countEdges(edges) {
 /*/
 /*/ sortByEdgeCount(nodes) {
       if (nodes) {
-        // let edgeCounts = this.state.edgeCounts;
         return nodes.sort( (a, b) => {
             let akey = a.degrees || 0,
               bkey = b.degrees || 0;
@@ -172,8 +215,9 @@ countEdges(edges) {
       }
     }
 
-    /// ---
-    sortByUpdated(nodes)
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/*/
+/*/ sortByUpdated(nodes)
     {
       if (nodes) {
         return nodes.sort( (a,b) => {
@@ -287,57 +331,60 @@ countEdges(edges) {
 /*/
 /*/
 render() {
-  if(DBG)
-  console.log('nodetablerender!')
   if (this.state.nodes === undefined) return "";
   let { nodePrompts } = this.state;
   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:'#eafcff'
-      }}>
+    <div style={{overflow:'auto',
+      position:'relative',display: 'block', left: '1px', right:'10px',maxHeight: tableHeight, backgroundColor:'#eafcff'
+    }}>
       <style>{styles}</style>
       <Button size="sm" outline hidden
         onClick={this.onToggleExpanded}
       >{this.state.isExpanded ? "Hide Node Table" : "Show Node Table"}</Button>
       <Table hidden={!this.state.isExpanded} hover size="sm"
-              responsive striped
-              className="nodetable w-auto"
+        responsive striped
+        className="nodetable w-auto"
       >
         <thead>
           <tr>
             <th width="4%"><div style={{color: '#f3f3ff'}}>_Edit_</div></th>
-            <th hidden={!DBG}>ID</th>
-            <th width="12%"><Button size="sm"
+            <th width="4%" hidden={!DBG}>ID</th>
+            <th width="4%"><Button size="sm"
                   onClick={() => this.setSortKey("edgeCount")}
                 >{nodePrompts.degrees.label} {this.sortSymbol("edgeCount")}</Button></th>
             <th width="15%"><Button size="sm"
                   onClick={()=>this.setSortKey("label")}
                 >{nodePrompts.label.label} {this.sortSymbol("label")}</Button></th>
-            <th width="15%"hidden={nodePrompts.type.hidden}>
+            <th width="10%"hidden={nodePrompts.type.hidden}>
                 <Button size="sm"
                   onClick={()=>this.setSortKey("type")}
                 >{nodePrompts.type.label} {this.sortSymbol("type")}</Button></th>
-            <th width="26%"hidden={nodePrompts.info.hidden}>
+            <th width="20%"hidden={nodePrompts.info.hidden}>
                 <Button size="sm"
                   onClick={()=>this.setSortKey("info")}
                 >{nodePrompts.info.label} {this.sortSymbol("info")}</Button></th>
-            <th width="26%" hidden={nodePrompts.notes.hidden}>
+            <th width="30%" hidden={nodePrompts.notes.hidden}>
                 <Button size="sm"
                   onClick={()=>this.setSortKey("notes")}
                 >{nodePrompts.notes.label} {this.sortSymbol("notes")}</Button></th>
-            <th  width="20%"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.nodes.map( (node,i) => (
-          <tr key={i}>
+          <tr key={i}
+            style={{
+              color: node.isFiltered ? 'red' : 'black',
+              opacity: node.filteredTransparency
+            }}>
             <td><Button size="sm" outline
                   value={node.id}
                   onClick={this.onButtonClick}
@@ -361,37 +408,6 @@ render() {
   );
 
 }
-/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-/*/
-/*/ componentDidMount () {
-      if (DBG) console.error('NodeTable.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 NodeTable
 
diff --git a/build/app/view/netcreate/components/d3-simplenetgraph.js b/build/app/view/netcreate/components/d3-simplenetgraph.js
index 3d387f23..c4efdb18 100644
--- a/build/app/view/netcreate/components/d3-simplenetgraph.js
+++ b/build/app/view/netcreate/components/d3-simplenetgraph.js
@@ -2,6 +2,8 @@
 
     D3 Simple NetGraph
 
+    This uses D3 Version 4.0.
+
     This is designed to work with the NetGraph React component.
 
     NetGraph calls SetData whenever it receives an updated data object.
@@ -165,10 +167,20 @@ class D3NetGraph {
       this._Dragged           = this._Dragged.bind(this);
       this._Dragended         = this._Dragended.bind(this);
 
+      // V1.4 CHANGE
+      // Ignore D3DATA Updates!!!  Only listen to FILTEREDD3DATA Updates
+      //
       // watch for updates to the D3DATA data object
-      UDATA.OnAppStateChange('D3DATA',(data)=>{
+      // UDATA.OnAppStateChange('D3DATA',(data)=>{
+      //   // expect { nodes, edges } for this namespace
+      //   if (DBG) console.error(PR,'got state D3DATA',data);
+      //   this._SetData(data);
+      // });
+
+      // Special handler for the remove filter
+      UDATA.OnAppStateChange('FILTEREDD3DATA',(data)=>{
         // expect { nodes, edges } for this namespace
-        if (DBG) console.log(PR,'got state D3DATA',data);
+        if (DBG) console.log(PR,'got state FILTEREDD3DATA',data);
         this._SetData(data);
       });
 
@@ -182,6 +194,7 @@ class D3NetGraph {
 
       UDATA.HandleMessage('ZOOM_RESET', (data) => {
         if (DBG) console.log(PR, 'ZOOM_RESET got state D3DATA', data);
+        // NOTE: The transition/duration call means _HandleZoom will be called multiple times
         this.d3svg.transition()
           .duration(200)
           .call(this.zoom.scaleTo, 1);
@@ -197,6 +210,13 @@ class D3NetGraph {
         this._Transition(0.8);
       });
 
+      // Pan to 0,0 and zoom scale to 1
+      // (Currently not used)
+      UDATA.HandleMessage('ZOOM_PAN_RESET', (data) => {
+        if (DBG) console.log(PR, 'ZOOM_PAN_RESET got state D3DATA', data);
+        const transform = d3.zoomIdentity.translate(0, 0).scale(1);
+        this.d3svg.call(this.zoom.transform, transform);
+      });
 
       UDATA.HandleMessage('GROUP_PROPS', (data) => {
         console.log('GROUP_PROPS got ... ');
@@ -331,7 +351,7 @@ class D3NetGraph {
           return COLORMAP[d.attributes["Node_Type"]];
         })
         .style("opacity", d => {
-          return d.isFilteredOut ? d.filteredTransparency : 1.0
+          return d.filteredTransparency
         });
 
       // enter node: also append 'text' element
@@ -343,7 +363,7 @@ class D3NetGraph {
           .attr("dy", "0.35em") // ".15em")
           .text((d) => { return d.label })
           .style("opacity", d => {
-            return d.isFilteredOut ? d.filteredTransparency : 1.0
+            return d.filteredTransparency
           });
 
       // enter node: also append a 'title' tag
@@ -403,26 +423,28 @@ class D3NetGraph {
             if (d.selected || d.strokeColor) return '5px';
             return undefined // don't set stroke width
           })
-// this "r" is necessary to resize after a link is added
           .attr("fill", (d) => {
             // REVIEW: Using label match.  Should we use id instead?
             return COLORMAP[d.attributes["Node_Type"]];
           })
           .attr("r", (d) => {
-              let radius = this.data.edges.reduce((acc,ed)=>{
-                return (ed.source.id===d.id || ed.target.id===d.id) ? acc+1 : acc
-              },1);
-
-              d.weight = radius
-              d.size = radius // save the calculated size
-              d.degrees = radius - 1
-              return this.defaultSize + (this.defaultSize * d.weight / 2)
+            // this "r" is necessary to resize after a link is added
+            let radius = this.data.edges.reduce((acc,ed)=>{
+              return (ed.source.id===d.id || ed.target.id===d.id) ? acc+1 : acc
+            },1);
+
+            d.weight = radius
+            d.size = radius // save the calculated size
+            // radius is calculated by counting the number of edges attached
+            // (+ 1 for a minimum radius), so we hack degrees by using radius-1
+            d.degrees = radius - 1
+            return this.defaultSize + (this.defaultSize * d.weight / 2)
           })
           .transition()
           .duration(500)
           .style("opacity", d => {
             // console.log(d);
-            return d.isFilteredOut ? d.filteredTransparency : 1.0
+            return d.filteredTransparency
           });
 
       // UPDATE text in each node for all nodes
@@ -443,7 +465,7 @@ class D3NetGraph {
           .transition()
           .duration(500)
           .style("opacity", d => {
-            return d.isFilteredOut ? d.filteredTransparency : 1.0
+            return d.filteredTransparency
           });
 
       nodeElements.merge(nodeElements)
@@ -471,7 +493,7 @@ class D3NetGraph {
         //   this.edgeClickFn( d )
         // })
         .style("opacity", d => {
-          return d.isFilteredOut ? d.filteredTransparency : 1.0
+          return d.filteredTransparency
         });
 
       // .merge() updates the visuals whenever the data is updated.
@@ -482,7 +504,7 @@ class D3NetGraph {
         .transition()
         .duration(500)
         .style("opacity", d => {
-          return d.isFilteredOut ? d.filteredTransparency : 1.0
+          return d.filteredTransparency
         });
 
       linkElements.exit().remove()
diff --git a/build/app/view/netcreate/components/filter/FilterEnums.js b/build/app/view/netcreate/components/filter/FilterEnums.js
index 5dff9f90..2c4e0b39 100644
--- a/build/app/view/netcreate/components/filter/FilterEnums.js
+++ b/build/app/view/netcreate/components/filter/FilterEnums.js
@@ -1,5 +1,10 @@
 const FILTER = {};
 
+// Determines whether filter action is to highlight/fade or remove (filter) nodes and edges
+FILTER.ACTION = {};
+FILTER.ACTION.HIGHLIGHT = 'highlight';
+FILTER.ACTION.FILTER = 'filter';
+
 // Types of filters definable in template files.
 FILTER.TYPES = {};
 FILTER.TYPES.STRING = 'string';
diff --git a/build/app/view/netcreate/components/filter/FilterGroup.jsx b/build/app/view/netcreate/components/filter/FilterGroup.jsx
index 488ffbee..fafde5ae 100644
--- a/build/app/view/netcreate/components/filter/FilterGroup.jsx
+++ b/build/app/view/netcreate/components/filter/FilterGroup.jsx
@@ -8,7 +8,7 @@ const ReactStrap = require('reactstrap');
 const { Input, Label } = ReactStrap;
 
 export default function FilterGroup({
-  group, label, filters, transparency
+  group, label, filters, filterAction, transparency
 }) {
   return (
     <div className="filter-group" style={{margin:'5px 5px 5px 0',padding:'10px',backgroundColor:'rgba(0,0,0,0)'}}>
@@ -17,13 +17,13 @@ export default function FilterGroup({
         switch (filter.type) {
           case FILTER.TYPES.STRING:
           case FILTER.TYPES.NODE:
-            return <StringFilter key={filter.id} group={group} filter={filter} />
+            return <StringFilter key={filter.id} group={group} filter={filter} filterAction={filterAction}/>
             break;
           case FILTER.TYPES.NUMBER:
-            return <NumberFilter key={filter.id} group={group} filter={filter} />
+            return <NumberFilter key={filter.id} group={group} filter={filter} filterAction={filterAction}/>
             break;
           case FILTER.TYPES.SELECT:
-            return <SelectFilter key={filter.id} group={group} filter={filter} />
+            return <SelectFilter key={filter.id} group={group} filter={filter} filterAction={filterAction}/>
             break;
           default:
             console.error(`FilterGroup: Filter Type not found ${filter.type} for filter`, filter);
diff --git a/build/app/view/netcreate/components/filter/FilterGroupProperties.jsx b/build/app/view/netcreate/components/filter/FilterGroupProperties.jsx
index 8b7f45c0..395a418e 100644
--- a/build/app/view/netcreate/components/filter/FilterGroupProperties.jsx
+++ b/build/app/view/netcreate/components/filter/FilterGroupProperties.jsx
@@ -20,6 +20,7 @@ class FilterGroupProperties extends React.Component {
     super();
     this.OnChangeValue = this.OnChangeValue.bind(this);
     this.TriggerChangeHandler = this.TriggerChangeHandler.bind(this);
+    this.OnSubmit = this.OnSubmit.bind(this);
 
     this.state = {
       group: group,
@@ -55,13 +56,19 @@ class FilterGroupProperties extends React.Component {
 
   }
 
+  OnSubmit(e) {
+    // Prevent "ENTER" from triggering form submission!
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
   render (){
     const { group, transparency } = this.props;
 
     return(
     <div>
       <div className="small text-muted" style={{fontWeight:'bold',textTransform:'uppercase',marginBottom:'0.4em'}}>Settings for {group}</div>
-           <Form inline className="filter-item" key={group}>
+           <Form inline className="filter-item" key={group} onSubmit={this.OnSubmit}>
             <FormGroup><Label size="sm" className="small text-muted"
               style={{ fontSize: '0.75em', lineHeight: '1em', width: `5em`, marginLeft: '0em'}}>
               Transparency&nbsp;</Label>
diff --git a/build/app/view/netcreate/components/filter/FiltersPanel.jsx b/build/app/view/netcreate/components/filter/FiltersPanel.jsx
index 1b67aaa6..153f49d1 100644
--- a/build/app/view/netcreate/components/filter/FiltersPanel.jsx
+++ b/build/app/view/netcreate/components/filter/FiltersPanel.jsx
@@ -20,7 +20,7 @@ import React from 'react';
 import StringFilter from './StringFilter';
 const ReactStrap = require('reactstrap');
 
-const { Button, Input, Label } = ReactStrap;
+const { Button, ButtonGroup, Input, Label } = ReactStrap;
 
 const UNISYS = require('unisys/client');
 var UDATA  = null;
@@ -32,20 +32,27 @@ class FiltersPanel extends UNISYS.Component {
 
     this.UpdateFilterDefs = this.UpdateFilterDefs.bind(this);
     this.OnClearBtnClick = this.OnClearBtnClick.bind(this);
+    this.SelectFilterAction = this.SelectFilterAction.bind(this);
 
-     /// Initialize UNISYS DATA LINK for REACT
+    /// Initialize UNISYS DATA LINK for REACT
     UDATA = UNISYS.NewDataLink(this);
 
     // Load Templates
     // The intial `OnAppStateChange("FDATA")` event when the template is
     // first loaded is called well before FiltersPanel is
     // even constructed.  So we need to explicitly load it here.
-    let FDATA = UDATA.AppState("FDATA");
-    this.state = FDATA;
-
+    const FDATA = UDATA.AppState("FDATA");
+    this.state = {
+      nodes: FDATA.nodes,
+      edges: FDATA.edges,
+      filterAction: FILTER.ACTION.HIGHLIGHT
+    };
     UDATA.OnAppStateChange("FDATA", this.UpdateFilterDefs);
   } // constructor
 
+  componentWillUnmount() {
+    // console.error('TBD: gracefully unsubscribe!')
+  }
 
   UpdateFilterDefs(data) {
     this.setState(data);
@@ -55,11 +62,13 @@ class FiltersPanel extends UNISYS.Component {
     UDATA.LocalCall('FILTER_CLEAR');
   }
 
-  componentWillUnmount() {
-    // console.error('TBD: gracefully unsubscribe!')
+  SelectFilterAction(filterAction) {
+    this.setState({ filterAction });
+    UDATA.LocalCall('FILTERS_UPDATE', { filterAction });
   }
 
   render() {
+    const { filterAction } = this.state;
     const { tableHeight } = this.props;
     const defs = [this.state.nodes, this.state.edges];
     return (
@@ -69,12 +78,33 @@ class FiltersPanel extends UNISYS.Component {
           display: 'flex', flexDirection: 'column',
           maxHeight: tableHeight
         }}>
+        <ButtonGroup>
+          <Button
+            onClick={() => this.SelectFilterAction(FILTER.ACTION.HIGHLIGHT)}
+            active={filterAction === FILTER.ACTION.HIGHLIGHT}
+            outline={filterAction === FILTER.ACTION.HIGHLIGHT}
+            disabled={filterAction === FILTER.ACTION.HIGHLIGHT}
+          >Highlight</Button>
+          <Button
+            onClick={() => this.SelectFilterAction(FILTER.ACTION.FILTER)}
+            active={filterAction === FILTER.ACTION.FILTER}
+            outline={filterAction === FILTER.ACTION.FILTER}
+            disabled={filterAction === FILTER.ACTION.FILTER}
+          >Filter</Button>
+        </ButtonGroup>
+        <Label className="small text-muted" style={{ padding: '0.5em 0 0 0.5em', marginBottom: '0' }}>
+          {filterAction === FILTER.ACTION.HIGHLIGHT
+            ? 'Highlight nodes/edges that match criteria. (Fade others)'
+            : 'Filter shows only nodes/edges that match criteria.  (Removes others)'
+          }
+        </Label>
         <div style={{ display: 'flex', flexGrow: `1`, justifyContent: 'space-evenly' }}>
           {defs.map(def => <FilterGroup
             key={def.label}
             group={def.group}
             label={def.label}
             filters={def.filters}
+            filterAction={filterAction}
             transparency={def.transparency}
             onFiltersChange={this.OnFilterChange}
           />)}
diff --git a/build/app/view/netcreate/components/filter/NumberFilter.js b/build/app/view/netcreate/components/filter/NumberFilter.js
index 01823f86..0f41a780 100644
--- a/build/app/view/netcreate/components/filter/NumberFilter.js
+++ b/build/app/view/netcreate/components/filter/NumberFilter.js
@@ -72,6 +72,7 @@ class NumberFilter extends React.Component {
     this.OnChangeOperator = this.OnChangeOperator.bind(this);
     this.OnChangeValue = this.OnChangeValue.bind(this);
     this.TriggerChangeHandler = this.TriggerChangeHandler.bind(this);
+    this.OnSubmit = this.OnSubmit.bind(this);
 
     this.state = {
       operator: FILTER.OPERATORS.NO_OP, // Used locally to define result
@@ -95,6 +96,7 @@ class NumberFilter extends React.Component {
   }
 
   TriggerChangeHandler() {
+    const { filterAction } = this.props;
     const { id, type, key, keylabel } = this.props.filter;
     const filter = {
       id,
@@ -106,14 +108,22 @@ class NumberFilter extends React.Component {
     };
     UDATA.LocalCall('FILTER_DEFINE', {
       group: this.props.group,
-      filter
+      filter,
+      filterAction
     }); // set a SINGLE filter
   }
 
+  OnSubmit(e) {
+    // Prevent "ENTER" from triggering form submission!
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
   render() {
+    const { filterAction } = this.props;
     const { id, key, keylabel, operator, value } = this.props.filter;
     return (
-      <Form inline className="filter-item" key={id}>
+      <Form inline className="filter-item" key={id} onSubmit={this.OnSubmit}>
         <FormGroup>
           <Label size="sm" className="small text-muted"
             style={{ fontSize: '0.75em', lineHeight: '1em', width: `6em`, justifyContent: 'flex-end' }}>
@@ -126,7 +136,8 @@ class NumberFilter extends React.Component {
             )}
           </Input>
           <Input type="text" value={value} placeholder="..."
-            onChange={this.OnChangeValue} bsSize="sm" />
+            onChange={this.OnChangeValue} bsSize="sm"
+            disabled={operator === FILTER.OPERATORS.NO_OP.key}/>
         </FormGroup>
       </Form>
     );
diff --git a/build/app/view/netcreate/components/filter/SelectFilter.js b/build/app/view/netcreate/components/filter/SelectFilter.js
index e969c6c1..efc9b516 100644
--- a/build/app/view/netcreate/components/filter/SelectFilter.js
+++ b/build/app/view/netcreate/components/filter/SelectFilter.js
@@ -69,6 +69,7 @@ class SelectFilter extends React.Component {
     this.OnChangeOperator = this.OnChangeOperator.bind(this);
     this.OnChangeValue = this.OnChangeValue.bind(this);
     this.TriggerChangeHandler = this.TriggerChangeHandler.bind(this);
+    this.OnSubmit = this.OnSubmit.bind(this);
 
     this.state = {
       operator: FILTER.OPERATORS.NO_OP, // Used locally to define result
@@ -92,6 +93,7 @@ class SelectFilter extends React.Component {
   }
 
   TriggerChangeHandler() {
+    const { filterAction } = this.props;
     const { id, type, key, keylabel, options } = this.props.filter;
     const filter = {
       id,
@@ -104,10 +106,17 @@ class SelectFilter extends React.Component {
     };
     UDATA.LocalCall('FILTER_DEFINE', {
       group: this.props.group,
-      filter
+      filter,
+      filterAction
     }); // set a SINGLE filter
   }
 
+  OnSubmit(e) {
+    // Prevent "ENTER" from triggering form submission!
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
   componentDidMount() {
     // Autoselect the first item
     this.setState({
@@ -116,9 +125,10 @@ class SelectFilter extends React.Component {
   }
 
   render() {
+    const { filterAction } = this.props;
     const { id, key, keylabel, operator, value, options } = this.props.filter;
     return (
-      <Form inline className="filter-item" key={id}>
+      <Form inline className="filter-item" key={id} onSubmit={this.OnSubmit}>
         <FormGroup>
           <Label size="sm" className="small text-muted"
             style={{ fontSize: '0.75em', lineHeight: '1em', width: `6em`, justifyContent: 'flex-end' }}>
@@ -133,10 +143,14 @@ class SelectFilter extends React.Component {
           </Input>
           <Input type="select" value={value}
             style={{maxWidth:'12em', height:'1.5em', padding: '0'}}
-            onChange={this.OnChangeValue} bsSize="sm">
-            {options.map(op =>
-              <option value={op} key={`${id}${op}`} size="sm">{op}</option>
-            )}
+            onChange={this.OnChangeValue} bsSize="sm"
+            disabled={operator === FILTER.OPERATORS.NO_OP.key}>
+            {operator !== FILTER.OPERATORS.NO_OP.key
+              ? options.map(op =>
+                  <option value={op} key={`${id}${op}`} size="sm">{op}</option>
+                )
+              : ''
+            }
           </Input>
         </FormGroup>
       </Form>
diff --git a/build/app/view/netcreate/components/filter/StringFilter.jsx b/build/app/view/netcreate/components/filter/StringFilter.jsx
index 1322272e..e2627d6a 100644
--- a/build/app/view/netcreate/components/filter/StringFilter.jsx
+++ b/build/app/view/netcreate/components/filter/StringFilter.jsx
@@ -64,6 +64,7 @@ class StringFilter extends React.Component {
     this.OnChangeOperator = this.OnChangeOperator.bind(this);
     this.OnChangeValue = this.OnChangeValue.bind(this);
     this.TriggerChangeHandler = this.TriggerChangeHandler.bind(this);
+    this.OnSubmit = this.OnSubmit.bind(this);
 
     this.state = {
       operator: FILTER.OPERATORS.NO_OP, // Used locally to define result
@@ -87,6 +88,7 @@ class StringFilter extends React.Component {
   }
 
   TriggerChangeHandler() {
+    const { filterAction } = this.props;
     const { id, type, key, keylabel } = this.props.filter;
     const filter = {
       id,
@@ -98,14 +100,22 @@ class StringFilter extends React.Component {
     };
     UDATA.LocalCall('FILTER_DEFINE', {
       group: this.props.group,
-      filter
+      filter,
+      filterAction
     }); // set a SINGLE filter
   }
 
+  OnSubmit(e) {
+    // Prevent "ENTER" from triggering form submission!
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
   render() {
+    const { filterAction } = this.props;
     const { id, key, keylabel, operator, value } = this.props.filter;
     return (
-      <Form inline className="filter-item" key={id}>
+      <Form inline className="filter-item" key={id} onSubmit={this.OnSubmit}>
         <FormGroup>
           <Label size="sm" className="small text-muted"
             style={{ fontSize: '0.75em', lineHeight: '1em', width: `6em`, justifyContent: 'flex-end' }}>
@@ -119,8 +129,9 @@ class StringFilter extends React.Component {
             )}
           </Input>
           <Input type="text" value={value} placeholder="..."
-            style={{maxWidth:'12em', height:'1.5em'}}
-            onChange={this.OnChangeValue} bsSize="sm" />
+            style={{ maxWidth: '12em', height: '1.5em' }}
+            onChange={this.OnChangeValue} bsSize="sm"
+            disabled={operator === FILTER.OPERATORS.NO_OP.key}/>
         </FormGroup>
       </Form>
     );
diff --git a/build/app/view/netcreate/filter-logic.js b/build/app/view/netcreate/filter-logic.js
index 046bf190..d2076414 100644
--- a/build/app/view/netcreate/filter-logic.js
+++ b/build/app/view/netcreate/filter-logic.js
@@ -40,6 +40,22 @@
 
   FEATURES
 
+  * See Whimiscal [diagram](https://whimsical.com/d3-data-flow-B2tTGnQYPSNviUhsPL64Dz)
+
+  * filterAction: "Highlight" vs "Filter"
+    --  Version 1.4 introduces two different types of filtering:
+        "Highlight" highlights the matching nodes/edges and fades the others
+        "Filter" shows matching nodes/edges and removes the non-matching
+        nodes/edges from the display without affecting the underlying data.
+
+  * With Version 1.4, the only data that is graphed is FILTEREDD3DATA.
+    --  d3-simplenetgraph no longer plots on D3DATA changes.
+    --  Instead, it plots the new FILTEREDD3DATA state.  Whenever D3DATA changes,
+        FILTERDD3DATA is udpated.
+    --  This way there is only one source of truth: all draw updates
+        are routed through filter-logic.
+    --  If filters have not been defined, we just pass the raw D3DATA
+
   * Filters can be stacked.
         You can define two "Label" filters, for example.
         The only reason you can't do it right now is because the filter template
@@ -113,8 +129,7 @@ MOD.Hook("INITIALIZE", () => {
   UDATA.OnAppStateChange("FDATA", data => {
     if (DBG) console.log(PR + 'OnAppStateChange: FDATA', data);
     // The filter defs have been updated, so apply the filters.
-    m_FiltersApply();
-    m_UpdateFilterSummary();
+    m_UpdateFilters();
   });
 
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -131,6 +146,22 @@ MOD.Hook("INITIALIZE", () => {
     m_ClearFilters();
   });
 
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  /*/ FILTERS_UPDATE is called by FiltersPanel switches between filters and highlights
+  /*/
+  UDATA.HandleMessage("FILTERS_UPDATE", data => {
+    const FDATA = UDATA.AppState("FDATA");
+    FDATA.filterAction = data.filterAction;
+    UDATA.SetAppState("FDATA", FDATA);
+  });
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  /*/     // Listen for D3DATA updates so we know to trigger change?
+  /*/
+  UDATA.OnAppStateChange('D3DATA',(data)=>{
+    m_UpdateFilters();
+  });
+
+
 }); // end UNISYS_INIT
 
 
@@ -234,12 +265,12 @@ function m_ImportPrompts(prompts) {
  */
 function m_FilterDefine(data) {
   const FDATA = UDATA.AppState("FDATA");
+  FDATA.filterAction = data.filterAction;
   if (data.group === "nodes") {
 
     if (data.type === "transparency")
     {
       FDATA.nodes.transparency = data.transparency;
-
     }
     else{
       let nodeFilters = FDATA.nodes.filters;
@@ -271,9 +302,17 @@ function m_FilterDefine(data) {
  * @param {Object} data A UDATA pkt {defs}
  */
 function m_FiltersApply() {
+  const FILTEREDD3DATA = UDATA.AppState("D3DATA");
   const FDATA = UDATA.AppState("FDATA");
-  m_FiltersApplyToNodes(FDATA.nodes.filters, FDATA.nodes.transparency);
-  m_FiltersApplyToEdges(FDATA.edges.filters, FDATA.edges.transparency);
+
+  // skip if FDATA has not been defined yet
+  if (Object.keys(FDATA).length < 1) return;
+
+  m_FiltersApplyToNodes(FDATA, FILTEREDD3DATA);
+  m_FiltersApplyToEdges(FDATA, FILTEREDD3DATA);
+  // Update FILTEREDD3DATA
+  UDATA.SetAppState("FILTEREDD3DATA", FILTEREDD3DATA);
+
 }
 
 function m_ClearFilters() {
@@ -285,16 +324,27 @@ function m_ClearFilters() {
 function m_UpdateFilterSummary() {
   const FDATA = UDATA.AppState("FDATA");
 
+  // skip if FDATA has not been defined yet
+  if (Object.keys(FDATA).length < 1) return;
+
   const nodeFilters = FDATA.nodes.filters;
   const edgeFilters = FDATA.edges.filters;
 
+  const typeSummary = FDATA.filterAction === FILTER.ACTION.HIGHLIGHT
+    ? 'HIGHLIGHTING ' : 'FILTERING ';
+  const nodeSummary = m_FiltersToString(FDATA.nodes.filters);
+  const edgeSummary = m_FiltersToString(FDATA.edges.filters);
   let summary = '';
-  summary += m_FiltersToString(FDATA.nodes.filters);
-  summary += m_FiltersToString(FDATA.edges.filters);
+  if (nodeSummary || edgeSummary) summary = `${typeSummary} NODES: ${nodeSummary} EDGES: ${edgeSummary}`;
 
   UDATA.LocalCall('FILTER_SUMMARY_UPDATE', { filtersSummary: summary });
 }
 
+function m_UpdateFilters() {
+  m_FiltersApply();
+  m_UpdateFilterSummary();
+}
+
 function m_FiltersToString(filters) {
   let summary = ''
   filters.forEach(filter => {
@@ -310,6 +360,7 @@ function m_FiltersToString(filters) {
 function m_OperatorToString(operator) {
   return FILTER.OPERATORS[operator].label;
 }
+
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /*/ UTILITY FUNCTIONS
 /*/
@@ -368,39 +419,57 @@ function m_MatchNumber(operator, filterVal, objVal) {
 
 /**
  * Side effect:
- *   D3DATA.nodes are updated with `isFilteredOut` flags.
+ *   FILTEREDD3DATA.nodes are updated with `isFilteredOut` flags.
  *
  * @param {Array} filters
  */
-function m_FiltersApplyToNodes(filters, transparency) {
-  const D3DATA = UDATA.AppState("D3DATA");
-  D3DATA.nodes.forEach(node => {
-    m_FiltersApplyToNode(node, filters, transparency);
+function m_FiltersApplyToNodes(FDATA, FILTEREDD3DATA) {
+  const { filterAction } = FDATA;
+  const { filters, transparency } = FDATA.nodes;
+  FILTEREDD3DATA.nodes = FILTEREDD3DATA.nodes.filter(node => {
+    return m_NodeIsFiltered(node, filters, transparency, filterAction);
   });
-  UDATA.SetAppState("D3DATA", D3DATA);
 }
 
-function m_FiltersApplyToNode(node, filters, transparency) {
-  let all_no_op = true;
-  let matched = true;
+function m_NodeIsFiltered(node, filters, transparency, filterAction) {
+  // let all_no_op = true;
+  let keepNode = true;
+
+  // 1. Look for matches
   // implicit AND.  ALL filters must return true.
   filters.forEach(filter => {
     if (filter.operator === FILTER.OPERATORS.NO_OP.key) return; // skip no_op
-    all_no_op = false;
+    // all_no_op = false;
     if (!m_IsNodeMatchedByFilter(node, filter)) {
-      matched = false;
+      keepNode = false;
     }
   });
-  if (all_no_op) {
-    // no filters defined, undo isFilteredOut
-    node.isFilteredOut = false;
-  } else {
-    // node is filtered out if it fails any filter tests
-    node.isFilteredOut = !matched;
-
-    node.filteredTransparency = transparency; // set the transparency value ... right now it is inefficient to set this at the node / edge level, but that's more flexible
 
+  // 2. Decide based on filterAction
+  if (filterAction === FILTER.ACTION.FILTER) {
+    // not using highlight, so restore transparency
+    node.filteredTransparency = 1.0; // opaque, not tranparent
+    if (keepNode) return true;
+    return false; // remove from array
+  } else {
+    // FILTER.ACTION.HIGHLIGHT
+    if (!keepNode) {
+      node.filteredTransparency = transparency; // set the transparency value ... right now it is inefficient to set this at the node / edge level, but that's more flexible
+    } else {
+      node.filteredTransparency = 1.0; // opaque
+    }
+    return true; // don't filter out
   }
+
+  // all_no_op
+  // This is currently redundant because matchesFilter will always
+  // be true if there are no filters.  If matchesFilter is true,
+  // then the node will not be removed/faded.
+  //
+  // if (all_no_op) {
+  //   // all filters are "no_op", so no filters defined, don't filter anything
+  //   node.filteredTransparency = 1.0; // opaque, not tranparent
+  // }
 }
 
 function m_IsNodeMatchedByFilter(node, filter) {
@@ -431,7 +500,6 @@ function m_IsNodeMatchedByFilter(node, filter) {
       break;
     default:
       // Else assume it's a number
-      console.log('NUMBER', filter, node);
       return m_MatchNumber(filter.operator, filter.value, nodeValue)
       break;
   }
@@ -442,42 +510,83 @@ function m_IsNodeMatchedByFilter(node, filter) {
 /*/ EDGE FILTERS
 /*/
 
-function m_FiltersApplyToEdges(filters, transparency) {
-  const D3DATA = UDATA.AppState("D3DATA");
-  D3DATA.edges.forEach(edge => {
-    m_FiltersApplyToEdge(edge, filters, transparency);
+function m_FiltersApplyToEdges(FDATA, FILTEREDD3DATA) {
+  const { filterAction } = FDATA;
+  const { filters, transparency } = FDATA.edges;
+  FILTEREDD3DATA.edges = FILTEREDD3DATA.edges.filter(edge => {
+    return m_EdgeIsFiltered(edge, filters, transparency, filterAction, FILTEREDD3DATA);
   });
-  UDATA.SetAppState("D3DATA", D3DATA);
 }
 
-function m_FiltersApplyToEdge(edge, filters, transparency) {
-  // regardless of filter definition,
-  // always hide edge if it's attached to a filtered node
-  if (edge.source.isFilteredOut || edge.target.isFilteredOut) {
-    edge.isFilteredOut = true;  // no filters, revert
+/*/ Side effect: Sets `isFiltered`
+/*/
+function m_EdgeIsFiltered(edge, filters, transparency, filterAction, FILTEREDD3DATA) {
+  // let all_no_op = true; // all filters are no_op
+  let keepEdge = true;
+  const source = FILTEREDD3DATA.nodes.find(e => {
+    // on init, edge.source is just an id.  only with d3 processing does it
+    // get transformed into a node object.  so we have to check the type.
+    const sourceId = (typeof edge.source === 'number') ? edge.source : edge.source.id;
+    return e.id === sourceId;
+  });
+  const target = FILTEREDD3DATA.nodes.find(e => {
+    // on init, edge.target is just an id.  only with d3 processing does it
+    // get transformed into a node object.  so we have to check the type.
+    const targetId = (typeof edge.target === 'number') ? edge.target : edge.target.id;
+    return e.id === targetId;
+  });
+  // 1. if source or target is filtered, then we are filtered too
+  if (source === undefined || target === undefined ||
+    source.filteredTransparency < 1.0 ||
+    target.filteredTransparency < 1.0) {
+    // regardless of filter definition...
+    // ...if filterAction is FILTER
+    // always hide edge if it's attached to a filtered node
+    if (filterAction === FILTER.ACTION.FILTER) return false;
+    // ...else if filterAction is HIGHLIGHT
+    // don't filter, just fade
     edge.filteredTransparency = transparency; // set the transparency value ... right now it is inefficient to set this at the node / edge level, but that's more flexible
-    return;
+    return true;
   }
 
-  let all_no_op = true;
-  let matched = true;
+  // 2. otherwise, look for matches
   // implicit AND.  ALL filters must return true.
+  // edge is filtered out if it fails ANY filter tests
   filters.forEach(filter => {
     if (filter.operator === FILTER.OPERATORS.NO_OP.key) return; // skip no_op
-    all_no_op = false;
+    // Found a filter!  Apply it!
+    // all_no_op = false;
     if (!m_IsEdgeMatchedByFilter(edge, filter)) {
-      matched = false;
+      keepEdge = false;
     }
   });
-  if (all_no_op) {
-    // no filters defined, undo isFilteredOut
-    edge.isFilteredOut = false;
-  } else {
-    // edge is filtered out if it fails ANY filter tests
-    edge.isFilteredOut = !matched;
-    edge.filteredTransparency = transparency;; // set the transparency value ... right now it is inefficient to set this at the node / edge level, but that's more flexible
 
+  // 3. Decide how to filter based on filterAction
+  if (filterAction === FILTER.ACTION.FILTER) {
+    // not using highlight, so restore transparency
+    edge.filteredTransparency = 1.0; // opaque
+    if (keepEdge) return true; // keep in array
+    return false; // remove from array
+  } else {
+    // FILTER.ACTION.HIGHLIGHT, so don't filter
+    if (!keepEdge) {
+      edge.filteredTransparency = transparency; // set the transparency value ... right now it is inefficient to set this at the node / edge level, but that's more flexible
+    } else {
+      edge.filteredTransparency = 1.0; // opaque
+    }
+    return true; // always keep in array
   }
+
+  // all_no_op
+  // This is currently redundant because matchesFilter will always
+  // be true if there are no filters.  If matchesFilter is true,
+  // then the node will not be removed/faded.
+  //
+  // if (all_no_op) {
+  //   // no filters defined, undo isFilteredOut
+  //   edge.filteredTransparency = 1.0;
+  // } else {
+  // }
 }
 
 function m_IsEdgeMatchedByFilter(edge, filter) {
diff --git a/build/app/view/netcreate/nc-logic.js b/build/app/view/netcreate/nc-logic.js
index e351436b..9ed8584b 100644
--- a/build/app/view/netcreate/nc-logic.js
+++ b/build/app/view/netcreate/nc-logic.js
@@ -221,6 +221,7 @@ MOD.Hook("LOADASSETS", () => {
 /*/ CONFIGURE fires after LOADASSETS, so this is a good place to put TEMPLATE
     validation.
 /*/
+// eslint-disable-next-line complexity
 MOD.Hook("CONFIGURE", () => {
   // Process Node, NodeColorMap and Edge options