improve type handling for non-string annotation data (#465)

* improve type handling for non-string annotation data

* improve clarity of code

client/src/components/categorical/categorical.js

@@ -5,34 +5,13 @@ import { connect } from "react-redux";
 import * as globals from "../../globals";
 import Category from "./category";
 
-/* Cap the max number of displayed categories */
-const truncateCategories = options => {
-  const numOptions = _.size(options);
-  if (numOptions <= globals.maxCategoricalOptionsToDisplay) {
-    return options;
-  }
-  return _(options)
-    .map((v, k) => ({ name: k, val: v }))
-    .sortBy("val")
-    .slice(numOptions - globals.maxCategoricalOptionsToDisplay)
-    .transform((r, v) => {
-      r[v.name] = v.val;
-    }, {})
-    .value();
-};
-
 @connect(state => ({
-  ranges: _.get(state.controls.world, "summary.obs", null),
-  categorySelectionLimit: _.get(
-    state.config,
-    "parameters.max-category-items",
-    globals.configDefaults.parameters["max-category-items"]
-  )
+  categoricalSelectionState: state.controls.categoricalSelectionState
 }))
 class Categories extends React.Component {
   render() {
-    const { ranges, categorySelectionLimit } = this.props;
-    if (!ranges) return null;
+    const { categoricalSelectionState } = this.props;
+    if (!categoricalSelectionState) return null;
 
     return (
       <div
@@ -47,27 +26,9 @@ class Categories extends React.Component {
         >
           Categorical Metadata
         </p>
-        {_.map(ranges, (value, key) => {
-          const isColorField = key.includes("color") || key.includes("Color");
-          const isSelectableCategory =
-            value.options &&
-            !isColorField &&
-            key !== "name" &&
-            value.numOptions < categorySelectionLimit;
-
-          if (isSelectableCategory) {
-            const categoryOptions = truncateCategories(value.options);
-            return (
-              <Category
-                key={key}
-                metadataField={key}
-                values={categoryOptions}
-                isTruncated={categoryOptions !== value.options}
-              />
-            );
-          }
-          return undefined;
-        })}
+        {_.map(categoricalSelectionState, (catState, catName) => (
+          <Category key={catName} metadataField={catName} />
+        ))}
       </div>
     );
   }