Prevent category collapsing on annotation edit, # of cells on add label button (#1204)

* collapse functionality

* expand collapse

client/src/components/categorical/annoDialogAddLabel.js

@@ -9,7 +9,8 @@ import { labelPrompt, isLabelErroneous } from "./labelUtil";
   categoricalSelection: state.categoricalSelection,
   annotations: state.annotations,
   universe: state.universe,
-  ontology: state.ontology
+  ontology: state.ontology,
+  crossfilter: state.crossfilter
 }))
 class Category extends React.PureComponent {
   constructor(props) {
@@ -73,7 +74,7 @@ class Category extends React.PureComponent {
 
   render() {
     const { newLabelText } = this.state;
-    const { metadataField, annotations, ontology } = this.props;
+    const { metadataField, annotations, ontology, crossfilter } = this.props;
     const ontologyEnabled = ontology?.enabled ?? false;
 
     return (
@@ -91,7 +92,7 @@ class Category extends React.PureComponent {
           instruction={this.instruction(newLabelText)}
           cancelTooltipContent="Close this dialog without adding a label."
           primaryButtonText="Add label"
-          secondaryButtonText="Add label and assign currently selected cells"
+          secondaryButtonText={`Add label and assign ${crossfilter.countSelected()} currently selected cells`}
           handleSecondaryButtonSubmit={this.addLabelAndAssignCells}
           text={newLabelText}
           validationError={this.labelNameError(newLabelText)}

client/src/components/categorical/categorical.js

@@ -22,7 +22,8 @@ class Categories extends React.Component {
     this.state = {
       createAnnoModeActive: false,
       newCategoryText: "",
-      categoryToDuplicate: null
+      categoryToDuplicate: null,
+      expandedCats: new Set()
     };
   }
 
@@ -105,15 +106,28 @@ class Categories extends React.Component {
     );
   };
 
+  onExpansionChange = catName => {
+    const {expandedCats} = this.state;
+    if (expandedCats.has(catName)) {
+      const _expandedCats = new Set(expandedCats);
+      _expandedCats.delete(catName)
+      this.setState({expandedCats: _expandedCats}) 
+    } else {
+      const _expandedCats = new Set(expandedCats);
+      _expandedCats.add(catName)
+      this.setState({expandedCats: _expandedCats})
+    }
+  }
+
   render() {
     const {
       createAnnoModeActive,
       categoryToDuplicate,
-      newCategoryText
+      newCategoryText,
+      expandedCats      
     } = this.state;
     const { writableCategoriesEnabled, schema, config, ontology } = this.props;
     const ontologyEnabled = ontology?.enabled ?? false;
-
     /* all names, sorted in display order.  Will be rendered in this order */
     const allCategoryNames = ControlsHelpers.selectableCategoryNames(
       schema,
@@ -169,6 +183,8 @@ class Categories extends React.Component {
             <Category
               key={catName}
               metadataField={catName}
+              onExpansionChange={this.onExpansionChange}
+              isExpanded={expandedCats.has(catName)}
               createAnnoModeActive={createAnnoModeActive}
               isUserAnno={false}
             />
@@ -180,6 +196,8 @@ class Categories extends React.Component {
             <Category
               key={catName}
               metadataField={catName}
+              onExpansionChange={this.onExpansionChange}
+              isExpanded={expandedCats.has(catName)}
               createAnnoModeActive={createAnnoModeActive}
               isUserAnno
             />

client/src/components/categorical/category.js

@@ -20,8 +20,7 @@ class Category extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isChecked: true,
-      isExpanded: false
+      isChecked: true
     };
   }
 
@@ -142,13 +141,15 @@ class Category extends React.Component {
   }
 
   render() {
-    const { isExpanded, isChecked } = this.state;
+    const { isChecked } = this.state;
     const {
       metadataField,
       categoricalSelection,
       colorAccessor,
       isUserAnno,
-      annotations
+      annotations,
+      isExpanded,
+      onExpansionChange
     } = this.props;
 
     const isStillLoading = !(categoricalSelection?.[metadataField] ?? false);
@@ -196,7 +197,7 @@ class Category extends React.Component {
                 annotations.isEditingCategoryName &&
                 annotations.categoryBeingEdited === metadataField;
               if (!editingCategory) {
-                this.setState({ isExpanded: !isExpanded });
+                onExpansionChange(metadataField)
               }
             }}
           >