Update text displayed in details box, including link to more info on …

…OpenAlex
OKN-CollabNext · Apr 26, 2024 · dfde1c6 · dfde1c6
1 parent f1f0e6f
commit dfde1c6
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/observable/docs/index.md b/observable/docs/index.md
@@ -146,7 +146,6 @@ orb.events.on('node-click', (event) => {
 
 function getData(event) {
   selectedNode = event.node.data;
-  console.log(selectedNode)
   updateDetails(selectedNode)
 }
 
@@ -158,21 +157,21 @@ function updateDetails(selectedNode) {
   let html = '';
 
   if (selectedNode) {
-    html += `<h1>${selectedNode.label}</h1>`;
+    html += `<h2>${selectedNode.label}</h2>`;
 
     if (selectedNode.type === 'INSTITUTION') {
-      html += `<p><b>Institution type:</b> ${selectedNode.type}</p>`;
-      html += `<p><b>Homepage:</b> ${selectedNode.homepage}</p>`;
+      html += `<p><b>Homepage:</b> <a href="${selectedNode.homepage}">${selectedNode.homepage}</a></p>`;
       html += `<p><b>Works:</b> ${selectedNode.works_count}</p>`;
       html += `<p><b>Cited by:</b> ${selectedNode.cited_by_count}</p>`;
+      html += `<a href="${selectedNode.id}" target="_blank">View on OpenAlex</a>`;
     } else if (selectedNode.type === 'AUTHOR') {
       html += `<p><b>Works:</b> ${selectedNode.works_count}</p>`;
       html += `<p><b>Cited by:</b> ${selectedNode.cited_by_count}</p>`;
+      html += `<a href="${selectedNode.id}" target="_blank">View on OpenAlex</a>`;
     } else if (selectedNode.type === 'TOPIC') {
-      html += `<p><b>Description:</b> ${selectedNode.description}</p>`;
-      html += `<p><b>Field:</b> ${selectedNode.field}</p>`;
       html += `<p><b>Subfield:</b> ${selectedNode.subfield}</p>`;
       html += `<p><b>Domain:</b> ${selectedNode.domain}</p>`;
+      html += `<a href="${selectedNode.id}" target="_blank">View on OpenAlex</a>`;
     }
   }
 

diff --git a/observable/docs/styles.css b/observable/docs/styles.css
@@ -29,11 +29,12 @@ a {
   position: absolute;
   top: 2vmin;
   left: 2vmin;
-  width: 33%;
+  width: 35%;
   padding: 2vmin;
   border-radius: 1vmin;
   box-shadow: 5px 5px 8px 0px rgba(0,0,0,0.25);
   background-color: #fff;
+  line-height: 2;
 }
 
 /* LOADER */