allow selections of multiple sub-categories

[nathandunn]

• [x] use dialog popup
• [ ] add checkbox or similar data buttons
• [ ] text should be individuals (and numbers) selected and/or all subtypes (N) if all selected

[nathandunn]

Easiest to use a MenuItem: http://react-toolbox.io/#/components/menu . as it has "onSelect" and "selected" values with a drop-down.

Can have an "All subtypes select (4)"

If that doesn't work, a drop-down component might also work: http://react-toolbox.io/#/components/dropdown

[nathandunn]

The IconMenu (and the like had multiple problems). Select "multi" support didn't quite look right (though would have worked fine).

The drop-down list would be great, but it doesn't do multi-select:

-31,7 +33,9 @@ export class CohortSelector extends PureComponent {
     render() {

         let subCohortsForSelected = subCohorts[this.state.selectedCohort];
-        let {cohorts,cohortLabel} = this.props ;
+        let {cohorts, cohortLabel} = this.props;
+        console.log(subCohortsForSelected)
+        console.log(Object.keys(subCohortsForSelected))
         return (
             <div>
                 <div style={{
@@ -58,23 +62,41 @@ export class CohortSelector extends PureComponent {
                     }
                 </select>
                 {subCohortsForSelected &&
-                <select style={{marginLeft: 10, marginTop: 3, marginBottom: 3}}
-                        onChange={this.onChangeSubCohort}
-                        value={this.state.selectedSubCohort}
-                        className={BaseStyle.softflow}
-                >
-                    <option>All Subtypes</option>
+                <div>
                     {
-                        Object.entries(subCohortsForSelected).map(c => {
-                                return (
-                                    <option value={c[0]} key={c[0]}>
-                                        {c[0]}
-                                    </option>
-                                )
+                        <Dropdown
+                            auto
+                            value={this.state.selectedSubCohort}
+                            source={
+                                Object.entries(subCohortsForSelected).map(c => {
+                                    return {
+                                        label: c[0],
+                                        value: c[0]
+                                    }
+                                })
+
                             }
-                        )
+                            label="Subtypes"
+                        />
                     }
-                </select>
+                    <select style={{marginLeft: 10, marginTop: 3, marginBottom: 3}}
+                            onChange={this.onChangeSubCohort}
+                            value={this.state.selectedSubCohort}
+                            className={BaseStyle.softflow}
+                    >
+                        <option>All Subtypes</option>
+                        {
+                            Object.entries(subCohortsForSelected).map(c => {
+                                    return (
+                                        <option value={c[0]} key={c[0]}>
+                                            {c[0]}
+                                        </option>
+                                    )
+                                }
+                            )
+                        }
+                    </select>
+                </div>
                 }
             </div>
         );

[nathandunn]

Oh, IconMenu had some issues WRT labeling . . it didn't show enough:

This is because its restricted by the Card height. What we wan tis something like the drop-down that allows us to properly have a "check-box" multiselect.

[nathandunn]

https://github.com/JedWatson/react-select looks the best (and not especially heavy): https://github.com/JedWatson/react-select

[nathandunn]

mostly works, but then we get this:

         let subCohortsForSelected = subCohorts[this.state.selectedCohort];
-        let {cohorts,cohortLabel} = this.props ;
+        let {cohorts, cohortLabel} = this.props;
         return (
             <div>
                 <div style={{
@@ -58,23 +64,38 @@ export class CohortSelector extends PureComponent {
                     }
                 </select>
                 {subCohortsForSelected &&
-                <select style={{marginLeft: 10, marginTop: 3, marginBottom: 3}}
-                        onChange={this.onChangeSubCohort}
-                        value={this.state.selectedSubCohort}
-                        className={BaseStyle.softflow}
-                >
-                    <option>All Subtypes</option>
-                    {
-                        Object.entries(subCohortsForSelected).map(c => {
-                                return (
-                                    <option value={c[0]} key={c[0]}>
-                                        {c[0]}
-                                    </option>
-                                )
+                <div>
+                    <ReactSelect
+                        options={Object.entries(subCohortsForSelected).map(c => {
+                            return {
+                                label: c[0],
+                                value: c[0]
                             }
-                        )
-                    }
-                </select>
+                        })}
+                        // value={this.state.selectedSubCohortValues}
+                        isSearchable={true}
+                        isMulti={true}
+                        closeMenuOnSelect={false}
+                        // onMenuClose={this.onChangeSubCohort}
+                    />
+                    <select style={{marginLeft: 10, marginTop: 3, marginBottom: 3}}
+                            onChange={this.onChangeSubCohort}
+                            value={this.state.selectedSubCohort}
+                            className={BaseStyle.softflow}
+                    >
+                        <option>All Subtypes</option>
+                        {
+                            Object.entries(subCohortsForSelected).map(c => {
+                                    return (
+                                        <option value={c[0]} key={c[0]}>
+                                            {c[0]}
+                                        </option>
+                                    )
+                                }
+                            )
+                        }
+                    </select>
+                </div>
                 }
             </div>

[nathandunn]

Not good, but we can just create a set of radio / check button type things: