From d2471592d23f592dfa484bc6e49ad73bc060bda6 Mon Sep 17 00:00:00 2001
From: Maximilian Hils <git@maximilianhils.com>
Date: Mon, 22 Dec 2014 23:40:24 +0100
Subject: highlight ui: complicated version

---
 web/src/js/components/flowtable.jsx.js | 19 ++++++++++++++++++-
 web/src/js/components/header.jsx.js    |  6 +-----
 web/src/js/components/mainview.jsx.js  | 31 ++++++++++++++++++++++++-------
 3 files changed, 43 insertions(+), 13 deletions(-)

(limited to 'web/src/js/components')

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 () {
-- 
cgit v1.2.3