use phovea/phovea_vis#45 to show labels in small heatmap

Caleydo · Mar 28, 2017 · 4e1ad69 · 4e1ad69
1 parent e40e7e5
commit 4e1ad69
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git a/src/app_constants.ts b/src/app_constants.ts
@@ -44,6 +44,8 @@ export class AppConstants {
    */
   static PARSE_DATE_FORMATS = ['YYYY_MM_DD', 'YYYY-MM-DD', 'YYYY'];
 
+  static MAXIMAL_HEATMAP_LABEL_SIZE = 100;
+
   /**
    * Initial size of a heatmap cell
    * @type {number}

diff --git a/src/heat_map.ts b/src/heat_map.ts
@@ -82,10 +82,10 @@ class HeatMap implements IAppView {
       return;
     }
 
-    const options = {
+    const options = mixin({}, this.heatMapOptions, {
       initialScale: this.heatMapOptions.initialScale * scaleFactor,
-      color: this.heatMapOptions.color
-    };
+      labels: chooseLabel(dataset.nrow, dataset.ncol)
+    });
 
     return Promise.all([plugins[0].load()])
       .then((args) => {
@@ -117,6 +117,19 @@ class HeatMap implements IAppView {
 }
 
 
+function chooseLabel(nrow: number, ncol: number) {
+  if (nrow < AppConstants.MAXIMAL_HEATMAP_LABEL_SIZE && ncol < AppConstants.MAXIMAL_HEATMAP_LABEL_SIZE) {
+    return 'CELL';
+  }
+  if (nrow < AppConstants.MAXIMAL_HEATMAP_LABEL_SIZE) {
+    return 'ROW';
+  }
+  if (ncol < AppConstants.MAXIMAL_HEATMAP_LABEL_SIZE) {
+    return 'COLUMN';
+  }
+  return 'NONE';
+}
+
 /**
  * Factory method to create a new HeatMap instance
  * @param parent

diff --git a/src/style.scss b/src/style.scss
@@ -436,3 +436,19 @@ select.form-control {
     }
   }
 }
+
+div.phovea-heatmap .phovea-heatmap-labels {
+  &.row-labels {
+    padding-right: 0.2em;
+  }
+  &.column-labels {
+    padding-left: 0.2em;
+    text-align: left;
+    overflow: visible;
+
+    > div {
+      transform: rotate(30deg);
+      transform-origin: bottom left;
+    }
+  }
+}