Feature: Focus

build/app/view/netcreate/NetCreate.jsx

@@ -53,6 +53,7 @@ const InfoPanel    = require('./components/InfoPanel');
 const FiltersPanel = require('./components/filter/FiltersPanel');
 const NCLOGIC      = require('./nc-logic'); // require to bootstrap data loading
 const FILTERLOGIC  = require('./filter-logic'); // handles filtering functions
+const FILTER = require('./components/filter/FilterEnums');
 
 /// REACT COMPONENT ///////////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -189,13 +190,17 @@ const FILTERLOGIC  = require('./filter-logic'); // handles filtering functions
                 // OPEN
                 ? <div id="right" style={{
                     marginTop: '38px', padding: '0 5px', backgroundColor: '#6c757d',
-                    borderTopLeftRadius: '10px', width: 'auto'
+                    borderTopLeftRadius: '10px',
+                    paddingBottom: '25px', // avoid footer
                   }}>
-                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
+                    <div style={{
+                      display: 'flex', flexDirection: 'column', alignItems: 'end',
+                      height: '100%', overflow: 'hidden'
+                    }}>
                       <Button onClick={this.onFilterBtnClick}
                         style={{ width: '90px' }}
                       >
-                        FILTER &gt;
+                        {FILTER.PANEL_LABEL} &gt;
                       </Button>
                       <FiltersPanel />
                     </div>
@@ -208,7 +213,7 @@ const FILTERLOGIC  = require('./filter-logic'); // handles filtering functions
                     <Button
                       onClick={this.onFilterBtnClick}
                       style={{ width: '90px', float: 'right' }}
-                    >&lt; FILTER</Button>
+                    >&lt; {FILTER.PANEL_LABEL}</Button>
                   </div>
               }
             </div>

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

@@ -137,7 +137,7 @@ class EdgeTable extends UNISYS.Component {
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   displayUpdated(nodeEdge) {
       // Prevent error if `meta` info is not defined yet, or not properly imported
-      if (!nodeEdge.meta) return;
+    if (!nodeEdge.meta) return '';
 
       var d = new Date(nodeEdge.meta.revision > 0 ? nodeEdge.meta.updated : nodeEdge.meta.created);
 
@@ -158,11 +158,21 @@ class EdgeTable extends UNISYS.Component {
   updateEdgeFilterState(edges, filteredEdges) {
     // add highlight/filter status
     if (filteredEdges.length > 0) {
-      edges = edges.map(edge => {
-        const filteredEdge = filteredEdges.find(n => n.id === edge.id);
-        edge.isFiltered = !filteredEdge;
-        return edge;
-      });
+      // If we're transitioning from "HILIGHT/FADE" to "COLLAPSE" or "FOCUS", then we
+      // also need to remove edges that are not in filteredEdges
+      const FDATA = UDATA.AppState("FDATA");
+      if (FDATA.filterAction === FILTER.ACTION.COLLAPSE || FDATA.filterAction === FILTER.ACTION.FOCUS) {
+        edges = edges.filter(edge => {
+          const filteredEdge = filteredEdges.find(n => n.id === edge.id);
+          return edge;
+        });
+      } else {
+        edges = edges.map(edge => {
+          const filteredEdge = filteredEdges.find(n => n.id === edge.id);
+          edge.isFiltered = !filteredEdge;
+          return edge;
+        });
+      }
     }
     this.setState({edges});
   }
@@ -193,16 +203,34 @@ class EdgeTable extends UNISYS.Component {
 
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /*/ Handle FILTEREDD3DATA updates sent by filters-logic.m_FiltersApply
-      Note that edge.soourceLabel and edge.targetLabe should already be set
+      Note that edge.soourceLabel and edge.targetLabel should already be set
       by filter-logic.
   /*/
   handleFilterDataUpdate(data) {
     if (data.edges) {
       const filteredEdges = data.edges;
-      this.setState({ filteredEdges }, () => {
-        const edges = this.sortTable(this.state.sortkey, this.state.edges);
-        this.updateEdgeFilterState(edges, filteredEdges);
-      });
+      // If we're transitioning from "COLLAPSE" or "FOCUS" to "HILIGHT/FADE", then we
+      // also need to add back in edges that are not in filteredEdges
+      // (because "COLLAPSE" and "FOCUS" removes edges that are not matched)
+      const FDATA = UDATA.AppState("FDATA");
+      if (FDATA.filterAction === FILTER.ACTION.HIGHLIGHT) {
+        const NCDATA = UDATA.AppState("NCDATA");
+        this.setState({
+          edges: NCDATA.edges,
+          filteredEdges
+        }, () => {
+          const edges = this.sortTable(this.state.sortkey, NCDATA.edges);
+          this.updateEdgeFilterState(edges, filteredEdges);
+        });
+      } else {
+        this.setState({
+          edges: filteredEdges,
+          filteredEdges
+        }, () => {
+          const edges = this.sortTable(this.state.sortkey, filteredEdges);
+          this.updateEdgeFilterState(edges, filteredEdges);
+        });
+      }
     }
   }
 
@@ -546,7 +574,7 @@ class EdgeTable extends UNISYS.Component {
                       onClick={()=>this.setSortKey("Updated", FILTER.TYPES.STRING)}
                     >Updated {this.sortSymbol("Updated")}</Button></th>
                 <th  width="10%"hidden={edgeDefs.comments.hidden}><Button size="sm"
-                      onClick={()=>this.setSortKey("comments", edgeDefs.comment.type)}
+                      onClick={()=>this.setSortKey("comments", edgeDefs.comments.type)}
                     >{edgeDefs.comments.displayLabel} {this.sortSymbol("comments")}</Button></th>
               </tr>
             </thead>

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

@@ -129,7 +129,7 @@ class NodeTable extends UNISYS.Component {
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   displayUpdated(nodeEdge) {
       // Prevent error if `meta` info is not defined yet, or not properly imported
-      if (!nodeEdge.meta) return;
+      if (!nodeEdge.meta) return '';
 
       var d = new Date(nodeEdge.meta.revision > 0 ? nodeEdge.meta.updated : nodeEdge.meta.created);
 
@@ -142,21 +142,33 @@ class NodeTable extends UNISYS.Component {
       var tag = <span title={titleString}> {dateTime} </span>;
 
       return tag;
-
     }
 
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /// Set node filtered status based on current filteredNodes
   updateNodeFilterState(nodes, filteredNodes) {
     // set filter status
     if (filteredNodes.length > 0) {
-      nodes = nodes.map(node => {
-        const filteredNode = filteredNodes.find(n => n.id === node.id);
-        node.isFiltered = !filteredNode; // not in filteredNode, so it's been removed
-        return node
-      });
+
+      // If we're transitioning from "HILIGHT/FADE" to "COLLAPSE" or "FOCUS", then we
+      // also need to remove nodes that are not in filteredNodes
+      const FDATA = UDATA.AppState("FDATA");
+      if (FDATA.filterAction === FILTER.ACTION.COLLAPSE || FDATA.filterAction === FILTER.ACTION.FOCUS) {
+        nodes = nodes.filter(node => {
+          const filteredNode = filteredNodes.find(n => n.id === node.id);
+          return filteredNode; // keep if it's in the list of filtered nodes
+        });
+      } else {
+        nodes = nodes.map(node => {
+          const filteredNode = filteredNodes.find(n => n.id === node.id);
+          node.isFiltered = !filteredNode; // not in filteredNode, so it's been removed
+          return node
+        });
+      }
+
+
     }
-    this.setState({ nodes });
+    this.setState({ nodes, filteredNodes });
   }
 
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -175,10 +187,29 @@ class NodeTable extends UNISYS.Component {
   handleFilterDataUpdate(data) {
     if (data.nodes) {
       const filteredNodes = data.nodes;
-      this.setState({ filteredNodes }, () => {
-        const nodes = this.sortTable(this.state.sortkey, this.state.nodes);
-        this.updateNodeFilterState(nodes, filteredNodes);
-      });
+      // If we're transitioning from "COLLAPSE" or "FOCUS" to "HILIGHT/FADE", then we
+      // also need to add back in nodes that are not in filteredNodes
+      // (because "COLLAPSE" and "FOCUS" removes nodes that are not matched)
+      const FDATA = UDATA.AppState("FDATA");
+      if (FDATA.filterAction === FILTER.ACTION.HIGHLIGHT) {
+        const NCDATA = UDATA.AppState("NCDATA");
+        this.setState({
+          nodes: NCDATA.nodes,
+          filteredNodes
+        }, () => {
+          const nodes = this.sortTable(this.state.sortkey, NCDATA.nodes);
+          this.updateNodeFilterState(nodes, filteredNodes);
+        });
+
+      } else {
+        this.setState({
+          nodes: filteredNodes,
+          filteredNodes
+        }, () => {
+          const nodes = this.sortTable(this.state.sortkey, filteredNodes);
+          this.updateNodeFilterState(nodes, filteredNodes);
+        });
+      }
     }
   }
 
@@ -438,14 +469,14 @@ render() {
                 <Button size="sm"
                   onClick={()=>this.setSortKey("info", nodeDefs.info.type)}
                 >{nodeDefs.info.displayLabel} {this.sortSymbol("info")}</Button></th>
-            <th width="9%"hidden={nodeDefs.provenance.hidden}>
-                <Button size="sm"
-                  onClick={()=>this.setSortKey("provenance", nodeDefs.provenance.type)}
-                >{nodeDefs.provenance.displayLabel} {this.sortSymbol("provenance")}</Button></th>
             <th width="25%" hidden={nodeDefs.notes.hidden}>
                 <Button size="sm"
                   onClick={()=>this.setSortKey("notes", nodeDefs.notes.type)}
                 >{nodeDefs.notes.displayLabel} {this.sortSymbol("notes")}</Button></th>
+            <th width="9%"hidden={nodeDefs.provenance.hidden}>
+                <Button size="sm"
+                  onClick={()=>this.setSortKey("provenance", nodeDefs.provenance.type)}
+                >{nodeDefs.provenance.displayLabel} {this.sortSymbol("provenance")}</Button></th>
             <th  width="10%"hidden={!isLocalHost}><Button size="sm"
                   onClick={()=>this.setSortKey("updated", FILTER.TYPES.STRING)}
                 >Updated {this.sortSymbol("updated")}</Button></th>
@@ -473,12 +504,12 @@ render() {
                 >{node.label}</a></td>
             <td hidden={nodeDefs.type.hidden}>{node.type}</td>
             <td hidden={nodeDefs.info.hidden}>{node.info}</td>
-            <td hidden={nodeDefs.provenance.hidden}
-              style={{ fontSize: '9px' }}
-            >{node.provenance}</td>
             <td hidden={nodeDefs.notes.hidden}>
               {node.notes ? <MarkdownNote text={node.notes} /> : "" }
             </td>
+            <td hidden={nodeDefs.provenance.hidden}
+              style={{ fontSize: '9px' }}
+            >{node.provenance}</td>
             <td hidden={!isLocalHost}
               style={{ fontSize: '9px' }}
             >{this.displayUpdated(node)}</td>

build/app/view/netcreate/components/filter/FilterEnums.js

@@ -1,9 +1,19 @@
 const FILTER = {};
 
+// Filter Panel Label
+FILTER.PANEL_LABEL = 'VIEWS';
+
 // Determines whether filter action is to highlight/fade or remove (filter) nodes and edges
 FILTER.ACTION = {};
-FILTER.ACTION.HIGHLIGHT = 'highlight';
-FILTER.ACTION.FILTER = 'filter';
+FILTER.ACTION.HIGHLIGHT = 'FADE';
+FILTER.ACTION.FILTER = 'FILTERING';
+FILTER.ACTION.COLLAPSE = 'REMOVE';
+FILTER.ACTION.FOCUS = 'FOCUS';
+FILTER.ACTION.HELP = {};
+FILTER.ACTION.HELP.HIGHLIGHT = 'Show matches, Fade others';
+FILTER.ACTION.HELP.FILTER = 'Shows matches, Hide (Filter) others (keep physics and degrees)';
+FILTER.ACTION.HELP.COLLAPSE = 'Show matches, Remove others & recalculate sizes';
+FILTER.ACTION.HELP.FOCUS = 'Show only nodes connected to the selected node within range';
 
 // Types of filters definable in template files.
 FILTER.TYPES = {};