<commit_before>/**
 * 
 */
/*
 * The aspiredb project
 * 
 * Copyright (c) 2013 University of British Columbia
 * 
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
 * the License. You may obtain a copy of the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations under the License.
 * 
 */

Ext.require( [ 'Ext.Window', 'Matrix2Viz' ] );

Ext.define( 'ASPIREdb.view.SubjectPhenotypeHeatmapWindow', {
   /**
    * @memberOf ASPIREdb.view.SubjectPhenotypeHeatmapWindow
    */
   extend : 'Ext.Window',
   alias : 'widget.subjectPhenotypeHeatmapWindow',
   singleton : true,
   title : 'Subject Phenotype Heatmap',
   closable : true,
   closeAction : 'hide',
   width : 925,
   height : 760,
   layout : 'fit',
   bodyStyle : 'padding: 10px;',
   id : 'subjectPhenotypeHeatmapWindow',

   initComponent : function() {
      this.callParent();
   },

   draw : function(matrix) {

      var matrixColumnMetadata = [];
      var matrixRowMetadata = [];

      for (var i = 0; i < matrix.columnNames.length; i++) {
         var type;
         if ( matrix.columnNames[i] == "Gender" || matrix.columnNames[i] == "Family history" ) {
            type = 'gender';
         } else {
            type = 'binary';
         }
         matrixColumnMetadata.push( {
            Phenotype : matrix.columnNames[i],
            type : type
         } );
      }

      for (var i = 0; i < matrix.rowNames.length; i++) {
         matrixRowMetadata.push( {
            Subject : matrix.rowNames[i]
         } );
      }

      var convertedData = this.convertData( matrix.matrix, matrixColumnMetadata );

      var order = h2m.ClusterHelper.produceClusteredOrder( convertedData );

      var dataMatrix = {
         dimensions : {
            numberOfRows : matrix.rowNames.length,
            numberOfColumns : matrix.columnNames.length
         },
         getDataAt : function(rowIndex, columnIndex) {
            return matrix.matrix[rowIndex][columnIndex];
         }
      };

      M2V = {};
      M2V.Util = {};
      M2V.Util.dataType = {};

      M2V.Util.dataType.renderNA = function(ctx, size) {
      };

      M2V.Util.dataType.renderGenderCell = function(ctx, gender, row, column, size) {
         var color;
         if ( gender.toUpperCase() === "M" ) {
            color = "rgb(72,209,204)";
         } else if ( gender.toUpperCase() === "F" ) {
            color = "rgb(255,105,180)";

         } else
            M2V.Util.dataType.renderNA( ctx, size );
         ctx.fillStyle = color;
         ctx.fillRect( 1, 1, size.width - 2, size.height - 2 );
      };

      // TODO support data types with more than 2 values
      M2V.Util.dataType.renderAbsentPresentCell = function(ctx, value, row, column, size) {
         // TODO write a legend
         var color;
         if ( value === 0 || value === "0" || value === "N" || value === "M" ) {
            color = "rgb(200,200,200)"; // grey
         } else if ( value === 1 || value === "1" || value === "Y" || value === "F" ) {
            color = "rgb(0,0,0)"; // black
         } else
            M2V.Util.dataType.renderNA( ctx, size );

         ctx.fillStyle = color;
         ctx.fillRect( 1, 1, size.width - 2, size.height - 2 );
      };

      // TODO: provide centering helper function
      var renderDefaults = {
         text : function(ctx, box, text) {
            ctx.translate( 0, box.height / 2 + 4 ); // fontSize
            ctx.fillText( text, 0, 0 );
         },
         label : function(ctx, box, text) {
            ctx.translate( 0, box.height / 2 + 4 ); // fontSize
            ctx.fillText( text, 0, 0 );
         },
         group : function(ctx, box, value) {
            ctx.translate( 0, box.height / 2 + 4 ); // fontSize
            ctx.fillText( value, 0, 0 );
         },
         type : function(ctx, box, value) {
            ctx.translate( 0, box.height / 2 + 4 ); // fontSize
            ctx.fillText( value, 0, 0 );
         },
         metaNumber : function(ctx, box, value) {
            ctx.fillStyle = 'rgb(0,100,0)';
            ctx.fillRect( 0, 1, box.width * value, box.height - 2 );
         }
      };

      var heatmap = Ext.create( 'Matrix2Viz', {
         // renderTo: "matrix_div",
         // renderTo: document.body,
         // renderTo: this.down('#matrix_div').getEl(),
         renderTo : this.el,
         width : 900,
         height : 700,

         data : dataMatrix,
         labelFormat : {
            row : [ {
               name : 'Subject',
               size : 90
            },
            // {name: 'group', size: 50}
            ],
            column : [ {
               name : 'Phenotype',
               size : 100
            },
            // {name: 'metaNumber', size: 10},
            // {name: 'type', size: 50}
            ]
         },
         renderers : {
            cell : {
               'gender' : {
                  // render: M2V.Util.dataType.renderGenderCell
                  render : M2V.Util.dataType.renderAbsentPresentCell
               },
               'binary' : {
                  render : M2V.Util.dataType.renderAbsentPresentCell
               },
               'numeric' : {
                  render : function(ctx, data, row, column, size) {
                     var red = Math.round( 255 * (data / (column.range.high - column.range.low)) );
                     ctx.fillStyle = "rgb(" + red + ",0,0)";
                     ctx.fillRect( 1, 1, size.width - 2, size.height - 2 );
                  }
               }
            },
            rowMetadata : {
               'Subject' : {
                  render : renderDefaults.text
               },
            /*
             * 'group': { render: renderDefaults.text }
             */
            },
            columnMetadata : {
               'Phenotype' : {
                  render : renderDefaults.text
               },
            /*
             * 'metaNumber': { render: renderDefaults.metaNumber }, 'type': { render: renderDefaults.text }
             */
            }
         },<commit_msg>Fixed Bug 4090 - Heatmap bugs from Elodie<commit_after>/**
 * 
 */
/*
 * The aspiredb project
 * 
 * Copyright (c) 2013 University of British Columbia
 * 
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with
 * the License. You may obtain a copy of the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
 * an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations under the License.
 * 
 */

Ext.require( [ 'Ext.Window', 'Matrix2Viz' ] );

Ext.define( 'ASPIREdb.view.SubjectPhenotypeHeatmapWindow', {
   /**
    * @memberOf ASPIREdb.view.SubjectPhenotypeHeatmapWindow
    */
   extend : 'Ext.Window',
   alias : 'widget.subjectPhenotypeHeatmapWindow',
   singleton : true,
   title : 'Subject Phenotype Heatmap',
   closable : true,
   closeAction : 'hide',
   width : 800,
   height : 600,
   layout : 'fit',
   bodyStyle : 'padding: 10px;',
   id : 'subjectPhenotypeHeatmapWindow',

   initComponent : function() {
      this.callParent();
   },

   draw : function(matrix) {

      var matrixColumnMetadata = [];
      var matrixRowMetadata = [];

      for (var i = 0; i < matrix.columnNames.length; i++) {
         var type;
         if ( matrix.columnNames[i] == "Gender" || matrix.columnNames[i] == "Family history" ) {
            type = 'gender';
         } else {
            type = 'binary';
         }
         matrixColumnMetadata.push( {
            Phenotype : matrix.columnNames[i],
            type : type
         } );
      }

      for (var i = 0; i < matrix.rowNames.length; i++) {
         matrixRowMetadata.push( {
            Subject : matrix.rowNames[i]
         } );
      }

      var convertedData = this.convertData( matrix.matrix, matrixColumnMetadata );

      var order = h2m.ClusterHelper.produceClusteredOrder( convertedData );

      var dataMatrix = {
         dimensions : {
            numberOfRows : matrix.rowNames.length,
            numberOfColumns : matrix.columnNames.length
         },
         getDataAt : function(rowIndex, columnIndex) {
            return matrix.matrix[rowIndex][columnIndex];
         }
      };

      M2V = {};
      M2V.Util = {};
      M2V.Util.dataType = {};

      // See PhenotypeGrid colors

      M2V.Util.dataType.renderGenderCell = function(ctx, value, row, column, size) {
         var color;
         value = value.toUpperCase();
         if ( value === "M" || value === "Y" ) {
            color = "rgb(44,127,184)"; // blue
         } else if ( value === "F" || value === "N" ) {
            color = "rgb(216,179,101)"; // yellow

         } else {
            color = "rgb(99,99,99)"; // grey
         }

         ctx.fillStyle = color;
         ctx.fillRect( 1, 1, size.width - 2, size.height - 2 );
      };

      // TODO support data types with more than 2 values
      M2V.Util.dataType.renderAbsentPresentCell = function(ctx, value, row, column, size) {
         // TODO write a legend
         var color;
         value = value.toUpperCase();
         if ( value === 0 || value === "0" || value === "N" || value === "M" ) {
            color = "rgb(49,163,84)"; // green
         } else if ( value === 1 || value === "1" || value === "Y" || value === "F" ) {
            color = "rgb(179,88,6)"; // brown
         } else {
            color = "rgb(99,99,99)"; // unknown
         }

         ctx.fillStyle = color;
         ctx.fillRect( 1, 1, size.width - 2, size.height - 2 );
      };

      // TODO: provide centering helper function
      var renderDefaults = {
         text : function(ctx, box, text) {
            ctx.translate( 0, box.height / 2 + 4 ); // fontSize
            ctx.fillText( text, 0, 0 );
         },
         label : function(ctx, box, text) {
            ctx.translate( 0, box.height / 2 + 4 ); // fontSize
            ctx.fillText( text, 0, 0 );
         },
         group : function(ctx, box, value) {
            ctx.translate( 0, box.height / 2 + 4 ); // fontSize
            ctx.fillText( value, 0, 0 );
         },
         type : function(ctx, box, value) {
            ctx.translate( 0, box.height / 2 + 4 ); // fontSize
            ctx.fillText( value, 0, 0 );
         },
         metaNumber : function(ctx, box, value) {
            ctx.fillStyle = 'rgb(0,100,0)';
            ctx.fillRect( 0, 1, box.width * value, box.height - 2 );
         }
      };

      var heatmap = Ext.create( 'Matrix2Viz', {
         // renderTo: "matrix_div",
         // renderTo: document.body,
         // renderTo: this.down('#matrix_div').getEl(),
         renderTo : this.el,
         width : 900,
         height : 700,

         data : dataMatrix,
         labelFormat : {
            row : [ {
               name : 'Subject',
               size : 90
            },
            // {name: 'group', size: 50}
            ],
            column : [ {
               name : 'Phenotype',
               size : 100
            },
            // {name: 'metaNumber', size: 10},
            // {name: 'type', size: 50}
            ]
         },
         renderers : {
            cell : {
               'gender' : {
                  render : M2V.Util.dataType.renderGenderCell
               },
               'binary' : {
                  render : M2V.Util.dataType.renderAbsentPresentCell
               },
               'numeric' : {
                  render : function(ctx, data, row, column, size) {
                     var red = Math.round( 255 * (data / (column.range.high - column.range.low)) );
                     ctx.fillStyle = "rgb(" + red + ",0,0)";
                     ctx.fillRect( 1, 1, size.width - 2, size.height - 2 );
                  }
               }
            },
            rowMetadata : {
               'Subject' : {
                  render : renderDefaults.text
               },
            /*
             * 'group': { render: renderDefaults.text }
             */
            },
            columnMetadata : {
               'Phenotype' : {
                  render : renderDefaults.text
               },
            /*
             * 'metaNumber': { render: renderDefaults.metaNumber }, 'type': { render: renderDefaults.text }
             */
            }
         },
{'fraction_non_alphanumeric': 0.13282954191336865, 'fraction_numerical': 0.020956684325334995, 'mean_word_length': 1.5465185479071613, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '536667', 'n_tokens_mistral': 3904, 'n_tokens_neox': 3616, 'n_words': 918}