Break out anno plus button (#1473)

* break out plus button

* remove menu item

* padding, remove icon

* icon padding

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

@@ -6,9 +6,13 @@ import {
   MenuItem,
   Popover,
   Position,
+  Tooltip,
+  Icon,
   PopoverInteractionKind,
 } from "@blueprintjs/core";
 
+import * as globals from "../../../globals";
+
 @connect((state) => ({
   annotations: state.annotations,
 }))
@@ -56,46 +60,57 @@ class AnnoMenuCategory extends React.PureComponent {
     return (
       <>
         {isUserAnno ? (
-          <Popover
+          <>
-            interactionKind={PopoverInteractionKind.HOVER}
+            <Tooltip
-            boundary="window"
+              content={createText}
-            position={Position.RIGHT_TOP}
+              position="bottom"
-            content={
+              hoverOpenDelay={globals.tooltipHoverOpenDelay}
-              <Menu>
+            >
-                <MenuItem
+              <Button
-                  icon="tag"
+                style={{ marginLeft: 0, marginRight: 2 }}
-                  data-testclass="handleAddNewLabelToCategory"
+                data-testclass="handleAddNewLabelToCategory"
-                  data-testid={`${metadataField}:add-new-label-to-category`}
+                data-testid={`${metadataField}:add-new-label-to-category`}
-                  onClick={this.activateAddNewLabelMode}
+                icon={<Icon icon="plus" iconSize={10} />}
-                  text={createText}
+                onClick={this.activateAddNewLabelMode}
-                />
+                small
-                <MenuItem
+                minimal
-                  icon="edit"
+              />
-                  disabled={annotations.isEditingCategoryName}
+            </Tooltip>
-                  data-testclass="activateEditCategoryMode"
+            <Popover
-                  data-testid={`${metadataField}:edit-category-mode`}
+              interactionKind={PopoverInteractionKind.HOVER}
-                  onClick={this.activateEditCategoryMode}
+              boundary="window"
-                  text={editText}
+              position={Position.RIGHT_TOP}
-                />
+              content={
-                <MenuItem
+                <Menu>
-                  icon="delete"
+                  <MenuItem
-                  intent="danger"
+                    icon="edit"
-                  data-testclass="handleDeleteCategory"
+                    disabled={annotations.isEditingCategoryName}
-                  data-testid={`${metadataField}:delete-category`}
+                    data-testclass="activateEditCategoryMode"
-                  onClick={this.handleDeleteCategory}
+                    data-testid={`${metadataField}:edit-category-mode`}
-                  text={deleteText}
+                    onClick={this.activateEditCategoryMode}
-                />
+                    text={editText}
-              </Menu>
+                  />
-            }
+                  <MenuItem
-          >
+                    icon="delete"
-            <Button
+                    intent="danger"
-              style={{ marginLeft: 0 }}
+                    data-testclass="handleDeleteCategory"
-              data-testclass="seeActions"
+                    data-testid={`${metadataField}:delete-category`}
-              data-testid={`${metadataField}:see-actions`}
+                    onClick={this.handleDeleteCategory}
-              icon="more"
+                    text={deleteText}
-              minimal
+                  />
-            />
+                </Menu>
-          </Popover>
+              }
+            >
+              <Button
+                style={{ marginLeft: 0, marginRight: 5 }}
+                data-testclass="seeActions"
+                data-testid={`${metadataField}:see-actions`}
+                icon={<Icon icon="more" iconSize={10} />}
+                small
+                minimal
+              />
+            </Popover>
+          </>
         ) : null}
       </>
     );

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

@@ -278,9 +278,6 @@ class Category extends React.Component {
               }}
               onClick={this.handleCategoryClick}
             >
-              {isUserAnno ? (
-                <Icon style={{ marginRight: 5 }} icon="tag" iconSize={16} />
-              ) : null}
               {truncatedString || metadataField}
               {isExpanded ? (
                 <FaChevronDown

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

@@ -7,6 +7,7 @@ import {
   MenuItem,
   Popover,
   Position,
+  Icon,
   PopoverInteractionKind,
   Tooltip,
 } from "@blueprintjs/core";
@@ -343,7 +344,7 @@ class CategoryValue extends React.Component {
         }
         data-testclass="categorical-row"
         style={{
-          padding: "4px 7px",
+          padding: "4px 0px 4px 7px",
           display: "flex",
           alignItems: "baseline",
           justifyContent: "space-between",
@@ -561,14 +562,14 @@ class CategoryValue extends React.Component {
                 >
                   <Button
                     style={{
-                      marginLeft: 0,
+                      marginLeft: 2,
                       position: "relative",
                       top: -1,
                       minHeight: 16,
                     }}
                     data-testclass="seeActions"
                     data-testid={`${metadataField}:${displayString}:see-actions`}
-                    icon="more"
+                    icon={<Icon icon="more" iconSize={10} />}
                     small
                     minimal
                   />