[update docs] Update some screenshots for methylation and add to gallery

website/docs/config_guides/alignments_track.md

@@ -1,10 +1,10 @@
 ---
 id: alignment_track
 toplevel: true
-title: Alignnments track configuration
+title: Alignments track configuration
 ---
 
-Example AlignmentsTrack config:
+Example `AlignmentsTrack` config:
 
 ```json
 {
@@ -33,7 +33,7 @@ Example AlignmentsTrack config:
   - indexType: options BAI or CSI. default: BAI
   - location: a 'file location' of the index
 
-Example BamAdapter config:
+Example `BamAdapter` config:
 
 ```json
 {
@@ -54,7 +54,7 @@ Example BamAdapter config:
 - `cramLocation` - a 'file location' for the CRAM
 - `craiLocation` - a 'file location' for the CRAI
 
-Example CramAdapter config:
+Example `CramAdapter` config:
 
 ```json
 {

website/docs/config_guides/customizing_feature_colors.md

@@ -80,15 +80,17 @@ The feature in the callback is a "SimpleFeature" type object, and you can call
 `feature.get('start')`, `feature.get('end')`, `feature.get('refName')`, or
 `feature.get('other_attribute')` for e.g. maybe a field in a GFF3 column 9
 
-Footnote 0. See our [no-build plugin
-tutorial](/docs/tutorials/no_build_plugin_tutorial/) for more info on setting
-up a simple plugin for doing these customizations.
+See our [no-build plugin tutorial](/docs/tutorials/no_build_plugin_tutorial/)
+for more info on setting up a simple plugin for doing these customizations.
 
-Footnote 1. `myplugin.js` does not have to use the jbrowse-plugin-template if
-it is small and self contained like this, and does not import other modules. if
-you import other modules from your plugin, then it can be worth it to use the
+#### Footnote 1
+
+`myplugin.js` does not have to use the jbrowse-plugin-template if it is small
+and self contained like this, and does not import other modules. if you import
+other modules from your plugin, then it can be worth it to use the
 jbrowse-plugin-template.
 
-Footnote 2. if you are using embedded, there are also other methods of
-including plugins, see
-https://jbrowse.org/storybook/lgv/main/?path=/story/using-plugins--page
+#### Footnote 2
+
+If you are using embedded, there are also other methods of including plugins,
+see https://jbrowse.org/storybook/lgv/main/?path=/story/using-plugins--page

website/docs/config_guides/customizing_feature_details.md

@@ -111,18 +111,21 @@ use the custom `jexl` function in your config callbacks as follows:
 }
 ```
 
-Footnote 0. See [our no-build plugin tutorial](/docs/tutorials/no_build_plugin_tutorial/) for
+See [our no-build plugin tutorial](/docs/tutorials/no_build_plugin_tutorial/) for
 more info on setting up a simple plugin for doing these customizations.
 
-Footnote 1. Note that the feature for feature detail panels is different from
-that in the color callback: it is a plain JS object. So instead of
-`feature.get('start')`, you can say just `feature.start`. The reason it is
-different for the feature details callbacks (compared with e.g. the color
-callbacks) is that the feature is serialized into the session. You might also
-ask why aren't all features serialized or plain JSON objects normally? Well,
-some feature types like alignments features benefit from only being partially
-serialized e.g. getting only a couple attributes via `feature.get('attribute')`
-(completely converting them to a raw JSON expression is expensive). It is a
-little confusing, but that is why in the feature details, you can access the
-plain JS object e.g. `feature.start` while in color callbacks you use e.g.
-`feature.get('start')`.
+#### Footnote 1
+
+Note that the feature for feature detail panels is different from that in the
+color callback: it is a plain JS object. So instead of `feature.get('start')`,
+you can say just `feature.start`. The reason it is different for the feature
+details callbacks (compared with e.g. the color callbacks) is that the feature
+is serialized into the session.
+
+You might also ask why aren't all features serialized or plain JSON objects
+normally? Well, some feature types like alignments features benefit from only
+being partially serialized e.g. getting only a couple attributes via
+`feature.get('attribute')` (completely converting them to a raw JSON expression
+is expensive). It is a little confusing, but that is why in the feature
+details, you can access the plain JS object e.g. `feature.start` while in color
+callbacks you use e.g. `feature.get('start')`.

website/docs/embedded_components.md

@@ -1,6 +1,6 @@
 ---
 id: embedded_components
-title: Embedded components, JBrowse Jupyter, and JBrowseR
+title: Embedded components
 toplevel: true
 ---
 
@@ -43,19 +43,3 @@ Here is a table of different usages of the
 | create-react-app v4 | [demo](https://jbrowse.org/demos/cgv/)          | [source code](https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-circular-genome-view) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fdemos%2Fjbrowse-react-circular-genome-view))                     | no polyfills needed in create-react-app v4                                                       |
 | create-react-app v5 | [demo](https://jbrowse.org/demos/cgv-cra5/)     | [source code](https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-circular-genome-view-cra5) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fdemos%2Fjbrowse-react-circular-genome-view-cra5))           | for create-react-app v5, we use craco to update the webpack config to polyfill some node modules |
 | vanilla js          | [demo](https://jbrowse.org/demos/cgv-vanillajs) | [source code](https://github.com/GMOD/jbrowse-components/tree/main/demos/jbrowse-react-circular-genome-view-vanillajs) ([download](https://download-directory.github.io/?url=https%3A%2F%2Fgithub.com%2FGMOD%2Fjbrowse-components%2Ftree%2Fmain%2Fdemos%2Fjbrowse-react-circular-genome-view-vanillajs)) | uses a script tag to include a UMD bundle, and doesn't require any transpilation or bundling     |
-
-## JBrowse Jupyter
-
-Comprehensive documentation for JBrowse Jupyter is found off-site,
-[here](https://gmod.github.io/jbrowse-jupyter/docs/html/index.html).
-
-Also check out the JBrowse Jupyter [GitHub
-repo](https://github.com/GMOD/jbrowse-jupyter).
-
-## JBrowseR
-
-Comprehensive documentation for JBrowseR is found off-site,
-[here](https://gmod.github.io/JBrowseR/).
-
-Also check out the JBrowse Jupyter [GitHub
-repo](https://github.com/GMOD/JBrowseR/).

website/docs/jbrowse_jupyter.md

@@ -0,0 +1,10 @@
+---
+id: jbrowse_jupyter
+title: JBrowse Jupyter
+---
+
+Comprehensive documentation for JBrowse Jupyter is found off-site,
+[here](https://gmod.github.io/jbrowse-jupyter/docs/html/index.html).
+
+Also check out the JBrowse Jupyter [GitHub
+repo](https://github.com/GMOD/jbrowse-jupyter).

website/docs/jbrowser.md

@@ -0,0 +1,10 @@
+---
+title: JBrowseR
+id: jbrowser
+---
+
+Comprehensive documentation for JBrowseR is found off-site,
+[here](https://gmod.github.io/JBrowseR/).
+
+Also check out the JBrowse Jupyter [GitHub
+repo](https://github.com/GMOD/JBrowseR/).

website/docs/user_guides/alignments_track.md

@@ -95,7 +95,7 @@ modification. It uses two modes:
    sequence context)
 
 <Figure caption="The track menu can be used to access the settings to color by modifications or methylation." src="/img/alignments/modifications1.png" />
-<Figure caption="Screenshot showing the same track in both modifications mode and methylation mode." src="/img/alignments/modifications2.png" />
+<Figure caption="Screenshot showing the same track in both modifications mode and methylation mode. This is a hypo-methylated CpG island (there are no methylation marks in a CpG island)" src="/img/alignments/modifications2.png" />
 <Figure caption="After the setting has been enabled you can revisit the dialog box to see the current coloring settings." src="/img/alignments/modifications3.png" />
 
 ### Color by orientation

website/sidebars.json

@@ -96,6 +96,8 @@
       ]
     },
     "embedded_components",
+    "jbrowse_jupyter",
+    "jbrowser",
     "cli",
     "faq",
     {

website/src/pages/gallery.md

@@ -88,3 +88,8 @@ The read vs reference visualization can show the "sequence track" on the "read"
 to see which bases are inserted. Users can also use the "Get sequence" click
 and drag to get the sequence of the contents of the insertions or unaligned
 portions of the read (e.g. softclipped parts)
+
+---
+
+![](/img/alignments/modifications2.png)
+A hypo-methylated CpG island shown using the MM tag with nanopore reads