Gitlab is now using https://gitlab.lcsb.uni.lu as it's primary address. Please update your bookmarks. FAQ.

Commit c60fb327 authored by David Hoksza's avatar David Hoksza
Browse files

bootstrap 3 to 4; modified typeahead; using minerva's minerva.$ object

parent 1fbb9b4a
Pipeline #12907 passed with stages
in 2 minutes and 19 seconds
This diff is collapsed.
......@@ -8,9 +8,11 @@
.disease-associations-container .input-disease {
text-align: center;
font-weight: bold;
width: 100%;
padding: 0; }
.disease-associations-container .input-disease-v14-less {
width: 100%; }
.disease-associations-container .disease-submission .panel-heading {
padding: 3px 15px;
font-weight: bold;
......@@ -53,3 +55,14 @@
.disease-associations-container .btn-default.btn-off.active {
background-color: #5BB75B;
color: white; }
.disease-associations-container .disease-input-group label.btn {
border: 1px solid lightgray; }
.disease-associations-container .disease-infos.card {
margin-bottom: 10px; }
.disease-associations-container .suggesting {
position: absolute;
left: -40px;
top: 6px; }
......@@ -11,10 +11,13 @@ $pluginName: disease-associations;
}
.#{$pluginName}-container .input-disease {
text-align: center;
font-weight: bold;
text-align: center;
font-weight: bold;
padding: 0;
}
.#{$pluginName}-container .input-disease-v14-less {
width: 100%;
padding: 0;
}
.#{$pluginName}-container .disease-submission .panel-heading {
......@@ -84,4 +87,22 @@ $pluginName: disease-associations;
.#{$pluginName}-container .btn-default.btn-on.active{background-color: #5BB75B;color: white;}
.#{$pluginName}-container .btn-default.btn-off.active{background-color: #5BB75B ;color: white;}
\ No newline at end of file
.#{$pluginName}-container .btn-default.btn-off.active{background-color: #5BB75B ;color: white;}
.#{$pluginName}-container .disease-input-group label.btn{
border: 1px solid lightgray;
}
.#{$pluginName}-container .disease-infos.card{
margin-bottom: 10px;
}
.#{$pluginName}-container .suggesting {
position: absolute;
left: -40px;
top: 6px;
}
require('../css/styles.css');
// window.$ = window.jQuery = require('jquery');
if (window.$ === undefined && minerva.$ !== undefined) {
window.$ = window.jQuery = window.jquery = minerva.$;
}
// require('popper.js');
// require('bootstrap/dist/js/bootstrap.min');
require('bootstrap-treeview');
require('bootstrap-table');
// require("typeahead.js/dist/typeahead.jquery.min.js");
// Bloodhound = require("typeahead.js/dist/bloodhound.min.js");
if ($.fn.typeahead === undefined) {
require("../assets/typeahead.jsquery.min");
}
const ols = require('./ols');
......@@ -97,6 +110,7 @@ let pluginContainer;
let pluginContainerId;
let variationContainer;
let opentargetsContainer;
let minervaVersion;
const register = function(_minerva) {
......@@ -155,7 +169,11 @@ minervaDefine(function (){
function initPlugin () {
registerListeners();
const container = initMainContainer();
initGene2BioEntities().then(function(){
return minerva.ServerConnector.getConfiguration().then( function(conf) {
minervaVersion = parseFloat(conf.getVersion().split('.').slice(0, 2).join('.'));
return initGene2BioEntities();
})
.then(function(){
container.find('.genes-loading').hide();
initMainPageStructure(container);
});
......@@ -215,30 +233,58 @@ function initMainContainer(){
function initMainPageStructure(container){
const createDiseaseInputGroup = function() {
if (minervaVersion < 14) {
return `
<form class="form-horizontal" onSubmit="return false;">
<div class="form-group">
<label class="col-sm-2 control-label form-control-sm">Disease: </label>
<div class="col-sm-7">
<input class="form-control-static input-disease input-disease-v14-less typeahead input-sm" type="text" placeholder="Disease name">
</div>
<div class="col-sm-3">
<div class="btn-group" role="group" data-toggle="buttons">
<label class="btn btn-default btn-on btn-sm active" title="EFO ontology - input disease name">
<input type="radio" value="1" class="efo" checked="checked">EFO</label>
<label class="btn btn-default btn-off btn-sm " title="OMIM ontology - input OMIM ID of the disease">
<input type="radio" value="0" class="omim">OMIM</label>
</div>
</div>
</div>
</form>`;
} else {
return `
<div class="form-group row disease-input-group ">
<label class="col-sm-2 col-form-label form-control-sm font-weight-bold pl-4">Disease:</label>
<div class="col-7">
<input type="text" class="form-control typeahead input-disease input-sm form-control-sm" placeholder="Disease name">
</div>
<div class="col-3">
<i class="fa fa-circle-o-notch fa-spin d-none suggesting"></i>
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-default btn-sm btn-on active" title="EFO ontology - input disease name">
<input type="radio" value="1" class="efo" checked="checked">EFO
</label>
<label class="btn btn-default btn-sm btn-off" title="OMIM ontology - input OMIM ID of the disease">
<input type="radio" value="0" class="omim">OMIM
</label>
</div>
</div>
</div>
`;
}
};
container.append(`
<div class="disease-submission">
<form class="form-horizontal" onSubmit="return false;">
<div class="form-group">
<label class="col-sm-2 control-label">Disease: </label>
<div class="col-sm-7">
<input class="form-control-static input-disease typeahead input-sm" type="text" placeholder="Disease name">
</div>
<div class="col-sm-3">
<div class="btn-group" id="status" data-toggle="buttons">
<label class="btn btn-default btn-on btn-sm active" title="EFO ontology - input disease name">
<input type="radio" value="1" class="efo" checked="checked">EFO</label>
<label class="btn btn-default btn-off btn-sm " title="OMIM ontology - input OMIM ID of the disease">
<input type="radio" value="0" class="omim">OMIM</label>
</div>
</div>
</div>
</form>
<div class="panel panel-default disease-infos small">
<div class="panel-heading" data-toggle="collapse" data-target="#disease_panel_${pluginContainerId}">
${createDiseaseInputGroup()}
<div class="panel card panel-default disease-infos small">
<div class="panel-heading card-header" data-toggle="collapse" data-target="#disease_panel_${pluginContainerId}">
Disease details
<span class="pull-right glyphicon glyphicon-chevron-down">
<span class="pull-right fa fa-chevron-down">
</div>
<div id="disease_panel_${pluginContainerId}" class="panel-body panel-default panel-collapse collapse">
<div id="disease_panel_${pluginContainerId}" class="panel-body card-body panel-default panel-collapse collapse">
<!--<div class="disease-infos small">-->
<div class="disease-info disease-name">
<div class="row">
......@@ -264,27 +310,31 @@ function initMainPageStructure(container){
</div>
<button type="button" class="btn-search btn btn-success btn-default btn-block">${searching(false)}</button>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a data-toggle="tab" href="#${getVariationTabId()}">Variation</a></li>
<li role="presentation" class="opentargets-tab"><a data-toggle="tab" href="#${getOpenTargetsTabId()}">Open Targets</a></li>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="nav-item" role="tab">
<a class="nav-link active" data-toggle="tab" href="#${getVariationTabId()}">Variation</a>
</li>
<li role="presentation" class="nav-item opentargets-tab" role="tab">
<a class="nav-link" data-toggle="tab" href="#${getOpenTargetsTabId()}">Open Targets</a>
</li>
</ul>
<div class="associations-content tab-content">
<div id="${getVariationTabId()}" class="tab-pane fade in active">
<div class="panel panel-danger error-panel hidden">
<div class="panel-heading">
<div id="${getVariationTabId()}" class="tab-pane fade show in active">
<div class="panel card border-danger panel-danger error-panel hidden d-none">
<div class="panel-heading card-header bg-danger text-light">
Error
</div>
<div class="panel-body">
<div class="panel-body card-body">
</div>
</div>
</div>
<div id="${getOpenTargetsTabId()}" class="tab-pane fade">
<div class="panel panel-danger error-panel hidden">
<div class="panel-heading">
<div class="panel card panel-danger border-danger error-panel hidden d-none">
<div class="panel-heading card-header bg-danger text-light">
Error
</div>
<div class="panel-body">
<div class="panel-body card-body">
</div>
</div>
</div>
......@@ -368,6 +418,7 @@ const hideDiseaseDetails = function () {
const hideErrorPanels = function () {
pluginContainer.find('.associations-content .error-panel').removeClass('hidden').addClass('hidden');
pluginContainer.find('.associations-content .error-panel').removeClass('d-none').addClass('d-none');
};
const showDiseaseDetails = function () {
......@@ -382,12 +433,20 @@ const typeaheadSource = function(query, syncResults, asyncResults){
return;
}
if (minervaVersion >= 14) {
pluginContainer.find('.suggesting').removeClass('d-none');
}
if (query in globals.diseaseSuggestionsCache) {
const suggestions = globals.diseaseSuggestionsCache[query];
globals.lastSuggestions = suggestions;
syncResults(Object.keys(suggestions));
asyncResults([]);
if (minervaVersion >= 14) {
pluginContainer.find('.suggesting').addClass('d-none');
}
} else {
......@@ -396,6 +455,9 @@ const typeaheadSource = function(query, syncResults, asyncResults){
globals.diseaseSuggestionsCache[query] = suggestions;
globals.lastSuggestions = suggestions;
asyncResults(Object.keys(suggestions));
if (minervaVersion >= 14) {
pluginContainer.find('.suggesting').addClass('d-none');
}
})
}
};
......@@ -465,7 +527,7 @@ function highlightGeneOccurrences(geneName){
}
function registerTableEvents($table){
$table.find(' .glyphicon-eye-open').each((i, e) =>{
$table.find('.fa-map-marker').each((i, e) =>{
e.onclick = function () {
highlightGeneOccurrences(e.dataset.gene);
};
......@@ -506,7 +568,7 @@ function initGene2BioEntities(){
function search() {
if (globals.searching) {
return
return;
}
globals.searching = true;
......@@ -520,10 +582,12 @@ function search() {
hideErrorPanels();
activateSearchBtton(true);
Promise.all([queryForVariations(), queryForOpenTargets()]).then(function () {
const finishSearch = function() {
globals.searching = false;
activateSearchBtton(false);
});
};
Promise.all([queryForVariations(), queryForOpenTargets()]).then(finishSearch, finishSearch);
}
function showModal() {
......@@ -532,7 +596,7 @@ function showModal() {
const geneFormatter = function (geneName) {
let icon = geneName in globals.gene2BioEntities ?
`<i class="glyphicon glyphicon-eye-open" data-gene="${geneName}"></i>` :
`<i class="fa fa-map-marker" data-gene="${geneName}"></i>` :
'';
// return `${icon} ${geneName}`;
......@@ -575,6 +639,7 @@ const customSort = function(sortName, sortOrder, data) {
const showErrorPanel = function($container, message){
$container.find('.panel-body').html(message);
$container.find('.error-panel').removeClass('hidden');
$container.find('.error-panel').removeClass('d-none');
}
/********************** OPEN TAGETS **********************/
......
const $ = require('jquery');
const getDisease = function(iri){
const encodedIri = encodeURIComponent(encodeURIComponent(iri));
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment