data filter widget

[Yuandan Zhang]

hi

I want to set up data filter based on a parameter in the dataset, for example impact in an association data set, it has four levels: HIGH, MODERATE, LOW and MODIFIER. I try set up some thing alike the following, but it does not work, could some one office advices?

thanks

Yuandan

            const impact_chooser = {

 

                tag: 'assoc_study',

                color: 'blue',

                button_html: 'Impact Filter',

                position: 'right',

                show_selected: false,

                button_title: 'Select impact level: ',

                custom_event_name: 'widget_set_assoc_study',

                state_field: '{{namespace[assoc]}}impact',

                statuses: "hidden",

                options: [

                    { display_name: 'HIGH  (default)', value: 'HIGH' },

                    { display_name: 'MODERATE', value: 'MODERATE' },

                    { display_name: 'LOW', value: 'LOW' },

                    { display_name: 'MODIFIER', value: 'MODIFIER' },

                ],

            };

            base.widgets.push(sc_facet_chooser, ko_study_chooser, impact_chooser);

            return base;

[Andy Boughton]

Thanks for the question. It sounds like you want the filter to be interactive / user specified in this case. (not something that can be hard coded once at the start)

No two websites seem to agree on how to provide data to the plot, and as a result, we weren't able to provide built in functionality to filter <any possible data> for <every possible design of web server> by pure magic. You'll need to write some custom code here. As written, all this button does is to set a variable in `plot.state`: your custom data adapter needs to decide what to do with that variable.

For example, if you are loading the data via something like Tabix or (heavens forbid) a gigantic JSON file, you are probably filtering the data client side, in which case your custom adapter would need to filter client side. A custom method `_annotateRecords` could be written. (see guide for more details; another example. Note that the second argument options of the method `annotateRecords` includes all the fields found in plot.state)

If you are loading the data server side (recommended for really big datasets, to avoid transferring too much data), then you would instead use the `plot.state` field to change the URL used to make a server request. (for server side filtering, note that this example also changes the cache key, so that the server knows to fetch new data when your variable changes).

-Andy Boughton
abo...@umich.edu

Applications Programmer/Analyst, Lead
Center for Statistical Genetics
University of Michigan

--
You received this message because you are subscribed to the Google Groups "locuszoom" group.
To unsubscribe from this group and stop receiving emails from it, send an email to locuszoom+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/locuszoom/161aadae-b477-4fec-a9e8-05ab3ab5d1e7n%40googlegroups.com.

[Andy Boughton]

The other factor: what version of locuszoom were you using?

In LZ 14, the syntax changed slightly, eg `namespace[assoc]impact` would become `assoc:impact`. LZ 14 also has some other new data filtering features which might be of use, but it introduces some breaking changes, and so can be a bit annoying to upgrade. It's possible that some of the docs still reference the old syntax. When in doubt, see the source code for the version you're using. I also notice that your example code is missing a field `type`, so it might not know what kind of button to show!

Here's the basic approach that LZ 14 uses: it adds a toolbar button for "display options" that mutates the layout, and uses the new filtering feature to only show one of a specific set of user provided values.

https://github.com/statgen/locuszoom/blob/develop/esm/layouts/index.js#L587 

(since layouts are built up of small pieces, this line of code needs to be used with others. The price of a really generic configurable system is, alas, more boilerplate code)

-Andy Boughton
abo...@umich.edu

Applications Programmer/Analyst, Lead
Center for Statistical Genetics
University of Michigan

On Dec 18, 2023, at 9:13 PM, Yuandan Zhang <yuanda...@gmail.com> wrote:

[Yuandan Zhang]

hi there,

I have a parameter in a dataset with 4 levels (HIGH, MODERATE, LOW and MODIFIER), in my case, "impact" in dataset "assoc". I want to set up a "display_option" widget to hide one or more levels to make the plot less busy. Below is the template of the widget I try to set up, unfortunately, it does not work, simply, I did not understand the mechnics how the widget works. if someone has similar examples or advice, please share with me.

regards

Yuandan  

            const impact_chooser = {

                type: 'display_options',

                tag: 'assoc_study',

                color: 'green',

                button_html: 'Impact Filter',

                position: 'right',

                show_selected: false,

                button_title: 'Select impact level: ',

                custom_event_name: 'widget_set_assoc_study',

                layer_name: 'panels',

                default_config_display_name: 'All IMPACT',

                state_field: '{{namespace[assoc]}}impact',

                statuses: "hidden",

                options: [

                    { display_name: 'ALL', display: {filters: null},},

                    { display_name: 'HIGH', display: {filters: 'hidden'},},

                    { display_name: 'MODERATE', display: {filters: 'hidden'},},

                    { display_name: 'LOW',    display: {filters: 'hidden'} ,},

                    { display_name: 'MODIFIER', display: {filters: 'hidden'}, },

                ],

            };

[Andrew Boughton]

The syntax might depend slightly on which version of locuszoom you are using and what fields are in your data.

A good place for examples is layouts.js in the project repo, as well as the tutorials/guides in the docs. If you tell me what version you are using and what fields to filter by, I can try to link to a specific syntax example.

-Andy Boughton

abo...@umich.edu

On Jan 4, 2024, at 7:23 PM, Yuandan Zhang <yuanda...@gmail.com> wrote:

hi there,

To view this discussion on the web visit https://groups.google.com/d/msgid/locuszoom/48033f62-8cc2-4352-b90f-f0ec579725b2n%40googlegroups.com.