biojviz-karyoviewer.html

<!--
@license
Copyright (c) 2016 The Jviz Project Authors. All rights reserved.
The Jviz Project is under the MIT License. See https://github.com/jviz/jviz/blob/dev/LICENSE
-->

<!-- Import components -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../jviz/jviz.html">
<link rel="import" href="../jviz-styles/jviz-styles.html">
<link rel="import" href="../jviz-canvas/jviz-canvas.html">
<link rel="import" href="../jviz-tooltip/jviz-tooltip.html">

<!-- Import biojviz elements -->
<link rel="import" href="../biojviz/biojviz.html">

<!-- Karyoviewer module -->
<dom-module id="biojviz-karyoviewer">
  <template>
    <style>
      :host
      {
        display: block;
        position: relative;
      }
    </style>
    <!-- Tooltip element -->
    <jviz-tooltip id="tooltip"></jviz-tooltip>
    <!-- Multicanvas -->
    <jviz-canvas id="canvas" layers="4"></jviz-canvas>
  </template>
</dom-module>

<!-- Karyoviewer logic -->
<script>
  //Initialize the karyoviewer element
  var biojviz_karyoviewer = { is: 'biojviz-karyoviewer' };

  //Initialize the properties
  biojviz_karyoviewer.properties = {};

  //Public attributes
  biojviz_karyoviewer.properties.width = { type: String, reflectToAttribute: true, value: '100%', observer: '_update_width' };
  biojviz_karyoviewer.properties.height = { type: String, reflectToAttribute: true, value: '130px', observer: '_update_height' };
  biojviz_karyoviewer.properties.orientation = {type: String, reflectToAttribute: true, value: 'portrait', observer: '_update_orientation' };

  //Public properties
  biojviz_karyoviewer.properties.chromosomes = { type: Array, value: [] };
  biojviz_karyoviewer.properties.features = { type: Array, value: [] };

  //Created method
  biojviz_karyoviewer.created = function()
  {
    //Element size
    this._width = 0;
    this._height = 0;

    //Block configuration
    this._block = {};
    this._block.width = 0; //Block width
    this._block.height = 0; //Block height
    this._block.draw = { width: 0, height: 0 }; //Block draw zone
    this._block.margin = { top: 30, bottom: 30, left: 0, right: 0 }; //Block margins
    this._block.resized = false; //Block is resized

    //Block default values
    this._block.default = {};

    //Default values for portrait
    this._block.default.portrait = {};
    this._block.default.portrait.draw_width = 15; //Default portrait draw width
    this._block.default.portrait.draw_height = 0; //Default portrait draw height
    this._block.default.portrait.margin_top = 30; //Default portrait margin top
    this._block.default.portrait.margin_bottom = 30; //Default portrait margin bottom

    //Default values for landscape
    this._block.default.landscape = {};
    this._block.default.landscape.draw_width = 0; //Default landscape draw width
    this._block.default.landscape.draw_height = 35; //Default landscape draw height
    this._block.default.landscape.margin_left = 50; //Default landscape margin left
    this._block.default.landscape.margin_right = 50; //Default landscape margin right

    //Canvas object
    this._canvas = {};
    this._canvas.height = 0; //Canvas height
    this._canvas.layers = 4; //Number of layers
    this._canvas.margin = { top: 0, bottom: 0, left: 0, right: 0 };

    //Chromosomes info
    this._chromosomes = {};
    this._chromosomes.width = 15; //Chromosome default width
    this._chromosomes.height = 35; //Chromosome default height
    this._chromosomes.layer = 1; //Chromosome layer
    this._chromosomes.list = []; //Chromosomes list
    this._chromosomes.max = 0; //Chromosome max length
    this._chromosomes.num = 0; //Number of chromosomes
    this._chromosomes.color = jviz.colors('blue', 2); //Chromosome color
    this._chromosomes.opacity = 0.6; //Chromosome opacity
    this._chromosomes.resized = false; //Chromosome data is resized

    //Chromosome radius
    this._chromosomes.radius = {};
    this._chromosomes.radius.portrait = 6; //Chromosome radius for portrait
    this._chromosomes.radius.landscape = 10; //Chromosome radius for landscape

    //Chromosome name
    this._chromosomes.name = {};
    this._chromosomes.name.list = []; //List of chromosomes names
    this._chromosomes.name.visible = true; //Chromosome name is visible
    this._chromosomes.name.margin = 7; //Chromosome name margin

    //Chromosome name text
    this._chromosomes.name.text = {};
    this._chromosomes.name.text.font = '12px ' + jviz.font; //Chromosome name text font
    this._chromosomes.name.text.align = 'center'; //Chromosome name text align

    //Centromere
    this._chromosomes.centromere = {};
    this._chromosomes.centromere.list = []; //List of centromere positions
    this._chromosomes.centromere.opacity = 0.9; //Centromere opacity

    //Chromosomes shadow
    this._shadow = {};
    this._shadow.layer = 0; //Chromosomes shadow layer
    this._shadow.color = jviz.colors('white'); //Chromosomes shadow color
    this._shadow.visible = true; //Chromosomes shadow visible
    this._shadow.offset = 5; //Chromosomes shadow offset
    this._shadow.radius = 5; //Chromosomes shadow radius
    this._shadow.opacity = 0.7; //Chromosomes shadow opacity
    this._shadow.actual = false; //Actual chromosome with shadow

    //Features object
    this._features = {};
    this._features.list = []; //List of features
    this._features.chromosomes = {}; //Features by chromosome
    this._features.layer = 2; //Features layer
    this._features.color = jviz.colors('red'); //Features default color
    this._features.opacity = 0.8; //Features opacity
    this._features.resized = false; //Features data is resized
    this._features.clickable = true; //Features are clickable

    //Features counter
    this._features.counter = {};
    this._features.counter.list = []; //Features counter
    this._features.counter.opacity = 1.0; //Features counter opacity
    this._features.counter.visible = true; //Features counter is visible
    this._features.counter.margin = 3; //Counter margin

    //Features label
    this._label = {};
    this._label.layer = 3; //Features name layer
    this._label.offset = 5; //Features label offset
    this._label.position = 0; //Actual feature label position
    this._label.features = []; //Actual features list
    this._label.active = false; //Label is active
    this._label.visible = true; //Label is visible
    this._label.chromosome = ''; //Actual label chromosome

    //Features label tooltip
    this._label.tooltip = {};
    this._label.tooltip.margin = 5; //Label tooltip margin
    //this._label.tooltip.el = new jviz.canvas.tooltip({ text: '', position: 'bottom' }); //Features label tooltip element

    //Label over
    this._label.over = {};
    this._label.over.posx = 0; //Label real position x
    this._label.over.posy = 0; //Label over position y
    this._label.over.width = 0; //Label over width
    this._label.over.height = 0; //Label over height

    //Over
    this._over = {};
    this._over.move = false; //Capture the move event

    //Over a block
    this._over.block = {};
    this._over.block.actual = false; //Actual block number

    //Over a chromosome
    this._over.chromosome = {};
    this._over.chromosome.actual = false; //Actual chromosome name
  };

  //Attached method
  biojviz_karyoviewer.attached = function()
  {
    //Save this
    var self = this;

    //Set the canvas width
    this.$.canvas.width = this.width;

    //Set the canvas height
    this.$.canvas.height = this.height;

    //Set the number of layers
    //this.$.canvas.layers = 4;

    //Add the mouse down event
    jviz.dom.mouse_down(this.$.canvas, function(e, x, y){ return self._on_down(x, y); });

    //Add the mouse move event
    jviz.dom.mouse_move(this.$.canvas, function(e, x, y){ return self._on_move(x, y); });

    //Add the mouse up event
    //jviz.dom.mouse_up(this.$.canvas, function(e, x, y){ return self._on_up(x, y); });

    //Mouse leave event
    jviz.dom.mouse_leave(this.$.canvas, function(e, x, y){ return self._on_leave(x, y); });

    //Add the resize event
    jviz.dom.resize(function()
    {
      //Resize the element
      self.resize();

      //Draw the chromosomes
      self.draw();
    });

    //Resize the element
    this.resize();

    //Reload the element
    this.reload();
  };

  //Resize method
  biojviz_karyoviewer.resize = function()
  {
    //Resize the canvas element
    this.$.canvas.resize();

    //Save the full width
    this._width = jviz.dom.width(this.$.canvas);

    //Save the full height
    this._height = jviz.dom.height(this.$.canvas);

    //Set to resize the block object
    this._block.resized = false;

    //Set to resize the chromosomes data
    this._chromosomes.resized = false;

    //Set to resize the features data
    this._features.resized = false;
  };

  //Reload method
  biojviz_karyoviewer.reload = function()
  {
    //Update the chromosomes
    this._update_chromosomes(this.chromosomes);

    //Update the features
    this._update_features(this.features);

    //Draw
    this.draw();
  };

  //Reset method
  biojviz_karyoviewer.reset = function()
  {
    //Reset the chromosomes
    this.chromosomes = [];

    //Reset the features
    this.features = [];

    //Reload the element
    this.reload();
  };

  //Update the element width
  biojviz_karyoviewer._update_width = function()
  {
    //Update the canvas width
    this.$.canvas.width = this.width;

    //Resize the element
    this.resize();
  };

  //Update the element height
  biojviz_karyoviewer._update_height = function()
  {
    //Update the canvas height
    this.$.canvas.height = this.height;

    //Resize the element
    this.resize();
  };

  //Leave event
  biojviz_karyoviewer._on_leave = function(x, y)
  {
    //Reset the actual block
    this._over.block.actual = false;

    //Clear the shadow
    //this._shadow_clear();
  };

  //Click down event
  biojviz_karyoviewer._on_down = function(x, y)
  {
    //Check if there is data to show
    if(this._chromosomes.list.length === 0){ return; }
    
    //Check if label is active
    if(this._label.active === true && this._label.visible === true && this._features.clickable === true)
    {
      //Check if user has clicked on a label
      return this._label_click(x, y);
    }

    //Check for chromosome
    if(this._over.block.actual !== false)
    {
      //Get the actual chromosome
      var chr = this._chromosomes.list[this._over.block.actual];

      //Emit the click on a chromosome
      this.fire('clicked-chromosome', { name: chr.name, index: this._over.block.actual });
    }
  };

  //Move event
  biojviz_karyoviewer._on_move = function(x, y)
  {
    //Check if there is data to show
    if(this._chromosomes.list.length === 0){ return; }

    //Check the move
    if(this._over.move === false){ this._over.move = true; return; }

    //Change the move
    this._over.move = false;

    //Get the actual block
    this._over.block.actual = this._over_block(x, y);

    //Get the actual chromosome
    this._over.chromosome.actual = this._over_chromosome(x, y);

    //Draw the label
    this._label_draw(x, y);

    //Draw the shadow
    this._shadow_draw();

    //Check the cursor
    //if(this._over.chromosome.actual === false){ return jviz.cursor.remove('pointer'); }
    //if(this._over.chromosome.actual === false){ return; }

    //Add the pointer cursor
    //jviz.cursor.set('pointer');
  };

  //Register the karyoviewer element
  Polymer(biojviz_karyoviewer);
</script>

<!-- Import karyoviewer source -->
<link rel="import" href="src/block.html">
<link rel="import" href="src/chromosomes.html">
<link rel="import" href="src/draw.html">
<link rel="import" href="src/features.html">
<link rel="import" href="src/label.html">
<link rel="import" href="src/orientation.html">
<link rel="import" href="src/over.html">
<link rel="import" href="src/shadow.html">