Short names (#794)

* truncating names of phenotypes to 30 chars * better when it's 400px * hiding tooltip for now
broadinstitute · Nov 20, 2024 · 91f6aea · 91f6aea
1 parent 5cfc1e8
commit 91f6aea
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 6 deletions.
diff --git a/src/components/Heatmap.vue b/src/components/Heatmap.vue
@@ -64,7 +64,8 @@ export default Vue.component("heatmap", {
             separator: "___",
             lo: null,
             mid: null,
-            hi: null
+            hi: null,
+            alwaysHideTooltip: true,
         };
     },
     modules: {
@@ -241,6 +242,9 @@ export default Vue.component("heatmap", {
             scaleLegendWrapper.innerHTML = scaleLegendContent;
         },
         checkPosition(event) {
+            if (this.alwaysHideTooltip){
+                return;
+            }
             let e = event;
             let rect = e.target.getBoundingClientRect();
 
@@ -333,7 +337,10 @@ export default Vue.component("heatmap", {
 
             this.renderData.columns.map((c) => {
                 var div = document.createElement("div");
-                var t = document.createTextNode(this.getPhenotypeDescription(c));
+                let shortName = this.truncateColumn(
+                    this.getPhenotypeDescription(c)
+                );
+                var t = document.createTextNode(shortName);
                 div.appendChild(t);
                 div.setAttribute("style", "height: " + this.boxSize + "px;");
                 document
@@ -593,7 +600,7 @@ export default Vue.component("heatmap", {
             if (!this.renderConfig.truncateColumns){
                 return longString;
             }
-            return longString.length <= 25 ? longString : `${longString.slice(0,25)}...`;
+            return longString.length <= 30 ? longString : `${longString.slice(0,30)}...`;
         },
         getPhenotypeDescription(phenotypeName){
             if (!!this.phenotypeMap[phenotypeName]){

diff --git a/src/components/NetworkGraph.vue b/src/components/NetworkGraph.vue
@@ -98,7 +98,7 @@ export default Vue.component("NetworkGraph", {
         },
         containerStyle() {
             return {
-                height: !this.isEmbed ? "80vh" : "300px",
+                height: !this.isEmbed ? "80vh" : "400px",
                 width: "100%",
                 position: this.isFullscreen ? "fixed" : "relative",
                 top: this.isFullscreen ? "0" : "auto",

diff --git a/src/views/PIGEAN/Phenotype/Template.vue b/src/views/PIGEAN/Phenotype/Template.vue
@@ -336,7 +336,7 @@ a.btn-outline-primary:hover {
     padding: 10px;
 }
 #mechanism-graph-inner {
-    padding-top: 200px;
+    padding-top: 20px;
 }
 /* .network-container >>> div.vis-network {
     border: none;

diff --git a/src/views/PIGEAN/Phenotype/main.js b/src/views/PIGEAN/Phenotype/main.js
@@ -252,7 +252,7 @@ new Vue({
                 "construct the PheWAS and not to determine the factor weights.",
             heatmapConfig: {
                 type: "heat map",
-                label: "Mechanisms",
+                label: "Mechanisms PheWAS",
                 main: {
                     field: "Z",
                     label: "Z-score",