Info Drawer format adjustments (#1853)

This PR tweaks the look and feel of the info drawer in response to QA from @signechambers1

client/src/components/infoDrawer/infoFormat.js

@@ -1,6 +1,8 @@
 import { H3, H1, UL, Classes } from "@blueprintjs/core";
 import React from "react";
 
+import Truncate from "../util/truncate";
+
 const renderContributors = (contributors, affiliations, skeleton) => {
   // eslint-disable-next-line no-constant-condition --  Temp removed contributor section to avoid publishing PII
   if (!contributors || contributors.length === 0 || true) return null;
@@ -79,23 +81,56 @@ const renderOrganism = (organism, skeleton) => {
   );
 };
 
+const ONTOLOGY_KEY = "ontology_term_id";
+const CAT_WIDTH = "30%";
+const VAL_WIDTH = "35%";
 // Render list of metadata attributes found in categorical field
-// Ignores categories with empty or null values
 const renderSingleValueCategories = (singleValueCategories, skeleton) => {
   if (singleValueCategories.size === 0) return null;
   return (
     <>
       <H3 className={skeleton ? Classes.SKELETON : null}>Dataset Metadata</H3>
       <UL>
-        {Array.from(singleValueCategories).map((pair) => {
-          if (!pair[1] || pair[1] === "") return null;
-          return (
-            <li
-              className={skeleton ? Classes.SKELETON : null}
-              key={pair[0]}
-            >{`${pair[0]}: ${pair[1]}`}</li>
-          );
-        })}
+        {Array.from(singleValueCategories).reduce((elems, pair) => {
+          const [category, value] = pair;
+          // If the value is empty skip it
+          if (!value) return elems;
+
+          // If this category is a ontology term, let's add its value to the previous node
+          if (String(category).includes(ONTOLOGY_KEY)) {
+            const prevElem = elems.pop();
+            // Props aren't extensible so we must clone and alter the component to append the new child
+            elems.push(
+              React.cloneElement(
+                prevElem,
+                prevElem.props,
+                // Concat returns a new array
+                prevElem.props.children.concat([
+                  <Truncate key="ontology">
+                    <span style={{ width: VAL_WIDTH }}>{value}</span>
+                  </Truncate>,
+                ])
+              )
+            );
+          } else {
+            // Create the list item
+            elems.push(
+              <li
+                className={skeleton ? Classes.SKELETON : null}
+                key={category}
+                style={{ width: "100%" }}
+              >
+                <Truncate>
+                  <span style={{ width: CAT_WIDTH }}>{`${category}:`}</span>
+                </Truncate>
+                <Truncate>
+                  <span style={{ width: VAL_WIDTH }}>{value}</span>
+                </Truncate>
+              </li>
+            );
+          }
+          return elems;
+        }, [])}
       </UL>
     </>
   );