add/fix label tooltips (#1278)

* Move tooltip to right

* Change function to only return truncated string

* add tooltip to category label

* use position instead of PopoutPosition

client/src/components/categorical/category.js

@@ -2,7 +2,13 @@ import React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
 import { FaChevronRight, FaChevronDown } from "react-icons/fa";
-import { AnchorButton, Button, Tooltip, Icon } from "@blueprintjs/core";
+import {
+  AnchorButton,
+  Button,
+  Tooltip,
+  Icon,
+  Position
+} from "@blueprintjs/core";
 import CategoryFlipperLayout from "./categoryFlipperLayout";
 import AnnoMenu from "./annoMenuCategory";
 import AnnoDialogEditCategoryName from "./annoDialogEditCategoryName";
@@ -164,6 +170,11 @@ class Category extends React.Component {
       false
     );
 
+    const truncatedString = maybeTruncateString(
+      metadataField,
+      globals.categoryDisplayStringMaxLength
+    );
+
     return (
       <CategoryFlipperLayout
         metadataField={metadataField}
@@ -191,40 +202,49 @@ class Category extends React.Component {
             />
             <span className="bp3-control-indicator" />
           </label>
-          <span
+          <Tooltip
-            data-testid={`${metadataField}:category-expand`}
+            content={metadataField}
-            style={{
+            disabled={truncatedString === null}
-              cursor: "pointer",
+            hoverOpenDelay={globals.tooltipHoverOpenDelayQuick}
-              display: "inline-block"
+            position={Position.LEFT}
-            }}
+            usePortal
-            onClick={() => {
+            modifiers={{
-              const editingCategory =
+              preventOverflow: { enabled: false },
-                annotations.isEditingCategoryName &&
+              hide: { enabled: false }
-                annotations.categoryBeingEdited === metadataField;
-              if (!editingCategory) {
-                onExpansionChange(metadataField);
-              }
             }}
           >
-            {isUserAnno ? (
+            <span
-              <Icon style={{ marginRight: 5 }} icon="tag" iconSize={16} />
+              data-testid={`${metadataField}:category-expand`}
-            ) : null}
+              style={{
-            {maybeTruncateString(
+                cursor: "pointer",
-              metadataField,
+                display: "inline-block"
-              globals.categoryDisplayStringMaxLength
+              }}
-            )}
+              onClick={() => {
-            {isExpanded ? (
+                const editingCategory =
-              <FaChevronDown
+                  annotations.isEditingCategoryName &&
-                data-testclass="category-expand-is-expanded"
+                  annotations.categoryBeingEdited === metadataField;
-                style={{ fontSize: 10, marginLeft: 5 }}
+                if (!editingCategory) {
-              />
+                  onExpansionChange(metadataField);
-            ) : (
+                }
-              <FaChevronRight
+              }}
-                data-testclass="category-expand-is-not-expanded"
+            >
-                style={{ fontSize: 10, marginLeft: 5 }}
+              {isUserAnno ? (
-              />
+                <Icon style={{ marginRight: 5 }} icon="tag" iconSize={16} />
-            )}
+              ) : null}
-          </span>
+              {truncatedString || metadataField}
+              {isExpanded ? (
+                <FaChevronDown
+                  data-testclass="category-expand-is-expanded"
+                  style={{ fontSize: 10, marginLeft: 5 }}
+                />
+              ) : (
+                <FaChevronRight
+                  data-testclass="category-expand-is-not-expanded"
+                  style={{ fontSize: 10, marginLeft: 5 }}
+                />
+              )}
+            </span>
+          </Tooltip>
         </div>
         {<AnnoDialogEditCategoryName metadataField={metadataField} />}
         {<AnnoDialogAddLabel metadataField={metadataField} />}

client/src/components/categorical/value.js

@@ -393,6 +393,12 @@ class CategoryValue extends React.Component {
               content={displayString}
               disabled={truncatedString === null}
               hoverOpenDelay={globals.tooltipHoverOpenDelayQuick}
+              position={Position.LEFT}
+              usePortal
+              modifiers={{
+                preventOverflow: { enabled: false },
+                hide: { enabled: false }
+              }}
             >
               <span
                 data-testid={`categorical-value-${metadataField}-${displayString}`}

client/src/util/maybeTruncateString.js

@@ -1,18 +1,12 @@
 const maybeTruncateString = (str, maxLength) => {
-
   let truncatedString = null;
-  if (
+  if (str.length > maxLength) {
-    str.length > maxLength
+    truncatedString = `${str.slice(0, maxLength / 2)}…${str.slice(
-  ) {
-    truncatedString = `${str.slice(
-      0,
-      maxLength / 2
-    )}…${str.slice(
       -maxLength / 2
     )}`;
   }
 
-  return truncatedString || str;
+  return truncatedString;
-}
+};
 
 export default maybeTruncateString;