Add more MDX documentation pages to @jbrowse/react-linear-genome-view…

… storybooks (#2262)

Organize storybooks

Breakup a little more

Remove text searching examples

package.json

@@ -39,12 +39,12 @@
     "@oclif/dev-cli": "^1.25.1",
     "@oclif/test": "^1.2.7",
     "@rescripts/cli": "^0.0.14",
-    "@storybook/addon-actions": "^6.3.4",
-    "@storybook/addon-docs": "^6.3.4",
-    "@storybook/addon-links": "^6.3.4",
-    "@storybook/addons": "^6.3.4",
+    "@storybook/addon-actions": "^6.3.7",
+    "@storybook/addon-docs": "^6.3.7",
+    "@storybook/addon-links": "^6.3.7",
+    "@storybook/addons": "^6.3.7",
     "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "^6.3.4",
+    "@storybook/react": "^6.3.7",
     "@testing-library/jest-dom": "^5.5.0",
     "@testing-library/react": "^11.0.0",
     "@types/base64-js": "^1.2.5",

products/jbrowse-react-linear-genome-view/stories/DefaultSessions.stories.mdx

@@ -94,5 +94,5 @@ const defaultSession = {
 Here is an example LGV with a long reads alignment track loaded in the `defaultSession`:
 
 <Canvas>
-  <Story id="linear-view--linear-view-with-long-reads" />
+  <Story id="linear-view--with-long-reads" />
 </Canvas>

products/jbrowse-react-linear-genome-view/stories/GettingStarted.stories.mdx

@@ -19,18 +19,21 @@ This is an example of what a story looks like:
   <Story id="linear-view--one-linear-genome-view" />
 </Canvas>
 
-You can test out the various features of the component, and open tracks and interact with
-it as you would in your app.
-You can also click on the code button on the bottom right to see what the code looks
-like for the component being viewed.
+You can test out the various features of the component, and open tracks and
+interact with it as you would in your app. You can also click on the code
+button on the bottom right to see what the code looks like for the component
+being viewed.
 
 ## An overview of the LGV API
 
-The LGV component relies on the same [configuration](https://jbrowse.org/jb2/docs/config_guide)
-as the main JB2 app, with a few noteworthy differences.
-First, the component can be configured using a standalone JSON file like JB2, or can be
-configured with JavaScript objects in the source code of the app where it is being used, as
-shown [here](https://github.com/GMOD/jbrowse-components/blob/HEAD/products/jbrowse-react-linear-genome-view/docs/example.md).
+The LGV component relies on the same
+[configuration](https://jbrowse.org/jb2/docs/config_guide) as the main JB2 app,
+with a few noteworthy differences.
+
+First, the component can be configured using a standalone JSON file like JB2,
+or can be configured with JavaScript objects in the source code of the app
+where it is being used, as shown
+[here](https://github.com/GMOD/jbrowse-components/blob/HEAD/products/jbrowse-react-linear-genome-view/docs/example.md).
 
 Second, while this is the structure of a JB2 configuration file:
 
@@ -74,6 +77,23 @@ const state = createViewState({
 })
 ```
 
+Example
+
+<Canvas withSource="open">
+  <Story id="linear-view--using-loc-object" />
+</Canvas>
+
+## Providing a text search index
+
+You can provide a text-search index generated by the jbrowse CLI in the
+component also. See the next example, you can type in the search box for a gene
+name e.g. "EDEN" and it will open up to the location of this feature and open
+the track it is on
+
+<Canvas withSource="open">
+  <Story id="linear-view--with-text-searching" />
+</Canvas>
+
 ## Additional resources
 
 This overview is intended as a launching point for initial use of the LGV component.

products/jbrowse-react-linear-genome-view/stories/JBrowseLinearGenomeView.stories.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react'
 import { createViewState, JBrowseLinearGenomeView, loadPlugins } from '../src'
 import volvoxConfig from '../public/test_data/volvox/config.json'
 import volvoxSession from '../public/volvox-session.json'
+import nextstrainConfig from '../public/nextstrain_covid.json'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function addRelativeUris(config: any, baseUri: string) {
@@ -19,11 +20,8 @@ function addRelativeUris(config: any, baseUri: string) {
   }
 }
 
-addRelativeUris(
-  volvoxConfig,
-  new URL('test_data/volvox/config.json', window.location.href).href,
-)
-
+const configPath = 'test_data/volvox/config.json'
+addRelativeUris(volvoxConfig, new URL(configPath, window.location.href).href)
 const supportedTrackTypes = [
   'AlignmentsTrack',
   'PileupTrack',
@@ -59,52 +57,42 @@ export const OneLinearGenomeView = () => {
   return <JBrowseLinearGenomeView viewState={state} />
 }
 
-export const OneLinearGenomeViewUsingLocObject = () => {
+export const UsingLocObject = () => {
   const state = createViewState({
     assembly,
     tracks,
     defaultSession,
 
     // use 0-based coordinates for "location object" here
     location: { refName: 'ctgA', start: 10000, end: 20000 },
-    onChange: patch => {
-      // eslint-disable-next-line no-console
-      console.log('patch', patch)
-    },
   })
   return <JBrowseLinearGenomeView viewState={state} />
 }
-
-export const LinearViewWithLongReads = () => {
+export const WithLongReads = () => {
   const state = createViewState({
     assembly,
     tracks,
     defaultSession: longReadsSession,
     location: 'ctgA:1105..1221',
-    onChange: patch => {
-      // eslint-disable-next-line no-console
-      console.log('patch', patch)
-    },
   })
 
   return <JBrowseLinearGenomeView viewState={state} />
 }
 
-export const OneLinearGenomeViewWithOutsideStyling = () => {
+export const WithOutsideStyling = () => {
   const state = createViewState({
     assembly,
     tracks,
     defaultSession,
     location: 'ctgA:1105..1221',
-    onChange: patch => {
-      // eslint-disable-next-line no-console
-      console.log('patch', patch)
-    },
   })
 
   return (
     <div style={{ textAlign: 'center', fontFamily: 'monospace' }}>
-      <h2>Hello world, this is centered but not affecting the internal LGV</h2>
+      <h2>
+        This parent container has textAlign:'center' and a monospace font, but
+        these attributes are not affecting the internal LGV
+      </h2>
       <JBrowseLinearGenomeView viewState={state} />
     </div>
   )
@@ -136,10 +124,12 @@ export const TwoLinearGenomeViews = () => {
 
 export const WithPlugins = () => {
   // usage with buildtime plugins
+  // this plugins array is then passed to the createViewState constructor
   // import UCSCPlugin from 'jbrowse-plugin-ucsc'
   // const plugins = [UCSCPlugin]
 
-  // alternative usage with runtime plugins
+  // usage with runtime plugins
+  // this plugins array is then passed to the createViewState constructor
   const [plugins, setPlugins] = useState<PluginRecord[]>()
   useEffect(() => {
     async function getPlugins() {
@@ -245,6 +235,7 @@ export const WithPlugins = () => {
   })
   return <JBrowseLinearGenomeView viewState={state} />
 }
+
 export const CustomTheme = () => {
   const state = createViewState({
     assembly,
@@ -299,6 +290,32 @@ export const CustomTheme = () => {
   })
   return <JBrowseLinearGenomeView viewState={state} />
 }
+export const NextstrainExample = () => {
+  const { assembly, tracks, defaultSession } = nextstrainConfig
+  const state = createViewState({
+    assembly,
+    tracks,
+    defaultSession,
+    location: 'SARS-CoV-2:1..29,903',
+    onChange: patch => {
+      // eslint-disable-next-line no-console
+      console.log('patch', patch)
+    },
+    configuration: {
+      theme: {
+        palette: {
+          primary: {
+            main: '#5da8a3',
+          },
+          secondary: {
+            main: '#333',
+          },
+        },
+      },
+    },
+  })
+  return <JBrowseLinearGenomeView viewState={state} />
+}
 
 const JBrowseLinearGenomeViewStories = {
   title: 'Linear View',

products/jbrowse-react-linear-genome-view/stories/MoreExamples.stories.mdx

@@ -0,0 +1,22 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
+
+<Meta title="More Examples" />
+
+## Example showing two linear genome views on the same page
+
+This page of course has more than two instances, but this is just a quick code
+snippet to demonstrate
+
+<Canvas withSource="open">
+  <Story id="linear-view--two-linear-genome-views" />
+</Canvas>
+
+## Demo showing that outside styles don't conflict with the component
+
+The react component takes measures to avoid being affected by styles outside of
+it on the page. In this case, a font and a text align, which without measures
+could affect the jbrowse-react-linear-genome-view component, is fine here.
+
+<Canvas withSource="open">
+  <Story id="linear-view--with-outside-styling" />
+</Canvas>