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>
     </>
   );

client/src/components/leftSidebar/topLeftLogoAndTitle.js

@@ -2,7 +2,6 @@
 import React from "react";
 import { connect } from "react-redux";
 import { Button } from "@blueprintjs/core";
-import { IconNames } from "@blueprintjs/icons";
 
 import * as globals from "../../globals";
 import Logo from "../framework/logo";
@@ -60,7 +59,6 @@ class LeftSideBar extends React.Component {
         </span>
         <Button
           minimal
-          icon={IconNames.BOOK}
           style={{
             fontSize: DATASET_TITLE_FONT_SIZE,
             position: "absolute",

client/src/components/menubar/infoMenu.js

@@ -17,7 +17,7 @@ const InformationMenu = React.memo((props) => {
           <Menu>
             <MenuItem
               onClick={() => handleClick(dispatch)}
-              icon={IconNames.BOOK}
+              icon={IconNames.INFO_SIGN}
               text="Dataset Overview"
             />
 

client/src/components/util/truncate.js

@@ -7,6 +7,8 @@ const SPLIT_STYLE = {
   display: "flex",
   overflow: "hidden",
   justifyContent: "flex-start",
+  width: "100%", // There are probably additional styles that we don't want to stack
+  padding: 0,
 };
 
 const FIRST_HALF_STYLE = {
@@ -40,7 +42,7 @@ export default (props) => {
   ) {
     throw Error("Only pass a single child with text to Truncate");
   }
-  const originalString = children.props.children;
+  const originalString = String(children.props.children);
 
   let firstString;
   let secondString;
@@ -58,7 +60,7 @@ export default (props) => {
     }
   }
 
-  const inheritedColor = children.props.style.color;
+  const inheritedColor = children.props.style?.color;
 
   const splitStyle = { ...children.props.style, ...SPLIT_STYLE };
   const secondHalfContentStyle = {
@@ -93,6 +95,7 @@ export default (props) => {
         preventOverflow: { enabled: false },
         hide: { enabled: false },
       }}
+      targetProps={{ style: children.props.style }}
     >
       {newChildren}
     </Tooltip>