Warnings on anno textfields (#1023)

*  Warning for creating new label with an existing name

* category dup

* italics

client/src/components/categorical/categorical.js

@@ -7,7 +7,8 @@ import {
   InputGroup,
   Dialog,
   Classes,
-  MenuItem
+  MenuItem,
+  Colors
 } from "@blueprintjs/core";
 import { Select } from "@blueprintjs/select";
 import { connect } from "react-redux";
@@ -57,7 +58,11 @@ class Categories extends React.Component {
   };
 
   render() {
-    const { createAnnoModeActive, categoryToDuplicate } = this.state;
+    const {
+      createAnnoModeActive,
+      categoryToDuplicate,
+      newCategoryText
+    } = this.state;
     const {
       categoricalSelection,
       writableCategoriesEnabled,
@@ -76,7 +81,9 @@ class Categories extends React.Component {
       >
         {/* READ ONLY CATEGORICAL FIELDS */}
         {/* this is duplicative but flat, could be abstracted */}
-        {_.map(allCategoryNames, catName =>
+        {_.map(
+          allCategoryNames,
+          catName =>
             !schema.annotations.obsByName[catName].writable ? (
               <Category
                 key={catName}
@@ -87,7 +94,9 @@ class Categories extends React.Component {
             ) : null
         )}
         {/* WRITEABLE FIELDS */}
-        {_.map(allCategoryNames, catName =>
+        {_.map(
+          allCategoryNames,
+          catName =>
             schema.annotations.obsByName[catName].writable ? (
               <Category
                 key={catName}
@@ -116,12 +125,33 @@ class Categories extends React.Component {
                     <p>New, unique category name:</p>
                     <InputGroup
                       autoFocus
+                      intent={
+                        allCategoryNames.indexOf(newCategoryText) !== -1
+                          ? "warning"
+                          : "none"
+                      }
                       onChange={e =>
                         this.setState({ newCategoryText: e.target.value })
                       }
                       leftIcon="tag"
                     />
+                    <p
+                      style={{
+                        marginTop: 7,
+                        visibility:
+                          allCategoryNames.indexOf(newCategoryText) !== -1
+                            ? "visible"
+                            : "hidden",
+                        color: Colors.ORANGE3
+                      }}
+                    >
+                      <span style={{ fontStyle: "italic" }}>
+                        {newCategoryText}
+                      </span>{" "}
+                      already exists
+                    </p>
                   </div>
+
                   <p>
                     Optionally duplicate all labels & cell assignments from
                     existing category into new category:
@@ -157,6 +187,9 @@ class Categories extends React.Component {
                     </Tooltip>
                     <Button
                       onClick={this.handleCreateUserAnno}
+                      disabled={
+                        allCategoryNames.indexOf(newCategoryText) !== -1
+                      }
                       intent="primary"
                       type="submit"
                     >

client/src/components/categorical/category.js

@@ -2,7 +2,7 @@ import React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
 import { FaChevronRight, FaChevronDown } from "react-icons/fa";
-import { Flipper, Flipped, Spring } from "react-flip-toolkit";
+import { Flipper, Flipped } from "react-flip-toolkit";
 import {
   Button,
   Tooltip,
@@ -14,7 +14,8 @@ import {
   Classes,
   Icon,
   Position,
-  PopoverInteractionKind
+  PopoverInteractionKind,
+  Colors
 } from "@blueprintjs/core";
 
 import * as globals from "../../globals";
@@ -345,11 +346,38 @@ class Category extends React.Component {
                         <p>New, unique label name:</p>
                         <InputGroup
                           autoFocus
+                          intent={
+                            universe.schema.annotations.obsByName[
+                              metadataField
+                            ].categories.indexOf(newLabelText) !== -1
+                              ? "warning"
+                              : "none"
+                          }
                           onChange={e =>
                             this.setState({ newLabelText: e.target.value })
                           }
                           leftIcon="tag"
                         />
+                        <p
+                          style={{
+                            marginTop: 7,
+                            visibility:
+                              universe.schema.annotations.obsByName[
+                                metadataField
+                              ].categories.indexOf(newLabelText) !== -1
+                                ? "visible"
+                                : "hidden",
+                            color: Colors.ORANGE3
+                          }}
+                        >
+                          <span style={{ fontStyle: "italic" }}>
+                            {newLabelText}
+                          </span>{" "}
+                          already exists within{" "}
+                          <span style={{ fontStyle: "italic" }}>
+                            {metadataField}
+                          </span>
+                        </p>
                       </div>
                     </div>
                     <div className={Classes.DIALOG_FOOTER}>

client/src/reducers/annotations.js

@@ -5,7 +5,7 @@ const Annotations = (
   state = {
     isEditingCategoryName: false,
     isEditingLabelName: false,
-    categoryBeingEdited: false,
+    categoryBeingEdited: null,
     categoryAddingNewLabel: null,
     labelEditable: { category: null, label: null }
   },
@@ -46,7 +46,7 @@ const Annotations = (
     case "annotation: category edited":
       return {
         ...state,
-        isEditingCategoryName: true,
+        isEditingCategoryName: false,
         categoryBeingEdited: null
       };