From 32feb36172d7ed98f8af5fde8a036f9b29b570f4 Mon Sep 17 00:00:00 2001
From: Severiano Badajoz <sbadajoz@chanzuckerberg.com>
Date: Mon, 23 Sep 2019 16:31:54 -0700
Subject: [PATCH] better handle long dataset titles (#909)

* truncate middle of long title names

* remove width

* In the case of VERY long titles, hide overflow

* align bottom of title with cellxgene

* add character length global and shrink length
---
 .../leftSidebar/topLeftLogoAndTitle.js        | 25 +++++++++++++------
 client/src/globals.js                         |  2 ++
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/client/src/components/leftSidebar/topLeftLogoAndTitle.js b/client/src/components/leftSidebar/topLeftLogoAndTitle.js
index 5c2ed24b..a4acfc06 100644
--- a/client/src/components/leftSidebar/topLeftLogoAndTitle.js
+++ b/client/src/components/leftSidebar/topLeftLogoAndTitle.js
@@ -41,7 +41,8 @@ class LeftSideBar extends React.Component {
             userSelect: "none"
           }}
         >
-          cell<span
+          cell
+          <span
             style={{
               position: "relative",
               top: 1,
@@ -50,22 +51,32 @@ class LeftSideBar extends React.Component {
             }}
           >
             ×
-          </span>gene
+          </span>
+          gene
         </span>
         <div
           data-testid="header"
           style={{
             fontSize: 14,
             position: "relative",
-            top: -2,
+            top: -6,
             display: "inline-block",
-            marginLeft: 7,
-            width: 170,
-            overflow: "hidden"
+            width: "190px",
+            marginLeft: "7px",
+            height: "1.1em",
+            overflow: "hidden",
+            wordBreak: "break-all"
           }}
           title={datasetTitle}
         >
-          {datasetTitle}
+          {datasetTitle.length > globals.datasetTitleMaxCharacterCount
+            ? `${datasetTitle.substring(
+                0,
+                Math.floor(globals.datasetTitleMaxCharacterCount / 2)
+              )}…${datasetTitle.slice(
+                -Math.floor(globals.datasetTitleMaxCharacterCount / 2)
+              )}`
+            : datasetTitle}
         </div>
       </div>
     );
diff --git a/client/src/globals.js b/client/src/globals.js
index 8970cd90..94ddc20b 100644
--- a/client/src/globals.js
+++ b/client/src/globals.js
@@ -50,6 +50,8 @@ export const maxParagraphWidth = 600;
 export const cellxgeneTitleLeftPadding = 14;
 export const cellxgeneTitleTopPadding = 7;
 
+export const datasetTitleMaxCharacterCount = 25;
+
 export const maxControlsWidth = 800;
 
 export const graphMargin = { top: 20, right: 10, bottom: 30, left: 40 };