Show rewrite on overview

Change-Id: I93d0a31445430ea394c058b2d7685d86f056edd4
diff --git a/dev/demo/all.html b/dev/demo/all.html
index f878e36..eb78dc4 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -107,7 +107,66 @@
         /*
 	      KorAP.koralQuery = {"matches":["..."],"errors":[[302,"Parantheses\/brackets unbalanced.","20"]],"query":{"wrap":{"layer":"orth","match":"match:eq","foundry":"opennlp","key":"Goethe","@type":"koral:term"},"@type":"koral:token"},"meta":{"serialQuery":"tokens:s:Goethe","startIndex":0,"version":"unknown","itemsPerPage":25,"context":"p","benchmark":"0.103553092 s","totalResults":-1}};
         */
-        KorAP.koralQuery = {"matches":["..."],"query":{"wrap":{"layer":"orth","match":"match:eq","foundry":"opennlp","key":"Goethe","@type":"koral:term"},"@type":"koral:token"},"meta":{"serialQuery":"tokens:s:Goethe","startIndex":0,"version":"unknown","itemsPerPage":25,"context":"p","benchmark":"0.103553092 s","totalResults":-1}};
+
+KorAP.koralQuery = {
+  "matches":["..."],
+        "collection":{
+        "@type": "koral:docGroup",
+        "operation": "operation:or", "operands": [{
+      "@type": "koral:docGroup",
+      "operation": "operation:and",
+      "operands": [
+        {
+          "@type": "koral:doc",
+          "key": "title",
+          "match": "match:eq",
+          "value": "Der Birnbaum",
+          "type": "type:string"
+        },
+        {
+          "@type": "koral:doc",
+          "key": "pubPlace",
+          "match": "match:eq",
+          "value": "Mannheim",
+          "type": "type:string"
+        },
+        {
+          "@type": "koral:docGroup",
+          "operation": "operation:or",
+          "operands": [
+            {
+              "@type": "koral:doc",
+              "key": "subTitle",
+              "match": "match:eq",
+              "value": "Aufzucht und Pflege",
+              "type": "type:string"
+            },
+            {
+              "@type": "koral:doc",
+              "key": "subTitle",
+              "match": "match:eq",
+              "value": "Gedichte",
+              "type": "type:string"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "@type": "koral:doc",
+      "key": "pubDate",
+      "match": "match:geq",
+      "value": "2015-03-05",
+      "type": "type:date",
+        "rewrites" : [{
+	      "@type" : "koral:rewrite",
+	      "operation" : "operation:modification",
+	      "src" : "querySerializer",
+	      "scope" : "tree"
+        }]
+    }
+  ]
+}, "query":{"wrap":{"layer":"orth","match":"match:eq","foundry":"opennlp","key":"Goethe","@type":"koral:term"},"@type":"koral:token"},"meta":{"serialQuery":"tokens:s:Goethe","startIndex":0,"version":"unknown","itemsPerPage":25,"context":"p","benchmark":"0.103553092 s","totalResults":-1}};
       </script>
 
       <div id="search">
diff --git a/dev/demo/build.html b/dev/demo/build.html
deleted file mode 100644
index e68cfd8..0000000
--- a/dev/demo/build.html
+++ /dev/null
@@ -1,169 +0,0 @@
- <!DOCTYPE html>
-<html>
-  <head>
-    <title>Complete Demo</title>
-    <meta charset="utf-8" />
-    <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
-    <script>//<![CDATA[
-
-  window.KorAP = window.KorAP || {};
-  KorAP.URL = '/';
-
-//]]></script>
-    <script src="../../public/js/kalamar-0.18.0-en.js" async="async"></script>
-  </head>
-  <body>
-    <div id="kalamar-bg"></div>
-    <header>
-      <a href="/" class="logo"><h1><span>KorAP - Corpus Analysis Platform</span></h1></a>
-
-      <a href="#">Feedback</a>
-      <a href="#">Login</a>
-
-      <form autocomplete="off" action="/kalamar">
-	<div id="searchbar">
-	  <input type="search"
-		 placeholder="Find ..."
-		 name="q"
-		 id="q-field"
-		 autofocus="autofocus" />
-	  <button type="submit"><span>Go</span></button>
-	  <!-- <i class="fa fa-arrow-circle-down show-hint" onclick="hint.popUp()"></i> -->
-	</div>
-	<div id="vc-view"></div>
-	in <input type="hidden" id="vc-name" name="vc-name" value="Wikipedia" />
-	<input type="text" name="vc" id="vc" value="corpusID = Wikipedia" />
-	with <span class="select">
-	  <!-- Change this to js-menu -->
-	  <select name="ql" id="ql-field">
-	    <option value="poliqarp">Poliqarp</option>
-	    <option value="cosmas2">Cosmas II</option>
-	    <option value="annis">Annis</option>
-	    <option value="cql">CQL v1.2</option>
-	  </select>
-	</span>
-	<div id="button-right">
-	  <input type="checkbox"
-		 value="1"
-		 name="cutoff"
-		 class="checkbox"
-		 id="q-cutoff-field" />
-	  <label for="q-cutoff-field"><span></span>Glimpse</label>
-
-	  <!-- Todo: open tutorial - like openTutorial() -->
-	  <a href="about.html" title="Tutorial" class="tutorial" id="view-tutorial"><span>Tutorial</span></a>
-	</div>
-      </form>
-    </header>
-
-    <div id="sidebar" tabindex="0">
-      <h2>Einstellungen</h2>
-      <p>Anzahl Treffer pro Seite</p>
-      <p>Kontext:</p>
-      <p>200 Zeichen/Token - 200 Zeichen/Token</p>
-      <p>1 Satz 1 Paragraph</p>
-      <a>Deutsch|Englisch</a>
-    </div>
-
-    <main>
-      <div class="resultinfo">
-	<div id="pagination">
-	  <a rel="prev"><span><span>&lt;</span></span></a>
-	  <a rel="self"><span>1</span></a>
-	  <a href="#2"><span>2</span></a>
-	  <a href="#3"><span>3</span></a>
-	  <a class="ellipsis"><span><span>...</span></span></a>
-	  <a href="#52230"><span>52230</span></a>
-	  <a rel="next" href="#2"><span><span>&gt;</span></span></a>
-	</div>
-	<p class="found">Found <span id="total-results">unknown amount of matches</span> in 59.93ms</p>
-      </div>
-
-      <div id="search">
-	<ol class="align-left">
-	  <li data-corpus-id="WPD"
-	      data-doc-id="WWW"
-	      data-text-id="03313"
-	      data-match-id="p102-103"
-	      data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"
-	      id="WPD-WWW.03313-p102-103">
-	    <div>
-	      <div class="snippet startMore endMore"><span class="context-left">In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an die Funktion </span><mark><mark class="class-2 level-1">Dies </mark><mark class="class-1 level-0"><mark class="class-2 level-1"><mark class="class-3 level-2">ist</mark> ein</mark> Test</mark></mark><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
-	      <!-- only inject via javascript! -->
-	    </div>
-	    <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
-	    <!-- only inject via javascript! -->
-	    <!--
-	    <ul class="action right">
-	      <li class="close" title="Close"><a href="#">Close hit<i class="fa fa-toggle-up"></i></a></li>
-	      <li class="open" title="Open in new tab"><a href="#WPD-WWW.03313-p102-103" target="_blank" rel="noopener noreferrer"><i class="fa fa-external-link-square"></i></a></li>
-	      <li onclick="showTable(this)" title="Annotations"><i class="fa fa-info-circle"></i></li>
-	    </ul>
--->
-	  </li>
-	  <li data-corpus-id="WPD"
-	      data-doc-id="FFF"
-	      data-text-id="01460"
-	      data-match-id="p119-120"
-	      data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"
-	      id="WPD-FFF.01460-p119-120">
-	    <div>
-	      <div class="snippet startMore endMore"><span class="context-left">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple </span><span class="match">test</span><span class="context-right"> problem.</span></div>
-	      <div class="tokenInfo"></div>
-	    </div>
-	    <p class="ref"><strong>Fehlbezogenes Adjektiv</strong> by Joni2,Peterlustig,BWBot; published on 2005-03-28 as FFF.01460 (WPD)</p>
-	    <ul class="action right">
-	      <li class="close" title="Close"><a href="#"><i class="fa fa-toggle-up"></i></a></li>
-	      <li class="open" title="Open in new tab"><a href="#WPD-FFF.01460-p119-120" target="_blank" rel="noopener noreferrer"><i class="fa fa-external-link-square"></i></a></li>
-	      <li onclick="showTable(this)" title="Annotations"><i class="fa fa-info-circle"></i></li>
-	    </ul>
-	  </li>
-
-	  <li data-corpus-id="WPD"
-	      data-doc-id="HHH"
-	      data-text-id="06056"
-	      data-match-id="p2564-2565"
-	      data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"
-	      id="WPD-HHH.06056-p2564-2565">
-	    <div>
-	      <div class="snippet startMore endMore"><span class="context-left">HDTV Samples from European (and other) broadcasters and </span><span class="match">test</span><span class="context-right"> transmissions in Europe</span></div>
-	      <div class="tokenInfo"></div>
-	    </div>
-	    <p class="ref"><strong>High Definition Television</strong> by ArtMechanic,TheK,Andreas -horn- Hornig; published on 2005-03-28 as HHH.06056 (WPD)</p>
-	    <ul class="action right">
-	      <li class="close" title="Close"><a href="#"><i class="fa fa-toggle-up"></i></a></li>
-	      <li class="open" title="Open in new tab"><a href="#WPD-HHH.06056-p2564-2565" target="_blank" rel="noopener noreferrer"><i class="fa fa-external-link-square"></i></a></li>
-	      <li onclick="showTable(this)" title="Annotations"><i class="fa fa-info-circle"></i></li>
-	    </ul>
-	  </li>
-      </div>
-      <div id="menu"></div>
-
-      <div class="intro">
-	<p><strong>KorAP</strong> is a new Corpus Analysis Platform, suited for large, multiple annotated corpora and complex search queries independent of particular research questions.</p>
-	<p>This is the new frontend for KorAP, with currently no access to restricted corpora. For full access, please visit the <a href="http://korap.ids-mannheim.de/app">first frontend</a>.</p>
-
-	<p><strong>New to KorAP?</strong> Please check out our <a href="#">tutorial</a>!</p>
-
-	<p>KorAP is developed at the <a href="http://www.ids-mannheim.de">Institute for the German Language</a> and funded by the <a href="http://www.leibniz-gemeinschaft.de/en/about-us/leibniz-competition/projekte-2011/2011-funding-line-2/">Leibniz Association</a>. The separated modules are being published as open source at <a href="http://github.com/KorAP">GitHub</a>.</p>
-      </div>
-      <div id="logos">
-	<div>
-	  <a href="http://www.ids-mannheim.de/" class="logo"><p id="ids-logo"><span>Developed at the Institute for the German Language (IDS)</span></p></a>
-	  <a href="http://www.leibniz-gemeinschaft.de/" class="logo"><p id="leibniz-logo"><span>Member of the Leibniz Association</span></p></a>
-	</div>
-      </div>
-    </main>
-
-    <footer>
-      <a href="/doc/KorAP">About</a>
-      <a href="http://korap.ids-mannheim.de/">About</a>
-      <a href="#">V 0.14</a>
-    </footer>
-
-    <script>
-      var KorAP = KorAP || {};
-      KorAP.URL = 'http://localhost:3000';
-    </script>
-  </body>
-</html>
diff --git a/dev/js/spec/vcSpec.js b/dev/js/spec/vcSpec.js
index 6f2c391..3159101 100644
--- a/dev/js/spec/vcSpec.js
+++ b/dev/js/spec/vcSpec.js
@@ -1857,7 +1857,54 @@
     });
   });
 
+  // Check class method
+  describe('KorAP.VC.checkRewrite', function () {
+    
+    it('should check for simple rewrites', function () {
+      expect(vcClass.checkRewrite(
+        {
+          "@type" : "koral:doc",
+          "rewrites" : [{
+	          "@type" : "koral:rewrite",
+	          "operation" : "operation:modification",
+	          "src" : "querySerializer",
+	          "scope" : "tree"
+          }]
+        }
+      )).toBeTruthy();
 
+      var nested = {
+        "@type" : "koral:docGroup",
+        "operands" : [
+          {
+            "@type" : "koral:doc"
+          },
+          {
+            "@type" : "koral:docGroup",
+            "operands" : [
+              {
+                "@type": "koral:doc"
+              },
+              {
+                "@type": "koral:doc"
+              }
+            ]
+          }
+        ]
+      };
+
+      expect(vcClass.checkRewrite(nested)).toBe(false);
+
+      nested["operands"][1]["operands"][1]["rewrites"] = [{
+	      "@type" : "koral:rewrite",
+	      "operation" : "operation:modification",
+	      "src" : "querySerializer",
+	      "scope" : "tree"
+      }];
+
+      expect(vcClass.checkRewrite(nested)).toBeTruthy();
+    });
+  });
 
   describe('KorAP.Rewrite', function () {
     it('should be initializable', function () {
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 81ed093..c77b7b4 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -84,7 +84,7 @@
     /**
      * Replace Virtual Collection field
      */
-    var vcname;
+    var vcname, vcchoose;
     var input = document.getElementById('collection');
     if (input) {
       input.style.display = 'none';
@@ -97,7 +97,9 @@
         currentVC = loc.VC_oneCollection;
       };
 
-      vcname.appendChild(
+      vcchoose = vcname.appendChild(document.createElement('span'));
+
+      vcchoose.appendChild(
         document.createTextNode(
           document.getElementById('collection-name').value || currentVC
         )
@@ -332,13 +334,15 @@
       };
 
       vcname.onclick = vcclick;
+
+      // Click, if the VC should be shown
       if (show['collection']) {
         vcclick.apply();
-      };
+      }
 
-      // Check
-      if (_checkVCrewrite(vcClass)) {
-        console.log("Rewrite!");
+      // else
+      else if (_checkVCrewrite(vcClass)) {
+        vcchoose.classList.add('rewritten');
       };
     };
 
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index 9c48fbd..c773d53 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -8,6 +8,7 @@
 /**
  * Virtual Collection Builder
  */
+
 .vc {
   margin-top: 4pt;
 
@@ -139,16 +140,16 @@
       display: inline-block;
       color: $dark-orange;
       &::after {
-	font: {
-	  family: FontAwesome;
-	  style: normal;
-	  weight: normal;
-	}
-	content: $fa-rewrite;
-	text-decoration: underline;
+	      font: {
+	      family: FontAwesome;
+	      style: normal;
+	      weight: normal;
+	    }
+	      content: $fa-rewrite;
+	      text-decoration: underline;
       }
       span {
-	display: none;
+	      display: none;
       }
     }
   }
@@ -308,17 +309,18 @@
   border-radius: $standard-border-radius;
 }
 
-/*
-#vc-choose {
+
+#vc-choose > span.rewritten {
   &::after {
-    content: $fa-down;
-    padding: {
-      left: 2pt;
-      right: 4pt;
-    }
-  }
-  &.active::after {
-    content: $fa-up;
+    color: $dark-orange;
+    padding: 0;
+    padding-left: 4px;
+	  font: {
+	    family: FontAwesome;
+	    style: normal;
+	    weight: normal;
+	  }
+	  content: $fa-rewrite;
+	  text-decoration: underline;
   }
 }
-*/
\ No newline at end of file