From 234f25b7825900f12da50992682388baeda2e818 Mon Sep 17 00:00:00 2001
From: Colin Megill <colinmegill@gmail.com>
Date: Tue, 10 Mar 2020 21:14:26 -0400
Subject: [PATCH] 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   |  7 +++++--
 client/src/components/categorical/category.js |  3 ++-
 client/src/globals.js                         |  1 +
 client/src/util/maybeTruncateString.js        | 18 ++++++++++++++++++
 4 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 client/src/util/maybeTruncateString.js

diff --git a/client/__tests__/e2e/e2eAnnotations.test.js b/client/__tests__/e2e/e2eAnnotations.test.js
index 30677321..7bd9ade1 100644
--- a/client/__tests__/e2e/e2eAnnotations.test.js
+++ b/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) {
diff --git a/client/src/components/categorical/category.js b/client/src/components/categorical/category.js
index 9552086e..2e6b17ed 100644
--- a/client/src/components/categorical/category.js
+++ b/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"
diff --git a/client/src/globals.js b/client/src/globals.js
index 7948288c..ec309086 100644
--- a/client/src/globals.js
+++ b/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;
diff --git a/client/src/util/maybeTruncateString.js b/client/src/util/maybeTruncateString.js
new file mode 100644
index 00000000..f7bbf12c
--- /dev/null
+++ b/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;
\ No newline at end of file