graying corpus statistic(plus tests+vc test fixed) and fix vc serialization

Change-Id: I3f934c2cc0ebbb0a91b5fa8f529bf3f5c3ebd391
(cherry picked from commit 172d6a4bbc7d29a0fe7c23b114fbbf485e2f4aeb)
diff --git a/dev/js/src/panel/vcpanel.js b/dev/js/src/panel/vcpanel.js
index 98a9b4b..e12c20c 100644
--- a/dev/js/src/panel/vcpanel.js
+++ b/dev/js/src/panel/vcpanel.js
@@ -43,10 +43,19 @@
       if (this.statView === undefined || !this.statView.shown()) {
         this.statView = corpStatVClass.create(this.vc, this);
         this.add(this.statView);
+        this.vc.oldvcQuery = KorAP.vc.toQuery();
       }
 
     },
     
+    /**
+     * Reload corpus statistic 
+     *
+     */
+    reloadCorpStat: function(){
+      this.statView.close();
+      this.addCorpStat();
+    }
     
   }
 });
diff --git a/dev/js/src/vc.js b/dev/js/src/vc.js
index 711008f..0431f92 100644
--- a/dev/js/src/vc.js
+++ b/dev/js/src/vc.js
@@ -81,6 +81,8 @@
   // KorAP._validDateMatchRE is defined in datepicker.js!
 
   const loc = KorAP.Locale;
+  loc.SHOW_STAT        = loc.SHOW_STAT        || 'Statistics';
+  loc.VERB_SHOWSTAT    = loc.VERB_SHOWSTAT    || 'Corpus Statistics';
   loc.VC_allCorpora    = loc.VC_allCorpora    || 'all corpora';
   loc.VC_oneCollection = loc.VC_oneCollection || 'a virtual corpus';
   loc.MINIMIZE         = loc.MINIMIZE         || 'Minimize';
@@ -360,13 +362,12 @@
     
     /**
      * Update the whole object based on the underlying data structure
-     */ 
+     */    
     update : function() {
       this._root.update();
+      this.checkGrayingStat();
       return this;
     },
-    
- 
     /**
      * Make the vc persistant by injecting the current timestamp as a
      * creation date limit criterion.
@@ -478,8 +479,17 @@
       //Create panel  
       this.panel = vcPanelClass.create(this); 
       dv.appendChild(this.panel.element());
+      
     },
     
-    
+    /**
+     * Checks if corpus statistic has to be greyOut,
+     * and to be updated after clicking at the "reload-button"
+     */
+    checkGrayingStat : function(){
+      if(this.panel !== undefined && this.panel.statView !==undefined){
+        this.panel.statView.checkGrayingStatistic();
+      }
+    }
   };
 });
diff --git a/dev/js/src/vc/doc.js b/dev/js/src/vc/doc.js
index 996c347..2a0e872 100644
--- a/dev/js/src/vc/doc.js
+++ b/dev/js/src/vc/doc.js
@@ -149,6 +149,10 @@
         e.appendChild(op.element());
       };
       
+      if(KorAP.vc){
+        KorAP.vc.checkGrayingStat();
+      }
+      
       return e;
     },
 
@@ -616,9 +620,12 @@
       };
     },
 
+    incomplete : function () {
+      return !(this.matchop() && this.key() && this.value());
+    },
 
     toQuery : function () {
-      if (!this.matchop() || !this.key())
+      if (this.incomplete())
         return "";
 
       // Build doc string based on key
diff --git a/dev/js/src/vc/docgroup.js b/dev/js/src/vc/docgroup.js
index 7ce2fed..10a6495 100644
--- a/dev/js/src/vc/docgroup.js
+++ b/dev/js/src/vc/docgroup.js
@@ -356,7 +356,7 @@
     toQuery : function (brackets) {
       var list = this._operands
 	        .filter(function (op) {
-	          return op.ldType() !== 'non';
+            return !op.incomplete();
 	        })
 	        .map(function (op) {
 	          return (op.ldType() === 'docGroup') ?
diff --git a/dev/js/src/vc/docgroupref.js b/dev/js/src/vc/docgroupref.js
index 7d3ecea..fa82a4b 100644
--- a/dev/js/src/vc/docgroupref.js
+++ b/dev/js/src/vc/docgroupref.js
@@ -109,7 +109,7 @@
         // Append new operators
         e.appendChild(op.element());
       };  
-
+      KorAP.vc.checkGrayingStat();
       return this.element();
     },
 
@@ -207,7 +207,6 @@
       return this;
     },
 
-
     /**
      * Click on the unspecified object
      */
@@ -261,9 +260,13 @@
       };
     },
 
+
+    incomplete : function () {
+      return this.ref() ? false : true
+    },
     
     toQuery : function () {
-      if (!this.ref())
+      if (this.incomplete())
         return "";
 
       // Build doc string based on key
diff --git a/dev/js/src/vc/jsonld.js b/dev/js/src/vc/jsonld.js
index 600a5bb..21260d4 100644
--- a/dev/js/src/vc/jsonld.js
+++ b/dev/js/src/vc/jsonld.js
@@ -99,6 +99,10 @@
       return null;
     },
 
+    incomplete : function () {
+      return false;
+    },
+
     toQuery : function () {
       return '';
     }
diff --git a/dev/js/src/vc/unspecified.js b/dev/js/src/vc/unspecified.js
index 6ffa0e3..416ad85 100644
--- a/dev/js/src/vc/unspecified.js
+++ b/dev/js/src/vc/unspecified.js
@@ -121,6 +121,11 @@
       return this._element;
     },
 
+
+    incomplete : function () {
+      return true;
+    },
+    
     /**
      * Click on the unspecified object
      */
diff --git a/dev/js/src/view/corpstatv.js b/dev/js/src/view/corpstatv.js
index 1cc6f0c..44a9ae2 100644
--- a/dev/js/src/view/corpstatv.js
+++ b/dev/js/src/view/corpstatv.js
@@ -3,18 +3,20 @@
  * 
  * @author Helge Stallkamp
  */
+
 define([ 'view', 'vc/statistic' ], function(viewClass, statClass) {
 
   const d = document;
 
   return {
-    create : function(vc) {
+    create : function(vc, panel) {
       return Object.create(viewClass)._init([ 'vcstatistic' ]).upgradeTo(this)
-          ._init(vc);
+          ._init(vc, panel);
     },
 
-    _init : function(vc) {
+    _init : function(vc, panel) {
       this.vc = vc;
+      this.panel = panel;
       return this;
     },
 
@@ -71,9 +73,10 @@
      * Show corpus statistic view 
      */
     show : function() {
+      
       if (this._show)
-        return this._show;
-
+        return this._show; 
+      
       var statTable = document.createElement('div');
       statTable.classList.add('stattable', 'loading');
   
@@ -91,13 +94,70 @@
 
         statisticobj = statClass.create(statistic);
         statTable.appendChild(statisticobj.element());
+    
       });
 
       this._show = statTable;
       return statTable;
 
     },
+    
 
+    
+    /**
+     * Checks if graying necessary
+     */
+    checkGrayingStatistic : function (){   
+     var newString = KorAP.vc.toQuery();
+     var oldString = this.vc.oldvcQuery;
+     
+     /*
+      * Do ignore surrounding round brackets
+      * Definining an incomplete docGroup in the vc builder: 
+      * (foo = bar and author = Goethe) and ... 
+      * leads to 
+      * vc.toQuery() -> (foo = bar and author=Goethe)
+      */
+     if(newString.startsWith('(')){
+       newString = newString.slice(1, newString.length-1);
+     }
+     
+      if(newString && newString != oldString) {
+        this.grayingStat();
+      }   
+   },
+   
+    /**
+     * Graying corpus statistic if in vc builder a different vc is choosen.
+     * After clicking at the reload-button the up-to-date corpus statistic is displayed.
+     */   
+    grayingStat : function(){
+      var statt = this._show;
+      
+      if(statt.getElementsByClassName('reloadStatB').length == 0){
+          var reloadspan = document.createElement('span');
+          reloadspan.classList.add('reloadStatB');
+          reloadb = reloadspan.addE('span');
+          reloadb.classList.add('refresh');
+          
+          var that = this;
+          
+          reloadb.addEventListener("click", function (e){    
+          statt.classList.remove('greyOut');
+          that.panel.actions.element().querySelector(".statistic").classList.remove('greyOut');
+          that.panel.reloadCorpStat(); 
+             });
+          
+ 
+        statt.appendChild(reloadspan);
+        statt.classList.add('greyOut');        
+        this.panel.actions.element().querySelector(".statistic").classList.add('greyOut');
+        
+        console.log("Corpus statistic DISABLED");
+        }
+    },
+
+    
     /**
      * Close the view.
      */