Add genome build to dropdowns to changelog

[elissa-alarmani]

Related PR: https://github.com/broadinstitute/gnomad-browser/pull/1152

Adds a entry to the changelog noting addition of the genome builds to dropdowns in the browser.

[elissa-alarmani]

Thanks for the suggestions and feedback @mattsolo1 and @ch-kr! I just implemented those changes

[mattsolo1]

Hmm... not seeing the images on the preview https://gnomad.broadinstitute.org/news/preview/124/2023-08-add-genome-build-to-dropdowns

@rileyhgrant any idea what's going on?

[rileyhgrant]

@ rileyhgrant any idea what's going on?

Yup, this is because of some funny directory stuff going on under the hood when Gatsby builds the site. The paths referenced should look like ../images/<my-image> rather than ../../static/images/<my-image>. Here is an example PR, if that's more helpful.

In addition, I would request adding an alt attribute to the <img> tags, for accessibility reasons :)

[elissa-alarmani]

Thanks @rileyhgrant for letting me know! I updated the image path and on the preview it looks like the images are loading

[ch-kr]

The updated change looks good to me! I have one slightly annoying question, though. Now that I've seen the dropdowns side by side, I was wondering: why not make the displays consistent? By that, I mean also group the dataset selection dropdown by build:

GRCh38
gnomAD v3.1.2
76,156 samples

gnomAD v3.1.2 (non-cancer)
74,023 samples
...

GRCh37
gnomAD v2.1.1
141,456 samples
...

instead of the current display?

[elissa-alarmani]

That's a good point to keep consistency, would it look something like this?

[ch-kr]

yes, exactly! It might be a good idea to make the build gray here also (to visually match the search bar)

[rileyhgrant]

yes, exactly! It might be a good idea to make the build gray here also (to visually match the search bar)

Nice, I like this idea KC. Alas, the color of the categories is browser dependent, since it's using an HTML tag instead of a react component. That said, most people are likely using Chrome.

Firefox:

Chrome:

Safari:

[elissa-alarmani]

Here is another possible view, I didn't change the color but just reduced its opacity like how it was done with each dataset details of their sample count

[ch-kr]

Alas, the color of the categories is browser dependent, since it's using an HTML tag instead of a react component.

ooh, TIL! In that case, no preference from me about the exact color of the genome build text. My priority is making sure the color in the two views match (so with the colors above: for someone using chrome, the build text should be gray in both views, and for someone using firefox, the build text should be black in both views)

[mattsolo1]

I personally don't think it's terribly important that the search bar styling matches with the dataset drop down exactly. One is clearly a standard HTML component, the other a custom component. I do think the bold version of the dataset dropdown is a bit more clear and would opt for this across all browsers.