epiviz-genes-table.html

<!-- Polymer dependency -->
<link rel="import" href="bower_components/polymer/polymer-element.html">

<!-- Epiviz imports dependency -->
<!-- <link rel="import" href="bower_components/epiviz-imports/epiviz-common-js.html"> -->

<link rel="import" href="epiviz-genes-track.html">

<!-- Epiviz Polymer Behaviors dependency -->
<link rel="import" href="chart-behavior.html">
<link rel="import" href="chart-settings.html">
<link rel="import" href="chart-colors.html">
<link rel="import" href="chart-remove.html">
<link rel="import" href="chart-grid-behavior.html">

<!-- Epiviz Shared css -->
<link rel="import" type="css" href="chart-shared-css.html">

<!--
<h2> Chart Component </h2>
epiviz-chart components are a collection of reusable and extensible visualization components for
genomic data. 

An epiviz-chart component requires two attributes to render a visualization on the page 
<ul>
    <li>data attribute,  </li>
    <li>dimensions (or columns) from the data attribute to visualize.</li>
</ul>

`<epiviz-genes-table>` displays a table for a list of genes in the given genomic region. This component extends the
    `epiviz-genes-track` element

Element attributes are defined in <a href="#epiviz.ChartBehavior">`<epiviz.ChartBehavior>`</a> element.

To create a genes track on a HTML page, add

      <epiviz-genes-table></epiviz-genes-table>

@demo demo/index-genes-table.html Example page showing a genes table
-->

<dom-module id="epiviz-genes-table">
    <!--<link rel="import" href="bower_components/epiviz-imports/epiviz-common-css.html">-->
    <template>
        <style include="shared-settings"></style>
        <style include="chart-shared-css"></style>
        <style>
            :host {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                display: inline-block;
                border: 1px solid black;
                border-radius: 5px;
                transition: width 0.01s, height 0.01s;
                resize: vertical;
                overflow: auto;
                position: relative;
            }

            [hidden] {
                display: none;
            }

            table.gridtable {
                height: 100%;
                width: 100%;
                margin-left: 10px;
                grid-column: span 4;
                border-collapse: collapse;
                border-spacing: 0;
                border: 1px solid #eee;
                border-bottom: 2px solid #4285f4;
            }

            th,
            td {
                /* color: #999; */
                /* border: 1px solid #eee; */
                padding: 7px 14px;
                border-collapse: collapse;
                text-align: center;
                white-space: nowrap;
            }

            tr,
            thead,
            th {
                border: 1px solid #eee;
            }
        </style>

        <!-- local DOM goes here -->
        <paper-spinner-lite active class="green"></paper-spinner-lite>
        <div id="chart" on-drag="hostDragged" on-mouseover="hostHovered" on-mouseout="hostUnhovered">
            <div id="{{plotId}}">
            </div>
            <table class="gridtable">
                <thead>
                    <tr>
                        <th>Gene </th>
                        <th>Start</th>
                        <th>End</th>
                    </tr>
                </thead>
                <tbody>
                    <template is="dom-repeat" items="[[geneTable]]" as="row" initial-count="30">
                        <tr>
                            <td>[[row.gene]]</td>
                            <td>[[row.start]]</td>
                            <td>[[row.end]]</td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>

    </template>

    <script>

        // Extend Polymer.Element base class
        // EpivizChartRemoveBehavior(EpivizChartColorsBehavior(EpivizChartSettingsBehavior(EpivizChartBehavior(Polymer.Element))))

        class EpivizGenesTable extends EpivizGenesTrack {

            static get is() { return 'epiviz-genes-table'; }

            static get properties() {
                return {
                    geneTable: {
                        type: Array,
                        notify: true
                    }
                }
            }

            constructor() {
                super();
            }

            /**
            * Draws the chart.
            *
            * @param {Object<epiviz.datatypes.GenomicRange>} range genomic range.
            * @param {Object<epiviz.datatypes.MapGenomicData>} data to plot
            */
            _draw() {
                var series = this.data.firstSeries();
                var indices = epiviz.utils.range(series.size());
                var geneTable = [];
                var dataItems = indices
                    .map(function (i) {
                        var cell = series.get(i);
                        var item = cell.rowItem;

                        geneTable.push({
                            "gene": item.metadata("gene"),
                            "start": item.start(),
                            "end": item.end(),
                            "exonStarts": JSON.stringify(item.metadata('exon_starts').split(',').map(function (s) { return parseInt(s); })),
                            "exonEnds": JSON.stringify(item.metadata('exon_ends').split(',').map(function (s) { return parseInt(s); }))
                        });
                    });

                this.set("geneTable", geneTable);

                this.shadowRoot.querySelector("paper-spinner-lite").active = false;
            }
        };

        customElements.define(EpivizGenesTable.is, EpivizGenesTable);
    </script>
</dom-module>