expression-view.html

<link rel="import" href="protein-overview.html">
<link rel="import" href="isoform-selector.html">
<link rel="import" href="triple-viewer.html">
<link rel="import" href="generic-annotation-section.html">
<link rel="import" href="keywords-section.html">
<link rel="import" href="xrefs-section.html">
<link rel="import" href="nextprot-elements-shared-styles.html">
<link rel="import" href="expression-section.html">

<!--
`expression-view`
View listing protein expression view.
@demo demo/expression-view-demo.html
-->
<dom-module id="expression-view">
    <template>
        <style include="nextprot-elements-shared-styles">
            :host {
                display: block;
                background: #f8f8f8;
                overflow-y: auto;
            }

        </style>
        <div class="row">
            <div id="nxOverview" class="col-md-12">
                <protein-overview nx-config="[[nxConfig]]" nx-entry-data="[[nxEntryData]]" lazy-loading="[[lazyLoading]]"></protein-overview>
            </div>
        </div>
        <div id="nxGenericAnnotations" class="row nxSection">
            <generic-annotation-section id="expressionInfoElement" section="expressionInfo"
                                        gold-only="[[nxConfig.goldOnly]]"
                                        categories='["EXPRESSION-INFO", "INDUCTION", "DEVELOPMENTAL-STAGE-INFO"]'
                                        nx-config="[[nxConfig]]"
                                        count="{{genericAnnotationsCount}}"></generic-annotation-section>
        </div>

        <div id="nxExpressionAnnotations" class="row nxSection">
            <expression-section id="expressionSection" section="expressionSection" nx-config="[[nxConfig]]"
                                count="{{expressionSectionAnnotationCount}}" filters={{filters}}></expression-section>
        </div>
        <div id="noDataWarning" class='alert alert-warning noData' hidden>There is no expression information available
            in neXtProt for [[nxConfig.entry]].
            Suggestions for updates are welcome! Please <a href='mailto:support@nextprot.org'>contact us</a>.
        </div>
        <div class="row">
            <div id="nxXrefs" class="col-md-12">
                <xrefs-section categories='["CPTC", "Bgee","ExpressionAtlas","Genevisible", "Antibodypedia", "HPA", "ABCD"]'
                               nx-config="[[nxConfig]]" view="expression" count="{{xrefsCount}}">
                </xrefs-section>
            </div>
        </div>
    </template>

    <script>
        Polymer({
            is: 'expression-view',
            properties: {
                nxConfig: {
                    type: Object,
                    value: {}
                },
                filters: {
                    type: Object,
                    value: {
                        posNeg: [{
                            label: "All",
                            checked: "checked"
                        }, {label: "Positive"}, {label: "Negative"}, {label: "Positive only"}, {label: "Negative only"}, {label: "Only positive or only negative"}, {
                            label: "Both positive and negative",
                            selected: false
                        }],
                        methodology: ["Microarray Bgee", "EST Bgee", "RNA-Seq Bgee", "RNA-Seq HPA", "IHC"]
                    }
                },
                expressionSectionAnnotationCount: {
                    type: Number,
                    value: -1,
                    observer: "_checkAnnotations"
                },
                genericAnnotationsCount: {
                    type: Number,
                    value: -1,
                    observer: "_checkAnnotations"
                },
                xrefsCount: {
                    type: Number,
                    observer: "_checkXrefs"
                },
                filtersShown: {
                    type: Boolean,
                    value: false
                }
            },
            _applyFilters: function () {
                alert("Not yet implemented")
            },
            _toggleFilters: function () {
                var self = this;
                this.async(function () {
                    self.$.filtersContent.hidden = !self.$.filtersContent.hidden;
                    self.filtersShown = !self.filtersShown;
                }, 1);
            },
            _checkAnnotations: function () {

                this.$.nxGenericAnnotations.hidden = (this.genericAnnotationsCount) ? false : true;

                this.$.nxExpressionAnnotations.hidden = (this.expressionSectionAnnotationCount) ? false : true;

                if (this.expressionSectionAnnotationCount === 0 && this.genericAnnotationsCount === 0) {
                    this.$.noDataWarning.hidden = false;
                }
                else this.$.noDataWarning.hidden = true;
            },
            _checkXrefs: function () {
                this.xrefsCount === 0 ? this.$.nxXrefs.hidden = true : this.$.nxXrefs.hidden = false;
            }
        });
    </script>
</dom-module>