diff --git a/shrine-webclient/src/main/html/js-i2b2/cells/plugins/MedCo/assets/vwMedcoPopups.css b/shrine-webclient/src/main/html/js-i2b2/cells/plugins/MedCo/assets/vwMedcoPopups.css
index dffd2f4b7..88687d1f1 100644
--- a/shrine-webclient/src/main/html/js-i2b2/cells/plugins/MedCo/assets/vwMedcoPopups.css
+++ b/shrine-webclient/src/main/html/js-i2b2/cells/plugins/MedCo/assets/vwMedcoPopups.css
@@ -1,26 +1,26 @@
 .MedCo-Popup{
     visibility: collapse;
 }
 
 
 /* popup for selecting query name and type */
-.QueryTypePopup .bd div{
+.QueryTypePopup .bd .container{
     margin-left:50px;
     width: 275px;
 }
 
 .QueryTypePopup #MedCo-QueryName{
     width: 100%;
 }
 
 .QueryTypePopup #MedCo-QueryType{
     border: 1px solid rgb(171, 173, 179);
     max-height:100px;
     overflow:auto;
     padding: 4px
 }
 
 .QueryTypePopup #MedCo-QueryType label{
     display: block;
     cursor: pointer;
 }
\ No newline at end of file
diff --git a/shrine-webclient/src/main/html/js-i2b2/cells/plugins/MedCo/popup_ctrlr.js b/shrine-webclient/src/main/html/js-i2b2/cells/plugins/MedCo/popup_ctrlr.js
index f7400b24f..b73e297ec 100644
--- a/shrine-webclient/src/main/html/js-i2b2/cells/plugins/MedCo/popup_ctrlr.js
+++ b/shrine-webclient/src/main/html/js-i2b2/cells/plugins/MedCo/popup_ctrlr.js
@@ -1,928 +1,928 @@
 i2b2.MedCo.popups = {};
 i2b2.MedCo.popups.ctrlr = {};
 
 // popups for building the query
 i2b2.MedCo.popups.ByVariantName = {};
 i2b2.MedCo.popups.ByVariantName.ctrlr = {};
 
 i2b2.MedCo.popups.ByGene = {};
 i2b2.MedCo.popups.ByGene.ctrlr = {};
 
 i2b2.MedCo.popups.ByProteinPosition = {};
 i2b2.MedCo.popups.ByProteinPosition.ctrlr = {};
 
 // popup for managing the query type
 i2b2.MedCo.popups.SelectQueryType = {};
 i2b2.MedCo.popups.SelectQueryType.ctrlr = {};
 
 
 i2b2.MedCo.popups.ctrlr.init = function (){
     i2b2.MedCo.popups.ByVariantName.ctrlr.init();
     i2b2.MedCo.popups.ByGene.ctrlr.init();
     i2b2.MedCo.popups.ByProteinPosition.ctrlr.init();
 
     i2b2.MedCo.popups.SelectQueryType.ctrlr.init()
 };
 
 i2b2.MedCo.popups.ctrlr.clear = function(){
     i2b2.MedCo.popups.ByVariantName.ctrlr.clear();
     i2b2.MedCo.popups.ByGene.ctrlr.clear();
     i2b2.MedCo.popups.ByProteinPosition.ctrlr.clear();
 
     i2b2.MedCo.popups.SelectQueryType.ctrlr.clear();
 };
 
 i2b2.MedCo.popups.ctrlr.unload = function() {
     // delete view of everything
     i2b2.MedCo.popups.ByVariantName.ctrlr.unload();
     i2b2.MedCo.popups.ByGene.ctrlr.unload();
     i2b2.MedCo.popups.ByProteinPosition.ctrlr.unload();
 
     i2b2.MedCo.popups.SelectQueryType.ctrlr.unload();
 };
 
 // Manage the php requests.
 // success:     function that takes as input the response form the server
 // error:       function that takes as input the error code returned by the server
 // phpQuery:    string that contains the path and the parameters of the request
 function phpGETRequest(success, error, phpQuery) {
     // create the request object to send the request and manage the response
     var req = false;
     try {
         // most browsers
         req = new XMLHttpRequest();
     } catch (e) {
         // IE
         try {
             req = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
             // try an older version
             try {
                 req = new ActiveXObject("Microsoft.XMLHTTP");
             } catch (e) {
                 return false;
             }
         }
     }
     // if the http request obj has not been created then return
     if (!req) return false;
 
 
     // update the request object to act when receiving the response
     req.onreadystatechange = function () {
         if (req.readyState == 4) {
             return req.status === 200 ?
                 success(req.responseText) : error(req.status);
         }
     };
 
     req.open("GET", phpQuery, true);
     req.send(null);
     return req;
 };
 
 
 // Function used to initialize gene, protein and variant popup (they have the same structure).
 // -popup: contains variables used to create the pupup (e.g. title, description)
 // -fetchParametersQuery: php query used retrieve the parameters (e.g. genes, proteins or variants). Contains
 //                      "&paramValue" that must be filled with the value of the parameter
 // -fetchVariantsQuery: the final objective of the popup is to fetch the variants. This should be the path to the php
 //                  file that fetches the variants from the database.
 i2b2.MedCo.popups.ctrlr.MedCo_queryPopupInit = function (fetchParametersQuery, fetchVariantsQuery, popup, ctrlr){
     // ------ Initialize the model ------
     var model = {};
     model.choiceList = []; // here is stored the list of suggested parameters
     // the panel number is passed to the popup when opened (so to bind the popup with a panel)
     model.panelIndex = 0;
 
     // ------  Initialize the view  ------
     popup.Id = "MedCo_" + popup.name + "Popup"
 
     popup.paramInputBoxId = "search" + popup.name + "InputBox";
     popup.heteroId = "heterozygous" + popup.name + "Popup";
     popup.homoId = "homozygous" + popup.name + "Popup";
     popup.unknId = "unknown" + popup.name + "Popup";
 
     document.getElementById("MedCo-CONTENT").appendChild(htmlToElement(
         "\n<div id=\"" + popup.Id + "\" style=\"visibility: collapse;\">" +
             "<div class=\"hd\">" + popup.text.title + "</div>" +
             "<div class=\"bd\">" +
                 "<p>" + popup.text.description + "</p>"+
                 "<div class=\"MedCo_popupParametersSelection\">"+
                     "<div class=\"parameterRow\">"+
                         "<div>" + popup.text.paramName + "</div>"+
                         "<div>"+
                            "<input type=\"search\" id=\"" + popup.paramInputBoxId + "\" >" +
                         "</div>"+
                     "</div>"+
                     "<br>"+
                     "<div class=\"parameterRow\">"+
                         "<div> Zygosity* </div>"+
                         "<div class=\"zygosityListPopup\">"+
                             "<label><input type=\"checkbox\" id=\"" + popup.heteroId + "\">Heterozygous</label>"+
                             "<label><input type=\"checkbox\" id=\"" + popup.homoId + "\">Homozygous</label>"+
                             "<label><input type=\"checkbox\" id=\"" + popup.unknId + "\">Unknown</label>"+
                         "</div>"+
                     "</div>"+
                 "</div>"+
             "</div>"+
         "</div>"));
 
     var view = {};
     view.popup = document.getElementById(popup.Id);
     view.inputBox = document.querySelector("#"+ popup.Id + " #" +popup.paramInputBoxId);
     view.zygosityList = {
         heterozygousCheckbox: document.querySelector("#"+ popup.Id + " #" + popup.heteroId),
         homozygousCheckbox: document.querySelector("#"+ popup.Id + " #" + popup.homoId),
         unknownCheckbox: document.querySelector("#"+ popup.Id + " #" + popup.unknId)
     };
 
     // autocompletion for the inputBox
     new autoComplete({
         cache: false,
         selector: '#' + popup.paramInputBoxId,
         minChars: 1,
         source: function(term, suggest){
             term = term.toLowerCase();
             var matches = [];
             for (var i=0; i<model.choiceList.length; i++){
                 if (~model.choiceList[i].toLowerCase().indexOf(term)) {
                     matches.push(model.choiceList[i]);
 
                     // show only up to 20
                     if (matches.length>20) break
                 }
             }
             suggest(matches);
         }
     });
 
 
     // ------  Initialize the controller  ------
 
     // function used to check if the input box content reflect the selected option in the dropdown list
     view.inputBox.Validate = function (){
         var parameter = view.inputBox.value.replace(/\s/g, '')
         if (parameter!="" && model.choiceList.includes(view.inputBox.value)){
             return true
         }
         // The user has still to pick one from the dropdown list
         alert("Please, write and pick a " + popup.name + " from the dropdown list.");
         return false;
     };
 
     view.zygosityList.Validate = function (){
         if (view.zygosityList.heterozygousCheckbox.checked == false &&
             view.zygosityList.homozygousCheckbox.checked == false &&
             view.zygosityList.unknownCheckbox.checked == false) {
             alert("Please, select at least one zygosity option.");
             return false;
         }
         return true;
     };
 
 
     // fetchParameters manage the fetch of the suggested parameters of the query (e.g. genes, proteins, variants)
     ctrlr.fetchParameters = {
         // if previousParameter (which stores the "old" view.inputBox content) stays the same for a certain period
         // of time then the user stopped writing => I retrieve from the database the matching parameters
         previousParameter: "",
         // here I store the executed queries so to avoid repeating it
         queriedParameters: [""],
         // here I store the timeout (so that I can stop it when I want) used to check when the user stops writing
         timeout: null,
         // waitThenRun allows you to wait for the user to finish writing before running the query
         waitThenRun: function () {
             // we call waitThenRun until the user stops writing
 
             // stop the previous call (every new digits trigger a fetchParameters.run() call)
             clearTimeout(ctrlr.fetchParameters.timeout);
 
             // take the current value removing whitespaces
             var currParameter = view.inputBox.value.replace(/\s/g, '');
 
             if (ctrlr.fetchParameters.queriedParameters.includes(currParameter)) {
                 // if it is equal to a previous query then I already have all the matching ones => just update
                 // the dropdown list (simulate onchange to trigger the autocompletion)
                 ctrlr.fetchParameters.previousParameter = currParameter;
                 view.inputBox.dispatchEvent(new Event('onchange'));
                 return;
             }
 
             if (currParameter != ctrlr.fetchParameters.previousParameter) {
                 // if the current parameter is different from the previous one then wait for the user to finish
                 // to write
                 ctrlr.fetchParameters.previousParameter = currParameter;
                 ctrlr.fetchParameters.timeout = setTimeout(ctrlr.fetchParameters.waitThenRun, 500);
                 return;
             }
 
             // If you ended up here then the user stopped writing and we can execute the query
 
             // store the current query so to avoid repeating it
             ctrlr.fetchParameters.queriedParameters.push(currParameter); // todo not fault tolerant (you store it before receiving the respons eof the query...)
             ctrlr.fetchParameters.run();
         },
 
         run: function () {
             var currParameter = view.inputBox.value.replace(/\s/g, '');
             var success = function (responseText) {
                 if (responseText.indexOf("error")>=0){
                     alert(responseText)
                     return;
                 }
 
                 // merge the choice list with the new options
                 var merged = new Set(model.choiceList.concat(JSON.parse(responseText)));
                 model.choiceList = [...merged]; // convert to list (after evaluating the set)
                 model.choiceList.sort()
 
                 // update showed list (by pretending there a keyup event)
                 view.inputBox.dispatchEvent(new Event('onchange'));
             };
             var error = function (err) {
                 alert("Error when trying to retrieve the " + popup.name + " values from the database: " + err)
             };
 
             var phpQuery = fetchParametersQuery.replace("$paramValue", currParameter);
             phpGETRequest(success, error, phpQuery);
         }
     };
 
     // fetchVariants manage the fetch of the variants ids (which is the final goal of the popup)
     ctrlr.fetchVariants = {
         run: function () {
             var parameterValue = view.inputBox.value;
             var zygosyty = [];
             if (view.zygosityList.heterozygousCheckbox.checked == true) {
                 zygosyty.push("Heterozygous")
             }
             if (view.zygosityList.homozygousCheckbox.checked == true) {
                 zygosyty.push("Homozygous")
             }
             if (view.zygosityList.unknownCheckbox.checked == true) {
                 zygosyty.push("Unknown")
             }
 
 
             var panel = i2b2.MedCo.QT.panels[model.panelIndex];
             // show the variants to the user
             var conceptView = popup.text.panelParam + parameterValue;
             var conceptModel = []; // still nothing to be stored (we have to wait of the response)
             var sensitive = true;
             var output = true;
             var concept = panel.ctrlr.appendConcept(conceptView, conceptModel, sensitive, output);
 
             var success = function (responseText) {
                 if (responseText.indexOf("error")>=0){
                     alert(responseText)
                     return;
                 }
 
                 var response = JSON.parse(responseText);
                 // var panel = i2b2.MedCo.QT.panels[model.panelIndex]
 
                 // update the model and the view of the concept
                 concept.model.values = response.variants;
                 concept.view.getElementsByTagName("output")[0].innerHTML = response.variants.length;
                 i2b2.MedCo.ctrlr.background.toBeEncrypted(response.variants);
 
                 // I received the response so decrease the counter
                 i2b2.MedCo.ctrlr.pendingVariantsQueries  -= 1;
             };
             var error = function (err) {
                 alert("Error when trying to retrieve the variants from the database: " + err)
             };
 
             // increase the number of responses I should wait for
             i2b2.MedCo.ctrlr.pendingVariantsQueries  += 1;
 
             // The panel number will be returned with the response so to bind a query to a specific panel (if the
             // query is very slow it could happen that the user starts two queries in parallel which could be related
             // to two different panels).
             var phpQuery =
                 fetchVariantsQuery.replace("$paramValue", parameterValue) +
                 "&zygosity[]=" +  zygosyty.join("&zygosity[]="); // build the array of zygosity options
             phpGETRequest(success, error, phpQuery);
         }
     };
 
     // Popup 'cancel' and 'ok' handlers
     ctrlr.handleCancel = function() {
         // When the popup is closed just call the "cancel" on the YAHOO popup
         this.cancel();
     };
     ctrlr.handleOk = function() {
         // When the user clicks on "ok", check the query parameters and fetch the variants
 
         // validate the fields
         if (! view.inputBox.Validate()){return;}
         if (! view.zygosityList.Validate()){return;}
 
         // run the query to retrieve all the annotations with the specified parameters and zygosyty
         ctrlr.fetchVariants.run();
         this.hide()
     };
 
     // clear the popup fields
     ctrlr.clear = function(){
         view.inputBox.value = "";
         view.zygosityList.heterozygousCheckbox.checked = false;
         view.zygosityList.homozygousCheckbox.checked = false;
         view.zygosityList.unknownCheckbox.checked = false;
     };
 
     ctrlr.unload = function(){
         // destroy the html elements
         view.popup.parentNode.removeChild(view.popup);
     }
 
     // ------  Register controller functions on view elements  ------
 
     // when the user writes in the inputBox you have to run a query to fetch the parameters
     view.inputBox.addEventListener("keyup", ctrlr.fetchParameters.waitThenRun);
 
     // Create the popup with YAHOO.widget
     view.dialog = new YAHOO.widget.SimpleDialog(popup.Id, {
         draggable: true,
         zindex: 10000,
         width: "500px",
         // height: "200px",
         autofillheight: "body",
         constraintoviewport: true,
         context: ["showbtn", "tl", "bl"],
         fixedcenter: true,
         modal: true,
         buttons: [{
             text: "OK",
             handler: ctrlr.handleOk,
             isDefault: true
         }, {
             text: "Cancel",
             handler: ctrlr.handleCancel
         }]
     });
 
     ctrlr.show = function(panelIndex) {
         // show the YAHOO.widget popup
         // ctrlr.clear() // clear the fields
         model.panelIndex = panelIndex;
         view.dialog.render(document.body);
         view.dialog.show();
     };
 }
 
 
 i2b2.MedCo.popups.ByGene.ctrlr.init = function (){
     // define the php queries and insert $something where the parameters will be inserted
     // note: these formats must conform what the relative php files expects as parameters
     var fetchParametersQuery = "js-i2b2/cells/plugins/MedCo/php/fetchGenes.php?" +
         "gene=$paramValue&" +
         "limit=20",  // is it ok 20?
 
         fetchVariantsQuery = 'js-i2b2/cells/plugins/MedCo/php/fetchVariants.php?' +
             'query_type=gene_and_zygosity&' +
             'gene_value=$paramValue', // note the list "&zygosity[]=" of options will be added afterward
         popup = {};
 
     popup.name = "gene"
 
     // define the text for the popup
     popup.text = {}
     popup.text.title = "Search by gene";
     popup.text.description = "Use the gene name box to specify the set of variants for which to search. When you " +
         "begin typing in the search box below some matching options will appear.";
     popup.text.paramName = "Gene Name*";
     popup.text.panelParam = "Gene: ";
 
     i2b2.MedCo.popups.ctrlr.MedCo_queryPopupInit(fetchParametersQuery, fetchVariantsQuery, popup, i2b2.MedCo.popups.ByGene.ctrlr);
 };
 
 
 i2b2.MedCo.popups.ByProteinPosition.ctrlr.init = function(){
     // define the php queries and insert $something where the parameters will be inserted
     // note: these formats must conform what the relative php files expects as parameters
     var fetchParametersQuery = "js-i2b2/cells/plugins/MedCo/php/fetchProteinPositions.php?" +
         "proteinPosition=$paramValue&" +
         "limit=20",  // is it ok 20?
 
         fetchVariantsQuery = 'js-i2b2/cells/plugins/MedCo/php/fetchVariants.php?' +
             'query_type=annotation_and_zygosity&' +
             'annotation_name=Protein_position&' +
             'annotation_value=$paramValue', // note the list "&zygosity[]=" of options will be added afterward
         popup = {};
 
     popup.name = "proteinPosition";
 
     // define the text for the popup
     popup.text = {}
     popup.text.title = "Search by protein position";
     popup.text.description = "Use the protein position annotation box to specify the variants for which to search. " +
         "When you begin typing in the search box below some matching options will appear.";
     popup.text.paramName = "Protein Position*";
     popup.text.panelParam = "Protein position: ";
     i2b2.MedCo.popups.ctrlr.MedCo_queryPopupInit(fetchParametersQuery, fetchVariantsQuery, popup, i2b2.MedCo.popups.ByProteinPosition.ctrlr);
 };
 
 
 i2b2.MedCo.popups.ByVariantName.ctrlr.init = function(){
     // define the php queries and insert $something where the parameters will be inserted
     // note: these formats must conform what the relative php files expects as parameters
     var fetchParametersQuery = "js-i2b2/cells/plugins/MedCo/php/fetchVariantNames.php?" +
         "variant_name=$paramValue&" +
         "limit=20",  // is it ok 20?
 
         fetchVariantsQuery = 'js-i2b2/cells/plugins/MedCo/php/fetchVariants.php?' +
             'query_type=variantName_and_zygosity&' +
             'variant_name=$paramValue', // note the list "&zygosity[]=" of options will be added afterward
         popup = {};
 
     popup.name = "variantName"
 
     // define the text for the popup
     popup.text = {}
     popup.text.title = "Search by variant name";
     popup.text.description = "Use the variant name box to specify the variant for which to search, according to the " +
         "HGVS format (e.g. 10:100150517:G>A). When you begin typing in the search box below some matching options " +
         "will appear.";
     popup.text.paramName = "Variant Name*";
     popup.text.panelParam = "Variant ID: ";
     i2b2.MedCo.popups.ctrlr.MedCo_queryPopupInit(fetchParametersQuery, fetchVariantsQuery, popup, i2b2.MedCo.popups.ByVariantName.ctrlr);
 };
 
 i2b2.MedCo.popups.SelectQueryType.ctrlr.init  = function(){
     var PopupId = "MedCo-SelectQueryTypePopup";
     var queryNameId = "MedCo-QueryName";
     var queryTypeId = "MedCo-QueryType";
 
     // ------ Initialize the model ------
     // var model = {};
     // model.choiceList = []; // here is stored the list of suggested parameters
     // // the panel number is passed to the popup when opened (so to bind the popup with a panel)
     // model.panelIndex = 0;
 
     // ------  Initialize the view  ------
     // popup.Id = "MedCo_" + popup.name + "Popup"
     //
     // popup.paramInputBoxId = "search" + popup.name + "InputBox";
     // popup.heteroId = "heterozygous" + popup.name + "Popup";
     // popup.homoId = "homozygous" + popup.name + "Popup";
     // popup.unknId = "unknown" + popup.name + "Popup";
 
     document.getElementById("MedCo-CONTENT").appendChild(htmlToElement(
         "<div id='" + PopupId  + "' class='MedCo-Popup QueryTypePopup'>" +
             "<div class='hd'>Run Query</div>" +
             "<div class='bd'>" +
 
-                "<div>" +
+                "<div class='container'>" +
                     "<div>Please type a name for the query:</div>" +
                     "<input id='" + queryNameId + "'>" +
 
-                    "<br>" +
+                    "<br><br>" +
 
                     "<div>Please check the query result type(s):</div>" +
                     "<div id='" + queryTypeId + "'>" +
-                        "<label><input value='PATIENTSET' type='checkbox'> Patient set </div>" +
+                        "<label><input value='PATIENTSET' type='checkbox'> Patient set </label>" +
                         "<label><input value='PATIENT_COUNT_XML' checked='checked' type='checkbox'> Number of patients </label>" +
                     "</div>" +
                 "</div>" +
 
             "</div>" +
         "</div>"
     ));
 
     var view = {};
     view.popup = document.getElementById(PopupId);
     // view.inputBox = document.querySelector("#"+ popup.Id + " #" +popup.paramInputBoxId);
     // view.zygosityList = {
     //     heterozygousCheckbox: document.querySelector("#"+ popup.Id + " #" + popup.heteroId),
     //     homozygousCheckbox: document.querySelector("#"+ popup.Id + " #" + popup.homoId),
     //     unknownCheckbox: document.querySelector("#"+ popup.Id + " #" + popup.unknId)
     // };
 
     // ------  Initialize the controller  ------
     var ctrlr = i2b2.MedCo.popups.SelectQueryType.ctrlr;
 
     // Popup 'cancel' and 'ok' handlers
     ctrlr.handleCancel = function() {
         // When the popup is closed just call the "cancel" on the YAHOO popup
         this.cancel();
     };
     ctrlr.handleOk = function() {
         // When the user clicks on "ok", check the query parameters and fetch the variants
 
         // validate the fields
         alert("Checking fields");
 
         // run the query (after waiting to receive and encrypt all the variant ids)
         i2b2.MedCo.QT.query.waitThenRun("name", "type", "budget");
 
         this.hide()
     };
 
     // clear the popup fields
     ctrlr.clear = function(){
         alert("clearing fields")
         // view.inputBox.value = "";
         // view.zygosityList.heterozygousCheckbox.checked = false;
         // view.zygosityList.homozygousCheckbox.checked = false;
         // view.zygosityList.unknownCheckbox.checked = false;
     };
 
     ctrlr.unload = function(){
         // destroy the html elements
         alert("unloading")
         // view.popup.parentNode.removeChild(view.popup);
     };
 
     // ------  Register controller functions on view elements  ------
     // Create the popup with YAHOO.widget
     view.dialog = new YAHOO.widget.SimpleDialog(PopupId, {
         draggable: true,
         zindex: 10000,
         width: "400px",
         // height: "200px",
         autofillheight: "body",
         constraintoviewport: true,
         context: ["showbtn", "tl", "bl"],
         fixedcenter: true,
         modal: true,
         buttons: [{
             text: "OK",
             handler: ctrlr.handleOk,
             isDefault: true
         }, {
             text: "Cancel",
             handler: ctrlr.handleCancel
         }]
     });
 
     ctrlr.show = function() {
         // show the YAHOO.widget popup
         // ctrlr.clear() // clear the fields
         view.dialog.render(document.body);
         view.dialog.show();
     };
 };
 
 
 // // ANNOTATION POPUP
 // i2b2.MedCo.ctrlr.popups.ByAnnotation = {
 //     dialog: null,
 //
 //     // variable to access easily the popup's window
 //     window: $("MedCo_annotationPopup"),
 //
 //     // input box in which the user will write. It is an <input type="search"> element
 //     annotationNameInputBox: document.querySelector("#searchAnnotationNameInputBox"),
 //
 //     // selection list to display the matching annotation names. It is a <select> element
 //     annotationNameList: document.querySelector("#annotationNameList"),
 //
 //     // input box in which the user will write. It is an <input type="search"> element
 //     annotationValueInputBox: document.querySelector("#searchAnnotationValueInputBox"),
 //
 //     // selection list to display the matching annotation values. It is a <select> element
 //     annotationValueList: document.querySelector("#annotationValueList"),
 //
 //     // selection list with the 3 predefined options
 //     zygosityList: {
 //         heterozygousCheckbox:null,
 //         homozygousCheckbox:null,
 //         unknownCheckbox:null
 //     },
 //
 //     // variable used for the popup to know to which panel it is bound
 //     panelNumber: 0,
 //
 //     // initialize the annotation popup
 //     init: function(){
 //         var context = i2b2.MedCo.ctrlr.popups.ByAnnotation;
 //
 //         context.window = $("MedCo_annotationPopup");
 //
 //         context.annotationNameInputBox = document.querySelector("#searchAnnotationNameInputBox");
 //         context.annotationNameList = document.querySelector("#annotationNameList");
 //
 //         context.annotationValueInputBox = document.querySelector("#searchAnnotationValueInputBox");
 //         context.annotationValueList = document.querySelector("#annotationValueList");
 //
 //         // the three checkboxes
 //         context.zygosityList.heterozygousCheckbox = document.querySelector("#heterozygousAnnotationNamePopup");
 //         context.zygosityList.homozygousCheckbox = document.querySelector("#homozygousAnnotationNamePopup");
 //         context.zygosityList.unknownCheckbox = document.querySelector("#unknownAnnotationNamePopup");
 //
 //         // update the scrolldown list every time the user digits chars
 //         context.annotationNameInputBox
 //             .addEventListener("keyup",
 //                 context.getAnnotationNames.run
 //             );
 //
 //         context.annotationValueInputBox
 //             .addEventListener("keyup",
 //                 context.getAnnotationValues.run
 //             );
 //
 //         context.panelNumber = 0;
 //
 //         context.getAnnotationNames.path = 'js-i2b2/cells/plugins/MedCo/php/getAnnotationNames.php';
 //         context.getAnnotationValues.path = 'js-i2b2/cells/plugins/MedCo/php/getAnnotationValues.php';
 //         context.getVariants.path = 'js-i2b2/cells/plugins/MedCo/php/getVariants.php';
 //
 //         var handleCancel = function() {
 //             this.cancel();
 //         };
 //
 //         var handleOk = function() {
 //             var context = i2b2.MedCo.ctrlr.popups.ByAnnotation;
 //
 //             // validate the fields
 //             if (! i2b2.MedCo.ctrlr.inputBoxIsOk(context.annotationNameInputBox, context.annotationNameList, "an annotation name")){return;}
 //             if (! i2b2.MedCo.ctrlr.inputBoxIsOk(context.annotationValueInputBox, context.annotationValueList, "an annotation value")){return;}
 //             if (! i2b2.MedCo.ctrlr.zygosityIsOk(context.zygosityList)){return;}
 //
 //             // run the query to retrieve all the annotations with the specified annotation name and zygosyty
 //             i2b2.MedCo.ctrlr.popups.ByAnnotation.getVariants.run();
 //             this.hide()
 //         };
 //
 //         context.dialog = new YAHOO.widget.SimpleDialog("MedCo_annotationPopup", {
 //             draggable: true,
 //             zindex: 10000,
 //             width: "500px",
 //             // height: "200px",
 //             autofillheight: "body",
 //             constraintoviewport: true,
 //             context: ["showbtn", "tl", "bl"],
 //             fixedcenter: true,
 //             modal: true,
 //             buttons: [{
 //                 text: "OK",
 //                 handler: handleOk,
 //                 isDefault: true
 //             }, {
 //                 text: "Cancel",
 //                 handler: handleCancel
 //             }]
 //         });
 //     },
 //
 //     // show the popup
 //     // panelNumber: specifies with which panel is the popup related
 //     show: function(panelNumber) {
 //         var context = i2b2.MedCo.ctrlr.popups.ByAnnotation;
 //
 //         context.panelNumber = panelNumber;
 //         // context.clear();
 //         context.window.show();
 //         context.dialog.render(document.body);
 //         context.dialog.show();
 //     },
 //
 //     // // hide the popup, not needed (events already registered to the various buttons)
 //     // hide: function(){
 //     //     i2b2.MedCo.ctrlr.annotationNamePopup.popups.hide();
 //     //     i2b2.MedCo.ctrlr.annotationNamePopup.dialog.cancel();
 //     // },
 //
 //     // clear (empty) all the elements
 //     clear: function(){
 //         // i2b2.MedCo.ctrlr.annotationNamePopup.annotationNameInputBox.value = "";
 //         // var list = i2b2.MedCo.ctrlr.annotationNamePopup.annotationNameList;
 //         // while (list.hasChildNodes()) {
 //         //     list.removeChild(list.lastChild);
 //         // }
 //         //    todo clear fields?
 //     },
 //
 //     // get the annotation names from the database
 //     getAnnotationNames: {
 //         // Store some variables I need to efficiently manage the request
 //
 //         // path for the php request to retrieve the annotation names
 //         path: 'js-i2b2/cells/plugins/MedCo/php/getAnnotationNames.php',
 //         // if previousAnnotation (which stores the "old" annotationNameInputBox content) stays the same for a certain period
 //         // of time then the user stopped writing => I retrieve from the database the matching annotation names
 //         previousAnnotationName: "",
 //         // here I store the last executed query so to avoid repeating it
 //         lastAnnotationQueried: "",
 //         // here I store the current timeout (so that I can stop it when I want)
 //         timeoutAnnotation: null,
 //         run: function () {
 //             var context = i2b2.MedCo.ctrlr.popups.ByAnnotation.getAnnotationNames;
 //
 //             // (call run until the user stops writing)
 //             // stop the previous call (every new digits trigger a getAnnotationNames() call)
 //             clearTimeout(context.timeoutAnnotation);
 //             // take the current value and check if it is equal to the previous one
 //             var currAnnotationName = i2b2.MedCo.ctrlr.popups.ByAnnotation.annotationNameInputBox.value.replace(/\s/g, ''); // remove whitespaces
 //             if (currAnnotationName == ""){
 //                 // if it is empty then just empty the dropdown list
 //                 var list = i2b2.MedCo.ctrlr.popups.ByAnnotation.annotationNameList;
 //                 while (list.hasChildNodes()) {
 //                     list.removeChild(list.lastChild);
 //                 }
 //                 context.lastAnnotationQueried = "";
 //                 return;
 //             }
 //             if (currAnnotationName == context.lastAnnotationQueried) {
 //                 // if it is equal to the previous query then do nothing
 //                 return;
 //             }
 //             if (currAnnotationName != context.previousAnnotationName) {
 //                 // if they are different then wait for the user to finish to write
 //                 context.previousAnnotationName = currAnnotationName;
 //                 context.timeoutAnnotation = setTimeout(context.run, 500);
 //                 return;
 //             }
 //
 //             // If you ended up here then the user stopped writing and we can execute the query
 //             context.lastAnnotationQueried = currAnnotationName; // store the current query so to avoid repeating it
 //
 //             var success = function (responseText) {
 //                 if (responseText.indexOf("error")>=0){
 //                     alert(responseText)
 //                     return;
 //                 }
 //                 var list = i2b2.MedCo.ctrlr.popups.ByAnnotation.annotationNameList;
 //                 // remove all the previous annotation names from the dropdown list
 //                 while (list.hasChildNodes()) {
 //                     list.removeChild(list.lastChild);
 //                 }
 //                 // todo sort the annotation names
 //                 var receivedAnnotationNames= JSON.parse(responseText);
 //                 for (var i = 0; i < receivedAnnotationNames.length; i++) {
 //                     var opt = document.createElement("option");
 //                     opt.value = receivedAnnotationNames[i];
 //                     opt.innerHTML = receivedAnnotationNames[i];
 //                     list.appendChild(opt);
 //                 }
 //
 //                 // if there was only one match the copy that in the text box
 //                 if (receivedAnnotationNames.length == 1) {
 //                     i2b2.MedCo.ctrlr.popups.ByAnnotation.annotationNameInputBox.value = receivedAnnotationNames[0];
 //                 }
 //             };
 //             var error = function (err) {
 //                 alert("Error when trying to retrieve the annotation names from the database: " + err)
 //             };
 //
 //             var phpQuery =
 //                 context.path +
 //                 "?annotation_name=" + currAnnotationName +
 //                 "&limit=20";  // is it ok 20?
 //             i2b2.MedCo.ctrlr.phpGETRequest(success, error, phpQuery);
 //         }
 //     },
 //
 //     getAnnotationValues: {
 //         // Store some variables I need to efficiently manage the request
 //
 //         // path for the php request to retrieve the annotation valuess
 //         path: 'js-i2b2/cells/plugins/MedCo/php/getAnnotationValues.php',
 //         // if previousAnnotation (which stores the "old" annotationValueInputBox content) stays the same for a certain period
 //         // of time then the user stopped writing => I retrieve from the database the matching annotation valuess
 //         previousAnnotationValue: "",
 //         // here I store the last executed query so to avoid repeating it
 //         lastAnnotationQueried: "",
 //         // here I store the current timeout (so that I can stop it when I want)
 //         timeoutAnnotation: null,
 //         run: function () {
 //             // first check the annotation name has been selected
 //             var context = i2b2.MedCo.ctrlr.popups.ByAnnotation;
 //             if (! i2b2.MedCo.ctrlr.inputBoxIsOk(context.annotationNameInputBox, context.annotationNameList, "an annotation name")){return;}
 //             var annotationName = context.annotationNameInputBox.value;
 //
 //             var context = context.getAnnotationValues;
 //             // (call run until the user stops writing)
 //             // stop the previous call (every new digits trigger a getAnnotationValues() call)
 //             clearTimeout(context.timeoutAnnotation);
 //             // take the current value and check if it is equal to the previous one
 //             var currAnnotationValue= i2b2.MedCo.ctrlr.popups.ByAnnotation.annotationValueInputBox.value.replace(/\s/g, ''); // remove whitespaces
 //             if (currAnnotationValue == ""){
 //                 // if it is empty then just empty the dropdown list
 //                 var list = i2b2.MedCo.ctrlr.popups.ByAnnotation.annotationValueList;
 //                 while (list.hasChildNodes()) {
 //                     list.removeChild(list.lastChild);
 //                 }
 //                 context.lastAnnotationQueried = "";
 //                 return;
 //             }
 //             if (currAnnotationValue == context.lastAnnotationQueried) {
 //                 // if it is equal to the previous query then do nothing
 //                 return;
 //             }
 //             if (currAnnotationValue != context.previousAnnotationValue) {
 //                 // if they are different then wait for the user to finish to write
 //                 context.previousAnnotationValue = currAnnotationValue;
 //                 context.timeoutAnnotation = setTimeout(context.run, 500);
 //                 return;
 //             }
 //
 //             // If you ended up here then the user stopped writing and we can execute the query
 //             context.lastAnnotationQueried = currAnnotationValue; // store the current query so to avoid repeating it
 //
 //             var success = function (responseText) {
 //                 if (responseText.indexOf("error")>=0){
 //                     alert(responseText)
 //                     return;
 //                 }
 //                 var list = i2b2.MedCo.ctrlr.popups.ByAnnotation.annotationValueList;
 //                 // remove all the previous annotation valuess from the dropdown list
 //                 while (list.hasChildNodes()) {
 //                     list.removeChild(list.lastChild);
 //                 }
 //                 // todo sort the annotation values
 //                 var receivedAnnotationValues= JSON.parse(responseText);
 //                 for (var i = 0; i < receivedAnnotationValues.length; i++) {
 //                     var opt = document.createElement("option");
 //                     opt.value = receivedAnnotationValues[i];
 //                     opt.innerHTML = receivedAnnotationValues[i];
 //                     list.appendChild(opt);
 //                 }
 //
 //                 // if there was only one match the copy that in the text box
 //                 if (receivedAnnotationValues.length == 1) {
 //                     i2b2.MedCo.ctrlr.popups.ByAnnotation.annotationValueInputBox.value = receivedAnnotationValues[0];
 //                 }
 //             };
 //             var error = function (err) {
 //                 alert("Error when trying to retrieve the annotation values from the database: " + err)
 //             };
 //
 //
 //             var phpQuery =
 //                 context.path +
 //                 "?annotation_name=" + annotationName +
 //                 "&annotation_value=" + currAnnotationValue +
 //                 "&limit=20";  // is it ok 20?
 //             i2b2.MedCo.ctrlr.phpGETRequest(success, error, phpQuery);
 //         }
 //     },
 //
 //     // run the query to retrieve the id of the annotations
 //     getVariants: {
 //         path: 'js-i2b2/cells/plugins/MedCo/php/getVariants.php',
 //
 //         run: function () {
 //             var context = i2b2.MedCo.ctrlr.popups.ByAnnotation;
 //
 //             var annotationName = context.annotationNameInputBox.value;
 //             var annotationValue = context.annotationValueInputBox.value;
 //             var zygosyty = [];
 //             if (context.zygosityList.heterozygousCheckbox.checked == true) {
 //                 zygosyty.push("Heterozygous")
 //             }
 //             if (context.zygosityList.homozygousCheckbox.checked == true) {
 //                 zygosyty.push("Homozygous")
 //             }
 //             if (context.zygosityList.unknownCheckbox.checked == true) {
 //                 zygosyty.push("Unknown")
 //             }
 //
 //             // show the variants to the user
 //             var concept_div = i2b2.MedCo.ctrlr.createDiv(annotationName + ": " + annotationValue, true);
 //             i2b2.MedCo.view.panels[context.panelNumber].appendChild(concept_div)
 //
 //             var queryType = "annotation_and_zygosity"; // used at the server side to know how to build the query
 //
 //             var success = function (responseText) {
 //                 if (responseText.indexOf("error")>=0){
 //                     alert(responseText)
 //                     return;
 //                 }
 //                 //alert(responseText);
 //                 var response = JSON.parse(responseText);
 //                 for(var i=0; i<response.annotations.length; i++)
 //                 {
 //                     i2b2.MedCo.model.panels[response.panel_number].sensitive.push(response.annotations[i]);
 //                 }
 //                 i2b2.MedCo.ctrlr.background.toBeEncrypted(response.variants);
 //
 //                 // show how many variants have been retrieved
 //                 concept_div.getElementsByTagName("output")[0].innerHTML = response.variants.length;
 //
 //                 // I received the response so decrease the counter
 //                 i2b2.MedCo.ctrlr.pendingAnnotationsQueries  -= 1;
 //             };
 //             var error = function (err) {
 //                 alert("Error when trying to retrieve the variants from the database: " + err)
 //             };
 //
 //             // increase the number of responses I should wait for
 //             i2b2.MedCo.ctrlr.pendingAnnotationsQueries  += 1;
 //
 //             // better pass the panel number too. It will be returned with the response so that I bind it to a
 //             // specific panel. (if the query is very slow it could happen that the user starts two queries in parallel
 //             // which are related to two different panels).
 //             var phpQuery =
 //                 context.getAnnotations.path +
 //                 "?query_type=" + queryType +
 //                 "&panel_number=" + context.panelNumber +
 //                 "&annotation_name=" + annotationName +
 //                 "&annotation_value=" + annotationValue +
 //                 "&zygosity[]=" +  zygosyty.join("&zygosity[]="); // build an array of zygosity options
 //             i2b2.MedCo.ctrlr.phpGETRequest(success, error, phpQuery);
 //         }
 //     }
 // };
\ No newline at end of file