fix long values in sidebar (#911)

* tweak overflow and add truncation

* remove log

* alter char limit to evenly space around occupancy

* use global hover delay

* create constants for truncation lengths and fix truncation on self color

* create globals for short and long sidebar value length

* fix alignment

* create quick delay global

client/src/components/categorical/value.js

@@ -15,6 +15,7 @@ import {
 import Occupancy from "./occupancy";
 import * as globals from "../../globals";
 import styles from "./categorical.css";
+import { Tooltip } from "@blueprintjs/core";
 
 @connect(state => ({
   categoricalSelection: state.categoricalSelection,
@@ -203,6 +204,30 @@ class CategoryValue extends React.Component {
       categories = schema.annotations.obsByName[colorAccessor]?.categories;
     }
 
+    let truncatedString = null;
+
+    if (
+      colorAccessor &&
+      !isColorBy &&
+      displayString.length > globals.categoryLabelDisplayStringShortLength
+    ) {
+      truncatedString = `${displayString.slice(
+        0,
+        globals.categoryLabelDisplayStringShortLength / 2
+      )}…${displayString.slice(
+        -globals.categoryLabelDisplayStringShortLength / 2
+      )}`;
+    } else if (
+      displayString.length > globals.categoryLabelDisplayStringLongLength
+    ) {
+      truncatedString = `${displayString.slice(
+        0,
+        globals.categoryLabelDisplayStringLongLength / 2
+      )}…${displayString.slice(
+        -globals.categoryLabelDisplayStringLongLength / 2
+      )}`;
+    }
+
     return (
       <div
         key={i}
@@ -219,37 +244,40 @@ class CategoryValue extends React.Component {
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseExit}
       >
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <div
-          <div
+          style={{
-            style={{
+            margin: 0,
-              margin: 0,
+            padding: 0,
-              padding: 0,
+            userSelect: "none",
-              userSelect: "none",
+            width: globals.leftSidebarWidth - 130,
-              width: globals.leftSidebarWidth - 240,
+            display: "flex",
-              display: "flex",
+            justifyContent: "space-between"
-              justifyContent: "flex-start"
+          }}
-            }}
+        >
-          >
+          <div style={{ display: "flex", alignItems: "baseline" }}>
-            <div style={{ display: "flex" }}>
+            <label className="bp3-control bp3-checkbox" style={{ margin: 0 }}>
-              <label className="bp3-control bp3-checkbox" style={{ margin: 0 }}>
+              <input
-                <input
+                onChange={selected ? this.toggleOff : this.toggleOn}
-                  onChange={selected ? this.toggleOff : this.toggleOn}
+                data-testclass="categorical-value-select"
-                  data-testclass="categorical-value-select"
+                data-testid={`categorical-value-select-${metadataField}-${displayString}`}
-                  data-testid={`categorical-value-select-${metadataField}-${displayString}`}
+                checked={selected}
-                  checked={selected}
+                type="checkbox"
-                  type="checkbox"
+              />
-                />
+              <span
-                <span
+                className="bp3-control-indicator"
-                  className="bp3-control-indicator"
+                onMouseEnter={this.handleMouseExit}
-                  onMouseEnter={this.handleMouseExit}
+                onMouseLeave={this.handleMouseEnter}
-                  onMouseLeave={this.handleMouseEnter}
+              />
-                />
+            </label>
-              </label>
+            <Tooltip
+              content={displayString}
+              disabled={truncatedString === null}
+              hoverOpenDelay={globals.tooltipHoverOpenDelayQuick}
+            >
               <span
                 data-testid={`categorical-value-${metadataField}-${displayString}`}
                 data-testclass="categorical-value"
                 style={{
-                  wordBreak: "break-all",
                   color:
                     displayString === globals.unassignedCategoryLabel
                       ? "#ababab"
@@ -257,19 +285,25 @@ class CategoryValue extends React.Component {
                   fontStyle:
                     displayString === globals.unassignedCategoryLabel
                       ? "italic"
-                      : "normal"
+                      : "normal",
+                  display: "inline-block",
+                  overflow: "hidden",
+                  lineHeight: "1.1em",
+                  height: "1.1em",
+                  wordBreak: "break-all",
+                  verticalAlign: "middle"
                 }}
               >
                 {annotations.isEditingLabelName &&
                 annotations.labelEditable.category === metadataField &&
                 annotations.labelEditable.label === categoryIndex
                   ? null
-                  : displayString}
+                  : truncatedString || displayString}
               </span>
-            </div>
+            </Tooltip>
             {isUserAnno &&
-            annotations.isEditingLabelName &&
             annotations.labelEditable.category === metadataField &&
+            annotations.isEditingLabelName &&
             annotations.labelEditable.label === categoryIndex ? (
               <form
                 onSubmit={e => {

client/src/globals.js

@@ -68,9 +68,12 @@ export const leftSidebarSectionHeading = {
   letterSpacing: ".05em"
 };
 export const leftSidebarSectionPadding = 10;
+export const categoryLabelDisplayStringLongLength = 35;
+export const categoryLabelDisplayStringShortLength = 15;
 
 /* various timing-related behaviors */
 export const tooltipHoverOpenDelay = 1000; /* ms delay before a tooltip displays */
+export const tooltipHoverOpenDelayQuick = 500;
 
 let _API = {
   // prefix: "http://api.clustering.czi.technology/api/",