Merge pull request #2163 from GMOD/react_cgv

Add new embeddable React Circular Genome View

plugins/circular-view/src/CircularView/models/CircularView.ts

@@ -196,6 +196,28 @@ export default function CircularView(pluginManager: PluginManager) {
           })
           return assemblyNames
         },
+        get initialized() {
+          const { assemblyManager } = getSession(self)
+
+          // if the assemblyManager is tracking a given assembly name, wait for
+          // it to be loaded. this is done by looking in the assemblyManager's
+          // assembly list, and then waiting on it's initialized state which is
+          // updated later
+          const assembliesInitialized = this.assemblyNames.every(
+            assemblyName => {
+              if (
+                assemblyManager.assemblyList
+                  ?.map(asm => asm.name)
+                  .includes(assemblyName)
+              ) {
+                return (assemblyManager.get(assemblyName) || {}).initialized
+              }
+              return true
+            },
+          )
+
+          return assembliesInitialized
+        },
       }))
       .volatile(() => ({
         error: undefined as Error | undefined,

products/jbrowse-react-circular-genome-view/.gitignore

@@ -0,0 +1,2 @@
+# Ignore the static build of storybook
+storybook-static/

products/jbrowse-react-circular-genome-view/.storybook/fsMock.js

@@ -0,0 +1,3 @@
+module.exports = {
+  fsFunc: () => 'mocked file',
+}

products/jbrowse-react-circular-genome-view/.storybook/main.js

@@ -0,0 +1,70 @@
+const path = require('path')
+const spawn = require('cross-spawn')
+const root = require('find-yarn-workspace-root')()
+
+const pgks = spawn.sync('yarn', ['--json', 'workspaces', 'info'])
+const output = JSON.parse(pgks.output[1].toString())
+const packages = JSON.parse(output.data)
+
+module.exports = {
+  stories: ['../stories/**/*.stories.@(ts|tsx|mdx)'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    '@storybook/addon-docs',
+    {
+      name: '@storybook/preset-create-react-app',
+      options: { scriptsPackageName: 'react-scripts' },
+    },
+  ],
+  // This uses similar logic to products/jbrowse-web/rescripts/yarnWorkspacesRescript.js
+  webpackFinal: async config => {
+    config.module.rules.push(
+      {
+        test: /\.(ts|tsx)$/,
+        use: [
+          {
+            loader: require.resolve('ts-loader'),
+            options: { transpileOnly: true },
+          },
+          { loader: require.resolve('react-docgen-typescript-loader') },
+        ],
+      },
+      {
+        test: /\.(js|mjs|jsx|ts|tsx)$/,
+        include: Object.keys(packages).map(_ =>
+          path.join(root, packages[_].location),
+        ),
+        loader: require.resolve('babel-loader'),
+        options: {
+          customize: require.resolve(
+            'babel-preset-react-app/webpack-overrides',
+          ),
+          presets: [require.resolve('babel-preset-react-app')],
+          plugins: [
+            [
+              require.resolve('babel-plugin-named-asset-import', {
+                paths: ['../../node_modules/react-scripts/node_modules'],
+              }),
+              {
+                loaderMap: {
+                  svg: { ReactComponent: '@svgr/webpack?-svgo,+ref![path]' },
+                },
+              },
+              'yarn-workspaces-rescript-babel-plugin-named-asset-import',
+            ],
+          ],
+        },
+      },
+    )
+
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      fs: path.resolve(__dirname, 'fsMock.js'),
+    }
+
+    config.resolve.extensions.push('.ts', '.tsx')
+
+    return config
+  },
+}

products/jbrowse-react-circular-genome-view/README.md

@@ -0,0 +1,71 @@
+# @jbrowse/react-circular-genome-view
+
+> JBrowse 2 circular genome view React component
+
+[JBrowse 2](https://jbrowse.org/jb2/) is a pluggable open-source platform for
+visualizing, integrating, and sharing biological data. This component consists
+of a single JBrowse 2 circular genome view.
+
+## Usage
+
+```tsx
+import React from 'react'
+import 'fontsource-roboto'
+import {
+  createViewState,
+  JBrowseCircularGenomeView,
+} from '@jbrowse/react-circular-genome-view'
+
+function View() {
+  const state = createViewState({
+    assembly: {
+      /* assembly */
+    },
+    tracks: [
+      /* tracks */
+    ],
+  })
+  return <JBrowseCircularGenomeView viewState={state} />
+}
+```
+
+![](docs/img/exampleView.png)
+
+For a full working example, see [this example](docs/example.md).
+
+## Install
+
+With [yarn](https://yarnpkg.com/):
+
+```
+$ yarn add @jbrowse/react-circular-genome-view
+```
+
+Or with [npm](https://npmjs.org/):
+
+```
+$ npm install @jbrowse/react-circular-genome-view
+```
+
+## Documentation
+
+The latest Storybook documentation for the component is hosted [here](https://jbrowse.org/storybook/lgv/main).
+
+### Note on fonts
+
+[Roboto](https://fonts.google.com/specimen/Roboto) is the recommended font for
+JBrowse, and this component will use that font if it is available. The easiest
+way to add it is to add the
+[`fontsource-roboto`](https://www.npmjs.com/package/fontsource-roboto) package
+to your project and import it in your root `index.js`.
+
+## Academic Use
+
+This package was written with funding from the [NHGRI](https://genome.gov/) as
+part of the JBrowse project. If you use it in an academic project that you
+publish, please cite the most recent JBrowse paper, which will be linked from
+[jbrowse.org](https://jbrowse.org/).
+
+## License
+
+MIT

products/jbrowse-react-circular-genome-view/docs/example.md

@@ -0,0 +1,103 @@
+This is an example of an assembly and tracks configuration for a simple human
+genome example using publicly hosted data files. It includes the hg19
+reference sequence and a structural variant track.
+
+```tsx
+import React from 'react'
+import 'fontsource-roboto'
+import {
+  createViewState,
+  JBrowseCircularGenomeView,
+} from '@jbrowse/react-circular-genome-view'
+
+const assembly = {
+  name: 'hg19',
+  aliases: ['GRCh37'],
+  sequence: {
+    type: 'ReferenceSequenceTrack',
+    trackId: 'Pd8Wh30ei9R',
+    adapter: {
+      type: 'BgzipFastaAdapter',
+      fastaLocation: {
+        uri: 'https://jbrowse.org/genomes/hg19/fasta/hg19.fa.gz',
+      },
+      faiLocation: {
+        uri: 'https://jbrowse.org/genomes/hg19/fasta/hg19.fa.gz.fai',
+      },
+      gziLocation: {
+        uri: 'https://jbrowse.org/genomes/hg19/fasta/hg19.fa.gz.gzi',
+      },
+    },
+  },
+  refNameAliases: {
+    adapter: {
+      type: 'RefNameAliasAdapter',
+      location: {
+        uri:
+          'https://s3.amazonaws.com/jbrowse.org/genomes/hg19/hg19_aliases.txt',
+      },
+    },
+  },
+}
+
+const tracks = [
+  {
+    type: 'VariantTrack',
+    trackId: 'pacbio_sv_vcf',
+    name: 'HG002 Pacbio SV (VCF)',
+    assemblyNames: ['hg19'],
+    category: ['GIAB'],
+    adapter: {
+      type: 'VcfTabixAdapter',
+      vcfGzLocation: {
+        uri:
+          'https://s3.amazonaws.com/jbrowse.org/genomes/hg19/pacbio/hs37d5.HG002-SequelII-CCS.bnd-only.sv.vcf.gz',
+      },
+      index: {
+        location: {
+          uri:
+            'https://s3.amazonaws.com/jbrowse.org/genomes/hg19/pacbio/hs37d5.HG002-SequelII-CCS.bnd-only.sv.vcf.gz.tbi',
+        },
+      },
+    },
+  },
+]
+
+const defaultSession = {
+  name: 'My session',
+  view: {
+    id: 'circularView',
+    type: 'CircularView',
+    bpPerPx: 5000000,
+    tracks: [
+      {
+        id: 'uPdLKHik1',
+        type: 'VariantTrack',
+        configuration: 'pacbio_sv_vcf',
+        displays: [
+          {
+            id: 'v9QVAR3oaB',
+            type: 'ChordVariantDisplay',
+            configuration: 'pacbio_sv_vcf-ChordVariantDisplay',
+          },
+        ],
+      },
+    ],
+  },
+}
+
+function View() {
+  const state = createViewState({
+    assembly,
+    tracks,
+    defaultSession,
+  })
+  return <JBrowseCircularGenomeView viewState={state} />
+}
+
+export default View
+```
+
+This is what the component should look like:
+
+![a view](./img/exampleView.png)

products/jbrowse-react-circular-genome-view/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@jbrowse/react-circular-genome-view",
+  "version": "1.3.2",
+  "description": "JBrowse 2 circular genome view React component",
+  "keywords": [
+    "jbrowse",
+    "jbrowse2"
+  ],
+  "license": "MIT",
+  "homepage": "https://jbrowse.org",
+  "bugs": "https://github.com/GMOD/jbrowse-components/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GMOD/jbrowse-components.git",
+    "directory": "products/jbrowse-react-circular-genome-view"
+  },
+  "author": "JBrowse Team",
+  "main": "dist/index.js",
+  "module": "dist/jbrowse-react-circular-genome-view.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "docs"
+  ],
+  "scripts": {
+    "start": "tsdx watch",
+    "start:umd": "cross-env NODE_ENV=development webpack-dev-server",
+    "build": "npm-run-all clean build:*",
+    "build:tsdx": "tsdx build",
+    "build:webpack": "npm-run-all build:webpack:*",
+    "build:webpack:dev": "cross-env NODE_ENV=development webpack",
+    "build:webpack:prod": "cross-env NODE_ENV=production webpack",
+    "clean": "rimraf dist",
+    "test": "cd ../..; jest plugins/circular-genome-view --passWithNoTests",
+    "prepublishOnly": "yarn test",
+    "prepare": "tsdx build",
+    "storybook": "start-storybook --static-dir public --port 6006",
+    "storybook:build": "build-storybook --quiet --static-dir public"
+  },
+  "dependencies": {
+    "@jbrowse/core": "^1.3.2",
+    "@jbrowse/plugin-circular-view": "^1.3.2",
+    "@jbrowse/plugin-config": "^1.3.1",
+    "@jbrowse/plugin-data-management": "^1.3.1",
+    "@jbrowse/plugin-sequence": "^1.3.1",
+    "@jbrowse/plugin-variants": "^1.3.2",
+    "@jbrowse/plugin-wiggle": "^1.3.1",
+    "@material-ui/core": "^4.12.2",
+    "@material-ui/icons": "^4.0.0",
+    "@material-ui/lab": "^4.0.0-alpha.45",
+    "mobx": "^5.10.1",
+    "mobx-react": "^6.0.3",
+    "mobx-state-tree": "3.14.1",
+    "prop-types": "^15.0.0",
+    "react-use-dimensions": "^1.2.1",
+    "rxjs": "^6.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

products/jbrowse-react-circular-genome-view/public/test_data

@@ -0,0 +1 @@
+../../../test_data/