From 033727632cc126ac978176a4396292cd9fb4c419 Mon Sep 17 00:00:00 2001
From: Severiano Badajoz <sbadajoz@chanzuckerberg.com>
Date: Mon, 30 Mar 2020 15:48:52 -0700
Subject: [PATCH] add truncation to loading (#1320)

---
 client/src/components/categorical/category.js | 29 +++++++++++++++----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/client/src/components/categorical/category.js b/client/src/components/categorical/category.js
index d824f1dc..8086f51c 100644
--- a/client/src/components/categorical/category.js
+++ b/client/src/components/categorical/category.js
@@ -106,6 +106,11 @@ class Category extends React.Component {
     We are still loading this category, so render a "busy" signal.
     */
     const { metadataField } = this.props;
+    const truncatedString = maybeTruncateString(
+      metadataField,
+      globals.categoryDisplayStringMaxLength
+    );
+
     return (
       <div
         style={{
@@ -130,14 +135,26 @@ class Category extends React.Component {
               <input disabled checked={true} type="checkbox" />
               <span className="bp3-control-indicator" />
             </label>
-            <span
-              style={{
-                cursor: "pointer",
-                display: "inline-block"
+            <Tooltip
+              content={metadataField}
+              disabled={truncatedString === null}
+              hoverOpenDelay={globals.tooltipHoverOpenDelayQuick}
+              position={Position.LEFT}
+              usePortal
+              modifiers={{
+                preventOverflow: { enabled: false },
+                hide: { enabled: false }
               }}
             >
-              {metadataField}
-            </span>
+              <span
+                style={{
+                  cursor: "pointer",
+                  display: "inline-block"
+                }}
+              >
+                {truncatedString || metadataField}
+              </span>
+            </Tooltip>
           </div>
           <div>
             <Button minimal loading intent="primary" />