chromosome-entry-view.html

<link rel="import" href="nextprot-elements-shared-styles.html">
<link rel="import" href="external-scripts.html">

<!--
`chromosome-entry-view`
View presenting neXtProt entries plus gene location found on chromosome.

##### Example
    <chromosome-entry-view />
@demo demo/chromosome-entry-view-demo.html
-->

<dom-module id="chromosome-entry-view">

    <template>
        <!-- local styles -->
        <style>
            :host {
                display: block;
                background: white;
                overflow-y: auto;
            }
            :host th {
                text-align: left;
            }
        </style>

        <!-- local DOM for this element -->
        <div id="chromosomeEntryViewContainer">

            <paper-spinner-lite id="spinner" active></paper-spinner-lite>

            <template is="dom-if" if="[[dataLoaded]]">
                <table class="table table-condensed">
                    <col align="left">
                    <thead>
                    <tr>
                        <th style="text-align:left">Gene name</th>
                        <th style="text-align:left">neXtProt AC</th>
                        <th style="text-align:left">Chromosomal location</th>
                        <th style="text-align:right">Start position</th>
                        <th style="text-align:right">Stop position</th>
                        <th style="text-align:left">Coding strand</th>
                        <th style="text-align:left">Protein existence</th>
                        <th style="text-align:left">Proteomics</th>
                        <th style="text-align:left">Antibody</th>
                        <th style="text-align:left">3D</th>
                        <th style="text-align:left">Disease</th>
                        <th style="text-align:right">Isoforms</th>
                        <th style="text-align:right">Variants</th>
                        <th style="text-align:right">PTMs</th>
                        <th style="text-align:left">Description</th>
                    </tr>
                    </thead>
                    <tbody>
                    <template is="dom-repeat" items="[[results.entryReports]]" as="entryReport" >
                    <tr>
                        <td style="text-align:left">[[entryReport.geneName]]</td>
                        <td style="text-align:left"><a href=[[host]]/entry/[[entryReport.entryAccession]]>[[entryReport.entryAccession]]</a></td>
                        <td style="text-align:left">[[entryReport.chromosomalLocation]]</td>
                        <td style="text-align:right">[[entryReport.geneStartPosition]]</td>
                        <td style="text-align:right">[[entryReport.geneEndPosition]]</td>
                        <td style="text-align:left">[[entryReport.codingStrand]]</td>
                        <td style="text-align:left">[[entryReport.proteinExistence]]</td>
                        <td style="text-align:left">[[entryReport.proteomics]]</td>
                        <td style="text-align:left">[[entryReport.antibody]]</td>
                        <td style="text-align:left">[[entryReport.3D]]</td>
                        <td style="text-align:left">[[entryReport.disease]]</td>
                        <td style="text-align:right">[[entryReport.isoforms]]</td>
                        <td style="text-align:right">[[entryReport.variants]]</td>
                        <td style="text-align:right">[[entryReport.ptms]]</td>
                        <td style="text-align:left">[[entryReport.entryDescription]]</td>
                    </tr>
                    </template>
                    </tbody>
                </table>
            </template>
        </div>
    </template>
    <script>
        Polymer({
            is: 'chromosome-entry-view',
            properties: {
                nxConfig: {
                    type: Object,
                    value: { "env": "pro" },
                    observer: '_initAndfetchChromosomeReport'
                },
                chromosome: {
                    type: String,
                    observer: '_fetchChromosomeReport'
                },
                dataLoaded: {
                    type: Boolean,
                    observer: '_updateSpinnerStatus'
                }
            },
            attached: function() {
                this._initAndfetchChromosomeReport()
            },
            _initAndfetchChromosomeReport: function() {

                if (this.nxConfig.env && !this.nxConfig.env.startsWith('{{')) {
                    this._initApiClient();
                    this._fetchChromosomeReport();
                }
            },
            _initApiClient: function() {
                this._npClient = new Nextprot.Client("neXtProt chromosome " + this.chromosome + " entries", "Calipho Group");

                if (this.nxConfig.env) {
                    this._npClient.updateEnvironment(this.nxConfig.env);
                }

                this.host = this._npClient.getNeXtProtUrl();
            },
            _fetchChromosomeReport: function() {
                var self = this;

                if (this._npClient !== undefined && this.chromosome !== undefined && !this.chromosome.startsWith('{{')) {
                    this._npClient.getChromosomeReportEntries(this.chromosome)
                        .then(function (response) {
                            Polymer.RenderStatus.afterNextRender(self, function () {
                                self.results = response;
                                self.dataLoaded = true;
                            });
                        })
                        .catch(function (error) {
                            console.error("neXtProt API error", error.responseText);
                        });
                }
            },
            _dataLoaded: function() {

                return this.results;
            },
            _updateSpinnerStatus: function() {

                if (this._dataLoaded()) {

                    this.$.spinner.active = false;
                    this.$.spinner.hidden = true;
                }
            }
        });
    </script>
</dom-module>