Commit b9208ab3 authored by Boris A. Burkov's avatar Boris A. Burkov
Browse files

Moved go modal into the sequence controller.

parent ab1b612e
var goModal = {
bindings: {
upi: '=',
taxid: '=',
termId: '<',
onToggleGoModal: '<'
},
controller: ['$http', 'routes', function($http, routes) {
var ctrl = this;
ctrl.$onInit = function() {
ctrl.chartData = '';
};
ctrl.$onChanges = function(changes) {
if (changes.termId.currentValue != null) {
var ontology = changes.termId.currentValue.split(':')[0].toLowerCase();
var png = routes.quickGoChart({ ontology: ontology, term_ids: changes.termId.currentValue });
ctrl.modalStatus = 'loading';
$('#go-annotation-chart-modal').modal();
$http.get(png, { timeout: 10000 }).then(
function(response) {
ctrl.modalStatus = 'loaded';
ctrl.chartData = 'data:image/png;charset=utf-8;base64,' + response.data;
},
function(error) {
ctrl.modalStatus = 'failed';
}
);
}
};
ctrl.closeModal = function() {
ctrl.onToggleGoModal({termId : null});
$('#go-annotation-chart-modal').modal('toggle');
};
}],
templateUrl: '/static/js/components/sequence/go-modal/go-modal.html'
};
angular.module("rnaSequence").component("goModal", goModal);
<div id='go-annotation-chart-modal' class='modal fade' tabindex=-1>
<div class='modal-dialog modal-lg' role='document'>
<div class='modal-content'>
<div class="modal-header">
<h3 class="modal-title">Ancestor Chart</h3>
</div>
<div class="modal-body">
<span ng-if="$ctrl.modalStatus === 'loading'">
<i class="fa fa-spinner fa-spin fa-2x"></i>
Loading ontology ancestors...
</span>
<span ng-if="$ctrl.modalStatus === 'failed'">
Failed to load QuickGO Ancestor chart
</span>
<span ng-if="$ctrl.modalStatus === 'loaded'">
<img ng-src="{{ $ctrl.chartData }}" />
</span>
</div>
<div class="modal-footer">
<button ng-click="$ctrl.toggleGoModal({termId: null})" type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
</div>
</div>
</div>
\ No newline at end of file
......@@ -11,6 +11,11 @@ var rnaSequenceController = function($scope, $location, $window, $rootScope, $co
// avoid a terrible bug with intercepted 2-way binding: https://github.com/RNAcentral/rnacentral-webcode/issues/308
$scope.browserLocation = {start: undefined, end: undefined, chr: undefined, genome: undefined, domain: undefined};
// go modal handling
$scope.goTermId = null;
$scope.goChartData = '';
$scope.goModalStatus = '';
// Tab controls
// ------------
......@@ -52,10 +57,6 @@ var rnaSequenceController = function($scope, $location, $window, $rootScope, $co
$scope.hideGoAnnotations = false;
};
// Pass non-null termId to open Go modal and null to close
$scope.toggleGoModal = function(termId) {
$scope.goTermId = termId;
};
// Hopscotch tour
// --------------
......@@ -206,6 +207,33 @@ var rnaSequenceController = function($scope, $location, $window, $rootScope, $co
return isSelected;
};
/**
* Pass non-null termId to open Go modal and null to close
*/
$scope.toggleGoModal = function(termId) {
$scope.goTermId = termId;
if (termId != null) {
var ontology = termId.split(':')[0].toLowerCase();
$('#go-annotation-chart-modal').modal();
$scope.goModalStatus = 'loading';
$http.get(routes.quickGoChart({ ontology: ontology, term_ids: termId }), { timeout: 5000 }).then(
function(response) {
$scope.goModalStatus = 'loaded';
$scope.goChartData = 'data:image/png;charset=utf-8;base64,' + response.data;
},
function(error) {
$scope.goModalStatus = 'failed';
}
);
} else {
$('#go-annotation-chart-modal').modal('toggle');
}
console.log($scope.goChartData);
};
/**
* Copy to clipboard buttons allow the user to copy an RNA sequence as RNA or DNA into
* the clipboard by clicking on them. Buttons are located near the Sequence header.
......
......@@ -198,7 +198,6 @@ limitations under the License.
<script src="{% static "js/components/sequence/xrefs/xref-publications/xref-publications.component.js" %}"></script>
<script src="{% static "js/components/sequence/2d/2d.component.js" %}"></script>
<script src="{% static "js/components/sequence/go-annotations/go-annotations.component.js" %}"></script>
<script src="{% static "js/components/sequence/go-modal/go-modal.component.js" %}"></script>
<script src="{% static "js/components/sequence-search/nhmmer.sequence.search.js" %}"></script>
......
......@@ -192,9 +192,39 @@ limitations under the License.
</small>
</h2>
<go-annotations upi="upi" taxid="taxid" show-go-annotations="showGOAnnotations()" on-toggle-go-modal="toggleGoModal(termId)"></go-annotations>
<go-modal upi="upi" taxid="taxid" term-id="goTermId" on-toggle-go-modal="toggleGoModal(termId)"></go-modal>
</div>
<div id='go-annotation-chart-modal' class='modal fade' tabindex=-1>
<div class='modal-dialog modal-lg' role='document'>
<div class='modal-content'>
<div class="modal-header">
<h3 class="modal-title">Ancestor Chart</h3>
</div>
<div class="modal-body">
<span ng-if="goModalStatus === 'loading'">
<i class="fa fa-spinner fa-spin fa-2x"></i>
Loading ontology ancestors...
</span>
<span ng-if="goModalStatus === 'failed'">
Failed to load QuickGO Ancestor chart
</span>
<span ng-if="goModalStatus === 'loaded'">
{% verbatim %}
<img ng-src="{{ goChartData }}" />
{% endverbatim %}
</span>
</div>
<div class="modal-footer">
<button ng-click="toggleGoModal(null)" type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
</div>
</div>
</div>
</div>
<div>
<h2>
......
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