Ontologies (#1110)

* add sample ontologies file

* add ontologies reducer

* Move select category to own component

* Dialog and Input factored out

* refactoring categorical, partway

* validationn

* anno

* suggest  populates input

* frontend for ontology working

* initial implementation of back-end support for ontologies

* edit is now dialog again

* autosuggest working on edit

* part way through create arbitrary label

* handle choice in function

* pass duplicate cat  prop

* editing works

* update test to match new CLI params

* fix occupancy alignment

* edit category as dialogue

* secondary button

* remove stubbed out ontologies

* add label setting upon new label creation

* Update legal characters for labels (#1119)

* Allow any term in the ontology (bypass legal name check)

* Add hyphens and parens to legal characters in names

* improve performance for large ontologies

* correctly handle case where ontologies are disabled

* fix logic error in CLI

Co-authored-by: Bruce Martin <bruce@chanzuckerberg.com>

* PR cleanup 1

* lint

* validate user generated labels

* finish hooking up connected suggest component

* protect against undefined callbacks

* Fix illegal characters error message

* break out npm run commands

* fix error detection on label edit

Co-authored-by: Bruce Martin <bruce@chanzuckerberg.com>
Co-authored-by: Sidney Bell <sidneymbell@users.noreply.github.com>

client/src/components/categorical/categorical.js

@@ -1,20 +1,13 @@
 // jshint esversion: 6
 import React from "react";
-import _ from "lodash";
-import {
-  Button,
-  Tooltip,
-  InputGroup,
-  Dialog,
-  Classes,
-  MenuItem,
-  Colors
-} from "@blueprintjs/core";
-import { Select } from "@blueprintjs/select";
+import { Button } from "@blueprintjs/core";
 import { connect } from "react-redux";
 import * as globals from "../../globals";
 import Category from "./category";
 import { AnnotationsHelpers } from "../../util/stateManager";
+import AnnoDialog from "./annoDialog";
+import AnnoInputs from "./annoInputs";
+import AnnoSelect from "./annoSelect";
 
 @connect(state => ({
   categoricalSelection: state.categoricalSelection,
@@ -71,7 +64,7 @@ class Categories extends React.Component {
     /* allow empty string */
     if (name === "") return false;
 
-    /* 
+    /*
     test for uniqueness against *all* annotation names, not just the subset
     we render as categorical.
     */
@@ -102,13 +95,25 @@ class Categories extends React.Component {
       "empty-string": "Blank names not allowed",
       duplicate: "Name must be unique",
       "trim-spaces": "Leading and trailing spaces not allowed",
-      "illegal-characters": "Only alphanumeric, underscore and period allowed",
+      "illegal-characters":
+        "Only alphanumeric and special characters (-_.) allowed",
       "multi-space-run": "Multiple consecutive spaces not allowed"
     };
     const errorMessage = errorMessageMap[err] ?? "error";
     return <span>{errorMessage}</span>;
   };
 
+  handleNewCategoryText = txt => {
+    this.setState({ newCategoryText: txt });
+  };
+
+  handleChoice = e => {
+    /* Blueprint Suggest format */
+    this.setState({ newCategoryText: e.target });
+  };
+
+  handleSuggestActiveItemChange = () => {};
+
   render() {
     const {
       createAnnoModeActive,
@@ -131,9 +136,39 @@ class Categories extends React.Component {
           padding: globals.leftSidebarSectionPadding
         }}
       >
+        <AnnoDialog
+          isActive={createAnnoModeActive}
+          title="Create new category"
+          instruction="New, unique category name:"
+          cancelTooltipContent="Close this dialog without creating a category."
+          primaryButtonText="Create new category"
+          text={newCategoryText}
+          validationError={this.categoryNameError(newCategoryText)}
+          errorMessage={this.categoryNameErrorMessage(newCategoryText)}
+          handleSubmit={this.handleCreateUserAnno}
+          handleCancel={this.handleDisableAnnoMode}
+          annoInput={
+            <AnnoInputs
+              text={newCategoryText}
+              handleItemChange={this.handleSuggestActiveItemChange}
+              handleChoice={this.handleChoice}
+              handleTextChange={this.handleNewCategoryText}
+            />
+          }
+          annoSelect={
+            <AnnoSelect
+              handleModalDuplicateCategorySelection={
+                this.handleModalDuplicateCategorySelection
+              }
+              categoryToDuplicate={categoryToDuplicate}
+              allCategoryNames={allCategoryNames}
+            />
+          }
+        />
+
         {/* READ ONLY CATEGORICAL FIELDS */}
         {/* this is duplicative but flat, could be abstracted */}
-        {_.map(allCategoryNames, catName =>
+        {allCategoryNames.map(catName =>
           !schema.annotations.obsByName[catName].writable ? (
             <Category
               key={catName}
@@ -144,7 +179,7 @@ class Categories extends React.Component {
           ) : null
         )}
         {/* WRITEABLE FIELDS */}
-        {_.map(allCategoryNames, catName =>
+        {allCategoryNames.map(catName =>
           schema.annotations.obsByName[catName].writable ? (
             <Category
               key={catName}
@@ -156,94 +191,6 @@ class Categories extends React.Component {
         )}
         {writableCategoriesEnabled ? (
           <div>
-            <Dialog
-              icon="tag"
-              title="Create new category"
-              isOpen={createAnnoModeActive}
-              onClose={this.handleDisableAnnoMode}
-            >
-              <form
-                onSubmit={e => {
-                  e.preventDefault();
-                }}
-              >
-                <div className={Classes.DIALOG_BODY}>
-                  <div style={{ marginBottom: 20 }}>
-                    <p>New, unique category name:</p>
-                    <InputGroup
-                      autoFocus
-                      value={newCategoryText}
-                      intent={
-                        this.categoryNameError(newCategoryText)
-                          ? "warning"
-                          : "none"
-                      }
-                      onChange={e =>
-                        this.setState({ newCategoryText: e.target.value })
-                      }
-                      leftIcon="tag"
-                    />
-                    <p
-                      style={{
-                        marginTop: 7,
-                        visibility: this.categoryNameError(newCategoryText)
-                          ? "visible"
-                          : "hidden",
-                        color: Colors.ORANGE3
-                      }}
-                    >
-                      {this.categoryNameErrorMessage(newCategoryText)}
-                    </p>
-                  </div>
-
-                  <p>
-                    Optionally duplicate all labels & cell assignments from
-                    existing category into new category:
-                  </p>
-                  <Select
-                    items={allCategoryNames}
-                    filterable={false}
-                    itemRenderer={(d, { handleClick }) => {
-                      return (
-                        <MenuItem onClick={handleClick} key={d} text={d} />
-                      );
-                    }}
-                    noResults={<MenuItem disabled text="No results." />}
-                    onItemSelect={d => {
-                      this.handleModalDuplicateCategorySelection(d);
-                    }}
-                  >
-                    {/* children become the popover target; render value here */}
-                    <Button
-                      text={
-                        categoryToDuplicate || "None (all cells 'unassigned')"
-                      }
-                      rightIcon="double-caret-vertical"
-                    />
-                  </Select>
-                </div>
-                <div className={Classes.DIALOG_FOOTER}>
-                  <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-                    <Tooltip content="Close this dialog without creating a category.">
-                      <Button onClick={this.handleDisableAnnoMode}>
-                        Cancel
-                      </Button>
-                    </Tooltip>
-                    <Button
-                      onClick={this.handleCreateUserAnno}
-                      disabled={
-                        !newCategoryText ||
-                        this.categoryNameError(newCategoryText)
-                      }
-                      intent="primary"
-                      type="submit"
-                    >
-                      Create new category
-                    </Button>
-                  </div>
-                </div>
-              </form>
-            </Dialog>
             <Button onClick={this.handleEnableAnnoMode} intent="primary">
               Create new category
             </Button>