Commit b46dc5b2 authored by Anton Petrov's avatar Anton Petrov
Browse files

Add LncBase component

parent 95a6b148
......@@ -12,6 +12,7 @@ angular.module("routes", []).service('routes', ['$interpolate', function($interp
apiGenomeMappingsView: '/api/v1/rna/{{ upi }}/genome-mappings/{{ taxid }}',
apiRfamHitsView: '/api/v1/rna/{{ upi }}/rfam-hits/{{ taxid }}',
apiProteinTargetsView: '/api/v1/rna/{{ upi }}/protein-targets/{{ taxid }}',
apiLncrnaTargetsView: '/api/v1/rna/{{ upi }}/lncrna-targets/{{ taxid }}',
apiSequenceFeaturesView: '/api/v1/rna/{{ upi }}/sequence-features/{{ taxid }}',
lineageView: '/rna/{{ upi }}/lineage',
expertDbsApi: '/api/v1/expert-dbs/{{ expertDbName }}',
......
var lncrnaTargets = {
bindings: {
upi: '<',
taxid: '<',
genomes: '<',
timeout: '<?',
page: '<?',
pageSize: '<?'
},
controller: ['$http', '$interpolate', 'routes', function($http, $interpolate, routes) {
var ctrl = this;
ctrl.help = '/help/rna-target-interactions';
ctrl.onPageSizeChanged = function(newPageSize, oldPageSize) {
oldPageSize = parseInt(oldPageSize);
// re-calculate page, taking new pageSize into account
ctrl.page = Math.floor(((ctrl.page - 1) * oldPageSize) / newPageSize) + 1;
ctrl.pageSize = newPageSize;
ctrl.pages = _.range(1, Math.ceil(ctrl.total / ctrl.pageSize) + 1);
if (ctrl.paginateOn === 'client') {
ctrl.displayedProteins = ctrl.proteins.slice((ctrl.page - 1) * ctrl.pageSize, ctrl.page * ctrl.pageSize);
}
else if (ctrl.paginateOn === 'server') {
ctrl.getPageFromServerSide();
}
};
ctrl.onPageChanged = function(page) {
ctrl.page = page;
if (ctrl.paginateOn === 'client') {
ctrl.displayedProteins = ctrl.proteins.slice((ctrl.page - 1) * ctrl.pageSize, ctrl.page * ctrl.pageSize);
}
else if (ctrl.paginateOn === 'server') {
ctrl.getPageFromServerSide();
}
};
ctrl.getPageFromServerSide = function() {
ctrl.status = 'loading';
$http.get(routes.apiLncrnaTargetsView({ upi: ctrl.upi, taxid: ctrl.taxid }), {params: { page: ctrl.page, page_size: ctrl.pageSize }}).then(
function(response) {
ctrl.status = 'success';
ctrl.displayedProteins = response.data.results;
ctrl.total = response.data.count;
ctrl.pages = _.range(1, Math.ceil(ctrl.total / ctrl.pageSize) + 1);
},
function(response) {
ctrl.status = 'error';
}
)
};
ctrl.$onInit = function() {
// set defaults for optional parameters, if not given
ctrl.page = ctrl.page || 1; // human-readable number of page to show, in range of (1, n)
ctrl.pageSize = ctrl.pageSize || 5;
ctrl.paginateOn = 'client'; // load all Xrefs at once and paginate Xrefs table on client-side, or if too slow, fallback to loading'em page-by-page from server
ctrl.timeout = parseInt(ctrl.timeout) || 5000; // if (time of response) > timeout, paginate on server side
ctrl.status = 'loading'; // {'loading', 'error' or 'success'} - display spinner, error message or xrefs table
$http.get(routes.apiLncrnaTargetsView({ upi: ctrl.upi, taxid: ctrl.taxid }), { timeout: ctrl.timeout, params: { page: 1, page_size: 1000000000000 } }).then(
function(response) {
ctrl.status = 'success';
ctrl.proteins = response.data.results;
ctrl.displayedProteins = ctrl.proteins.slice(0, ctrl.pageSize);
ctrl.total = response.data.count;
ctrl.pages = _.range(1, Math.ceil(ctrl.total / ctrl.pageSize) + 1);
},
function(response) {
// if it took server too long to respond and request was aborted by timeout
// send a paginated request instead and fallback to server-side processing
if (response.status === -1) { // for timeout response.status is -1
ctrl.paginateOn = 'server';
ctrl.getPageFromServerSide();
}
else {
ctrl.status = 'error';
}
}
)
};
ctrl.ensemblUrl = function(protein) {
var accession = protein.target_accession.split(":")[1];
var species = ctrl.genomes.find(function(genome) { return genome.taxid.toString() == ctrl.taxid; }).ensembl_url;
return $interpolate("https://www.ensembl.org/{{ species }}/Gene/Summary?g={{ accession }};")({ species: species, accession: accession });
};
ctrl.lncbaseUrl = function(protein) {
var tarbaseId = protein.source_accession.split(":")[1];
var ensemblId = protein.target_accession.split(":")[1];
var template = "http://carolina.imis.athena-innovation.gr/diana_tools/web/index.php?r=lncbasev2%2Findex-experimental&miRNAs%5B%5D={{ tarbaseId }}&lncRNAs%5B%5D={{ ensemblId }}&filters=0"
return $interpolate(template)({ tarbaseId: tarbaseId, ensemblId: ensemblId });
}
}],
templateUrl: '/static/js/components/sequence/lncrna-targets/lncrna-targets.html'
};
angular.module("rnaSequence").component("lncrnaTargets", lncrnaTargets);
<div ng-if="$ctrl.genomes && $ctrl.total > 0">
<h2>
Target lncRNAs
<small ng-if="$ctrl.total > 0">{{ $ctrl.total | number }} total</small>
<small>
<a ng-href="{{ $ctrl.help }}" uib-tooltip="Learn more about lncRNA targets &rarr;" style="color:inherit;"><i class="fa fa-question-circle" aria-hidden="true"></i></a>
</small>
</h2>
<div ng-if="$ctrl.total > 0">
<div class="table-responsive">
<table class="table table-hover table-condensed" id="related-lncrna-table">
<thead>
<tr>
<th>View in LncBase</th>
<th>View in Ensembl</th>
<th>View in RNAcentral</th>
<th>Target description</th>
<th>Methods</th>
</tr>
</thead>
<tbody>
<tr ng-if="$ctrl.status === 'loading'">
<td colspan="4" style="text-align: center;">
<span>
<i class="fa fa-spinner fa-spin fa-2x"></i>
Loading data on lncRNA targets...
</span>
</td>
</tr>
<tr ng-if="$ctrl.status === 'error'">
<td colspan="4" style="text-align: center;">
<span>
<i class="fa fa-exclamation-circle fa-2x"></i>
Failed to load data from server
</span>
</td>
</tr>
<tr ng-if="$ctrl.status === 'success'" ng-repeat="protein in $ctrl.displayedProteins">
<td class="col-lg-2">
<a ng-href="{{ $ctrl.lncbaseUrl(protein) }}" target="_blank" uib-tooltip="Explore supporting publications, tissues, cell lines, and more"><span ng-if="protein.source_accession">{{ protein.source_accession }}</span><span ng-if="!protein.source_accession">unknown</span></a>
</td>
<td class="col-lg-2">
<a ng-href="{{ $ctrl.ensemblUrl(protein) }}" target="_blank">{{ protein.target_accession.split(":")[1] }}</a>
<a href="search?q=interacting_rna:&quot;{{ protein.target_accession.split(':')[1] }}&quot;" class="margin-left-5px ng-scope" uib-tooltip="Find other miRNAs targeting this lncRNA"><i class="fa fa-search"></i></a>
</td>
<td>
<a ng-if="protein.target_urs_taxid" href="/rna/{{ protein.target_urs_taxid }}">{{ protein.target_urs_taxid }}</a>
</td>
<td class="col-lg-6">
{{ protein.description.split(" [")[0] }}
</td>
<td class="col-lg-2">
<span ng-repeat="method in protein.methods">{{ method }}<span ng-show="!$last">, </span></span>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination: pages list and page size select -->
<div ng-if="$ctrl.status == 'success'" style="margin-top: 5px; margin-left: 5px; margin-right: 5px;">
<ul ng-if="$ctrl.pages.length > 1" class="pagination pagination-sm" style="display:inline">
<li ng-if="$ctrl.page != 1" ng-click="$ctrl.onPageChanged(1)"><a href="">1</a></li>
<li ng-if="$ctrl.page > 3" ng-click="$ctrl.onPageChanged(1)"><a href="">&#8230;</a></li>
<li ng-if="$ctrl.page > 2" ng-click="$ctrl.onPageChanged($ctrl.page - 1)"><a href="">{{ $ctrl.page - 1 }}</a></li>
<li class="active"><a href="">{{ $ctrl.page }}</a></li>
<li ng-if="$ctrl.page < $ctrl.pages.length - 1" ng-click="$ctrl.onPageChanged($ctrl.page + 1)"><a href="">{{ $ctrl.page + 1 }}</a></li>
<li ng-if="$ctrl.page < $ctrl.pages.length - 2" ng-click="$ctrl.onPageChanged($ctrl.pages.length)"><a href="">&#8230;</a></li>
<li ng-if="$ctrl.page != $ctrl.pages.length" ng-click="$ctrl.onPageChanged($ctrl.pages.length)"><a href="">{{ $ctrl.pages.length }}</a></li>
</ul>
<span class="pull-right" ng-if="$ctrl.total > $ctrl.pageSize">
<select ng-model="$ctrl.pageSize" ng-change="$ctrl.onPageSizeChanged($ctrl.pageSize, '{{ $ctrl.pageSize }}')" ng-options="v.value as v.key for v in [{key:1, value:1}, {key: 5, value: 5}, {key: 10, value: 10}, {key: 20, value: 20}, {key: 50, value: 50}, {key: 'all', value: 1000000000000}]"></select> records per page
</span>
<div class="clearfix"></div>
</div>
</div>
<p ng-if="$ctrl.total == 0">No protein targets are known for this sequence. <a ng-href="{{ $ctrl.help }}">Learn more &rarr;</a></p>
</div>
......@@ -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/lncrna-targets/lncrna-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>
......
......@@ -73,6 +73,8 @@ limitations under the License.
<protein-targets ng-if="taxid" upi="upi" taxid="taxid" timeout="500" page-size="5" genomes="genomes"></protein-targets>
<lncrna-targets ng-if="taxid" upi="upi" taxid="taxid" timeout="500" page-size="5" genomes="genomes"></lncrna-targets>
<h2 ng-if="taxid">
Genome locations
<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