diff --git a/client/__tests__/e2e/__snapshots__/e2e.test.js.snap b/client/__tests__/e2e/__snapshots__/e2e.test.js.snap
index e7207fb7..d33b3262 100644
--- a/client/__tests__/e2e/__snapshots__/e2e.test.js.snap
+++ b/client/__tests__/e2e/__snapshots__/e2e.test.js.snap
@@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`did launch page launched 1`] = `"pbm c3k c3k pbm c3k c3k
"`;
+exports[`metadata loads categories and values from dataset appear 1`] = `"
"`;
diff --git a/client/__tests__/e2e/__snapshots__/e2eAnnotations.test.js.snap b/client/__tests__/e2e/__snapshots__/e2eAnnotations.test.js.snap
index 67b743ce..01ed89a8 100644
--- a/client/__tests__/e2e/__snapshots__/e2eAnnotations.test.js.snap
+++ b/client/__tests__/e2e/__snapshots__/e2eAnnotations.test.js.snap
@@ -2,22 +2,22 @@
exports[`annotations stacked bar graph renders 1`] = `
Array [
- "",
- "",
+ "",
+ "",
]
`;
exports[`annotations stacked bar graph renders 2`] = `
Array [
- "",
- "",
+ "",
+ "",
]
`;
-exports[`annotations truncate midpoint whitespace 1`] = `"123 456 456 123 456 456 123 456 456 123 456 456 T T T T Dataset Metadata
- {Array.from(singleValueCategories).map((pair) => {
- if (!pair[1] || pair[1] === "") return null;
- return (
- {`${pair[0]}: ${pair[1]}`}
- );
- })}
+ {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([
+
+ {value}
+ ,
+ ])
+ )
+ );
+ } else {
+ // Create the list item
+ elems.push(
+
+
+ {`${category}:`}
+
+
+ {value}
+
+
+ );
+ }
+ return elems;
+ }, [])}
);
diff --git a/client/src/components/leftSidebar/topLeftLogoAndTitle.js b/client/src/components/leftSidebar/topLeftLogoAndTitle.js
index f2346593..6224c1a1 100644
--- a/client/src/components/leftSidebar/topLeftLogoAndTitle.js
+++ b/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 {
{
handleClick(dispatch)}
- icon={IconNames.BOOK}
+ icon={IconNames.INFO_SIGN}
text="Dataset Overview"
/>
diff --git a/client/src/components/util/truncate.js b/client/src/components/util/truncate.js
index da06a58f..33e64dcc 100644
--- a/client/src/components/util/truncate.js
+++ b/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}