Ability to add plugins to JBrowseR, convert code to typescript (#27)

.eslintrc.cjs

@@ -0,0 +1,55 @@
+module.exports = {
+ env: {
+ browser: true,
+ es2021: true,
+ },
+ extends: [
+ 'eslint:recommended',
+ 'plugin:@typescript-eslint/recommended',
+ 'plugin:@typescript-eslint/recommended-type-checked',
+ 'plugin:@typescript-eslint/stylistic-type-checked',
+ 'plugin:react/recommended',
+ 'plugin:react-hooks/recommended',
+ 'plugin:unicorn/recommended',
+ ],
+ settings: {
+ react: {
+ version: 'detect',
+ },
+ },
+ parser: '@typescript-eslint/parser',
+ parserOptions: {
+ ecmaVersion: 'latest',
+ sourceType: 'module',
+ project: './tsconfig.json',
+ },
+ globals: {
+ Shiny: true,
+ },
+ plugins: ['@typescript-eslint', 'react', 'react-refresh'],
+ rules: {
+ 'unicorn/prevent-abbreviations': 'off',
+ 'unicorn/no-null': 'off',
+ 'unicorn/filename-case': 'off',
+ 'unicorn/no-useless-undefined': 'off',
+ 'unicorn/no-nested-ternary': 'off',
+
+ 'react/prop-types': 'off',
+ 'react-refresh/only-export-components': 'warn',
+
+ '@typescript-eslint/no-base-to-string': 'off',
+ '@typescript-eslint/no-unsafe-member-access': 'off',
+ '@typescript-eslint/no-unsafe-argument': 'off',
+ '@typescript-eslint/no-unsafe-assignment': 'off',
+ '@typescript-eslint/no-unsafe-call': 'off',
+ '@typescript-eslint/no-unsafe-return': 'off',
+ '@typescript-eslint/restrict-template-expressions': 'off',
+ '@typescript-eslint/ban-ts-comment': 'off',
+ '@typescript-eslint/no-unused-vars': [
+ 'warn',
+ { argsIgnorePattern: '^_', ignoreRestSiblings: true },
+ ],
+ curly: 'error',
+ 'no-extra-semi': 'off',
+ },
+}

inst/htmlwidgets/JBrowseR.js.LICENSE.txt

@@ -76,7 +76,7 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 
-/*! @license DOMPurify 3.0.5 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.5/LICENSE */
+/*! @license DOMPurify 3.0.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.0.6/LICENSE */
 
 /*! https://mths.be/punycode v1.4.1 by @mathias */
 
@@ -120,7 +120,17 @@ PERFORMANCE OF THIS SOFTWARE.
  */
 
 /**
- * @mui/x-data-grid v6.13.0
+ * @license React
+ * use-sync-external-store-shim.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @mui/x-data-grid v6.16.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package.json

@@ -1,19 +1,30 @@
 {
  "private": true,
  "scripts": {
- "build": "webpack"
+ "build": "webpack",
+ "lint": "eslint srcjs"
  },
  "dependencies": {
  "@jbrowse/react-linear-genome-view": "^2.5.0",
- "node-polyfill-webpack-plugin": "^2.0.1",
  "react": "^17.0.1",
  "react-dom": "^17.0.1"
  },
  "devDependencies": {
  "@babel/core": "^7.22.1",
  "@babel/preset-env": "^7.22.4",
  "@babel/preset-react": "^7.22.3",
+ "@babel/preset-typescript": "^7.23.0",
+ "@typescript-eslint/eslint-plugin": "^6.7.0",
+ "@typescript-eslint/parser": "^6.7.0",
  "babel-loader": "^9.1.2",
+ "eslint": "^8.49.0",
+ "eslint-plugin-react": "^7.33.2",
+ "eslint-plugin-react-hooks": "^4.6.0",
+ "eslint-plugin-react-refresh": "^0.4.3",
+ "eslint-plugin-unicorn": "^48.0.1",
+ "node-polyfill-webpack-plugin": "^2.0.1",
+ "prettier": "^3.0.3",
+ "typescript": "^5.2.2",
  "webpack": "^5.85.0",
  "webpack-cli": "^5.1.1"
  }

srcjs/components/JsonView.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import {
+ createViewState,
+ JBrowseLinearGenomeView,
+ loadPlugins,
+} from '@jbrowse/react-linear-genome-view'
+import { ErrorMessage } from '@jbrowse/core/ui'
+
+import { messageShiny } from '../utils'
+
+type ViewState = ReturnType<typeof createViewState>
+export default function View({
+ config,
+ location,
+}: {
+ location: string
+ config: string
+}) {
+ const [viewState, setViewState] = React.useState<ViewState>()
+ const [error, setError] = React.useState<unknown>()
+ React.useEffect(() => {
+ // eslint-disable-next-line @typescript-eslint/no-floating-promises
+ ;(async () => {
+ try {
+ const {
+ assembly,
+ tracks,
+ defaultSession,
+ theme,
+ text_index,
+ plugins: pluginInput = [],
+ } = JSON.parse(config)
+ const plugins = await loadPlugins(pluginInput)
+ const state = createViewState({
+ assembly,
+ tracks,
+ defaultSession,
+ location,
+ onChange: messageShiny,
+ configuration: { theme },
+ aggregateTextSearchAdapters: [text_index],
+ plugins: plugins.map(p => p.plugin),
+ })
+ setViewState(state)
+ } catch (error) {
+ console.error(error)
+ setError(error)
+ }
+ })()
+ }, [config, location])
+
+ return error ? (
+ <ErrorMessage error={error} />
+ ) : viewState ? (
+ <JBrowseLinearGenomeView viewState={viewState} />
+ ) : (
+ <h3>Loading...</h3>
+ )
+}

srcjs/components/View.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import {
+ createViewState,
+ JBrowseLinearGenomeView,
+} from '@jbrowse/react-linear-genome-view'
+
+import { messageShiny } from '../utils'
+
+export default function View(props: {
+ tracks: string
+ assembly: string
+ location: string
+ theme: string
+ text_index: string
+}) {
+ const { theme, text_index, assembly, tracks, location, ...rest } =
+ Object.fromEntries(
+ Object.entries(props).map(([key, value]) => [
+ key,
+ key === 'location' ? value : JSON.parse(value),
+ ]),
+ )
+ const state = createViewState({
+ ...rest,
+ onChange: messageShiny,
+ configuration: { theme },
+ aggregateTextSearchAdapters: text_index,
+ location,
+ assembly,
+ tracks,
+ })
+
+ return <JBrowseLinearGenomeView viewState={state} />
+}

srcjs/components/ViewHg19.jsx → srcjs/components/ViewHg19.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import {
  createViewState,
  JBrowseLinearGenomeView,
@@ -86,11 +87,11 @@ const defaultSession = {
  },
 }
 
-export default function Hg19View(props) {
+export default function Hg19View({ location }: { location: string }) {
  const state = createViewState({
  assembly,
  tracks,
- location: props.location,
+ location,
  defaultSession,
  onChange: messageShiny,
  })

srcjs/components/ViewHg38.jsx → srcjs/components/ViewHg38.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import {
  createViewState,
  JBrowseLinearGenomeView,
@@ -86,12 +87,11 @@ const defaultSession = {
  },
 }
 
-export default function ViewHg38(props) {
- console.log({ props })
+export default function ViewHg38({location}:{location:string}) {
  const state = createViewState({
  assembly,
  tracks,
- location: props.location,
+ location,
  defaultSession,
  onChange: messageShiny,
  })

srcjs/utils.js → srcjs/utils.ts

@@ -7,7 +7,8 @@
  * @param patch The JSON patch received from
  * the LGV ViewState with what was changed.
  */
-export function messageShiny(patch) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function messageShiny(patch: any) {
  if (typeof Shiny === 'undefined') {
  return
  }
@@ -16,12 +17,10 @@ export function messageShiny(patch) {
 
  if (path.endsWith('featureData')) {
  Shiny.setInputValue('selectedFeature', value)
- } else if (path.endsWith('Feature')) {
- if (value) {
- const { featureData } = value
- if (featureData) {
- Shiny.setInputValue('selectedFeature', featureData)
- }
+ } else if (path.endsWith('Feature') && value) {
+ const { featureData } = value
+ if (featureData) {
+ Shiny.setInputValue('selectedFeature', featureData)
  }
  }
 }

webpack.config.js

@@ -4,24 +4,28 @@ const webpack = require('webpack')
 
 module.exports = {
  mode: 'production',
- entry: [path.join(__dirname, 'srcjs', 'JBrowseR.jsx')],
+ entry: [path.join(__dirname, 'srcjs', 'JBrowseR.tsx')],
  output: {
  path: path.join(__dirname, 'inst/htmlwidgets'),
  filename: 'JBrowseR.js',
  },
  module: {
  rules: [
  {
- test: /\.jsx?$/,
+ test: /\.(t|j)sx?$/,
  loader: 'babel-loader',
  options: {
- presets: ['@babel/preset-env', '@babel/preset-react'],
+ presets: [
+ '@babel/preset-env',
+ '@babel/preset-react',
+ '@babel/preset-typescript',
+ ],
  },
  },
  ],
  },
  resolve: {
- extensions: ['.js', '.jsx'],
+ extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  externals: {
  react: 'window.React',