Migrate Violin plot type to react

[jrchudy]

Violin plot is the next step for migrating the plot app. The complexity comes with implementing the selectors that show at the top of the page. These include the gene selector, study selector, group by dropdown, and scale dropdown. This is explained in some detail here.

There are 3 modes the app can operate in, standalone app, embedded in study page, and embedded in gene page. The selectors behave slightly differently in each case.

standalone app

In this case, there is either nothing in the url (example) or both Study and NCBI_GeneID url parameters are present (example).

• All selectors should be available
• with no url parameters:
  • fetch gene selector with no constraints
    • default to first gene in set returned
  • fetch study selector info based on gene
    • All Studies
  • default group to Anatomical Source (plot-config)
• with both parameters
  • fetch gene selector info based on study
    • modify gene URL to append NCBI_GeneID
    • use gene from url as default
  • fetch study selector info based on gene
    • modify study URL to append RID
    • fetch tuple for study from url for rowname info to display

embedded in study page

In this case there is only Study defined in the url (example).

• fetch gene selector info based on study
  • default to first gene in set returned
• remove study selector (don't fetch study set)
  • fetch study info in case it's used in title or other parts of graph

embedded in gene page

In this case there is only Study defined in the url (example).

• disable gene selector (don't fetch gene set)
  • fetch rowname for gene that was selected and display in input
  • fetch study selector info based on gene
  • All Studies
  • default group to Anatomical Source (plot-config)

recordset modal

Both the gene and study selectors should use the recordset modal component from chaise. Here is the component and here is an example of using it.

selectors

Regarding how the selectors should be displayed. The whole “gene selector” should look like an input but in reality it’s a button that has its displayed value updated based on the selected gene. For this, there is no component in chaise so you can create one in plot app specifically for this selector.

In the case of study, the click event should be similar and open a recordset select modal when clicking “Select some” but use the study uri instead of course.

The difference between the 2 is how many rows can be selected and what you will do with the content returned from the selector.

• For the gene selector, there is only 1 row returned that updates the displayed value in the “fake input” and then refetches the graph data.
• For the study selector, multiple rows can be selected and are returned. The display for this should use one of our chaise components, selected-row (https://github.com/informatics-isi-edu/chaise/blob/master/src/components/selected-rows.tsx)

[cheekw]

@jrchudy @hongsudt While implementing the migration to react I've noticed some things about plot-config.js I think are reasonable to change/cleanup:

Suggestion	Justification
snake_case to camelCase	consistency, readability, brevity
plot_type moved to trace as justtype	same as plotly convention, added support for multiple types in one chart
generalize naming such as gene_uri_pattern to selectorUriPattern	allow any plot to have selector
move and append options for any data relevant to ours e.g. trace: [{ options: {uri 'uristuff', xKey: '#_Released', yKey: 'Data_Type'}, type: 'bar', orientation: 'h' }]	clean differentiation for both users and developers. Easier maintenance: to pass in only plotly related data without changing implementation every time.
unnest config file. e.g. move study-violin contents as the only config	cleaner, modularity, easier for a user of the library, current config file too big, multiple people can work on separate config files without conflict

My overall main reasoning for these config changes is that I think it is better to have completely generic and justified options (on the users' side) in the config. That way anyone that uses of our library won’t try to do anything hackish like using gene-uri-pattern as a selector uri pattern for another plot. It also makes it so they won’t be questioning certain things that were more for edge cases or the implementation side’s convenience.

We can essentially think of building this config file as designing an API where each possible option to be passed in is a parameter. We want this API to be as generic and as user friendly as possible