Refactor site

[vincerubinetti]

Description

This is a very large change that affects basically everything in the /site folder. When I first scaffolded the site, I avoided adding extra complication since non-web-developers would be editing it. But after encountering several bugs that would've been avoided by type-safety, and accumulating a bunch of utility and one-off style classes, I wanted to just upgrade the code base to modern best practices, even if it makes changes a bit more difficult for others.

Unfortunately, we should review the entire site page by page to make sure nothing has broken.

I did make some opinionated changes that may end up being reverted:

• To make layout on the locus page more predictable and clean, I got rid of a lot of the conditional rendering. This means that info boxes are often empty, but what you get in return is that they'll always be in the same position, which can be good for muscle memory and comparing tabs side by side. It also has a secondary benefit of showing the user what types of info we have about loci in general, even if this locus is missing some of it.
• I changed the evidence colors to something that I think looks more consistent and readable. Iirc, you wanted to match what some external site was doing for coloring, but perhaps it's okay to blaze our own trail here.

If you have any questions or would like an in-person walkthrough of these changes, lmk.

Major Changes

• Convert to typescript
• Convert from vanilla css to tailwind
• Fresh coat of paint (update theme colors, styles, etc)
• Make locus page layout more static (less conditional rendering of sections and boxes)
• Closes Website changes #343

Checklist

• All changes are well summarized
• Check all tests pass
• Check that the website preview looks good
• Update the STRchive version in CITATION.cff, format X.Y.Z. If any major changes, increment Y. If only minor changes, increment Z. If the breaking change (rare), increment X.
• Ask someone to review this PR

[netlify]

✅ Deploy Preview for strchive ready!

Name	Link
🔨 Latest commit	bbb0c06
🔍 Latest deploy log	https://app.netlify.com/projects/strchive/deploys/6a39511cd4a2c10007d2d7cc
😎 Deploy Preview	https://deploy-preview-493--strchive.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[hdashnow]

Hi @vincerubinetti, this looks great! Here are the things I've noticed. Some could be left for a future PR.

Loci table

Motif (len): sort by len (numerical) then by motif (alphabetical)
I found the +/- not super intuitive

Locus pages

I don't like the "#" in front of each reference number. I think having the number on the same line as the citation looks nicer, but not super fussed.

Raw PubMed search results link is broken (it was already broken before this PR). Should go to data/literature/[GENE]_batch_01.txt e.g.
ABCD3_batch_01.txt

Bubble empty

CriTRia table

I found it a little hard to visually distinguish between the Strong and Definitive colors. Otherwise, the colors all clearly match the strength of the evidence, so good selections.

I think a legend of the categories, their corresponding scores, and colors should be somewhere. e.g. something like this.

A download table button would be nice here (could go on a future development list).

CriTRia curation page

I think Score and Category should be visually grouped. Current:

Here's another grouping that might work:

[hdashnow]

A few more curation category visualization ideas.

Icons:

Showing the range of scores visually:

[vincerubinetti]

Some could be left for a future PR.

I think we can use this as an opportunity to knock out any other changes you were wanting, unless they're very oneroous.

I found the +/- not super intuitive

I'm not sure that an icon or color alone can be 100% clear for so much nuance. But I have replaced it with something that might be slightly better. I switched to tabler icons due to some issues with react-icons. If you see anything there that fits better, we can replace it with that.

I don't like the "#" in front of each reference number

I removed the # and reverted to the old style. I thought having the same box style as the other fields was nice, but the refs and additional literature are sort of in their own category so it makes sense to let them look different.

Raw PubMed search results link is broken data/literature/[GENE]_batch_01.txt

Fixed

Bubble empty

Fixed.

I found it a little hard to visually distinguish between the Strong and Definitive colors.

I tweaked the colors a bit and increase the separation between strong/definitive. I can make strong match the blue you have in your screenshot, but I did enjoy the symmetry of the hue values here (brightness, saturation, hue):

I think a legend of the categories, their corresponding scores, and colors should be somewhere.

I put a table of this near the top of the criTRia page, this seemed most appropriate. I'll let you fill it out with more details as you see fit.

A download table button would be nice here (could go on a future development list).

Added

CriTRia curation page

Fixed

[vincerubinetti]

Regarding the in-text citations for evidence, I noticed that there was no references field like the one that is prepopulated for the loci. So I switched to simply recording the list of the references myself as I extract them from all the other fields, for both the loci and curations. If I do it this way, for the loci, I should get exactly what is in the pre-computed references field right? If I recall, the references fieldwas something you were also pre-computing separately in python as both a convenience for people using the json directly, and me. Andadditional_literature` are extra citations that are relevant to the locus, but not directly referenced in any of the other fields.

[hdashnow]

@vincerubinetti would it be helpful to add a references field in criTRia for consistency? It is indeed a convenience field and would be easy to create/update during the json validation step.

[hdashnow]

Could you please move the criTRia download buttons to the top right corners of their respective tables? That will make it consistent with the locus table and easier to find.

The colors and symbols look better to me now. I am noticing that the "No Known" and "Limited" are the same/similar colors. I think "No Known" should be grey (closest to "Provisional" in meaning).

[hdashnow]

We also added a new field to the locus pages since you started this PR. Something like this is needed:

      <!-- detection -->
      <div class="box">
        <strong>Detection</strong>
        {locus.detection && <div>{locus.detection}</div>}
      </div>

[hdashnow]

@vincerubinetti would it be helpful to add a references field in criTRia for consistency? It is indeed a convenience field and would be easy to create/update during the json validation step.

I added references

[vincerubinetti]

@vincerubinetti would it be helpful to add a references field in criTRia for consistency?

That seems good for people consuming the json. For me, it doesn't make much of a difference since I have to keep a running list of the references I've extracted from the fields anyway. And I'm thinking it makes sense for me to use my personal lists rather than the reference fields. This way the displayed references always match the same logic I'm using to extract them from the fields. And, if there's a difference between your extraction and my extraction logic (e.g. regex differences), it might be more noticeable this way, since the references section itself would be a different length or something.

We also added a new field to the locus pages since you started this PR. Something like this is needed:

Added a full width box after mechanism.

Could you please move the criTRia download buttons to the top right corners of their respective tables? That will make it consistent with the locus table and easier to find.

Changed. What are your thoughts on just making all tables downloadable by default, and making the download button part of the standard controls (and moving all the controls to the top), e.g.:

The colors and symbols look better to me now. I am noticing that the "No Known" and "Limited" are the same/similar colors. I think "No Known" should be grey (closest to "Provisional" in meaning).

Changed

[hdashnow]

What are your thoughts on just making all tables downloadable by default, and making the download button part of the standard controls (and moving all the controls to the top)

I think this is a good idea.

Let me know if you'd like me to add a merge commit or rebase to re-align this branch with main.