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

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: "190px",
-            width: 170,
+            marginLeft: "7px",
-            overflow: "hidden"
+            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>
     );

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 };