epiviz-ideogram-track.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"> -->

<!-- Ideogram library dependency -->
<script src="src/cyto-chromosome-vis/cyto-chromosome.js"></script>

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

<a href="http://biojs.io/d/cyto-chromosome-vis">Ideogram Track</a> is a biojs visualization and
creates a ideogram track chart for a given chromosome.

`epiviz-ideogram-track` integrates ideogram track in a web component framework and adds additional features to 
highlight region of interest, display the gene close to the center

To create a ideogram track on a HTML page, add

      <epiviz-ideogram-track
        chr="chr11"
        start=1000
        end=250000
      ></epiviz-ideogram-track>

@demo demo/index-ideogram.html Example page showing a ideogram track
-->

<dom-module id="epiviz-ideogram-track">
    <template>
        <style>
            :host {
                display: inline-block;
                min-width: 250px;
            }

            #chart {
                position: relative;
            }
        </style>

        <!-- local DOM goes here -->
        <div id="chart">
            <div id="{{plotId}}"></div>
        </div>

    </template>

    <script>
        // Extend Polymer.Element base class
        class EpivizIdeogramTrack extends Polymer.Element {

            static get is() { return 'epiviz-ideogram-track'; }

            static get properties() {
                return {

                    /**
                    * Chromosome location.
                    * Default Location Attribute to set to all the children chart elements.
                    *
                    * @example: chr1
                    *
                    * @type {string}
                    */
                    chromosome: {
                        type: String,
                        notify: true
                    },

                    /**
                    * Chromosome start. 
                    * Default Chromosome start value to use. (defaults to 0).
                    *
                    * @type {number}
                    */
                    start: {
                        type: Number,
                        notify: true
                    },

                    /**
                    * Chromosome end. 
                    * Default Chromosome end value to use. (defaults to the `<chr>` length).
                    *
                    * @type {number}
                    */
                    end: {
                        type: Number,
                        notify: true
                    },

                    /**
                    * Unique plot ID for the chart
                    *
                    * @type {string}
                    */
                    plotId: {
                        type: String,
                        reflectToAttribute: true,
                        notify: true
                    },

                    /**
                    * Computed Range from `<chr>`, `<start>` & `<end>`. 
                    *
                    * @type {Object<epiviz.datatypes.GenomicRange>}
                    */
                    range: {
                        type: Object,
                        notify: true
                    },

                    /**
                    * Current gene in range (set automatically)
                    *
                    * @type {string}
                    */
                    geneInRange: {
                        type: String,
                        notify: true
                    }
                }
            }

            static get observers() {
                return [
                    /* observer array just like 1.x */
                    '_rangeChanged(chromosome.*, start.*, end.*)'
                ]
            }

            constructor() {
                super();
            }

            connectedCallback() {
                super.connectedCallback();
            }

            disconnectedCallback() {
                super.connectedCallback();
            }

            ready() {
                super.ready();
                var self = this;

                self.plotId = self.plotId || self._generatePlotId();
                var parent = self.parentNode;

                if (parent.nodeName === "IRON-COLLAPSE") {
                    parent = parent.parentNode;
                }

                parent.addEventListener('hoverAllCharts', function (e) {
                    self.chart.hover(e.detail.data);
                }.bind(self));

                parent.addEventListener('unHoverAllCharts', function (e) {
                    self.chart.unHover();
                }.bind(self));

                self.chromosomeFactory = cyto_chr;
                self._rangeChanged();
                self.chartObject = new epiviz.ui.charts.ChartObject(self.plotId, self.start, self.end, undefined, undefined, undefined, undefined, undefined);
            }

            /**
             * Draws the chart.
             */
            _draw() {

                var self = this;

                $(self.shadowRoot.querySelector("#" + self.plotId)).empty();

                self.segment = self.chromosome.replace("chr", "");

                self.chart = self.chromosomeFactory.chromosome()
                    .segment(self.segment)
                    // .resolution("850")
                    .useRelative(false)
                    .showAxis(true)
                    .target(self.shadowRoot.querySelector("#" + self.plotId))
                    // .height(100)
                    .width(300)
                    .render();

                // TODO: use callback instead after the chart is rendered
                setTimeout(function () {
                    self.chart.on("selectorhover", function (e) {
                        self.dispatchEvent(new CustomEvent('hover',
                            {
                                detail: {
                                    data: self.chartObject
                                },
                                bubbles: true
                            }
                        )
                        );
                    }.bind(self));

                    self.chart.on("selectorunhover", function (e) {
                        self.dispatchEvent(new CustomEvent('hover',
                            {
                                detail: {
                                    data: null
                                },
                                bubbles: true
                            }
                        )
                        );
                    }.bind(self));

                    self.chart.getSVGTarget().append('text')
                        .text("chr: " + self.segment)
                        .attr('x', self.chart.getSVGTarget().attr("width") - 285)
                        .attr('y', self.chart.getSVGTarget().attr("height") * 1 / 3)
                        .attr('text-anchor', 'left')
                        .style('font', '12px sans-serif');

                    self.chart.getSVGTarget().append('text')
                        .text("Gene: " + self.geneInRange)
                        .attr('x', self.chart.getSVGTarget().attr("width") - 240)
                        .attr('y', self.chart.getSVGTarget().attr("height") * 1 / 3)
                        .attr('text-anchor', 'left')
                        .style('font', '12px sans-serif');

                    self.chart.newSelector(self.start, self.end);
                    self.chartObject = new epiviz.ui.charts.ChartObject(self.plotId, self.start, self.end, undefined, undefined, undefined, undefined, undefined, self.chromosome);
                }, 1000);
            }

            /**
             * Generates a unique chart ID
             * 
             * @return {string}
             */
            _generatePlotId() {
                var chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
                var result = '';
                var size = 7;

                for (var i = 0; i < size; ++i) {
                    result += chars[Math.round(Math.random() * (chars.length - 1))];
                }

                return 'epiviz-' + result;
            }

            /**
             * ChartLocation/RangeChange event handler.
             */
            _rangeChanged() {

                if (!(this.chromosome === undefined || this.start === undefined || this.end === undefined)) {
                    if (this.plotId) {
                        this._draw();
                    }
                }
            }

            /**
             * Hover event handler.
             *
             * @param {object} data data object currently hovered.
             */
            hover(data) {
                this.chart.doHover(data);
            }

            /**
             * unHover event handler.
             */
            unHover() {
                this.chart.doUnhover();
            }
        };

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