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 @@ ...@@ -8,9 +8,11 @@
.disease-associations-container .input-disease { .disease-associations-container .input-disease {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
width: 100%;
padding: 0; } padding: 0; }
.disease-associations-container .input-disease-v14-less {
width: 100%; }
.disease-associations-container .disease-submission .panel-heading { .disease-associations-container .disease-submission .panel-heading {
padding: 3px 15px; padding: 3px 15px;
font-weight: bold; font-weight: bold;
...@@ -53,3 +55,14 @@ ...@@ -53,3 +55,14 @@
.disease-associations-container .btn-default.btn-off.active { .disease-associations-container .btn-default.btn-off.active {
background-color: #5BB75B; background-color: #5BB75B;
color: white; } 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; ...@@ -11,10 +11,13 @@ $pluginName: disease-associations;
} }
.#{$pluginName}-container .input-disease { .#{$pluginName}-container .input-disease {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
padding: 0;
}
.#{$pluginName}-container .input-disease-v14-less {
width: 100%; width: 100%;
padding: 0;
} }
.#{$pluginName}-container .disease-submission .panel-heading { .#{$pluginName}-container .disease-submission .panel-heading {
...@@ -84,4 +87,22 @@ $pluginName: disease-associations; ...@@ -84,4 +87,22 @@ $pluginName: disease-associations;
.#{$pluginName}-container .btn-default.btn-on.active{background-color: #5BB75B;color: white;} .#{$pluginName}-container .btn-default.btn-on.active{background-color: #5BB75B;color: white;}
.#{$pluginName}-container .btn-default.btn-off.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 .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'); 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-treeview');
require('bootstrap-table'); 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'); const ols = require('./ols');
...@@ -97,6 +110,7 @@ let pluginContainer; ...@@ -97,6 +110,7 @@ let pluginContainer;
let pluginContainerId; let pluginContainerId;
let variationContainer; let variationContainer;
let opentargetsContainer; let opentargetsContainer;
let minervaVersion;
const register = function(_minerva) { const register = function(_minerva) {
...@@ -155,7 +169,11 @@ minervaDefine(function (){ ...@@ -155,7 +169,11 @@ minervaDefine(function (){
function initPlugin () { function initPlugin () {
registerListeners(); registerListeners();
const container = initMainContainer(); 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(); container.find('.genes-loading').hide();
initMainPageStructure(container); initMainPageStructure(container);
}); });
...@@ -215,30 +233,58 @@ function initMainContainer(){ ...@@ -215,30 +233,58 @@ function initMainContainer(){
function initMainPageStructure(container){ 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(` container.append(`
<div class="disease-submission"> <div class="disease-submission">
<form class="form-horizontal" onSubmit="return false;"> ${createDiseaseInputGroup()}
<div class="form-group"> <div class="panel card panel-default disease-infos small">
<label class="col-sm-2 control-label">Disease: </label> <div class="panel-heading card-header" data-toggle="collapse" data-target="#disease_panel_${pluginContainerId}">
<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}">
Disease details Disease details
<span class="pull-right glyphicon glyphicon-chevron-down"> <span class="pull-right fa fa-chevron-down">
</div> </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-infos small">-->
<div class="disease-info disease-name"> <div class="disease-info disease-name">
<div class="row"> <div class="row">
...@@ -264,27 +310,31 @@ function initMainPageStructure(container){ ...@@ -264,27 +310,31 @@ function initMainPageStructure(container){
</div> </div>
<button type="button" class="btn-search btn btn-success btn-default btn-block">${searching(false)}</button> <button type="button" class="btn-search btn btn-success btn-default btn-block">${searching(false)}</button>
<ul class="nav nav-tabs"> <ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a data-toggle="tab" href="#${getVariationTabId()}">Variation</a></li> <li role="presentation" class="nav-item" role="tab">
<li role="presentation" class="opentargets-tab"><a data-toggle="tab" href="#${getOpenTargetsTabId()}">Open Targets</a></li> <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> </ul>
<div class="associations-content tab-content"> <div class="associations-content tab-content">
<div id="${getVariationTabId()}" class="tab-pane fade in active"> <div id="${getVariationTabId()}" class="tab-pane fade show in active">
<div class="panel panel-danger error-panel hidden"> <div class="panel card border-danger panel-danger error-panel hidden d-none">
<div class="panel-heading"> <div class="panel-heading card-header bg-danger text-light">
Error Error
</div> </div>
<div class="panel-body"> <div class="panel-body card-body">
</div> </div>
</div> </div>
</div> </div>
<div id="${getOpenTargetsTabId()}" class="tab-pane fade"> <div id="${getOpenTargetsTabId()}" class="tab-pane fade">
<div class="panel panel-danger error-panel hidden"> <div class="panel card panel-danger border-danger error-panel hidden d-none">
<div class="panel-heading"> <div class="panel-heading card-header bg-danger text-light">
Error Error
</div> </div>
<div class="panel-body"> <div class="panel-body card-body">
</div> </div>
</div> </div>
</div> </div>
...@@ -368,6 +418,7 @@ const hideDiseaseDetails = function () { ...@@ -368,6 +418,7 @@ const hideDiseaseDetails = function () {
const hideErrorPanels = function () { const hideErrorPanels = function () {
pluginContainer.find('.associations-content .error-panel').removeClass('hidden').addClass('hidden'); 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 () { const showDiseaseDetails = function () {
...@@ -382,12 +433,20 @@ const typeaheadSource = function(query, syncResults, asyncResults){ ...@@ -382,12 +433,20 @@ const typeaheadSource = function(query, syncResults, asyncResults){
return; return;
} }
if (minervaVersion >= 14) {
pluginContainer.find('.suggesting').removeClass('d-none');
}
if (query in globals.diseaseSuggestionsCache) { if (query in globals.diseaseSuggestionsCache) {
const suggestions = globals.diseaseSuggestionsCache[query]; const suggestions = globals.diseaseSuggestionsCache[query];
globals.lastSuggestions = suggestions; globals.lastSuggestions = suggestions;
syncResults(Object.keys(suggestions)); syncResults(Object.keys(suggestions));
asyncResults([]); asyncResults([]);
if (minervaVersion >= 14) {
pluginContainer.find('.suggesting').addClass('d-none');
}
} else { } else {
...@@ -396,6 +455,9 @@ const typeaheadSource = function(query, syncResults, asyncResults){ ...@@ -396,6 +455,9 @@ const typeaheadSource = function(query, syncResults, asyncResults){
globals.diseaseSuggestionsCache[query] = suggestions; globals.diseaseSuggestionsCache[query] = suggestions;
globals.lastSuggestions = suggestions; globals.lastSuggestions = suggestions;
asyncResults(Object.keys(suggestions)); asyncResults(Object.keys(suggestions));
if (minervaVersion >= 14) {
pluginContainer.find('.suggesting').addClass('d-none');
}
}) })
} }
}; };
...@@ -465,7 +527,7 @@ function highlightGeneOccurrences(geneName){ ...@@ -465,7 +527,7 @@ function highlightGeneOccurrences(geneName){
} }
function registerTableEvents($table){ function registerTableEvents($table){
$table.find(' .glyphicon-eye-open').each((i, e) =>{ $table.find('.fa-map-marker').each((i, e) =>{
e.onclick = function () { e.onclick = function () {
highlightGeneOccurrences(e.dataset.gene); highlightGeneOccurrences(e.dataset.gene);
}; };
...@@ -506,7 +568,7 @@ function initGene2BioEntities(){ ...@@ -506,7 +568,7 @@ function initGene2BioEntities(){
function search() { function search() {
if (globals.searching) { if (globals.searching) {
return return;
} }
globals.searching = true; globals.searching = true;
...@@ -520,10 +582,12 @@ function search() { ...@@ -520,10 +582,12 @@ function search() {
hideErrorPanels(); hideErrorPanels();
activateSearchBtton(true); activateSearchBtton(true);
Promise.all([queryForVariations(), queryForOpenTargets()]).then(function () { const finishSearch = function() {
globals.searching = false; globals.searching = false;
activateSearchBtton(false); activateSearchBtton(false);
}); };
Promise.all([queryForVariations(), queryForOpenTargets()]).then(finishSearch, finishSearch);
} }
function showModal() { function showModal() {
...@@ -532,7 +596,7 @@ function showModal() { ...@@ -532,7 +596,7 @@ function showModal() {
const geneFormatter = function (geneName) { const geneFormatter = function (geneName) {
let icon = geneName in globals.gene2BioEntities ? 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}`; // return `${icon} ${geneName}`;
...@@ -575,6 +639,7 @@ const customSort = function(sortName, sortOrder, data) { ...@@ -575,6 +639,7 @@ const customSort = function(sortName, sortOrder, data) {
const showErrorPanel = function($container, message){ const showErrorPanel = function($container, message){
$container.find('.panel-body').html(message); $container.find('.panel-body').html(message);
$container.find('.error-panel').removeClass('hidden'); $container.find('.error-panel').removeClass('hidden');
$container.find('.error-panel').removeClass('d-none');
} }
/********************** OPEN TAGETS **********************/ /********************** OPEN TAGETS **********************/
......
const $ = require('jquery');
const getDisease = function(iri){ const getDisease = function(iri){
const encodedIri = encodeURIComponent(encodeURIComponent(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