jrchudy
commented
1 year ago For example, violin plot will have the following configuration for the current set of hardcoded user controls:
layout: [{
component: 'gene',
x: 0, y: 0, w: 1, h: 1,
static: true
}, {
component: 'groupby',
x: 1, y: 0, w: 1, h: 1,
static: true
}, {
component: 'scale',
x: 2, y: 0, w: 1, h: 1,
static: true
}, {
component: 'study',
x: 0, y: 1, w: 3, h: 3,
static: true
}],
grid_layout_config: {
auto_size: true,
cols: 3,
row_height: 30
},
user_controls: [{
uid: 'gene',
label: 'Gene',
type: 'facet-search-popup',
url_param_key: 'Gene',
compact: true,
request_info: {
url_pattern: '/ermrest/catalog/2/entity/RNASeq:Replicate_Expression/{{#if (gt $control_values.study.length 0)}}{{#each $control_values.study}}Study={{{this.values.RID}}}{{#unless @last}};{{/unless}}{{/each}}/{{/if}}(NCBI_GeneID)=(Common:Gene:NCBI_GeneID)',
value_key: 'NCBI_GeneID',
selected_value_pattern: '{{{$self.values.NCBI_Symbol}}}'
}
}, {
uid: 'groupby',
label: 'Group By',
type: 'dropdown',
request_info: {
data: [
{
Name: "Experiment"
Display: "Experiment"
}, {
Name: 'Experiment_Internal_ID',
Display: 'Experiment Internal ID'
}, ...
],
default_values: 'Experiment',
value_key: 'Name',
selected_value_pattern: '{{{$self.values.Display}}}',
tick_markdown_pattern: '{{{$self.values.Experiment}}}',
}
}, {
uid: 'scale',
label: 'Scale',
type: 'dropdown',
request_info: {
data: [
{
Name: 'Linear'
}, {
Name: 'Log'
}
],
default_values: 'Linear',
value_key: 'Name',
selected_value_pattern: '{{{$self.values.Name}}}'
}
}, {
uid: 'study',
label: 'Study',
type: 'button-facet-search-popup',
url_param_key: 'Study',
request_info: {
url_pattern: '/ermrest/catalog/2/entity/RNASeq:Replicate_Expression/NCBI_GeneID={{{$control_values.gene.values.NCBI_GeneID}}}/(Study)=(RNASeq:Study:RID)',
value_key: 'RID',
selected_value_pattern: {{{$self.values.RID}}},
wait_for: 'gene'
}
}
}
},
config: {
xaxis: {
title_markdown_pattern: '{{{$control_values.groupby.values.Display}}}'
},
yaxis: {
type_pattern: '{{{$control_values.scale.values.Name}}}'
}
},
traces: [{
url_pattern: '/ermrest/catalog/2/attributegroup/M:=RNASeq:Replicate_Expression/{{#if (gt $control_values.study.length 0)}}({{#each $control_values.study}}Study={{{this.values.RID}}}{{#unless @last}};{{/unless}}{{/each}})&{{/if}}NCBI_GeneID={{{$control_values.gene.values.NCBI_GeneID}}}/$M/Anatomical_Source,Experiment,Experiment_Internal_ID,NCBI_GeneID,Replicate,Sex,Species,Specimen,Specimen_Type,Stage,Age,Starts_At,Ends_At,TPM'
x_col_pattern: ['{{{$control_values.groupby.values.Name']
}]
Currently only the violin plot has selectors that show above the plot that are hardcoded. If violin plot wants to be used for a different use case, some of these user controls might not make sense. We also have a use case to add a user control specifically for the
heatmapplot type that allows for the column that is used for aggregation to be changed so the plot can show different "z values" for the same set of x/y data (issue #144 ).The following properties are how we will add support for configurable user controls in plot-config:
Each individual
controlwill be configured with the following:Each individual
layoutwill be configured with the following:Notes about configuration language:
grid_layout_config,user_controls, andlayoutare repeated at the top level of the plot-config object and inside of each object inplots.plotshas auidfor referencing the plot in the global config languagelayout, not all properties are requiredmin_w, min_h, max_w, max_hare only used for resizing, they have no effect if resizing is disabledgrid_layout_configis intended to match the properties passed directly toReactGridLayoutcomponentpositionis only used for "local layout" when trying to position user controls relative to the plot definition the layout is defined inside ofbreakpointsis used withResponsiveGridLayoutcomponent when width is not seturl_param_keyallows for the initial value for a user control to be set and used for templating as a url parameterkeyin the url?< url_param_key >=<url_value>range-pickerhas a min and max value that could both be initialized via url$control_values.<control.uid>.values.<url_param_key> = <url_value>typecan be single or multiple select depending on the control that is used, the following are the types for selectors and controlsfacet-search-popup- recordset popup with single selectsimple-search-dropdown- dropdown with typeahead search and loading more optionsdropdown- dropdown with options in it. Currently Group By and Log dropdowns instudy-violincheckbox-list-single- a list of options that can be used to filter the datafacet-search-popup-multiselect- recordset popup with single selectsimple-search-dropdown-multiselect- dropdown with typeahead search and loading more optionsdropdown-multiselect- dropdown with options in it that allows multiple selectionsbutton-facet-search-popup- button withSelect SomeandSelect Allthat opens a facet search popup. Currently the Study selector forstudy-violincheckbox-list- a list of options that can be used to filter the data. Similar to a facet list without a search boxrange-picker- similar to the facet control in chaise for integer, float, and date facetssearch-box- similar control to what we have on recordset pagerequest_infois how the user control is initializedurl_patternis used by default to load data for the selectordatais used when no query pattern is present or the request forquery_patternis empty or throws an errorwait_foris used to communicate when one user control relies on data from anotherselected_value_patternwill be applied to all selected values for the given user control when the controltypesupports selecting multiple options at once$control_values.<uid>is how the selected value objects are stored$control_values.<uid>[0].values.<column_name>, but wouldn't be smart enough for controls with multiple values$self.valuesas a way to reference each selection for the controlGeneral Notes:
SelectDataobjectsSelectDataneeds to betyped(see TODO in the code)recordsetPropsneeds to be thought about whether it is fine how it is or if more of it needs to be "configurable"