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

Mostly written frontend-rendered rfam component.

parent 5d2750d4
var rfam = {
bindings: {
upi: '<',
rna: '<',
rfamHits: '<'
},
controller: ['$http', '$interpolate', 'routes', function($http, $interpolate, routes) {
var ctrl = this;
ctrl.$onInit = function() {
ctrl.groupedHits = [];
ctrl.rfamHitFamilies = ctrl.rfamHits
.map(function(hit) { return hit.rfam_model})
.sort();
// aggregate features with same id and different locations
ctrl.rfamHits.forEach(function(hit) {
var hitClone = ctrl.groupedHits.find(function(el) { return el.metadata.crs_id === hit.metadata.crs_id });
if (!hitClone) {
hitClone = JSON.parse(JSON.stringify(hit));
hitClone.locations = [{ start: hit.start, stop: hit.stop }];
ctrl.groupedHits.push(hitClone);
} else {
hitClone.locations.push({ start: hit.start, stop: hit.stop });
}
});
};
}],
templateUrl: '/static/js/components/sequence/rfam/rfam.html'
};
angular.module("rnaSequence").component("rfam", rfam);
\ No newline at end of file
<div>
<h2>
Rfam classification
<small ng-if="$ctrl.rfamHits.length > 1">
<span ng-if="$ctrl.rfamHitFamilies.length != $ctrl.rfamHits.length">
{{ rna.rfamHitFamilies.length | number }} families, {{ rna.rfamHits.length | number }} locations
</span>
<span ng-if="">
{{ rna.get_rfam_hits.length | number }} families
</span>
<a ng-href="{{ help }}" uib-tooltip="Learn more about Rfam annotations in RNAcentral &rarr;" style="color:inherit;">
<i class="fa fa-question-circle" aria-hidden="true"></i>
</a>
</small>
</h2>
<ul ng-if="$ctrl.rfam_status.has_issue" class="list-inline" style="margin-top: 5px; margin-bottom: 1.5em;">
<li>
<div class="alert alert-warning" style="margin-bottom: 0px">
<i class="fa fa-warning fa-2x pull-left text-danger" aria-hidden="true"></i>
<span ng-repeat="message in $ctrl.rfam_status.messages">
<span>{{ message }}</span>
<br />
</span>
</div>
</li>
</ul>
<ul ng-if="$ctrl.groupedHits.length > 0" class="media-list">
<li ng-repeat="hit in $ctrl.groupedHits" ng-class="{ 'col-md-10 media': $ctrl.groupedHits.length === 1, 'col-md-6 media': $ctrl.groupedHits.length > 1 }" style="margin-bottom: 1.5em; padding-left: 5px;">
<div ng-class="{'col-md-2 media-left media-top': $ctrl.groupedHits.length == 1, 'col-md-4 col-lg-3 media-left media-top': $ctrl.groupedHits.length > 1}" style="padding-left: 0;" uib-tooltip="Consensus secondary structure of Rfam model {{ hit.rfam_model_id }}">
<a ng-href="{{ hit.rfam_model.twod_url }}" class="no-icon">
<img class="media-object thumbnail"
ng-src="{{ hit.rfam_model.thumbnail_url }}"
style="max-width: 120px; max-height: 120px;"
alt="{{ hit.rfam_model_id }} secondary structure">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style='padding-left: 0px;'>
<a ng-href="{{ hit.rfam_model.url }}" class="no-icon">
{{ hit.rfam_model.long_name }}
</a>
</h4>
<ul class="list-unstyled">
<li>
{{ hit.rfam_model_id }}
| {{ hit.rfam_model.rfam_rna_type }}
<span ng-if="hit.rfam_model.domain != None">
| {{ hit.rfam_model.domain }}
</span>
<span ng-if="hit.rfam_model.rna_type != ''">
| <span class="badge">{{ hit.rfam_model.rna_type }}</span>
</span>
</li>
<li>
<ul class="list-unstyled">
<li ng-repeat="go_term in hit.rfam_model.go_terms">
<a ng-href="{{ go_term.quickgo_url }}" target="_blank" class="no-icon" uib-tooltip="View {{ go_term.ontology_term_id }} in QuickGO">{{ go_term.name }}</a>
<a class="btn btn-circle btn-default margin-left-5px" ng-click="toggleGoModal('{{ go_term.ontology_term_id }}')" type="button"><i class="fa fa-sitemap" uib-tooltip="View {{ go_term.ontology_term_id }} ancestor chart"></i></a>
</li>
</ul>
</li>
<li>Matches at<span ng-if="hit.ranges.length == 1">:
<strong>{{ hit.ranges[0][0] + 1 | number }}-{{ hit.ranges[0][1] + 1 | number }}</strong>
({{ hit.ranges[0][2] * 100 }}% of the model)</span>
<span>
<a data-toggle="collapse" ng-href="{{ '#matchPositionsList-' + $index }}" aria-expanded="false" aria-controls="matchPositionsList">
<i class="fa fa-list" aria-hidden="true"></i> {{ hit.ranges|length }} locations
</a>
<ul class='collapse list-unstyled' id='matchPositionsList-{{ $index }}'>
<li ng-repeat="range in hit.ranges" style='padding-left: 1em;'>
<strong>{{ range[0] + 1 | number }}-{{ range[1] + 1 | number }}</strong>
({{ range[2] * 100 }}% of the model)
</li>
</ul>
</span>
</li>
</ul>
</div>
</li>
</ul>
<p ng-if="$ctrl.features.length == 0">The sequence did not match any Rfam families. <a ng-href="{{ help }}">Learn more &rarr;</a></p>
</div>
\ No newline at end of file
......@@ -373,6 +373,8 @@ var rnaSequenceController = function($scope, $location, $window, $rootScope, $co
// show Rfam models, found in this RNA
$scope.fetchRfamHits().then(
function(response) {
$scope.rfamHits = response.data.results;
data = [];
for (var i = 0; i < response.data.results.length; i++) {
var direction, x, y;
......
......@@ -199,6 +199,7 @@ limitations under the License.
<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/protein-targets/protein-targets.component.js" %}"></script>
<script src="{% static "js/components/sequence/rfam/rfam.component.js" %}"></script>
<script src="{% static "js/components/sequence-search/nhmmer.sequence.search.js" %}"></script>
......
......@@ -228,6 +228,8 @@ limitations under the License.
</div>
<rfam upi="upi" rna="rna" rfamHits="rfamHits"></rfam>
<div>
<h2>
Rfam classification
......
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