From 0ac692f07a6daea57214f832c07fa25dd7c7109e Mon Sep 17 00:00:00 2001 From: Elliot Hershberg Date: Wed, 7 Apr 2021 12:54:52 -0700 Subject: [PATCH 01/20] Add initial plugin store page --- website/docusaurus.config.json | 5 +++ website/src/pages/plugin_store.js | 61 +++++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+) create mode 100644 website/src/pages/plugin_store.js diff --git a/website/docusaurus.config.json b/website/docusaurus.config.json index f0b38f32bb..f1a1bd1c06 100644 --- a/website/docusaurus.config.json +++ b/website/docusaurus.config.json @@ -31,6 +31,11 @@ "label": "Blog", "position": "left" }, + { + "to": "plugin_store", + "label": "Plugin Store", + "position": "left" + }, { "to": "features", "label": "Features", diff --git a/website/src/pages/plugin_store.js b/website/src/pages/plugin_store.js new file mode 100644 index 0000000000..ab492e2eff --- /dev/null +++ b/website/src/pages/plugin_store.js @@ -0,0 +1,61 @@ +import React from 'react' +// eslint-disable-next-line import/no-unresolved +import Layout from '@theme/Layout' + +// eslint-disable-next-line import/no-unresolved +import useDocusaurusContext from '@docusaurus/useDocusaurusContext' +import { makeStyles } from '@material-ui/core/styles' + +import Link from '@material-ui/core/Link' +import Typography from '@material-ui/core/Typography' + +import Card from '@material-ui/core/Card' +import CardActionArea from '@material-ui/core/CardActionArea' +import CardActions from '@material-ui/core/CardActions' +import CardContent from '@material-ui/core/CardContent' +import CardMedia from '@material-ui/core/CardMedia' +import Button from '@material-ui/core/Button' + +const useStyles = makeStyles(theme => ({ + button: { + textTransform: 'none', + }, + section: { + marginTop: '24px', + marginBottom: '32px', + }, + + container: { + display: 'flex', + [theme.breakpoints.down('md')]: { + flexDirection: 'column', + }, + justifyContent: 'center', + alignItems: 'center', + }, + + body: { + [theme.breakpoints.down('md')]: { + margin: '0.5em', + }, + margin: '5em', + }, +})) + +function PluginStore() { + const context = useDocusaurusContext() + const { siteConfig = {} } = context + const classes = useStyles() + + return ( + +
+
+

JBrowse 2 Plugin Store

+
+
+ + ) +} + +export default PluginStore From 673582a94735cc49b287f7905ef9ee730a7bfbd2 Mon Sep 17 00:00:00 2001 From: Elliot Hershberg Date: Wed, 7 Apr 2021 12:55:16 -0700 Subject: [PATCH 02/20] Fetch plugin data for website start and build --- website/package.json | 5 ++-- website/plugins.json | 67 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 70 insertions(+), 2 deletions(-) create mode 100644 website/plugins.json diff --git a/website/package.json b/website/package.json index a2468607e1..b9976ceee8 100644 --- a/website/package.json +++ b/website/package.json @@ -5,9 +5,10 @@ "homepage": ".", "scripts": { "prestart": "npm run make combined.md", - "start": "docusaurus start", - "prebuild": "npm run make combined.md", + "start": "npm run fetchPlugins && docusaurus start", + "prebuild": "npm run make combined.md && npm run fetchPlugins", "build": "docusaurus build", + "fetchPlugins": "wget https://s3.amazonaws.com/jbrowse.org/plugin-store/plugins.json", "swizzle": "docusaurus swizzle", "predeploy": "npm run build && npm run make", "deploy": "aws s3 sync --delete build s3://jbrowse.org/jb2/ && aws s3 cp docs/jbrowse2.pdf s3://jbrowse.org/jb2/", diff --git a/website/plugins.json b/website/plugins.json new file mode 100644 index 0000000000..dfd9cfd72d --- /dev/null +++ b/website/plugins.json @@ -0,0 +1,67 @@ +{ + "plugins": [ + { + "name": "msaview", + "authors": ["Colin Diesh"], + "description": "multiple sequence alignment browser plugin for JBrowse 2", + "location": "https://github.com/GMOD/jbrowse-plugin-msaview", + "url": "https://unpkg.com/jbrowse-plugin-msaview/dist/jbrowse-plugin-msaview.umd.production.min.js", + "license": "Apache License 2.0", + "image": "https://imgbox.com/Wd3KVyvc" + }, + { + "name": "gdc", + "authors": ["Garrett Stevens", "Colin Diesh", "Rob Buels"], + "description": "JBrowse 2 plugin for integrating with GDC resources", + "location": "https://github.com/GMOD/jbrowse-plugin-gdc", + "url": "https://unpkg.com/jbrowse-plugin-gdc/dist/jbrowse-plugin-gdc.umd.production.min.js", + "license": "NONE", + "image": "https://imgbox.com/QincKisg" + }, + { + "name": "quantseq", + "authors": ["Elliot Hershberg"], + "description": "External JB2 plugin implementing a QuantitativeSequence track for displaying base-resolution models.", + "location": "https://github.com/GMOD/jbrowse-plugin-quantseq", + "url": "https://unpkg.com/jbrowse-plugin-quantseq/dist/jbrowse-plugin-quantseq.umd.production.min.js", + "license": "Apache License 2.0", + "image": "https://imgbox.com/rZJ7XVM3" + }, + { + "name": "gwas", + "authors": ["Colin Diesh"], + "description": "Plugin for displaying GWAS results such as manhattan plot renderings", + "location": "https://github.com/cmdcolin/jbrowse-plugin-gwas", + "url": "https://unpkg.com/jbrowse-plugin-gwas/dist/jbrowse-plugin-gwas.umd.production.min.js", + "license": "NONE", + "image": "https://imgbox.com/eKdxsJ26" + }, + { + "name": "ucsc-api", + "authors": ["Colin Diesh"], + "description": "A JBrowse 2 plugin for accessing the UCSC API", + "location": "https://github.com/cmdcolin/jbrowse-plugin-ucsc-api", + "url": "https://unpkg.com/jbrowse-plugin-ucsc/dist/jbrowse-plugin-ucsc.umd.production.min.js", + "license": "NONE", + "image": "https://imgbox.com/pjj940d6" + }, + { + "name": "biothings-api", + "authors": ["Colin Diesh"], + "description": "Adapts to APIs like mygene.info to get super rich gene annotations", + "location": "https://github.com/cmdcolin/jbrowse-plugin-biothings-api", + "url": "https://unpkg.com/jbrowse-plugin-biothings/dist/jbrowse-plugin-biothings.umd.production.min.js", + "license": "NONE", + "image": "https://imgbox.com/VtoSPBfz" + }, + { + "name": "ideogram", + "authors": ["Colin Diesh"], + "description": "JBrowse 2 plugin for rendering ideograms", + "location": "https://github.com/cmdcolin/jbrowse-plugin-ideogram", + "url": "https://unpkg.com/jbrowse-plugin-ideogram/dist/jbrowse-plugin-ideogram.umd.production.min.js", + "license": "Apache License 2.0", + "image": "https://imgbox.com/MvRbn9jp" + } + ] +} From 2f5cb3b5f8ff1f41cf5ca8818da885e82e18e515 Mon Sep 17 00:00:00 2001 From: Elliot Hershberg Date: Wed, 7 Apr 2021 12:56:02 -0700 Subject: [PATCH 03/20] Import plugin data in plugin store --- website/src/pages/plugin_store.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/website/src/pages/plugin_store.js b/website/src/pages/plugin_store.js index ab492e2eff..c68fc96367 100644 --- a/website/src/pages/plugin_store.js +++ b/website/src/pages/plugin_store.js @@ -16,6 +16,8 @@ import CardContent from '@material-ui/core/CardContent' import CardMedia from '@material-ui/core/CardMedia' import Button from '@material-ui/core/Button' +import { plugins } from '../../plugins.json' + const useStyles = makeStyles(theme => ({ button: { textTransform: 'none', @@ -47,6 +49,8 @@ function PluginStore() { const { siteConfig = {} } = context const classes = useStyles() + console.log(plugins) + return (
From f3f703df4c60e32b5ba80457180d8cb063337723 Mon Sep 17 00:00:00 2001 From: Elliot Hershberg Date: Thu, 8 Apr 2021 13:28:20 -0700 Subject: [PATCH 04/20] Add MUI icons to website --- website/package.json | 1 + website/yarn.lock | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/website/package.json b/website/package.json index b9976ceee8..e39b9e9ce8 100644 --- a/website/package.json +++ b/website/package.json @@ -19,6 +19,7 @@ "@docusaurus/core": "^2.0.0-alpha.72", "@docusaurus/preset-classic": "^2.0.0-alpha.72", "@material-ui/core": "^4.9.13", + "@material-ui/icons": "^4.11.2", "clsx": "^1.1.1", "react": "^16.8.4", "react-dom": "^16.8.4" diff --git a/website/yarn.lock b/website/yarn.lock index 3540c56675..aea7747fad 100644 --- a/website/yarn.lock +++ b/website/yarn.lock @@ -2425,6 +2425,13 @@ react-is "^16.8.0" react-transition-group "^4.4.0" +"@material-ui/icons@^4.11.2": + version "4.11.2" + resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5" + integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/styles@^4.10.0": version "4.10.0" resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071" From ae8aee5d45134e961dfa110bf9b6eb7380dfb39e Mon Sep 17 00:00:00 2001 From: Elliot Hershberg Date: Thu, 8 Apr 2021 13:28:50 -0700 Subject: [PATCH 05/20] Fill out initial card --- website/src/pages/plugin_store.js | 62 ++++++++++++++++++++++++++++++- 1 file changed, 61 insertions(+), 1 deletion(-) diff --git a/website/src/pages/plugin_store.js b/website/src/pages/plugin_store.js index c68fc96367..be88c3285e 100644 --- a/website/src/pages/plugin_store.js +++ b/website/src/pages/plugin_store.js @@ -16,6 +16,10 @@ import CardContent from '@material-ui/core/CardContent' import CardMedia from '@material-ui/core/CardMedia' import Button from '@material-ui/core/Button' +import PersonIcon from '@material-ui/icons/Person' +import AccountBalanceIcon from '@material-ui/icons/AccountBalance' +import GitHubIcon from '@material-ui/icons/GitHub' + import { plugins } from '../../plugins.json' const useStyles = makeStyles(theme => ({ @@ -42,6 +46,19 @@ const useStyles = makeStyles(theme => ({ }, margin: '5em', }, + + card: { + margin: '1em auto', + width: 800, + }, + + icon: { marginLeft: '0.5em', marginRight: '0.5em' }, + + dataField: { + display: 'flex', + alignItems: 'center', + margin: '0.4em 0em', + }, })) function PluginStore() { @@ -49,7 +66,7 @@ function PluginStore() { const { siteConfig = {} } = context const classes = useStyles() - console.log(plugins) + // console.log(plugins) return ( @@ -57,6 +74,49 @@ function PluginStore() {

JBrowse 2 Plugin Store

+
+ {plugins.map(plugin => ( + + + + +
+ {plugin.name} + +
+
+ + {plugin.authors.join(', ')} + + + {plugin.license === 'NONE' + ? 'No license' + : plugin.license} + + + + {plugin.location} + +
+ Description: + {plugin.description} + + + + ))} +
) From bab6dd66cd0c6a232b050cbdfe8a188a8e4334d6 Mon Sep 17 00:00:00 2001 From: Elliot Hershberg Date: Fri, 9 Apr 2021 08:35:50 -0700 Subject: [PATCH 06/20] Fix fetchPlugins script to avoid duplicates --- website/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/package.json b/website/package.json index e39b9e9ce8..2f1992b922 100644 --- a/website/package.json +++ b/website/package.json @@ -8,7 +8,7 @@ "start": "npm run fetchPlugins && docusaurus start", "prebuild": "npm run make combined.md && npm run fetchPlugins", "build": "docusaurus build", - "fetchPlugins": "wget https://s3.amazonaws.com/jbrowse.org/plugin-store/plugins.json", + "fetchPlugins": "rimraf plugins.json && wget https://s3.amazonaws.com/jbrowse.org/plugin-store/plugins.json", "swizzle": "docusaurus swizzle", "predeploy": "npm run build && npm run make", "deploy": "aws s3 sync --delete build s3://jbrowse.org/jb2/ && aws s3 cp docs/jbrowse2.pdf s3://jbrowse.org/jb2/", From 544d67209cf801cd3ac961723cbf219e904184db Mon Sep 17 00:00:00 2001 From: Elliot Hershberg Date: Fri, 9 Apr 2021 08:36:05 -0700 Subject: [PATCH 07/20] Download new plugin data --- website/plugins.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/website/plugins.json b/website/plugins.json index dfd9cfd72d..4a4b415ac5 100644 --- a/website/plugins.json +++ b/website/plugins.json @@ -7,7 +7,7 @@ "location": "https://github.com/GMOD/jbrowse-plugin-msaview", "url": "https://unpkg.com/jbrowse-plugin-msaview/dist/jbrowse-plugin-msaview.umd.production.min.js", "license": "Apache License 2.0", - "image": "https://imgbox.com/Wd3KVyvc" + "image": "https://raw.githubusercontent.com/GMOD/jbrowse-plugin-list/main/img/msaview-screenshot-fs8.png" }, { "name": "gdc", @@ -16,7 +16,7 @@ "location": "https://github.com/GMOD/jbrowse-plugin-gdc", "url": "https://unpkg.com/jbrowse-plugin-gdc/dist/jbrowse-plugin-gdc.umd.production.min.js", "license": "NONE", - "image": "https://imgbox.com/QincKisg" + "image": "https://raw.githubusercontent.com/GMOD/jbrowse-plugin-list/main/img/gdc-screenshot-fs8.png" }, { "name": "quantseq", @@ -25,7 +25,7 @@ "location": "https://github.com/GMOD/jbrowse-plugin-quantseq", "url": "https://unpkg.com/jbrowse-plugin-quantseq/dist/jbrowse-plugin-quantseq.umd.production.min.js", "license": "Apache License 2.0", - "image": "https://imgbox.com/rZJ7XVM3" + "image": "https://raw.githubusercontent.com/GMOD/jbrowse-plugin-list/main/img/quantseq-screenshot-fs8.png" }, { "name": "gwas", @@ -34,7 +34,7 @@ "location": "https://github.com/cmdcolin/jbrowse-plugin-gwas", "url": "https://unpkg.com/jbrowse-plugin-gwas/dist/jbrowse-plugin-gwas.umd.production.min.js", "license": "NONE", - "image": "https://imgbox.com/eKdxsJ26" + "image": "https://raw.githubusercontent.com/GMOD/jbrowse-plugin-list/main/img/gwas-screenshot-fs8.png" }, { "name": "ucsc-api", @@ -43,7 +43,7 @@ "location": "https://github.com/cmdcolin/jbrowse-plugin-ucsc-api", "url": "https://unpkg.com/jbrowse-plugin-ucsc/dist/jbrowse-plugin-ucsc.umd.production.min.js", "license": "NONE", - "image": "https://imgbox.com/pjj940d6" + "image": "https://raw.githubusercontent.com/GMOD/jbrowse-plugin-list/main/img/ucsc-screenshot-fs8.png" }, { "name": "biothings-api", @@ -52,7 +52,7 @@ "location": "https://github.com/cmdcolin/jbrowse-plugin-biothings-api", "url": "https://unpkg.com/jbrowse-plugin-biothings/dist/jbrowse-plugin-biothings.umd.production.min.js", "license": "NONE", - "image": "https://imgbox.com/VtoSPBfz" + "image": "https://raw.githubusercontent.com/GMOD/jbrowse-plugin-list/main/img/biothings-screenshot-fs8.png" }, { "name": "ideogram", @@ -61,7 +61,7 @@ "location": "https://github.com/cmdcolin/jbrowse-plugin-ideogram", "url": "https://unpkg.com/jbrowse-plugin-ideogram/dist/jbrowse-plugin-ideogram.umd.production.min.js", "license": "Apache License 2.0", - "image": "https://imgbox.com/MvRbn9jp" + "image": "https://raw.githubusercontent.com/GMOD/jbrowse-plugin-list/main/img/ideogram-screenshot-fs8.png" } ] } From 21cb5b32e5efc6114424671aacf4cad76c7bf1d6 Mon Sep 17 00:00:00 2001 From: Elliot Hershberg Date: Fri, 9 Apr 2021 08:53:54 -0700 Subject: [PATCH 08/20] Refactor and set up initial button --- website/src/pages/plugin_store.js | 95 +++++++++++++++++-------------- 1 file changed, 53 insertions(+), 42 deletions(-) diff --git a/website/src/pages/plugin_store.js b/website/src/pages/plugin_store.js index be88c3285e..1979a329b9 100644 --- a/website/src/pages/plugin_store.js +++ b/website/src/pages/plugin_store.js @@ -1,4 +1,5 @@ -import React from 'react' +/* eslint-disable react/prop-types */ +import React, { useState } from 'react' // eslint-disable-next-line import/no-unresolved import Layout from '@theme/Layout' @@ -61,13 +62,61 @@ const useStyles = makeStyles(theme => ({ }, })) +function PluginCard(props) { + const classes = useStyles() + const { plugin } = props + + const [showConfig, setShowConfig] = useState(false) + + return ( + + + + +
+ {plugin.name} +
+
+ + {plugin.authors.join(', ')} + + + {plugin.license === 'NONE' ? 'No license' : plugin.license} + + + + {plugin.location} + +
+ Description: + {plugin.description} + + + + + + + ) +} + function PluginStore() { const context = useDocusaurusContext() const { siteConfig = {} } = context const classes = useStyles() - // console.log(plugins) - return (
@@ -76,45 +125,7 @@ function PluginStore() {
{plugins.map(plugin => ( - - - - -
- {plugin.name} - -
-
- - {plugin.authors.join(', ')} - - - {plugin.license === 'NONE' - ? 'No license' - : plugin.license} - - - - {plugin.location} - -
- Description: - {plugin.description} - - - + ))}
From e3e4223a0fa72c0eed59b390e27de95ba5dd34f3 Mon Sep 17 00:00:00 2001 From: Elliot Hershberg Date: Fri, 9 Apr 2021 12:01:30 -0700 Subject: [PATCH 09/20] Add copy-to-clipboard dep to website --- website/package.json | 1 + website/yarn.lock | 12 ++++++++++++ 2 files changed, 13 insertions(+) diff --git a/website/package.json b/website/package.json index 2f1992b922..9b59ab1fab 100644 --- a/website/package.json +++ b/website/package.json @@ -21,6 +21,7 @@ "@material-ui/core": "^4.9.13", "@material-ui/icons": "^4.11.2", "clsx": "^1.1.1", + "copy-to-clipboard": "^3.3.1", "react": "^16.8.4", "react-dom": "^16.8.4" }, diff --git a/website/yarn.lock b/website/yarn.lock index aea7747fad..a07734d46b 100644 --- a/website/yarn.lock +++ b/website/yarn.lock @@ -4260,6 +4260,13 @@ copy-text-to-clipboard@^3.0.0: resolved "https://registry.yarnpkg.com/copy-text-to-clipboard/-/copy-text-to-clipboard-3.0.1.tgz#8cbf8f90e0a47f12e4a24743736265d157bce69c" integrity sha512-rvVsHrpFcL4F2P8ihsoLdFHmd404+CMg71S756oRSeQgqk51U3kicGdnvfkrxva0xXH92SjGS62B0XIJsbh+9Q== +copy-to-clipboard@^3.3.1: + version "3.3.1" + resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae" + integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw== + dependencies: + toggle-selection "^1.0.6" + copy-webpack-plugin@^6.4.1: version "6.4.1" resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-6.4.1.tgz#138cd9b436dbca0a6d071720d5414848992ec47e" @@ -10561,6 +10568,11 @@ to-regex@^3.0.1, to-regex@^3.0.2: regex-not "^1.0.2" safe-regex "^1.1.0" +toggle-selection@^1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32" + integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI= + toidentifier@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553" From 4b3e7ba923b2346d0b16a1caa8e8e66de424943a Mon Sep 17 00:00:00 2001 From: Elliot Hershberg Date: Fri, 9 Apr 2021 12:01:59 -0700 Subject: [PATCH 10/20] Add copyable plugin config to card --- website/src/pages/plugin_store.js | 66 +++++++++++++++++++++++++++++-- 1 file changed, 63 insertions(+), 3 deletions(-) diff --git a/website/src/pages/plugin_store.js b/website/src/pages/plugin_store.js index 1979a329b9..44352a6158 100644 --- a/website/src/pages/plugin_store.js +++ b/website/src/pages/plugin_store.js @@ -1,15 +1,15 @@ /* eslint-disable react/prop-types */ import React, { useState } from 'react' +import copy from 'copy-to-clipboard' + // eslint-disable-next-line import/no-unresolved import Layout from '@theme/Layout' - // eslint-disable-next-line import/no-unresolved import useDocusaurusContext from '@docusaurus/useDocusaurusContext' -import { makeStyles } from '@material-ui/core/styles' +import { makeStyles } from '@material-ui/core/styles' import Link from '@material-ui/core/Link' import Typography from '@material-ui/core/Typography' - import Card from '@material-ui/core/Card' import CardActionArea from '@material-ui/core/CardActionArea' import CardActions from '@material-ui/core/CardActions' @@ -20,6 +20,8 @@ import Button from '@material-ui/core/Button' import PersonIcon from '@material-ui/icons/Person' import AccountBalanceIcon from '@material-ui/icons/AccountBalance' import GitHubIcon from '@material-ui/icons/GitHub' +import AssignmentIcon from '@material-ui/icons/Assignment' +import AssignmentTurnedInIcon from '@material-ui/icons/AssignmentTurnedIn' import { plugins } from '../../plugins.json' @@ -108,10 +110,68 @@ function PluginCard(props) { {showConfig ? 'Hide configuration' : 'Show configuration'} + {showConfig ? : null} ) } +// snagged from https://stackoverflow.com/a/53952925 +function toPascalCase(string) { + return `${string}` + .replace(new RegExp(/[-_]+/, 'g'), ' ') + .replace(new RegExp(/[^\w\s]/, 'g'), '') + .replace( + new RegExp(/\s+(.)(\w+)/, 'g'), + ($1, $2, $3) => `${$2.toUpperCase() + $3.toLowerCase()}`, + ) + .replace(new RegExp(/\s/, 'g'), '') + .replace(new RegExp(/\w/), s => s.toUpperCase()) +} + +function ConfigBlock(props) { + const { plugin } = props + const [clickedCopy, setClickedCopy] = useState(false) + + let pluginName = plugin.name + if (pluginName.endsWith('-api')) { + pluginName = pluginName.replace(/-api/, '') + } + pluginName = toPascalCase(pluginName) + + const configString = JSON.stringify( + { + name: pluginName, + url: plugin.url, + }, + null, + 4, + ) + + return ( + + 
+        {configString}
+
+ + + ) +} + function PluginStore() { const context = useDocusaurusContext() const { siteConfig = {} } = context From 85236949d0aec19ce8ad7ff8546715dab4d6d81d Mon Sep 17 00:00:00 2001 From: Elliot Hershberg Date: Fri, 9 Apr 2021 13:29:48 -0700 Subject: [PATCH 11/20] Add buttons to top of plugin store --- website/src/pages/plugin_store.js | 33 +++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/website/src/pages/plugin_store.js b/website/src/pages/plugin_store.js index 44352a6158..7406025692 100644 --- a/website/src/pages/plugin_store.js +++ b/website/src/pages/plugin_store.js @@ -22,6 +22,8 @@ import AccountBalanceIcon from '@material-ui/icons/AccountBalance' import GitHubIcon from '@material-ui/icons/GitHub' import AssignmentIcon from '@material-ui/icons/Assignment' import AssignmentTurnedInIcon from '@material-ui/icons/AssignmentTurnedIn' +import CodeIcon from '@material-ui/icons/Code' +import AddIcon from '@material-ui/icons/Add' import { plugins } from '../../plugins.json' @@ -50,6 +52,13 @@ const useStyles = makeStyles(theme => ({ margin: '5em', }, + topButtons: { + margin: '0 auto', + display: 'flex', + alignItems: 'space-between', + justifyContent: 'center', + }, + card: { margin: '1em auto', width: 800, @@ -183,6 +192,30 @@ function PluginStore() {

JBrowse 2 Plugin Store

+
+ + +
{plugins.map(plugin => ( From d50bd34db39cace63d912593a6b6d8e9f04e06c2 Mon Sep 17 00:00:00 2001 From: Elliot Hershberg Date: Fri, 9 Apr 2021 13:37:37 -0700 Subject: [PATCH 12/20] Make plugin screenshot optional in card --- website/src/pages/plugin_store.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/website/src/pages/plugin_store.js b/website/src/pages/plugin_store.js index 7406025692..08e300a151 100644 --- a/website/src/pages/plugin_store.js +++ b/website/src/pages/plugin_store.js @@ -82,11 +82,13 @@ function PluginCard(props) { return ( - + {plugin.image ? ( + + ) : null}
{plugin.name} From 12eb643150b849c167fb2e3ea6f98fc9a53ecfe2 Mon Sep 17 00:00:00 2001 From: Elliot Hershberg Date: Tue, 13 Apr 2021 11:38:55 -0700 Subject: [PATCH 13/20] Remove Card action area --- website/src/pages/plugin_store.js | 55 +++++++++++++++---------------- 1 file changed, 26 insertions(+), 29 deletions(-) diff --git a/website/src/pages/plugin_store.js b/website/src/pages/plugin_store.js index 08e300a151..931d82eb87 100644 --- a/website/src/pages/plugin_store.js +++ b/website/src/pages/plugin_store.js @@ -11,7 +11,6 @@ import { makeStyles } from '@material-ui/core/styles' import Link from '@material-ui/core/Link' import Typography from '@material-ui/core/Typography' import Card from '@material-ui/core/Card' -import CardActionArea from '@material-ui/core/CardActionArea' import CardActions from '@material-ui/core/CardActions' import CardContent from '@material-ui/core/CardContent' import CardMedia from '@material-ui/core/CardMedia' @@ -81,34 +80,32 @@ function PluginCard(props) { return ( - - {plugin.image ? ( - - ) : null} - -
- {plugin.name} -
-
- - {plugin.authors.join(', ')} - - - {plugin.license === 'NONE' ? 'No license' : plugin.license} - - - - {plugin.location} - -
- Description: - {plugin.description} - - + {plugin.image ? ( + + ) : null} + +
+ {plugin.name} +
+
+ + {plugin.authors.join(', ')} + + + {plugin.license === 'NONE' ? 'No license' : plugin.license} + + + + {plugin.location} + +
+ Description: + {plugin.description} + - +
{plugins.map(plugin => ( From 607d436ec3e65bc3bc15c28e3028dad5850ac285 Mon Sep 17 00:00:00 2001 From: Elliot Hershberg Date: Thu, 15 Apr 2021 13:35:55 -0700 Subject: [PATCH 16/20] Add about section and developer info dialogs --- website/src/pages/plugin_store.js | 178 +++++++++++++++++++++++++++--- 1 file changed, 163 insertions(+), 15 deletions(-) diff --git a/website/src/pages/plugin_store.js b/website/src/pages/plugin_store.js index a5795d9ca8..51e6849519 100644 --- a/website/src/pages/plugin_store.js +++ b/website/src/pages/plugin_store.js @@ -15,13 +15,20 @@ import CardActions from '@material-ui/core/CardActions' import CardContent from '@material-ui/core/CardContent' import CardMedia from '@material-ui/core/CardMedia' import Button from '@material-ui/core/Button' +import Dialog from '@material-ui/core/Dialog' +import DialogTitle from '@material-ui/core/DialogTitle' import PersonIcon from '@material-ui/icons/Person' import AccountBalanceIcon from '@material-ui/icons/AccountBalance' import GitHubIcon from '@material-ui/icons/GitHub' import AssignmentIcon from '@material-ui/icons/Assignment' import AssignmentTurnedInIcon from '@material-ui/icons/AssignmentTurnedIn' +import HelpIcon from '@material-ui/icons/Help' +import CodeIcon from '@material-ui/icons/Code' +import IconButton from '@material-ui/core/IconButton' +import CloseIcon from '@material-ui/icons/Close' +import { DialogContent } from '@material-ui/core' import { plugins } from '../../plugins.json' const useStyles = makeStyles(theme => ({ @@ -61,15 +68,148 @@ const useStyles = makeStyles(theme => ({ width: 800, }, - icon: { marginLeft: '0.5em', marginRight: '0.5em' }, + icon: { + marginLeft: '0.5em', + marginRight: '0.5em', + }, + + topButton: { + margin: '1em', + }, + + closeButton: { + color: '#fff', + position: 'absolute', + top: 5, + right: 0, + }, dataField: { display: 'flex', alignItems: 'center', margin: '0.4em 0em', }, + + dialogTitleBox: { + backgroundColor: theme.palette.primary.main, + color: '#fff', + textAlign: 'center', + }, })) +function TopDocumentation() { + const classes = useStyles() + const [aboutSectionOpen, setAboutSectionOpen] = useState(false) + const [developerSectionOpen, setDeveloperSectionOpen] = useState(false) + + return ( + <> +
+ + +
+ setAboutSectionOpen(false)} + > + + About + setAboutSectionOpen(false)} + > + + + + + + Welcome to the plugin store! +
+
+ This store contains the current list of white-listed JBrowse 2 + plugins that are available for use. Plugins can add functionality + that doesn't exist in the core application, such as a new data + adapter, or a custom track type. +
+
+ The configuration that is specified for each plugin can be added to + the plugins array as a top-level entry. For example: +
+
+ + 
+            {configExample}
+
+ + These plugins can also be added directly from inside the application + via the File menu. + + + + setDeveloperSectionOpen(false)} + > + + Developer info + setDeveloperSectionOpen(false)} + > + + + + + + We welcome developers who want to create a new JBrowse 2 plugin. The + primary resource for getting started creating a new plugin is the{' '} + + plugin template + + . +
+
+ If you build a plugin that you would like to be featured in this + store, please follow the instructions found{' '} + + here + + . + + + + + ) +} + function PluginCard(props) { const classes = useStyles() const { plugin } = props @@ -189,20 +329,7 @@ function PluginStore() {

JBrowse 2 Plugin Store

-
- - Create a new plugin - - - Add plugin to store - -
+
{plugins.map(plugin => ( @@ -213,4 +340,25 @@ function PluginStore() { ) } +const configExample = `{ + "configuration": { + /* global configs here */ + }, + "assemblies": [ + /* list of assembly configurations */ + ], + "tracks": [ + /* array of tracks being loaded */ + ], + "defaultSession": { + /* optional default session */ + }, + "plugins": [ + { + "name": "Msaview", + "url": "https://unpkg.com/jbrowse-plugin-msaview/dist/jbrowse-plugin-msaview.umd.production.min.js" + } + ] +}` + export default PluginStore From 5c64f978be80fb2ba406f5f13b78d1789b0c2214 Mon Sep 17 00:00:00 2001 From: Elliot Hershberg Date: Thu, 15 Apr 2021 13:55:20 -0700 Subject: [PATCH 17/20] Add media query for mobile --- website/src/pages/plugin_store.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/website/src/pages/plugin_store.js b/website/src/pages/plugin_store.js index 51e6849519..7ecb106769 100644 --- a/website/src/pages/plugin_store.js +++ b/website/src/pages/plugin_store.js @@ -68,6 +68,21 @@ const useStyles = makeStyles(theme => ({ width: 800, }, + cardMedia: { + height: 200, + width: 800, + }, + + '@media (max-width: 800px)': { + cardMedia: { + display: 'none', + }, + + card: { + width: 'auto', + }, + }, + icon: { marginLeft: '0.5em', marginRight: '0.5em', @@ -220,7 +235,7 @@ function PluginCard(props) { {plugin.image ? ( From 62c5f93a3c560b3316891c1e1fc2c551e793da89 Mon Sep 17 00:00:00 2001 From: Elliot Hershberg Date: Thu, 15 Apr 2021 16:21:34 -0700 Subject: [PATCH 18/20] Make Github links open in new tab --- website/src/pages/plugin_store.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/src/pages/plugin_store.js b/website/src/pages/plugin_store.js index 7ecb106769..31ccd1170a 100644 --- a/website/src/pages/plugin_store.js +++ b/website/src/pages/plugin_store.js @@ -252,7 +252,7 @@ function PluginCard(props) { {plugin.license === 'NONE' ? 'No license' : plugin.license} - + {plugin.location}
From 8fabfc76fb2e800b6f8d19be95fce7b9ec1da603 Mon Sep 17 00:00:00 2001 From: Elliot Hershberg Date: Thu, 15 Apr 2021 16:24:23 -0700 Subject: [PATCH 19/20] Use plugin names directly --- website/src/pages/plugin_store.js | 21 +-------------------- 1 file changed, 1 insertion(+), 20 deletions(-) diff --git a/website/src/pages/plugin_store.js b/website/src/pages/plugin_store.js index 31ccd1170a..b67723174d 100644 --- a/website/src/pages/plugin_store.js +++ b/website/src/pages/plugin_store.js @@ -276,32 +276,13 @@ function PluginCard(props) { ) } -// snagged from https://stackoverflow.com/a/53952925 -function toPascalCase(string) { - return `${string}` - .replace(new RegExp(/[-_]+/, 'g'), ' ') - .replace(new RegExp(/[^\w\s]/, 'g'), '') - .replace( - new RegExp(/\s+(.)(\w+)/, 'g'), - ($1, $2, $3) => `${$2.toUpperCase() + $3.toLowerCase()}`, - ) - .replace(new RegExp(/\s/, 'g'), '') - .replace(new RegExp(/\w/), s => s.toUpperCase()) -} - function ConfigBlock(props) { const { plugin } = props const [clickedCopy, setClickedCopy] = useState(false) - let pluginName = plugin.name - if (pluginName.endsWith('-api')) { - pluginName = pluginName.replace(/-api/, '') - } - pluginName = toPascalCase(pluginName) - const configString = JSON.stringify( { - name: pluginName, + name: plugin.name, url: plugin.url, }, null, From 7d857ff25cf74d826006ac43e7ea151d1496e490 Mon Sep 17 00:00:00 2001 From: Elliot Hershberg Date: Thu, 15 Apr 2021 16:24:35 -0700 Subject: [PATCH 20/20] Get updated plugin list --- website/plugins.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/website/plugins.json b/website/plugins.json index 4a4b415ac5..f116a861f1 100644 --- a/website/plugins.json +++ b/website/plugins.json @@ -1,7 +1,7 @@ { "plugins": [ { - "name": "msaview", + "name": "MsaView", "authors": ["Colin Diesh"], "description": "multiple sequence alignment browser plugin for JBrowse 2", "location": "https://github.com/GMOD/jbrowse-plugin-msaview", @@ -10,7 +10,7 @@ "image": "https://raw.githubusercontent.com/GMOD/jbrowse-plugin-list/main/img/msaview-screenshot-fs8.png" }, { - "name": "gdc", + "name": "GDC", "authors": ["Garrett Stevens", "Colin Diesh", "Rob Buels"], "description": "JBrowse 2 plugin for integrating with GDC resources", "location": "https://github.com/GMOD/jbrowse-plugin-gdc", @@ -19,7 +19,7 @@ "image": "https://raw.githubusercontent.com/GMOD/jbrowse-plugin-list/main/img/gdc-screenshot-fs8.png" }, { - "name": "quantseq", + "name": "Quantseq", "authors": ["Elliot Hershberg"], "description": "External JB2 plugin implementing a QuantitativeSequence track for displaying base-resolution models.", "location": "https://github.com/GMOD/jbrowse-plugin-quantseq", @@ -28,7 +28,7 @@ "image": "https://raw.githubusercontent.com/GMOD/jbrowse-plugin-list/main/img/quantseq-screenshot-fs8.png" }, { - "name": "gwas", + "name": "GWAS", "authors": ["Colin Diesh"], "description": "Plugin for displaying GWAS results such as manhattan plot renderings", "location": "https://github.com/cmdcolin/jbrowse-plugin-gwas", @@ -37,7 +37,7 @@ "image": "https://raw.githubusercontent.com/GMOD/jbrowse-plugin-list/main/img/gwas-screenshot-fs8.png" }, { - "name": "ucsc-api", + "name": "UCSC", "authors": ["Colin Diesh"], "description": "A JBrowse 2 plugin for accessing the UCSC API", "location": "https://github.com/cmdcolin/jbrowse-plugin-ucsc-api", @@ -46,7 +46,7 @@ "image": "https://raw.githubusercontent.com/GMOD/jbrowse-plugin-list/main/img/ucsc-screenshot-fs8.png" }, { - "name": "biothings-api", + "name": "Biothings", "authors": ["Colin Diesh"], "description": "Adapts to APIs like mygene.info to get super rich gene annotations", "location": "https://github.com/cmdcolin/jbrowse-plugin-biothings-api", @@ -55,7 +55,7 @@ "image": "https://raw.githubusercontent.com/GMOD/jbrowse-plugin-list/main/img/biothings-screenshot-fs8.png" }, { - "name": "ideogram", + "name": "Ideogram", "authors": ["Colin Diesh"], "description": "JBrowse 2 plugin for rendering ideograms", "location": "https://github.com/cmdcolin/jbrowse-plugin-ideogram",