fix filters: node size, edge weight, hide orphan nodes

alx · May 2, 2017 · 6f91dc5 · 6f91dc5
1 parent 42a4fd7
commit 6f91dc5
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 13 deletions.
diff --git a/src/AppState.js b/src/AppState.js
@@ -1,4 +1,4 @@
-import { computed, observable } from 'mobx';
+import { computed, observable, toJS } from 'mobx';
 import moment from 'moment';
 
 import LoaderTsne from './Loaders/Tsne';
@@ -32,6 +32,7 @@ class AppState {
       maxNodeSize: 1,
       minEdgeWeight: 0,
       maxEdgeWeight: 1,
+      hideOrphans: true,
     },
     muiTheme: 'dark',
     labels: {
@@ -176,19 +177,20 @@ class AppState {
     this.clearSelectedNetwork();
 
     const network = this.networks[network_index];
-    network.set('selected', true);
 
     this.ui.filters.nodeSize = 0;
     this.ui.filters.edgeWeight = 0;
-    this.ui.filters.maxNodeSize = 1;
-    this.ui.filters.maxEdgeWeight = 1;
 
     if (network.has('graph')) {
       const graph = network.get('graph');
       this.graph.maxNodeSize = Math.ceil(Math.max.apply(Array, graph.nodes.map(node => node.size)));
       this.graph.maxEdgeWeight = Math.ceil(Math.max.apply(Array, graph.edges.map(edge => edge.weight)));
     }
 
+    this.ui.filters.maxNodeSize = this.graph.maxNodeSize;
+    this.ui.filters.maxEdgeWeight = this.graph.maxEdgeWeight;
+
+    network.set('selected', true);
     this.selectedNetworkIndex = this.networks.map(network => network.get('selected')).indexOf(true);
 
     // FIXME
@@ -235,10 +237,55 @@ class AppState {
     this.graph.neighborNodes = [];
   }
 
+  filterReset() {
+    const selectedNetwork = this.networks[this.selectedNetworkIndex];
+    network.set('graph', network.get('source_graph'));
+  }
+
+  filterGraph() {
+    const selectedNetwork = this.networks[this.selectedNetworkIndex];
+
+    const graph = toJS(selectedNetwork.get('source_graph'))
+
+    graph.nodes = graph.nodes.filter( node => {
+      if(node.size < this.ui.filters.minNodeSize ||
+         node.size >= this.ui.filters.maxNodeSize) {
+        graph.edges = graph.edges.filter( edge => {
+          return edge.source != node.id && edge.target != node.id
+        });
+        return false;
+      } else {
+        return true;
+      }
+    });
+
+    graph.edges = graph.edges.filter( edge => {
+      return edge.weight >= this.ui.filters.minEdgeWeight &&
+             edge.weight < this.ui.filters.maxEdgeWeight;
+    });
+
+    if(this.ui.filters.hideOrphans) {
+      const edgyNodes = [].concat.apply([], graph.edges.map( edge => {
+        return [edge.source, edge.target];
+      }));
+      graph.nodes = graph.nodes.filter( node => edgyNodes.indexOf(node.id) != -1 );
+    }
+
+    selectedNetwork.set('graph', graph);
+  }
+
   toggleGraphFilter() {
     this.graph.isFiltered = !this.graph.isFiltered;
   }
 
+  setFilter(filters, value) {
+    Object.keys(filters).forEach( key => {
+      this.ui.filters[key] = filters[key];
+    });
+    this.graph.isFiltered = true;
+    this.filterGraph();
+  }
+
   /*
   * UI
   */
@@ -259,10 +306,6 @@ class AppState {
     this.ui.rightDrawer = false;
   }
 
-  setFilter(filter, value) {
-    this.ui.filters[filter] = value;
-  }
-
   /*
   * Layout
   */

diff --git a/src/Loaders/Json.jsx b/src/Loaders/Json.jsx
@@ -71,6 +71,7 @@ class Json {
       }
 
       network.set('graph', json);
+      network.set('source_graph', json);
       network.set('colors', COLORS);
 
       if(typeof(callback) != 'undefined')

diff --git a/src/RightDrawer.jsx b/src/RightDrawer.jsx
@@ -24,7 +24,7 @@ export default class RightDrawer extends Component {
     return (
       <Drawer openSecondary={true} open={appState.ui.rightDrawer} >
         <SearchInput appState={appState}/>
-        <Filters appState={appState}/>
+        <Filters appState={appState} filters={appState.ui.filters}/>
         <Divider/>
         <SelectedNode appState={appState} />
         <Divider/>

diff --git a/src/RightDrawer/Filters.jsx b/src/RightDrawer/Filters.jsx
@@ -2,6 +2,8 @@ import React, {Component} from 'react';
 import { observer } from 'mobx-react';
 import {debounce} from 'throttle-debounce';
 
+import Toggle from 'material-ui/Toggle';
+
 require('rc-slider/assets/index.css');
 require('rc-tooltip/assets/bootstrap.css');
 
@@ -14,43 +16,70 @@ export default class Filters extends Component {
 
   constructor(props) {
     super(props)
+    this.state = {
+      key: 0,
+      node: {min: 0, max: 1},
+      edge: {min: 0, max: 1}
+    }
     this.handleNodeFilterSlider = this.handleNodeFilterSlider.bind(this);
     this.handleEdgeFilterSlider = this.handleEdgeFilterSlider.bind(this);
+    this.handleHideOrphans = this.handleHideOrphans.bind(this);
   }
 
   handleNodeFilterSlider = (range) => {
+    this.setState({node: {min: range[0], max: range[1]}});
     this.props.appState.setFilter({
       minNodeSize: range[0],
       maxNodeSize: range[1],
     });
   }
 
   handleEdgeFilterSlider = (range) => {
+    this.setState({edge: {min: range[0], max: range[1]}});
     this.props.appState.setFilter({
       minEdgeWeight: range[0],
       maxEdgeWeight: range[1],
     });
   }
 
+  handleHideOrphans = (event, toggle) => {
+    this.props.appState.setFilter({hideOrphans: toggle});
+  }
+
+  componentWillReceiveProps(nextProps) {
+    console.log('receive filter props');
+    const appState = nextProps.appState;
+    this.setState({
+      key: Math.random(),
+      node: {min: appState.ui.filters.minNodeSize, max: appState.ui.filters.maxNodeSize},
+      edge: {min: appState.ui.filters.minEdgeWeight, max: appState.ui.filters.maxEdgeWeight}
+    });
+  }
+
   render() {
 
     const appState = this.props.appState;
 
-    return (<div style={{padding: 10}}>
+    return (<div key={this.state.key} style={{padding: 10}}>
       <p><span>Node Size</span></p>
       <Range
-        defaultValue={[0, appState.graph.maxNodeSize]}
+        defaultValue={[this.state.node.min,this.state.node.max]}
         min={0}
         max={appState.graph.maxNodeSize}
         onAfterChange={this.handleNodeFilterSlider}
       />
-      <p><span>Edge Size</span></p>
+      <p><span>Edge Weight</span></p>
       <Range
-        defaultValue={[0, appState.graph.maxEdgeWeight]}
+        defaultValue={[this.state.edge.min,this.state.edge.max]}
         min={0}
         max={appState.graph.maxEdgeWeight}
         onAfterChange={this.handleEdgeFilterSlider}
       />
+      <Toggle
+        label="Hide orphan nodes"
+        toggled={appState.ui.filters.hideOrphans}
+        onToggle={this.handleHideOrphans}
+      />
     </div>);
 
   }

diff --git a/src/RightDrawer/SearchInput.jsx b/src/RightDrawer/SearchInput.jsx
@@ -38,6 +38,7 @@ export default class SearchInput extends Component {
 
     });
 
+    /*
     datasource.push({
       text: 'filter_action',
       action: 'display_filtered',
@@ -47,6 +48,7 @@ export default class SearchInput extends Component {
         />
       )
     });
+    */
 
     return datasource;