highlight ui: complicated version

4 files changed, 58 insertions, 17 deletions

diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js
index 4b72dd29..00c2d4c1 100644
--- a/web/src/js/components/flowtable.jsx.js
+++ b/web/src/js/components/flowtable.jsx.js
@@ -8,8 +8,25 @@ var FlowRow = React.createClass({
         if (this.props.selected) {
             className += "selected";
         }
+
+        var highlight_count = flow._highlight.length;
+        if (highlight_count > 0) {
+            var background = "linear-gradient(90deg";
+            for(var i =0; i < highlight_count; i++){
+                var tag = flow._highlight[i];
+                var ps = (100 * i / highlight_count) + "%";
+                var pe = (100 * (i + 1) / highlight_count) + "%";
+                background += ("," + tag + " " + ps + "," + tag + " " + pe);
+            }
+            background += ")";
+        }
+
+        style = {
+            background: background
+        };
+
         return (
-            <tr className={className} onClick={this.props.selectFlow.bind(null, flow)}>
+            <tr className={className} onClick={this.props.selectFlow.bind(null, flow)} style={style}>
                 {columns}
             </tr>);
     },
diff --git a/web/src/js/components/header.jsx.js b/web/src/js/components/header.jsx.js
index d9eefce9..a975f57b 100644
--- a/web/src/js/components/header.jsx.js
+++ b/web/src/js/components/header.jsx.js
@@ -165,11 +165,7 @@ var MainMenu = React.createClass({
         this.refs["highlight-" + Math.max(0, index - 1)].focus();
     },
     getColor: function (index) {
-        var colors = [
-            "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#1f77b4", "#bcbd22", "#17becf",
-            "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#aec7e8", "#dbdb8d", "#9edae5"
-        ];
-        return colors[index % colors.length];
+        return HighlightColors[index];
     },
     render: function () {
         var highlightFilterInputs = [];
diff --git a/web/src/js/components/mainview.jsx.js b/web/src/js/components/mainview.jsx.js
index e4bbbde2..e6718413 100644
--- a/web/src/js/components/mainview.jsx.js
+++ b/web/src/js/components/mainview.jsx.js
@@ -1,17 +1,34 @@
 var MainView = React.createClass({
     mixins: [Navigation, State],
     getInitialState: function () {
-        this.onQueryChange(Query.FILTER, 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: []
         };
     },
-    getViewFilt: function(){
-        return Filt.parse(this.getQuery()[Query.FILTER] || "");
+    getViewFilt: function () {
+        var filt = Filt.parse(this.getQuery()[Query.FILTER] || "");
+        var highlight = (this.getQuery()[Query.HIGHLIGHT] || "").split("&")
+            .map(decodeURIComponent)
+            .map(function (filtstr) {
+                return filtstr.trim() !== "" ? Filt.parse(filtstr) : false;
+            });
+        return function filter_and_highlight(flow) {
+            flow._highlight = [];
+            for (var i = 0; i < highlight.length; i++) {
+                if (highlight[i] && highlight[i](flow)) {
+                    flow._highlight.push(FadedHighlightColors[i]);
+                }
+            }
+            return filt(flow);
+        };
     },
-    getViewSort: function(){
+    getViewSort: function () {
     },
     componentWillReceiveProps: function (nextProps) {
         if (nextProps.flowStore !== this.props.flowStore) {
@@ -28,10 +45,10 @@ var MainView = React.createClass({
         view.addListener("recalculate", this.onRecalculate);
         view.addListener("add update remove", this.onUpdate);
     },
-    onRecalculate: function(){
+    onRecalculate: function () {
         this.forceUpdate();
         var selected = this.getSelected();
-        if(selected){
+        if (selected) {
             this.refs.flowTable.scrollIntoView(selected);
         }
     },
@@ -132,7 +149,7 @@ var MainView = React.createClass({
         }
         e.preventDefault();
     },
-    getSelected: function(){
+    getSelected: function () {
         return this.props.flowStore.get(this.getParams().flowId);
     },
     render: function () {
diff --git a/web/src/js/flow/utils.js b/web/src/js/flow/utils.js
index 988629b9..31780651 100644
--- a/web/src/js/flow/utils.js
+++ b/web/src/js/flow/utils.js
@@ -23,11 +23,11 @@ var _MessageUtils = {
         }
         return message._headerLookups[regex];
     },
-    match_header: function(message, regex){
+    match_header: function (message, regex) {
         var headers = message.headers;
         var i = headers.length;
-        while(i--){
-            if(regex.test(headers[i].join(" "))){
+        while (i--) {
+            if (regex.test(headers[i].join(" "))) {
                 return headers[i];
             }
         }
@@ -54,4 +54,15 @@ var RequestUtils = _.extend(_MessageUtils, {
     }
 });
 
-var ResponseUtils = _.extend(_MessageUtils, {});
\ No newline at end of file
+var ResponseUtils = _.extend(_MessageUtils, {});
+
+HighlightColors = [
+    "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#1f77b4", "#bcbd22", "#17becf",
+    "#ffbb78", "#98df8a", "#ff9896", "#c5b0d5", "#aec7e8", "#dbdb8d", "#9edae5"
+];
+FadedHighlightColors = HighlightColors.map(function (color) {
+    return "rgba(" +
+        parseInt(color.substr(1, 2), 16) + "," +
+        parseInt(color.substr(3, 2), 16) + "," +
+        parseInt(color.substr(5, 2), 16) + ",0.3)";
+});
\ No newline at end of file