Merge pull request #776 from MichaelWrana/tooltip-links

Modified tooltips to include PC Search Link

Author: jvwong

src/client/common/cy/events/show-tooltip.js

@@ -4,22 +4,24 @@ const MetadataTip = require('../tooltips/');
 const bindShowTooltip = (cy,showTooltipsOnEdges) => {
   const selector= 'node'+(showTooltipsOnEdges ?',edge':'');
   cy.on('showTooltip', selector, function (evt) {
+
+    
     const node = evt.target;
 
     const data = node.data();
     const name = data.label;
     const cy = evt.cy;
 
-    //Create or get tooltip HTML object
-    let html = node.scratch('_tooltip');
-    if (!(html)) {
-      html = new MetadataTip(name, data, node);
-      node.scratch('_tooltip', html);
-    }
-
     //if the selection is a compartment, do not display a tooltip
-    if(data.class !== "compartment")
+    if(data.class !== "compartment"){
+      //Create or get tooltip HTML object
+      let html = node.scratch('_tooltip');
+      if (!(html)) {
+        html = new MetadataTip(name, data, node);
+        node.scratch('_tooltip', html);
+      }
       html.show(cy);
+    }
   });
 };
 

src/client/common/cy/tooltips/format-content.js

@@ -76,6 +76,14 @@ const defaultHandler = (pair) => {
   ]);
 };
 
+//Handle PC Search Related Fields
+const searchLinkHandler = (pair) => {
+  let searchTerm = pair[1];
+  return h('div.fake-paragraph',
+  h('a.tooltip-search-link',{href:"/search?q=" + searchTerm,target:"_blank"},'Search Pathway Commons for "' + searchTerm + '"')
+  );
+};
+
 const metaDataKeyMap = new Map()
   .set('Standard Name', standardNameHandler)
   .set('Display Name', displayNameHandler)
@@ -84,7 +92,8 @@ const metaDataKeyMap = new Map()
   .set('Database IDs', databaseHandler)
   .set('Publications', publicationHandler)
   .set('List',listHandler)
-  .set('Detailed Views',viwerListHandler);
+  .set('Detailed Views',viwerListHandler)
+  .set('Search Link',searchLinkHandler);
 
  /**
   * parseMetadata(pair, trim)

src/client/common/cy/tooltips/index.js

@@ -14,6 +14,16 @@ class MetadataTip {
   constructor(name, data, cyElement) {
     this.name = name;
     this.data = data.parsedMetadata;
+    //Add an extra piece of metadata to generate the search link
+    //search text needs to be generated differently for 'processes'
+      if(data.class === "process"){
+        for(let i in this.data){
+          if(this.data[i][0]==="Display Name")
+            this.data.push(["Search Link",this.data[i][1]]);
+        }
+      }else{
+        this.data.push(["Search Link",this.name]);
+      }
     this.cyElement = cyElement;
     this.db = config.databases;
     this.viewStatus = {};
@@ -83,9 +93,7 @@ class MetadataTip {
 
     if (!(this.data)) { this.data = []; }
     return h('div.tooltip-image', [
-      h('div.tooltip-heading', [
-        h('a.tooltip-heading-link',{href:"/search?&q="+this.name,target:"_blank"},this.name),
-        ]),
+      h('div.tooltip-heading', this.name),
       h('div.tooltip-internal', h('div', (data).map(item => formatContent.parseMetadata(item, true, expandFunction, this.name)), this))
     ]);
   }
@@ -112,9 +120,7 @@ class MetadataTip {
 
     if (!(this.data)) { this.data = []; }
     return h('div.tooltip-image', [
-      h('div.tooltip-heading', [
-      h('a.tooltip-heading-link',{href:"/search?&q="+this.name,target:"_blank"},this.name),
-      ]),
+      h('div.tooltip-heading', this.name),
       h('div.tooltip-internal', h('div', (data).map(item => formatContent.parseMetadata(item, !this.isExpanded(item[0]), getExpansionFunction(item), this.name), this)))
     ]
     );

src/styles/features/view/toolTip.css

@@ -133,8 +133,9 @@
   line-height: 1.5;
 }
 
-.tooltip-heading-link{
+.tooltip-search-link{
   text-decoration: underline;
+  font-weight:bold;
   display:inline;
   color: var(--link);
 }