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

First take on UI for related proteins.

parent e5482b2f
......@@ -47,7 +47,7 @@ urlpatterns = [
# go annotations for RNA (species-specific)
url(r'^rna/(?P<pk>URS[0-9A-Fa-f]{10})/go-annotations/(?P<taxid>\d+)/?$', cache_page(CACHE_TIMEOUT)(views.RnaGoAnnotationsView.as_view()), name='rna-go-annotations'),
# target proteins for RNA (species-specific)
url(r'^rna/(?P<pk>URS[0-9A-Fa-f]{10})/related-protein/(?P<taxid>\d+)/?$', cache_page(CACHE_TIMEOUT)(views.RelatedProteinsView.as_view()), name='rna-related-proteins'),
url(r'^rna/(?P<pk>URS[0-9A-Fa-f]{10})/related-proteins/(?P<taxid>\d+)/?$', cache_page(CACHE_TIMEOUT)(views.RelatedProteinsView.as_view()), name='rna-related-proteins'),
# literature citations associated with ENA records
url(r'^accession/(?P<pk>.*?)/citations/?$', cache_page(CACHE_TIMEOUT)(views.CitationsView.as_view()), name='accession-citations'),
# view for an individual cross-reference
......
......@@ -11,6 +11,7 @@ angular.module("routes", []).service('routes', ['$interpolate', function($interp
apiGenomeLocationsView: '/api/v1/rna/{{ upi }}/genome-locations/{{ taxid }}',
apiGenomeMappingsView: '/api/v1/rna/{{ upi }}/genome-mappings/{{ taxid }}',
apiRfamHitsView: '/api/v1/rna/{{ upi }}/rfam-hits',
apiRelatedProteinsView: '/api/v1/rna/{{ upi }}/related-proteins/{{ taxid }}',
lineageView: '/rna/{{ upi }}/lineage',
expertDbsApi: '/api/v1/expert-dbs/{{ expertDbName }}',
expertDbStatsApi: '/api/v1/expert-db-stats/{{ expertDbName }}',
......
var relatedProteins = {
bindings: {
upi: '<',
taxid: '<',
timeout: '<?',
page: '<?',
pageSize: '<?'
},
controller: ['$http', '$interpolate', 'routes', function($http, $interpolate, routes) {
var ctrl = this;
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.apiRelatedProteinsView({ 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.apiRelatedProteinsView({ 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';
}
}
)
};
}],
templateUrl: '/static/js/components/sequence/related-proteins/related-proteins.html'
};
angular.module("rnaSequence").component("relatedProteins", relatedProteins);
\ No newline at end of file
<div>
<h2>
Related proteins
<small id="annotations-datatables-counter">{{ $ctrl.total | number }} total</small>
<div class="btn-group btn-group-xs margin-left-5px btn-group-xref-sort" style="display:none">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Sort by<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a id="sort-by-first-seen">first seen</a></li>
<li><a id="sort-by-last-seen">last seen</a></li>
</ul>
</div>
<span id="annotations-datatables-filter"></span>
</h2>
<table class="table table-hover table-condensed" id="annotations-table">
<thead>
<tr>
<th>Protein accession</th>
<th>Label</th>
<th>Synonyms</th>
<th>Description</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 related proteins...
</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>
{{ protein.protein_accession }}
</td>
<td>
{{ protein.label }}
</td>
<td>
{{ protein.synonyms }}
</td>
<td>
{{ protein.description }}
</td>
</tr>
</tbody>
</table>
<!-- 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>
\ No newline at end of file
......@@ -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/related-proteins/related-proteins.component.js" %}"></script>
<script src="{% static "js/components/sequence-search/nhmmer.sequence.search.js" %}"></script>
......
......@@ -71,6 +71,8 @@ limitations under the License.
<xrefs upi="upi" taxid="taxid" timeout="500" page-size="5" on-activate-publications="activatePublications()" on-create-modifications-feature="createModificationsFeature(modifications, accession)" on-activate-genome-browser="activateGenomeBrowser(start, end, chr, genome)" on-scroll-to-genome-browser="scrollToGenomeBrowser()"></xrefs>
<related-proteins upi="upi" taxid="taxid" timeout="500" page-size="5"></related-proteins>
<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