Create new JB2 plugin store

[elliothershberg]

This PR implements the plugin store described by #1838 .

In working on this PR, I set up the initial list of plugins at: https://github.com/GMOD/jbrowse-plugin-list

A Github Action copies the JSON file of plugin data to S3 when the repo is updated. There is also a guide for adding a new plugin at this repo.

I've added a step to the website build where this file is fetched.

The plugin store looks like this:

When you click "show configuration" for a given plugin card, you get a copyable code block of the JSON configuration necessary to add the plugin:

Note: I didn't implement search or pagination for the plugin store, because we currently only have 7 plugins in the store. I could either add that to this PR, or we could revisit this as the store grows.

[cmdcolin]

Nice start on this. Is it non-draft or draft pr? Design wise, the "card" being one large clickable element is a little weird to me

[elliothershberg]

Nice start on this. Is it non-draft or draft pr? Design wise, the "card" being one large clickable element is a little weird to me

Thanks. Currently is non-draft, since it's in a mergeable state in my opinion. That is based on how it's structured in the MUI docs, but I could change it up.

[cmdcolin]

If the <Card> component is really just fundamentally based on the entire thing being a large clickable component, i'd move away from that to something more like a plain <Paper> component.

I would also personally like smaller screenshots. I think often modern websites have "too little information density" and for example, the screenshots in the original post here really only has a single plugin displayed in the webpage. I think more compact display can help with this.

I might also suggest having the menu item say "Plugins" instead of "Plugin Store".

[elliothershberg]

I got rid of the <CardActionArea> component, and that fixed the issue with the Card being a clickable surface. Also changed the title to "Plugins".

I'd like to stick with the current design though, I think it looks nice and folks I've paired with seem to like it 😃

[codecov]

Codecov Report

Merging #1892 (7d857ff) into main (559a61c) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main    #1892   +/-   ##
=======================================
  Coverage   58.59%   58.59%           
=======================================
  Files         460      460           
  Lines       21357    21357           
  Branches     5084     5084           
=======================================
  Hits        12514    12514           
  Misses       8536     8536           
  Partials      307      307           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 559a61c...7d857ff. Read the comment docs.

[cmdcolin]

alrighty then.

I might further suggest adding something like an "explainer" at the top of the page that helps orient people as to "what they are looking at"

Also the links for

• Create a new plugin
• Add plugin to store

These are very developer specific, while the plugin store here maybe "should" be more about users...maybe we can move those links to a different part of the page, or just it into a different panel like "Resources for plugin developers" or something like that?

[cmdcolin]

also xref GMOD/jbrowse-plugin-list#2

I do think that smaller figures may still be preferable. i think jbrowse 1 plugin registry is pretty good design wise with the small figures. I think that it is enticing enough where you can click to get more info, where the large figures are kind of overwhelming

[cmdcolin]

Random other thing, the configurations appear to use uncapitalized plugin names, I think they must be capitalized e.g. UCSC and GWAS

{
    "name": "Ucsc",
    "url": "https://unpkg.com/jbrowse-plugin-ucsc/dist/jbrowse-plugin-ucsc.umd.production.min.js"
}

[elliothershberg]

A few updates:

The configuration are already capitalized, there shouldn't be an issue there 👍

I've added two buttons to the top, replacing the links:

Each one opens a dialog with some more information. The about section describes a little bit about plugins and how they work. The developer guide introduces the template and where to submit a PR with new plugins.

I personally like the bigger screenshots. Since we are a visualization app, it gives the chance to show off some cool new views, etc. that a plugin might provide without having to click further.

I'm open to more design discussion, but am putting most of my efforts on #336 .

[cmdcolin]

The configuration are already capitalized, there shouldn't be an issue there +1

Not sure if this is fixed, clicking "Show configuration" says

{
    "name": "Gwas",
    "url": "https://unpkg.com/jbrowse-plugin-gwas/dist/jbrowse-plugin-gwas.umd.production.min.js"
}

It needs to be capitalized as GWAS. Same with capitalization for UCSC, MSAView, GDC, etc.

[elliothershberg]

Oooh, gotcha. Okay I'll fix that now.

[elliothershberg]

Fixed that issue

[cmdcolin]

@elliothershberg I think website/plugins.json should be gitignore'd from this repo no? It is currently committed to main

[rbuels]

damn missed that in the diff

[elliothershberg]

Yeah, I guess that could be good to add to gitignore since it is fetched each time

[cmdcolin]

could you go ahead and do that? i think it ensures correctness that it is fetched each time too

[elliothershberg]

Yeah, will do right now on main. Was busy getting a vaccine dose 🤩 💉