1 files changed, 23 insertions, 15 deletions

diff --git a/web/src/js/components/mainview.js b/web/src/js/components/mainview.js
index 550a61da..81bf3b03 100644
--- a/web/src/js/components/mainview.js
+++ b/web/src/js/components/mainview.js
@@ -2,24 +2,19 @@ var React = require("react");
 
 var common = require("./common.js");
 var actions = require("../actions.js");
+var Query = require("../actions.js").Query;
 var toputils = require("../utils.js");
 var views = require("../store/view.js");
 var Filt = require("../filt/filt.js");
 FlowTable = require("./flowtable.js");
-var flowdetail = require("./flowdetail.js");
-
+var FlowView = require("./flowview/index.js");
 
 var MainView = React.createClass({
     mixins: [common.Navigation, common.State],
     getInitialState: function () {
-        this.onQueryChange(Query.FILTER, function () {
-            this.state.view.recalculate(this.getViewFilt(), this.getViewSort());
-        }.bind(this));
-        this.onQueryChange(Query.HIGHLIGHT, function () {
-            this.state.view.recalculate(this.getViewFilt(), this.getViewSort());
-        }.bind(this));
         return {
-            flows: []
+            flows: [],
+            sortKeyFun: false
         };
     },
     getViewFilt: function () {
@@ -39,16 +34,20 @@ var MainView = React.createClass({
             return filt(flow);
         };
     },
-    getViewSort: function () {
-    },
     componentWillReceiveProps: function (nextProps) {
         if (nextProps.flowStore !== this.props.flowStore) {
             this.closeView();
             this.openView(nextProps.flowStore);
         }
+
+        var filterChanged = (this.props.query[Query.FILTER] !== nextProps.query[Query.FILTER]);
+        var highlightChanged = (this.props.query[Query.HIGHLIGHT] !== nextProps.query[Query.HIGHLIGHT]);
+        if (filterChanged || highlightChanged) {
+            this.state.view.recalculate(this.getViewFilt(), this.state.sortKeyFun);
+        }
     },
     openView: function (store) {
-        var view = new views.StoreView(store, this.getViewFilt(), this.getViewSort());
+        var view = new views.StoreView(store, this.getViewFilt(), this.state.sortKeyFun);
         this.setState({
             view: view
         });
@@ -73,7 +72,7 @@ var MainView = React.createClass({
     },
     onRemove: function (flow_id, index) {
         if (flow_id === this.getParams().flowId) {
-            var flow_to_select = this.state.view.list[Math.min(index, this.state.view.list.length -1)];
+            var flow_to_select = this.state.view.list[Math.min(index, this.state.view.list.length - 1)];
             this.selectFlow(flow_to_select);
         }
     },
@@ -86,6 +85,12 @@ var MainView = React.createClass({
     componentWillUnmount: function () {
         this.closeView();
     },
+    setSortKeyFun: function(sortKeyFun){
+        this.setState({
+            sortKeyFun: sortKeyFun
+        });
+        this.state.view.recalculate(this.getViewFilt(), sortKeyFun);
+    },
     selectFlow: function (flow) {
         if (flow) {
             this.replaceWith(
@@ -194,10 +199,12 @@ var MainView = React.createClass({
                 }
                 break;
             case toputils.Key.V:
-                if(e.shiftKey && flow && flow.modified) {
+                if (e.shiftKey && flow && flow.modified) {
                     actions.FlowActions.revert(flow);
                 }
                 break;
+            case toputils.Key.SHIFT:
+                break;
             default:
                 console.debug("keydown", e.keyCode);
                 return;
@@ -214,7 +221,7 @@ var MainView = React.createClass({
         if (selected) {
             details = [
                 <common.Splitter key="splitter"/>,
-                <flowdetail.FlowDetail key="flowDetails" ref="flowDetails" flow={selected}/>
+                <FlowView key="flowDetails" ref="flowDetails" flow={selected}/>
             ];
         } else {
             details = null;
@@ -225,6 +232,7 @@ var MainView = React.createClass({
                 <FlowTable ref="flowTable"
                     view={this.state.view}
                     selectFlow={this.selectFlow}
+                    setSortKeyFun={this.setSortKeyFun}
                     selected={selected} />
                 {details}
             </div>