greenelab / adage-frontend Goto Github PK

I'd like performance to be a little snappier. Especially when selected genes and experiments. The checkmark should show up right away, while more intense calculations (like enriched signatures) are done in the background. Not sure what is causing the slowdown at the moment.

Need to look into web works and diagnose the cause of the slowdowns in react dev tools.

From Georgia Doing:

Could we search the volcano plot by signature same or even gene same where sigs would light up that had that gene as HW?

Currently the <Table> component works like this:

<Table
  data={[
    { name: 'cat', id: 2 },
    { name: 'dog', id: 3 }
  ]}
  fields={['name', 'id']}
  head={['Name', 'ID']}
  widths={['75%', '25%']}
/>

This is roughly the same way it worked for hetmech. I want to make it work like this instead:

<TableContainer>
  <Table>
    <TableHead>
      <TableRow>
        <TableCell>Calories</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {rows.map((row) => (
        <TableRow>
          <TableCell align='right'>{row.calories}</TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
</TableContainer>

This should be more flexible and easier to read, and most third party table libraries seem to work this way too:
https://material-ui.com/components/tables/

Making a generic table component I'm happy with will also benefit future Greene Lab projects. I will make sure to fully explore third party options to see if any of them meet my needs and standards before writing my own.

From Dallas Mould:

Once I select a group of genes, there are superscripted numbers above the overlapping genes. Does this indicate weight? Is there an easy way to interpret these values? I do not know what number constitutes a high-weight or is this relative. Can we display a rank of the weights instead? Is it the highest weight gene in the group for example?

From Dallas Mould:

For the heatmap feature, it currently shows the sample ID. Would it be possible to allow the user to select the field displayed here? For example for E-GEOD-10065, rather than GSM307135 1, it would be easier to interpret without cross-referencing if it displayed “treatment” instead from the experimental design section so I could easily tell the samples that were control and can then very nicely download the heatmap image. I realize this will likely be different experimentto experiment, but maybe if we could select from the available fields listed in the sample details. This would also facilitate group selection for the volcano plot.

From Georgia Doing:

Could we include PA14 homologue number in the gene tables? Pa biologists would use that more than Entrez ID, but if both fit that could be nice too

Possibly related to #133 ?

Making this issue to track my thoughts on various graph visualization libraries.

Features I need:

• force directed (physics-based) layout
• ability to tweak behavior and strength of physics forces
• completely customizable node and edge appearance
• node dragging
• ability to pan and zoom view of scene
• ability to fit view to content
• ability to save (and thus render) as svg

Features that would be nice to have:

• ability to switch between svg, canvas, and webgl rendering

d3

Renders: svg
Documentation: comprehensive, but often obtuse
Examples/Tutorials: abundant, both by library authors and community
Functionality: best in industry
Performance: good
Complexity: very obtuse and unintuitive. chain syntax is not great. view and click handlers are confusing. call vs on and events are confusing
Popularity: 89.7k ⭐

vega

Renders: svg, canvas
Documentation: mostly comprehensive, but organized somewhat poorly (important concepts are often buried where you don't expect them) and sometimes worded poorly/confusingly
Example/Tutorials: decent amount, but maybe 1/10th of d3's
Functionality: good, with some exceptions. can do most of what d3 can do. can't do force directed layout + pan/zoom
Performance: okay
Complexity: easy to understand and much simpler than d3. quicker to write and simpler to read spec.json than d3's chaining syntax
Popularity: 8.1k ⭐

cytoscapejs

Renders: canvas
Documentation: okay
Example/Tutorials: good
Functionality: can do what i need, but doesn't support svg. some customization might be harder than it should
Performance: good
Complexity: seems a bit simpler than d3
Popularity: 6.3k ⭐

sigmajs

Renders: canvas, webgl
Documentation: decent but seems to be missing some info
Example/Tutorials: decent amount
Functionality: can do what i need, but doesn't support svg and customizing appearance might be painful
Performance: good
Complexity: customizing appearance requires completely overriding render function for an object and drawing it manually with canvas
Popularity: 8.8k ⭐

vivagraphjs

Renders: svg, webgl
Documentation: almost non-existent. will likely have to dig through source code
Example/Tutorials: there's lots of examples of different graph shapes and how the different force layout algorithms behave, but not much beyond that (like how to style things, how to handle user interaction, etc)
Functionality: style seems to be fully customizable. several advanced force layout algorithms (that i don't think even d3 has)
Performance: best in industry with webgl
Complexity: seems like slightly better than d3
Popularity: 3.1k ⭐

From Dallas Mould:

Is there a way to display similar signatures once we have selected one? Maybe just other signatures that have a number of overlapping genes.

I believe the slider for the gene-gene network used to only go between 0.4 and 1 because we don't show weights lower than that. You can now slide it down 0, but nothing changes. Small issue, but maybe something to think about changing in the future.

From Georgia Doing:

is there a way to ‘reset’ the clustering? After I played with clustering the different ways I wanted to reset to before I had hit either cluster button – is that just sigs in order of their names/numbers?

On the genes page, search for a gene (for example, anr), which is not on the front page. Select it. Clear the search. The selected gene presumably ends up somewhere else in the sorted list. If the page is empty and nothing is included in the search box, selected genes should probably be prioritized.

https://py3-adage.greenelab.com/genes

From Georgia Doing:

When looking at the results of a gene search, is there a way to have a quick navigation down to the enriched signatures that is quicker than scrolling? At first when I did a search I simply didn’t scroll down far enough and missed the signatures but if there was a button to ‘jump’ down to the signature results it may have reminded me they were there

On two browsers (Chrome and Safari), searching with a list of 14 genes gave two to four identical returns (the links suggested they were the same). They weren't always contiguous but they all highlighted when you clicked one.

Using the app itself as an interface should be self-explanatory. What is not self-explanatory is what the biological meaning behind all of the app's functionality is. @ajlee21 Suggested a while ago that we add some help text explaining what things do and what they can be useful for. My vision of this would be 2-3 sentences on biological meaning and insight, right before each section.

It might look something like this:

Or maybe I would hide it as a tooltip on a little (?) icon, or maybe click to show it. But the general gist would be the same.

@cgreene @ajlee21 @georgiadoing @debhogan-208 If you get some free time, please write some description text for one of the sections in the app and post it in this issue. I think it would help adoption of the app. The descriptions should probably be pretty high level... aimed at someone who has some sort of scientific background, but who doesn't know the specifics of the work the Hogan lab has done with the app for example.

From Georgia Doing:

Download table of genes and weights in a signature?

In an effort to get an MVP up and running as soon as possible, I've neglected writing any tests for the frontend. But I think before I do anything else big (like say, starting the Signatures page), I should really sit down and write some tests.

Among the tests, most important are perhaps the math.js functions, which are statistical algorithms that need to be tested and reviewed thoroughly. I will get several other people in the lab to review the code and help me compare the output to other implementations (say in Python).

Currently we have two tables of information on top of each other that are conceptually linked:

When we cluster by sample in the heatmap, we're sorting the rows. Should that also automatically sort the sample group table below it in the same order? And vice versa?

The intent is to allow users to cluster the heatmap, then group the samples based on what they see in the heatmap.

I searched a list of about 100 PA numbers using the List function.
Some numbers came up three or four times (confirmed to be only in list 1X) and the list on the left was cutoff making it hard to know what to select. Just passing this along.

Here is the list if interested.

PA0024
PA0150
PA0161
PA0381
PA0514
PA0518
PA0519
PA0523
PA0524
PA0525
PA0526
PA0541
PA0542
PA0607
 
PA0781
PA0963
PA1556
PA1581
PA1673
PA1746
PA1853
PA1899
PA1900
PA1922
PA1925
PA1959
PA1999
PA2019
PA2193
PA2259
PA2386
PA2392
PA2393
PA2411
PA2412
PA2425
PA2426
PA2427
PA2446
PA2663
PA2679
PA2753
PA2851
PA2945
PA2970
PA3126
 
PA3196
PA3209
PA3244
 
PA3308
PA3309
PA3332
PA3337
PA3397
PA3410
PA3431
PA3432
PA3472
PA3599
PA3600
PA3601
PA3647
PA3655
PA3656
PA3685
PA3686
PA3743
PA3744
PA3745
PA3746
PA3818
PA3822
PA3967
PA4063
PA4064
PA4065
PA4067
PA4141
PA4245
PA4261
PA4262
PA4264
PA4268
PA4274
PA4348
PA4352
PA4429
PA4432
PA4433
PA4438
 
PA4563
PA4567
PA4568
PA4602
PA4670
PA4671
PA4672
 
PA4741
PA4746
PA4748
PA4834
PA4835
PA4836
PA4837
PA4838
PA4855
PA4896
PA4932
PA4933
PA4934
PA4935
PA5049
PA5051
PA5118
PA5129
PA5139
PA5315
PA5316
PA5426
PA5427
PA5470
PA5475
PA5504
PA5505
PA5536
PA5558
PA5559
PA5568
PA5569
PA5570

I'll need help from @cgreene @ajlee21 @georgiadoing and others to review the text content of the app that talks about biology and machine learning concepts that I am not qualified to verify.

Mostly on the home page and the about/help page.

We also may want a sentence at the start of each section that explains what the section is about, sort of like some places in the old adage has:

Parameters

k = 1 # number of successes in sample
K = 71 # sample size
n = 86 # number of successes in population
N = 2443 # population size

Methods

1. R fischer exact test

k <- 1; K <- 71; n <- 86; N <- 2443; mat <- matrix(c(k, K-k, n-k, N-K-n+k), nrow=2, ncol=2); print(fisher.test(mat, alternative="greater")$p.value, digits = 20);

2. New adage, using stdlib

// https://stdlib.io/docs/api/v0.0.90/@stdlib/stats/base/dists/hypergeometric/cdf
import cdf from '@stdlib/stats/base/dists/hypergeometric/cdf';

// the stdlib cdf function calculates P(X <= k), but what we really want is
// P(X >= k). therefore, provide k-1 as X instead of k to get P(X < k), then
// subtract the result from 1 to get P(X >= k)
const hyperGeometricTest = (k, K, n, N) => 1 - cdf(k - 1, N, K, n);
console.log(hyperGeometricTest(1, 71, 86, 2443))

3. R hypergeometric cdf

k <- 1; K <- 71; n <- 86; N <- 2443; sum <- 0; for(i in k:K) { sum <- sum + dhyper(i, K, N-K, n); }; print(sum, digits = 20);

4. Old adage, with manual calculation of everything

5. Scipy

from scipy.stats import hypergeom
rv = hypergeom(2443, 71, 86)
1 - rv.cdf(0)

Results

1.    0.924399831089 4454562
2.    0.924399831089 3528
3.    0.924399831089 44501211
4.    0.924399831089 443
5.    0.924399831089 2152

From Dallas Mould:

For the experiment selection, I like the paragraph describing the design/results, but I think it would be nice to have a link to the publication if possible.

From Georgia Doing:

As I was making my volcanos, if I just selected one sample for a group the page seemed to stall, blank-out and reload in a loop that I couldn’t get out of – maybe display a message to avoid this error?

From Dallas Mould:

Under sample details info about nucleic acid type is included. I think this unnecessary because they should all be RNA if we are looking at transcriptomics.

I noticed that a lot of my selectors (mapStateToProps functions) have the potential to be time consuming, especially if they're run on every state change. It might be good to implement reselect (memoized selectors) for all of my selectors, or at least the more computationally intensive ones.

This will especially help for my gene network selector, which has to take the response from the /edge endpoint and turn it into a data structure that d3 can use, which will be time consuming.

From Georgia Doing:

When clicking on a link for an experiment or sample it opened a new tab instead of changing the current window such that it took me a minute to realize I couldn’t navigate using the back button but had to return to the other tab – was this on purpose? I could see how a bunch of tabs could add up if a user didn’t notice they were opening a new one each time.

From Georgia Doing:

Searching signatures requires using a capital “S” for ‘Sig###xxx’ but itcould be user friendly to allow ‘sig###xxx’ as well

From Georgia Doing:

Search signatures by gene names or numbers?

Recently, my netlify builds on adage-frontend started failing until I go in and manually re-run them with the clear cache option.

For example, here is one that failed:
https://app.netlify.com/sites/adage-frontend/deploys/5e852ef33473ae0006386745

And the manual retry was fine:
https://app.netlify.com/sites/adage-frontend/deploys/5e852f81b140ab00118ce435

I figured it started happening because I added some more dependencies that took longer to fetch and install, and just made the deploy time-out. But I'm not sure.

For Github:

and for metadata and SEO on the actual webapp.

Here's what I have. Let's get a bunch more. @cgreene @ajlee21 @debhogan-208 @georgiadoing

web app, machine learning, neural networks, bioinformatics, computational biology, genomics, gene expression, science, education, research, academic, open source

Under the 'experiments' tab, when volcano plots are generated with the signature activities, it took me just a minute to reason which direction (left or right, pos or neg fold change) corresponded to high activity in which group (diamonds or spades).

Do you think there could be an easy way to indicate this?

Sentry captured various errors that occurred while I was testing PR #200 . Those probably shouldn't have been captured by Sentry, or at least shouldn't have been tagged as production. There must be some way to detect a PR from master code.

Right now I'm using the "generator-runner" pattern described in this article, but after some discussions with people on github and stackoverflow, it seems this approach is not ideal.

My next PR will get rid of the generator pattern and simplify the code. New actions will still override old ones, but the fetching and all the other async stuff will still be carried out to completion each time.

I want to get either the CAF or posterus integrated into the project to handle "true" cancelation, and simpler. At present, CAF doesn't seem to work with create-react-app, so I'm working with the the author to fix that.

From Dallas Mould:

For the network, rather than entrez IDs(? not sure what the numbers are), I think it would be more digestible to have gene numbers.

• add sample description to sample activity view on signatures page
• fix sample grouping volcano glitch
• add sample description to heatmap tooltip
• ungroup samples when switching experiments
• make more obvious that barcode can be clicked
• search cutoff
• tooltip on disabled col headers
• clarify volcano error message
• update dartmouth logo and text

From Georgia Doing:

I know the old server allowed samples from multiple experiments to be added to the ‘basket’ – is that something we are keeping? I liked it, but if it is overcomplicating things I wouldn’t say I need it.. it was cool though

There are some experiments with 50+ samples. Rendering 50 samples x 600 signatures = 30,000 colored rectangles is hard for the browser to do quickly with svg. Canvas would be significantly faster. However it'd make it significantly more difficult to do tooltips and links, as canvas doesn't have those things built in like svg does.

From Dallas Mould:

I like that selecting a gene redirects me to pseudomonas.com, and that the multi-search feature allows the search of strings like “reductase” and gene number at the same time. If I search “citrate” and I click the select button, however, the select button only allows me select the first gene in each search term. I think it would be nice to have an option in this case to select all the genes so that I could create a list of genes related to the term “citrate” rather than clicking them all one by one.

From Georgia Doing:

Could we download a table from the volcano plots with sigs, fold-change and pvals?

We have access to organism metadata that I believe the current UI doesn't really show. I'm not sure where this should be shown. On the selected genes table on the genes page? On the model info page? Link to a separate organism info page somewhere?

In our Slack conversation on 4/24, someone mentioned highlighting occurrences of the search string in the long-form description of the selected experiment. However unlike the other suggestions, I realized that this has some problems, so creating an issue to track it.

The issues:

1. I will have to install another library to do this reliably/robustly, and our third party libraries are already pretty large.
2. The description might not contain the search string verbatim, because the backend uses elastic search. This is the same reason I didn't try to do highlighting for all the other search results.

As such, marking this as an enhancement for now.

Under the 'experiments' tab, for the heatmap of signature activities, would it be easy to include a scale bar to show the range of activities between green and blue for the heatmap? Even if it was just relative so didn't need to include mapping to actual values for each heatmap but something to indicate green is high and blue is low?

When nothing is typed into a search box, some results still display below it. This is so people can jump right in more easily, with less steps.

But it also confuses people. What are those results, are they arbitrary, did I accidentally type something into the search, are they all of the genes, are they special.

Should we pre-populate each search box with something, eg "dna" for genes. Should we only show the top 5 results when nothing's typed in to make it clear it's not all of the genes in the database. Should we put a note between the search box and the result table that says "try these" to indicate it's a blank search.

I recently made table rows only load when they've scrolled into view, greatly improving the performance of the tables. However, since they're not loaded until they're in view, if you use tab control to try to focus rows of the table that are out of view, you wont be able to focus them because they haven't rendered (as buttons, links, etc) yet.

Need to figure out a solution to this. Ideally, the intersection observer library I've used to do the dynamic row loading should load all rows that are in view, AND a few above and below the view line. That way, users can still tab to the next one above/below, which will scroll the table automatically, and more rows will load.

Not sure if that's possible in the library though.

I didn't realize that one of the main benefits of redux-saga is concurrent action cancelling, which I implemented on my own.

Using redux-saga could simplify my api fetching code significantly.