Create new "Add track workflow" that allows pasting JSON track configs (

#3277)

plugins/data-management/src/AddTrackWidget/components/AddTrackWidget.tsx

@@ -7,6 +7,7 @@ import { getEnv, useLocalStorage } from '@jbrowse/core/util'
 // locals
 import { AddTrackModel } from '../model'
 import DefaultAddTrackWorkflow from './DefaultAddTrackWorkflow'
+import PasteConfigWorkflow from './PasteConfigWorkflow'
 
 function AddTrackSelector({ model }: { model: AddTrackModel }) {
   const [val, setVal] = useLocalStorage('trackSelector-choice', 'Default')
@@ -16,6 +17,7 @@ function AddTrackSelector({ model }: { model: AddTrackModel }) {
   ) as AddTrackWorkflowType[]
   const ComponentMap = {
     Default: DefaultAddTrackWorkflow,
+    'Add track JSON': PasteConfigWorkflow,
     ...Object.fromEntries(widgets.map(w => [w.name, w.ReactComponent])),
   } as { [key: string]: React.FC<{ model: AddTrackModel }> }
 

plugins/data-management/src/AddTrackWidget/components/PasteConfigWorkflow.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react'
+import { Button, TextField } from '@mui/material'
+import { ErrorMessage } from '@jbrowse/core/ui'
+import { makeStyles } from 'tss-react/mui'
+import { getSession } from '@jbrowse/core/util'
+import { observer } from 'mobx-react'
+
+// locals
+import { AddTrackModel } from '../model'
+
+const useStyles = makeStyles()({
+  textbox: {
+    width: '100%',
+  },
+  submit: {
+    marginTop: 25,
+    marginBottom: 100,
+    display: 'block',
+  },
+})
+
+function AddTrackWorkflow({ model }: { model: AddTrackModel }) {
+  const { classes } = useStyles()
+  const [val, setVal] = useState('')
+  const [error, setError] = useState<unknown>()
+
+  return (
+    <div>
+      {error ? <ErrorMessage error={error} /> : null}
+      <TextField
+        multiline
+        rows={10}
+        value={val}
+        onChange={event => setVal(event.target.value)}
+        placeholder={
+          'Paste track config or array of track configs in JSON format'
+        }
+        variant="outlined"
+        className={classes.textbox}
+      />
+      <Button
+        variant="contained"
+        className={classes.submit}
+        onClick={() => {
+          try {
+            setError(undefined)
+            const session = getSession(model)
+            const conf = JSON.parse(val)
+            const confs = Array.isArray(conf) ? conf : [conf]
+            confs.forEach(c => session.addTrackConf(c))
+            confs.forEach(c => c.trackId)
+            model.clearData()
+            session.hideWidget(model)
+          } catch (e) {
+            setError(e)
+          }
+        }}
+      >
+        Submit
+      </Button>
+    </div>
+  )
+}
+export default observer(AddTrackWorkflow)

plugins/data-management/src/AddTrackWidget/model.ts

@@ -5,8 +5,8 @@ import { FileLocation } from '@jbrowse/core/util/types'
 import {
   guessAdapter,
   guessTrackType,
-  UNSUPPORTED,
   getFileName,
+  UNSUPPORTED,
 } from '@jbrowse/core/util/tracks'
 
 function isAbsoluteUrl(url = '') {