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

#411 CRS component template and stub.

parent 1a1246dc
var crs = {
bindings: {
upi: '<',
taxid: '<',
rna: '<',
features: '<'
},
controller: ['$http', '$interpolate', 'routes', function($http, $interpolate, routes) {
var ctrl = this;
ctrl.$onInit = function() {
ctrl.distinctFeatures = [];
// aggregate features with same id and different locations
// for each distinct feature, add links to rth page, secondary structure and alignment
ctrl.distinctFeatures.forEach(function(feature) {
feature.rthPageUrl = "";
feature.secondaryStructureUrl = "";
feature.alignmentUrl = "";
});
};
}],
templateUrl: '/static/js/components/sequence/crs/crs.html'
};
angular.module("rnaSequence").component("crs", crs);
\ No newline at end of file
<div>
<h2>
Conserved RNA structures
<small ng-if="features.length > 0">
{{ $ctrl.distinctFeatures.length }} features<span ng-if="features.length != $ctrl.distinctFeatures.length">, {{ features.length }} locations</span>
<a ng-href="{{ help }}" uib-tooltip="Learn more about CRS in RNAcentral &rarr;" style="color:inherit;">
<i class="fa fa-question-circle" aria-hidden="true"></i>
</a>
</small>
</h2>
<ul ng-if="$ctrl.distinctFeatures.length > 0" class="media-list">
<li ng-repeat="feature in $ctrl.distinctFeatures" ng-class="{ 'col-md-10 media': $ctrl.distinctFeatures.length === 1, 'col-md-6 media': $ctrl.distinctFeatures.length > 1 }" style="margin-bottom: 1.5em; padding-left: 5px;">
<div ng-class="{'col-md-2 media-left media-top': $ctrl.distinctFeatures.length == 1, 'col-md-4 col-lg-3 media-left media-top': $ctrl.distinctFeatures.length > 1}" style="padding-left: 0;" uib-tooltip="Consensus secondary structure of Rfam model {{ feature.metadata.crs_id }}">
<a ng-href="{{ feature.rthPageUrl }}" class="no-icon">
<img class="media-object thumbnail"
src="{{ feature.rthSecondaryStructureUrl }}"
style="max-width: 120px; max-height: 120px;"
alt="{{ feature.metadata.crs_id }} secondary structure">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style='padding-left: 0px;'>
<a ng-href="{{ feature.rthPageUrl }}" class="no-icon">
{{ feature.metadata.crs_id }}
</a>
</h4>
<ul>
<li ng-repeat="location in feature.locations">Matches at <span ng-if="locations.length === 1">:
<strong>{{ location.start }}-{{ location.stop }}</strong>
({{ (location.stop - location.start) / rna.length * 100 }}% of the model)</span>
<a ng-if="locations.length > 1" data-toggle="collapse" href="#matchPositionsList-{{ $index }}" aria-expanded="false" aria-controls="matchPositionsList">
<i class="fa fa-list" aria-hidden="true"></i> {{ ranges|length }} locations
</a>
<ul class='collapse list-unstyled' id='matchPositionsList-{{ $index }}'>
<li style='padding-left: 1em;'>
<strong>{{ location.start }}-{{ location.stop }}</strong>
({{ (location.stop - location.start) / rna.length * 100 }}% of the model)
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
<p ng-if="$ctrl.features.length == 0">No data on conserved RNA structures available.</p>
</div>
......@@ -240,7 +240,6 @@ var rnaSequenceController = function($scope, $location, $window, $rootScope, $co
} else {
$('#go-annotation-chart-modal').modal('toggle');
}
console.log($scope.goChartData);
};
/**
......@@ -414,13 +413,10 @@ var rnaSequenceController = function($scope, $location, $window, $rootScope, $co
if ($scope.taxid) {
$scope.fetchSequenceFeatures().then(
function(response){
var features = response.data.results;
// sort features by start
features.sort(function(a, b) {return a.start - b.start});
$scope.features = response.data.results.sort(function(a, b) {return a.start - b.start});
// trim start/stop of each feature to make sure it's not out of sequence bounds
var data = features.map(function(feature) {
var data = $scope.features.map(function(feature) {
return {
x: feature.start >= 0 ? feature.start : 0,
y: feature.stop < $scope.rna.length ? feature.stop : $scope.rna.length - 1,
......@@ -445,7 +441,7 @@ var rnaSequenceController = function($scope, $location, $window, $rootScope, $co
};
// for non-empty tracks, add CRS feature track
if (features.length > 0) { addFeature(); }
if ($scope.features.length > 0) { addFeature(); }
}
)
}
......
......@@ -198,6 +198,7 @@ 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/crs/crs.component.js" %}"></script>
<script src="{% static "js/components/sequence-search/nhmmer.sequence.search.js" %}"></script>
......
......@@ -336,6 +336,8 @@ limitations under the License.
{% endwith %}
</div>
<crs ng-if="rna && taxid && features" upi="upi" taxid="taxid" rna="rna" features="features"></crs>
<h2>
Sequence
<small>
......
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