refactor to use Truncate component

client/src/components/categorical/category/index.js

@@ -2,14 +2,14 @@ import React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
 import { FaChevronRight, FaChevronDown } from "react-icons/fa";
-import { AnchorButton, Button, Tooltip, Position } from "@blueprintjs/core";
+import { AnchorButton, Button, Tooltip } from "@blueprintjs/core";
 import CategoryFlipperLayout from "./categoryFlipperLayout";
 import AnnoMenu from "./annoMenuCategory";
 import AnnoDialogEditCategoryName from "./annoDialogEditCategoryName";
 import AnnoDialogAddLabel from "./annoDialogAddLabel";
+import Truncate from "../../util/truncate";
 
 import * as globals from "../../../globals";
-import maybeTruncateString from "../../../util/maybeTruncateString";
 
 @connect((state, ownProps) => {
   const { metadataField } = ownProps;
@@ -114,10 +114,6 @@ 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
-    );
 
     const checkboxID = `category-select-${metadataField}`;
 
@@ -145,26 +141,16 @@ class Category extends React.Component {
               <input disabled id={checkboxID} checked type="checkbox" />
               <span className="bp3-control-indicator" />
             </label>
-            <Tooltip
+            <Truncate fontSize={12} size={220}>
-              content={metadataField}
-              disabled={truncatedString === null}
-              hoverOpenDelay={globals.tooltipHoverOpenDelayQuick}
-              position={Position.LEFT}
-              usePortal
-              modifiers={{
-                preventOverflow: { enabled: false },
-                hide: { enabled: false },
-              }}
-            >
               <span
                 style={{
                   cursor: "pointer",
                   display: "inline-block",
                 }}
               >
-                {truncatedString || metadataField}
+                {metadataField}
               </span>
-            </Tooltip>
+            </Truncate>
           </div>
           <div>
             <Button minimal loading intent="primary" />
@@ -199,21 +185,20 @@ class Category extends React.Component {
       false
     );
 
-    const truncatedString = maybeTruncateString(
-      metadataField,
-      globals.categoryDisplayStringMaxLength
-    );
-
     if (
       !isUserAnno &&
       schema?.annotations?.obsByName[metadataField]?.categories?.length === 1
     ) {
       return (
         <div style={{ marginBottom: 10, marginTop: 4 }}>
-          <span style={{ fontWeight: 700 }}>
+          <Truncate size={150} fontSize={12}>
-            {truncatedString || metadataField}
+            <span style={{ fontWeight: 700 }}>{metadataField}</span>
+          </Truncate>
+          <Truncate size={150} fontSize={12}>
+            <span>
+              {`: ${schema.annotations.obsByName[metadataField].categories[0]}`}
             </span>
-          : {schema.annotations.obsByName[metadataField].categories[0]}
+          </Truncate>
         </div>
       );
     }
@@ -246,17 +231,6 @@ class Category extends React.Component {
             />
             <span className="bp3-control-indicator" />
           </label>
-          <Tooltip
-            content={metadataField}
-            disabled={truncatedString === null}
-            hoverOpenDelay={globals.tooltipHoverOpenDelayQuick}
-            position={Position.LEFT}
-            usePortal
-            modifiers={{
-              preventOverflow: { enabled: false },
-              hide: { enabled: false },
-            }}
-          >
           <span
             role="menuitem"
             tabIndex="0"
@@ -272,7 +246,9 @@ class Category extends React.Component {
             }}
             onClick={this.handleCategoryClick}
           >
-              {truncatedString || metadataField}
+            <Truncate fontSize={12} size={220}>
+              <span>{metadataField}</span>
+            </Truncate>
             {isExpanded ? (
               <FaChevronDown
                 data-testclass="category-expand-is-expanded"
@@ -285,7 +261,6 @@ class Category extends React.Component {
               />
             )}
           </span>
-          </Tooltip>
         </div>
         {<AnnoDialogEditCategoryName metadataField={metadataField} />}
         {<AnnoDialogAddLabel metadataField={metadataField} />}