Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save robert-moore/87b97f66866220ce143a8c666a7a32d4 to your computer and use it in GitHub Desktop.
Save robert-moore/87b97f66866220ce143a8c666a7a32d4 to your computer and use it in GitHub Desktop.

Filter Picker Technical Specification

Terminology

Free Dimension: A DimensionCluster instance, or a LocaleType instance. QUESTION: Is Free Dimension the best name? It seems so, because it is a direct correspondence with the Free/Fixed Dimension terminology that we are using in our data viz. But if we don't want to couple our UI terms with our Data Viz terms, perhaps we can call it Filter Group

Filter: A collection of Locales, or a collection of DimensionInstances, like so: <Locale>[], <DimensionInstance>[]

Redux State

Free Dimensions Duck

TODO: Derive the selectable Free Dimensions from the selected Indicator and selected Locale

TODO: Derive our Selectable Filters from the Selected Free Dimensions - this should be in the form of a util function that gets called in our ChartControls component

TODO: Set reasonable defaults for our Selected Filter Duck state based on the selection of our Free Dimensions. What will those rules be?

Reducer example of our dimension redux state: (Perhaps this can be a collection of DimensionCluster, and LocaleType instances)

Older

[
  { // <DimensionCluster>
    id: "US.GOV.US.HHS.CDC.WONDER.CDPH.OPIOID:ALLRATE>DEMO:SEX()",
    name: "Sex"
  },
  { // <LocaleType> 
    id: "T:L:C<US>:ST()",
    name: "Seattle"
  }
]

Selected Filter Duck

Reducer example of our filter redux state: (Perhaps this can be a collection of DimensionInstance, and Locale instance collection)

Note: Map and List refer to Immutable collections below:

03/29/2018

Map({
    free: Map(
        {
            locale: Set(<Locale>),
            nonLocale: Set(<UQDI>),
    
        }),
    requiredFixed: Map(
        {
            locale: Set(<Locale>),
            nonLocale: Set(<UQDI>),
    
        }),
    optionalFixed: Set(<UQDI>),
})

older:

Map({
  requiredFixed: List([
    Map({
      group: <EducationLevel>, // DimensionCluster instance      
      selection: <High School>, // DimensionInstance instance
    }), Map({ 
      group: <MarriageStatus>, 
      selection: <Single>,
    })
  ])
  free: List([
    Map({
      group: <Age>, // DimensionCluster instance      
      selection: [ <18-24>, <25-34>, ... ] // Array of DimensionInstance instances
    }),
    Map({
      // QUESTION: Do we want to include this locale selection in the "free" section of the filter picker? Or should this be a separate section?
      group: <StateLocaleType>,
      selection: [ <Washington>, <California> ] // Array of DimensionInstance instances
    }),
  ]),
  optionalFixed: [ <male>, <asian> ] // Array of DimensionInstance instances
})

Filter Picker Molecule

There will be a selectableFilters prop, which should look as follows: Updated (03/29/2018)

Map({
    free: Map(
        {
            locale: Set(<Locale>),
            nonLocale: Set(<UQDI>),
    
        }),
    requiredFixed: Map(
        {
            locale: Set(<Locale>),
            nonLocale: Set(<UQDI>),
    
        }),
    optionalFixed: Set(Set(<UQDI>)),
})

There will be a selectedFilters prop, which should look as follows:

Map({
    free: Map(
        {
            locale: Set(<Locale>),
            nonLocale: Set(<UQDI>),
    
        }),
    requiredFixed: Map(
        {
            locale: Set(<Locale>),
            nonLocale: Set(<UQDI>),
    
        }),
    optionalFixed: Set(<UQDI>),
})

Options

Outdated (03/27/2018)


{
  requiredFixed: [ 
    {
      cluster: "EducationLevel", // string 
      instances: ["High School", "College", "PhD"] // Array of strings
    }, { 
      cluster: "Marriage Status", 
      instances: ["Single", "Married"]
    }
  ],
  free: [
    {
      cluster: "State", // string 
      instances: ["Alabama", "Alaska", "Arkansas",...] // Array of strings
    }, { 
      cluster: "Age", 
      instances: ["Young", "Old"]
    }
  ],
  optionalFixed: [ // array of array of objects with "cluster" and "instance" properties
    [{cluster: "gender", instance: "male"}] 
    [{cluster: "gender", instance: "female"}]
    [{cluster: "gender", instance: "male"}, {cluster: race, instance: "asian"}]
    [{cluster: "gender", instance: "female"}, {cluster: race, instance: "asian"}],
    ...
  ]
}

Outdated (left for reference)

{
  requiredFixed: [ 
    {
      group: <EducationLevel>, // DimensionCluster instance
      // QUESTION: Do the instances here always consist of all instances under the cluster? If so, we may not need to specify these instances explicitly. I believe we can gather these from DiemnsionCluster.instances, for example.
      // QUESTION: rename these "options" instead of "instances"?
      instances: [<High School>, <College>, <PhD>] // Array of DimensionInstance instances
    }, { 
      group: <MarriageStatus>, 
      instances: [<Single>, <Married>]
    }
  ],
  free: [
    {
      group: <Age>, // DimensionCluster instance
      // QUESTION: Do the instances here always consist of all instances under the cluster? If so, we may not need to specify these instances explicitly. I believe we can gather these from DiemnsionCluster.instances, for example.
      instances: [ <18-24>, <25-34>, ... ] // Array of DimensionInstance instances
    },
    {      
      group: <StateLocaleType>,      
      instances: [ <Washington>, <California> ] // Array of Locale instances
    },
  ],
  optionalFixed: [ // Array of arrays of DimensionInstance's
    [<male>] 
    [<female>]
    [<male>, <asian>]
    [<female>, <black>]
  ]
}

There will be a selectedFilters prop, which will be mapped from the state of the selected-filters Duck.

Required Fixed Dimensions

You must pick one and only one instance from each cluster. By default, the first instance from each cluster will be selected.

Optional Fixed Dimensions

You can select exactly one of these array elements.

There will be a "none" option, which will be selected by default.

Free Dimension Instances Filter

You can select 0 to many instances from each cluster. At a minimum, there will be one DimensionCluster and one LocaleType cluster.

If you select 0 instances from either one, there will be no chart displayed.

By default, the first instance from each cluster will be selected.

Notes

There are three groups of filters. A dimension cluster will only appear in at most one of these groups.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment