Filter: MultiSelect Component

[iros]

Related to #21 From @pbeshai's spec from slack: https://bocoup.slack.com/files/peter/F1AHSF5S8/filter_code_design.js

Behaviour (select multiple values from list of predefined values):

• n <= 10, list where you click to toggle on/off
• n > 10, autocompleter with chiclets

Definition:

• id (can be used in URL key)
• label
• type (e.g., Select, MultiSelect)
• options (things like string formatter for values -- not really necessary for Select/MultiSelect)
• values (list of all accepted values)

Examples:

const cellLineFilters = [
  {
    id: 'collection',
    label: 'Collection',
    type: 'multi-select',
    values: [
      { value: 'big6', label: 'Big 6' },
      { value: 'icbp43', label: 'ICBP43' }
    ]
  }, {
    id: 'receptorStatus',
    label: 'Receptor Status',
    type: 'multi-select',
    values: [
      { value: 'nm', label: 'NM' },
      { value: 'her2amp', label: 'HER2amp' },
      { value: 'tnbc', label: 'TNBC' },
      { value: 'hrplus', label: 'HR+' },
    ]
  }, {
    id: 'molecularSubtype',
    label: 'Molecular Subtype',
    type: 'multi-select',
    values: [
      { value: 'basal', label: 'Basal' },
      { value: 'basalA', label: 'Basal A' },
      { value: 'basalB', label: 'Basal B' },
      { value: 'luminal', label: 'Luminal' },
    ]
  }, {
    id: 'claudin',
    label: 'Claudin Status',
    type: 'multi-select',
    values: [
      { value: 'low', label: 'Low' },
      { value: 'other', label: 'Other' },
    ]
  }, {
    id: 'mutation',
    label: 'Mutation Status',
    type: 'multi-select',
    values: [
      { value: 'brca1wt', label: 'BRCA1 WT' },
      { value: 'brca1mut', label: 'BRCA1 MUT' },
      { value: 'brca2wt', label: 'BRCA2 WT' },
      { value: 'brca2mut', label: 'BRCA2 MUT' },
      { value: 'cdh1wt', label: 'CDH1 WT' },
      { value: 'cdh1mut', label: 'CDH1 MUT' },
      { value: 'map3k1wt', label: 'MAP3K1 WT' },
      { value: 'map3k1mut', label: 'MAP3K1 MUT' },
      { value: 'mll3wt', label: 'MLL3 WT' },
      { value: 'mll3mut', label: 'MLL3 MUT' },
      { value: 'pik3cawt', label: 'PIK3CA WT' },
      { value: 'pik3camut', label: 'PIK3CA MUT' },
      { value: 'ptenwt', label: 'PTEN WT' },
      { value: 'ptenmut', label: 'PTEN MUT' },
      { value: 'tp53wt', label: 'TP53 WT' },
      { value: 'tp53mut', label: 'TP53 MUT' },
      { value: 'gata3wt', label: 'GATA3 WT' },
      { value: 'gata3mut', label: 'GATA3 MUT' },
      { value: 'map2k4wt', label: 'MAP2K4 WT' },
      { value: 'map2k4mut', label: 'MAP2K4 MUT' },
    ]
  }, {
    id: 'malignancy',
    label: 'Malignancy Status',
    type: 'multi-select',
    values: [
      { value: 'malignant', label: 'Malignant' },
      { value: 'nonmalignant', label: 'Non-malignant' },
    ]
  }, {
    id: 'dataset',
    label: 'Dataset',
    type: 'multi-select',
    values: [
      { value: 'dataset1', label: 'Basal Receptor (RTK) Profile' },
      { value: 'dataset2', label: 'Growth Factor-Induced pAKT/pERK Response' },
      { value: 'dataset3', label: 'Basal Total Protein Mass Spectrometry' },
      { value: 'dataset4', label: 'Basal Phosphoprotein Mass Spectrometry' },
      { value: 'dataset5', label: 'Drug Dose-Response Growth Rate Profiling' },
    ]
  },
]

[vlandham]

For #31 there is a need for a corresponding format of what is currently selected in the filters to perform the filtering process.

I think we could use this same format as above where the id represents the 'column' to filter on and then values is still an array for each parameter - but only contains the active filters currently selected.

thoughts @pbeshai ?

[pbeshai]

Agreed

[pbeshai]

Closed with #44