Refactor linear genome view storybook

[cmdcolin]

This 'modularizes' many of the storybook examples, and adds a 'source code' link so that users browsing documentation can find the source code for examples. We had used the 'Canvas' component which can sort of show the source code for an example, but it only shows code inside that single 'function component' where this change aims to show the whole file used to create an example.

[codecov]

Codecov Report

Merging #3646 (66d5b02) into main (c155f5c) will increase coverage by 0.00%.
The diff coverage is 45.00%.

@@           Coverage Diff           @@
##             main    #3646   +/-   ##
=======================================
  Coverage   63.06%   63.07%           
=======================================
  Files         877      877           
  Lines       30167    30167           
  Branches     7272     7277    +5     
=======================================
+ Hits        19026    19027    +1     
+ Misses      10956    10955    -1     
  Partials      185      185           

Impacted Files	Coverage Δ
packages/core/util/index.ts	82.04% <0.00%> (-1.05%)	⬇️
products/jbrowse-cli/src/commands/upgrade.ts	76.31% <0.00%> (ø)
...se-react-linear-genome-view/src/createViewState.ts	57.69% <0.00%> (+9.30%)	⬆️
.../alignments/src/LinearReadArcsDisplay/drawFeats.ts	81.65% <100.00%> (ø)
...alignments/src/LinearReadCloudDisplay/drawFeats.ts	86.31% <100.00%> (ø)
plugins/gtf/src/util.ts	97.22% <100.00%> (-0.08%)	⬇️
products/jbrowse-cli/src/testUtil.ts	93.84% <100.00%> (ø)

... and 2 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[carolinebridge]

Might be relevant to include a section, maybe in Getting Started about data limitations, how JBrowse handles large files with Range Requests, and how to configure the limit;

If we want to have the page in our Storybook, we could also consider constructing an API for the LGV methods like addTrack with this PR

[carolinebridge]

There are a couple of instances where the capitalization of "Source code" isn't consistent...

I think adding a link to the source code is a good idea overall though in the spirit of a more "complete" example.

We might be able to present it more cleanly using this addon: https://storybook.js.org/addons/storybook-source-code-addon .. haven't investigated it fully but may look better than the hyperlink.

[cmdcolin]

fixed capitalization, good catch. that add-on looks interesting. might be ok to have hyperlink though for now. with the add-on looks like you can have one source per story (we sometimes, even with my modularization, have multiple sometimes), then it is either in a template string (MyComponent.code.js) so might not have good type checking, or linked via url which the hyperlink essentially gives us

[carolinebridge]

the guide for creating default sessions has a broken link now?

maybe clarify that "code example" is "Code example embedding react-linear-genome-view into a React page"..or something

[cmdcolin]

fixed link for default sessions, added your clarification text, and also added link out to https://jbrowse.org/jb2/docs/embedded_components/

[cmdcolin]

new sidebar organization now has less 'blue links'...idea from pairing with @garrettjstevens to simplify the sidebar

collapsed

expanded