Diffusion SHRINE MedCo Fork (master) Browse

MedCo_popups.js
f8e9e9bc2551master

MedCo_popups.js
View Options

			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 = {};

			// popup for authentication
			i2b2.MedCo.popups.Authentication = {};
			i2b2.MedCo.popups.Authentication.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.Authentication.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.Authentication.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();

			i2b2.MedCo.popups.Authentication.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 selected from the popup
			// -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 response of 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 view ------
			document.getElementById("MedCo-CONTENT").appendChild(htmlToElement(
			"<div id='" + PopupId + "' class='MedCo-Popup QueryTypePopup'>" +
			"<div class='hd'>Run Query</div>" +
			"<div class='bd'>" +

			"<div class='container'>" +
			"<div>Please type a name for the query:</div>" +
			"<input id='" + queryNameId + "'>" +

			"<br><br>" +

			"<div>Please check the query result type(s):</div>" +
			"<div id='" + queryTypeId + "'>" +
			"<label><input value='PATIENTSET' type='radio' name='queryType'>Patient set</label>" +
			"<label><input value='PATIENT_COUNT_XML' checked='checked' type='radio' name='queryType'> Number of patients </label>" +
			"</div>" +
			"</div>" +

			"</div>" +
			"</div>"
			));

			var view = {};
			view.popup = document.getElementById(PopupId);
			view.queryName = document.querySelector("#"+ PopupId + " #" + queryNameId);
			view.queryTypes = [];

			// extract the pointer to all the input checkboxes representing the query types
			var types = document.querySelector("#"+ PopupId + " #" + queryTypeId).children;
			for (var i = 0; i < types.length; i++) {
			view.queryTypes.push(types[i].children[0]) // discard the <label>
			}

			// ------ 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() {
			var queryName = view.queryName.value;
			var queryType;
			// var budget = 100;

			// validate query name
			if(queryName == ""){
			alert("Please insert a valid query name.");
			return
			}
			// get and validate query type
			var valid = false;
			for (var i = 0; i < view.queryTypes.length; i++){
			if (view.queryTypes[i].checked){
			queryType = view.queryTypes[i].value;
			valid = true;
			break
			}
			}
			if (!valid) {
			alert("Please select at least one query type.");
			return
			}

			// run the query (after waiting to receive and encrypt all the variant ids)
			i2b2.MedCo.QT.query.waitThenRun(queryName, queryType);

			this.hide()
			};

			// clear the popup fields
			ctrlr.clear = function(){
			view.queryName.value = "";
			};

			ctrlr.unload = function(){
			// destroy the html elements
			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() {
			// check at least one panel is not empty
			var panels = i2b2.MedCo.QT.panels;
			var empty = true;
			for (var i=0; i<panels.length; i++){
			if (!panels[i].ctrlr.isEmpty()){
			empty = false;
			}
			}
			if(empty){
			alert("You must enter at least one concept to run a query");
			return
			}

			// set the default name for the query
			view.queryName.value = i2b2.MedCo.QT.query.defaultQryName();

			// show the YAHOO.widget popup

			view.dialog.render(document.body);
			view.dialog.show();
			};
			};


			// Mock authentication popup. It will be used to authenticate the user to the PM cell by using the private key
			i2b2.MedCo.popups.Authentication.ctrlr.init = function(){
			var PopupId = "MedCo-Authentication";

			// ------ Initialize the view ------
			document.getElementById("MedCo-CONTENT").appendChild(htmlToElement(
			"<div id='" + PopupId + "' class='MedCo-Popup QueryTypePopup'>" +
			"<div class='hd'>Authentication (mock popup)</div>" +
			"<div class='bd'>" +
			"<div class='container'>" +
			"<div>Please load your private key</div>" +
			"</div>" +
			"</div>" +
			"</div>"
			));

			var view = {};
			view.popup = document.getElementById(PopupId);
			view.queryName = document.querySelector("#"+ PopupId + " #" + queryNameId);
			view.queryTypes = [];

			// extract the pointer to all the input checkboxes representing the query types
			var types = document.querySelector("#"+ PopupId + " #" + queryTypeId).children;
			for (var i = 0; i < types.length; i++) {
			view.queryTypes.push(types[i].children[0]) // discard the <label>
			}

			// ------ 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() {
			var queryName = view.queryName.value;
			var queryType;
			// var budget = 100;

			// validate query name
			if(queryName == ""){
			alert("Please insert a valid query name.");
			return
			}
			// get and validate query type
			var valid = false;
			for (var i = 0; i < view.queryTypes.length; i++){
			if (view.queryTypes[i].checked){
			queryType = view.queryTypes[i].value;
			valid = true;
			break
			}
			}
			if (!valid) {
			alert("Please select at least one query type.");
			return
			}

			// run the query (after waiting to receive and encrypt all the variant ids)
			i2b2.MedCo.QT.query.waitThenRun(queryName, queryType);

			this.hide()
			};

			// clear the popup fields
			ctrlr.clear = function(){
			view.queryName.value = "";
			};

			ctrlr.unload = function(){
			// destroy the html elements
			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

			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);
			// }
			// }
			// };

shrine-medco/shrine-webclient/src/main/html/js-i2b2/cells/plugins/MedCo/MedCo_popups.jsf8e9e9bc2551master

MedCo_popups.jsView Options

shrine-medco/shrine-webclient/src/main/html/js-i2b2/cells/plugins/MedCo/MedCo_popups.js
f8e9e9bc2551master

MedCo_popups.js
View Options