move test to the VIP rather than console

Author: z5ouyang

VIPInterface.py

@@ -1259,19 +1259,18 @@ def isMeta(data):
   if not os.path.exists(strPath):
     return "FALSE"
   return "TRUE"
-## in order for the following VIP auto testing work after updating
-## 1. generating the test data by one of the following steps:
-##    > manually selecting all information on VIP or loading a session for all plots, and then run 'randomPlot' in the browser console;
-##    > manually selecting two group of cells, and then run "randomSelGene(grpName)", grpName is a required string of a category name, such as 'cell_type'
-##    > run 'createTest(grpName)' in the browser console to randomly generate test case, grpName is a string of a category name, such as 'cell_type'
-## 2. make sure the h5ad file name is listed in vip.env as a variable 'testVIP';
+
+#make sure the h5ad file full name is listed in vip.env as a variable 'testVIP';
 def testVIPready(data):
   strH5ad = os.path.basename(data["h5ad"])
   if 'testVIP' in data and strH5ad==data["testVIP"]:
+    both = True
     for one in [re.sub("h5ad$","info.txt",strH5ad),re.sub("h5ad$","img.txt",strH5ad)]:
-      if not os.path.exists(strExePath+"/../common/web/static/testVIP/"+one):
-        return "FALSE"
-    return "TRUE"
+      both = both and os.path.exists(strExePath+"/../common/web/static/testVIP/"+one)
+    if both:
+      return "SHOW"
+    else:
+      return "TRUE"
   return "FALSE"
 
 def saveTest(data):

config.sh

@@ -133,21 +133,11 @@ make install-dist
 cd ..
 
 ## finished setting up ------
-strPath=$(python -c "import server as _; print(_.__file__.replace('/server/__init__.py',''))")
+strPath="$(python -c 'import site; print(site.getsitepackages()[0])')"
 strweb="${strPath}/server/common/web/static/."
 
 cp VIPInterface.py $strPath/server/app/.
 cp interface.html $strweb
-
-cp jquery.min.js $strweb
-cp -R DataTables $strweb
-cp -R jspanel $strweb
-
-cp jquery-ui.min.js $strweb
-cp color_*.png $strweb
-cp -R ace $strweb
-cp -R stackedbar $strweb
-cp -R d3plot $strweb
 cp volcano.R $strPath/server/app/.
 cp violin.R $strPath/server/app/.
 cp Density2D.R $strPath/server/app/.

interface.html

@@ -30,7 +30,7 @@
     <!-- <script src="static/saveVIP.js"></script> -->
     <!-- for testing the VIP -->
     <script src="https://interactivereport.github.io/cellxgene_VIP/static/testVIP.js"></script>
-    <!-- <script src="static/testVIP/testVIP.js"></script> -->
+    <!--  <script src="static/testVIP.js"></script> -->
     <!-- end -->
     <style>
       .dropup,
@@ -499,13 +499,13 @@
       <button class="tablinks" onclick="ABBRall()">Check All Annotations</button>
       <button class="tablinks" onclick="selFun(event, 'BRUSH');">Brush</button>
       <button class="tablinks" onclick="sync();">Sync</button>
-      <button id="VIPtestBT" class="tablinks" onclick="selFun(event, 'tVIP');testVIP('tVIP');">Test</button>
+      <button id="VIPtestBT" class="tablinks" onclick="selFun(event, 'tVIP')">Test</button>
     </div>
   </div>
   <div id="separator" ></div>
   <div id="panel-right" >
 
-    <input id="loadfile" type="file" onchange="load()" style="display:none" files="static/testVIP/info.txt"/>
+    <input id="loadfile" type="file" onchange="load()" style="display:none"/>
     <div id="ABBR" class="tabcontent"> <!-- Abbreviation -->
       <h3>Create a combinatorial annotation</h3>
       <ol type="1">
@@ -1201,10 +1201,10 @@ <h3>Interactive stacked barplot of cell distribution of selected cells over two
         </div>
         <p>Annotations:</p><p id="STACBARgrp"></p>
         <p>Color by <select id="STACBARcol"></select></p>
-		<p>Figure width: <input id="STACBARwidth" type="number" step="50" value="800"/> , height: <input id="STACBARheight" type="number" step="40" value="480"/></p>
+		  <p>Figure width: <input id="STACBARwidth" type="number" step="50" value="800"/> , height: <input id="STACBARheight" type="number" step="40" value="480"/></p>
         <p>x-Axis font size: <input id="STACBARxfontsize" type="number" step="2" value="16"/> ,
         label rotate: <input id="STACBARxlabelrotate" type="number" step="5" value="-60"/> ,
-		label shift: <input id="STACBARxlabelshift" type="number" step="2" value="-24"/></p>
+		     label shift: <input id="STACBARxlabelshift" type="number" step="2" value="-24"/></p>
       </div>
 
 
@@ -1333,7 +1333,32 @@ <h3>Brushed ranges</h3>
       <div id="CLIresize" style="height: 'auto'; width: 'auto'; padding: 0.5em;"></div>
     </div><!--CLI-->
 
-    <div id="tVIP" class="tabcontent"></div>
+    <div id="tVIP" class="tabcontent">
+      <h3>Test the VIP functionality</h3>
+      <p><button id="tVIPtest" class="tVIPbt" onclick="testVIP('tVIPnote')"><b>Test by the latest case</b></button></p>
+      <fieldset>
+        <legend>Create a test case</legend>
+        <p>by: <select id="tVIPgrp"></select></p>
+        <p><button class="tVIPbt tVIPbtA" onclick="tVIPcreate('random','tVIPnote')">Create</button><br>
+          The prcess will<br>
+          1. Split the annotations of selected category into two groups randomly;<br>
+          2. Select 500 cells from each group;<br>
+          3. Apply DEG for those two groups of cells;<br>
+          4. Select top DEGs randomly in to groups;<br>
+          5. Choose user selections in VIP randomly;<br>
+          6. Perform plotting function one by one;<br>
+          7. Save the test case on the server for future use (overwrite preivous).
+        </p>
+        <p><button class="tVIPbt tVIPbtA" onclick="tVIPcreate('cells','tVIPnote')">Create on selected cells</button><br>
+          The test generation will ignore the first 2 steps in the above process, and run all the rest.
+        </p>
+        <p><button class="tVIPbt tVIPbtA" onclick="tVIPcreate('selections','tVIPnote')">Create on selections</button><br>
+          The user have selected all options on VIP including the genes and gene sets (or loaded previous session).
+          This process will process all VIP plots one by one and save it as a test case on the server (overwrite preivous).
+        </p>
+      </fieldset>
+      <div id="tVIPnote"></div>
+    </div>
   </div>
 
 </div>
@@ -1603,9 +1628,14 @@ <h3>Brushed ranges</h3>
         data:JSON.stringify({'method':"testVIPready",'dataset': window.store.getState().config.displayNames.dataset+'.h5ad'}),
         contentType: 'application/json;charset=UTF-8',
         success: function(res){
+          $("#tVIPtest").prop('disabled',true);
           if(res == "TRUE"){
             $("#VIPtestBT").show();
           }
+          if(res == "SHOW"){
+            $("#tVIPtest").prop('disabled',false);
+            $("#VIPtestBT").show();
+          }
         },
         error: function(request,status,error){
           console.log(request.status+': cannot get VIP test information ...');
@@ -1662,6 +1692,7 @@ <h3>Brushed ranges</h3>
     var densS = document.getElementById("DENSsplit");
     var densG = document.getElementById("DENSgrp");
     var embed = document.getElementById("EMBEDsplit");
+    var tVIP = document.getElementById("tVIPgrp");
 
     for(const one of grps){
       if (one.startsWith(">")) continue;
@@ -1676,6 +1707,7 @@ <h3>Brushed ranges</h3>
       densS.add(createOpt(one));
       densG.add(createOpt(one));
       embed.add(createOpt(one));
+      tVIP.add(createOpt(one));
     }
     densS.add(createOpt('None'));
     densG.add(createOpt('None'));
@@ -1854,6 +1886,9 @@ <h3>Brushed ranges</h3>
   CLIref();
   preDEGVolcanoref("preDEGvolcano");
   preDEGmultiref();
+  if(window.store.getState().colors.colorAccessor != null){
+    $('#tVIPgrp').val(window.store.getState().colors.colorAccessor);
+  }
 }
 function ABBRref(){
 }
@@ -4476,6 +4511,19 @@ <h3>Brushed ranges</h3>
   numberLoad(content['number']);
   sortableLoad(content['sortable']);
 }
+// test the VIP
+function tVIPcreate(act,eID){
+  $(".tVIPbt").prop('disabled',true);
+  $("#"+eID).html("");
+
+  if(act=='random'){
+    createTest($("#tVIPgrp").val(),'tVIPnote');
+  }else if(act=='cells'){
+    randomInitDEG($("#tVIPgrp").val(),'tVIPnote');
+  }else if(act=='selections'){
+    randomPlot('tVIPnote');
+  }
+}
 // ignore global definition for stackedBar legend circle
 function GetStyle(CLASSname){
     var styleSheets = document.styleSheets;

update.VIPInterface.sh

@@ -4,18 +4,14 @@ echo "usually update once"
 fi
 
 ## finished setting up ------
-strPath=$(python -c "import server as _; print(_.__file__.replace('/server/__init__.py',''))")
+strPath="$(python -c 'import site; print(site.getsitepackages()[0])')"
 strweb="${strPath}/server/common/web/static/."
 
 cp VIPInterface.py $strPath/server/app/.
 cp interface.html $strweb
 cp vip.env $strPath/server/app/. 2>/dev/null | true
 
 if [ -n "$1" ]; then
-cp -R testVIP $strweb
-cp saveVIP.js $strweb
-cp -R stackedbar $strweb
-cp -R d3plot $strweb
 cp bubbleMap.R $strPath/server/app/.
 cp violin.R $strPath/server/app/.
 cp volcano.R $strPath/server/app/.