Conditionally truncate category string (#1206)

* maybe truncate string

* add string formatting to test

* correct import

* destructuring

* add maxlength

* test

* Respond to feedback from @bkmartinjr

Co-authored-by: Matt Weiden <538456+mweiden@users.noreply.github.com>

client/__tests__/e2e/e2eAnnotations.test.js

@@ -183,8 +183,11 @@ describe.each([
   });
 
   async function assertCategoryExists(categoryName) {
-    const result = await utils.waitByID(`${categoryName}:category-expand`);
-    expect(await result.evaluate(node => node.innerText)).toBe(categoryName);
+    const handle = await utils.waitByID(`${categoryName}:category-expand`);
+    const result = await handle.evaluate(node => node.innerText);
+    // slice beginning and end of category name result to account for truncation of long names
+    expect(result.slice(0, 10)).toBe(categoryName.slice(0, 10));
+    expect(result.slice(-10)).toBe(categoryName.slice(-10));
   }
 
   async function assertCategoryDoesNotExist(categoryName) {

client/src/components/categorical/category.js

@@ -9,6 +9,7 @@ import AnnoDialogEditCategoryName from "./annoDialogEditCategoryName";
 import AnnoDialogAddLabel from "./annoDialogAddLabel";
 
 import * as globals from "../../globals";
+import maybeTruncateString from "../../util/maybeTruncateString";
 
 @connect(state => ({
   colorAccessor: state.colors.colorAccessor,
@@ -204,7 +205,7 @@ class Category extends React.Component {
             {isUserAnno ? (
               <Icon style={{ marginRight: 5 }} icon="tag" iconSize={16} />
             ) : null}
-            {metadataField}
+            {maybeTruncateString(metadataField, globals.categoryDisplayStringMaxLength)}
             {isExpanded ? (
               <FaChevronDown
                 data-testclass="category-expand-is-expanded"

client/src/globals.js

@@ -73,6 +73,7 @@ export const leftSidebarSectionHeading = {
 export const leftSidebarSectionPadding = 10;
 export const categoryLabelDisplayStringLongLength = 27;
 export const categoryLabelDisplayStringShortLength = 11;
+export const categoryDisplayStringMaxLength = 27;
 
 export const maxUserDefinedGenes = 25;
 export const maxGenes = 100;

client/src/util/maybeTruncateString.js

@@ -0,0 +1,18 @@
+const maybeTruncateString = (str, maxLength) => {
+
+  let truncatedString = null;
+  if (
+    str.length > maxLength
+  ) {
+    truncatedString = `${str.slice(
+      0,
+      maxLength / 2
+    )}…${str.slice(
+      -maxLength / 2
+    )}`;
+  } 
+
+  return truncatedString || str;
+}
+
+export default maybeTruncateString;