handle case of excessively large number of options in categorical met… (#350)

* handle case of excessively large number of options in categorical metadata
* move max category options count into globals

client/src/components/categorical/categorical.js

@@ -3,20 +3,29 @@ import React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
 
+import * as globals from "../../globals";
 import Category from "./category";
 
-@connect(state => {
-  const ranges = _.get(state.controls.world, "summary.obs", null);
-  return {
-    ranges
-  };
-})
-class Categories extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
+/* 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)
+}))
+class Categories extends React.Component {
   render() {
     const { ranges } = this.props;
     if (!ranges) return null;
@@ -28,16 +37,20 @@ class Categories extends React.Component {
           marginRight: 40,
           paddingRight: 20,
           flexShrink: 0
-          // height: 700,
-          // overflow: "auto",
         }}
       >
         <p> Categorical Metadata </p>
         {_.map(ranges, (value, key) => {
           const isColorField = key.includes("color") || key.includes("Color");
           if (value.options && !isColorField && key !== "name") {
+            const categoryOptions = truncateCategories(value.options);
             return (
-              <Category key={key} metadataField={key} values={value.options} />
+              <Category
+                key={key}
+                metadataField={key}
+                values={categoryOptions}
+                isTruncated={categoryOptions !== value.options}
+              />
             );
           }
           return undefined;

client/src/components/categorical/category.js

@@ -91,7 +91,7 @@ class Category extends React.Component {
 
   render() {
     const { isExpanded, isChecked } = this.state;
-    const { metadataField, colorAccessor } = this.props;
+    const { metadataField, colorAccessor, isTruncated } = this.props;
     return (
       <div
         style={{
@@ -163,6 +163,11 @@ class Category extends React.Component {
           </p>
         </div>
         <div>{isExpanded ? this.renderCategoryItems() : null}</div>
+        <div>
+          {isExpanded && isTruncated ? (
+            <p style={{ paddingLeft: 15 }}>... truncated list ...</p>
+          ) : null}
+        </div>
       </div>
     );
   }

client/src/globals.js

@@ -28,6 +28,8 @@ export const continuous = [
   "Unmapped_short"
 ];
 
+export const maxCategoricalOptionsToDisplay = 100;
+
 /* colors */
 export const blue = "#4a90e2";
 export const hcaBlue = "#1c7cc7";