@jbrowse/plugin-config 1.7.9 → 2.0.0

package/esm/index.js

@@ -0,0 +1,72 @@
+import { lazy } from 'react';
+import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType';
+import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType';
+import Plugin from '@jbrowse/core/Plugin';
+import { configSchema as ConfigurationEditorConfigSchema, HeadingComponent as ConfigurationEditorHeadingComponent, stateModelFactory as ConfigurationEditorStateModelFactory, } from './ConfigurationEditorWidget';
+import { configSchema as fromConfigAdapterConfigSchema, regionsConfigSchema as fromConfigRegionsAdapterConfigSchema, sequenceConfigSchema as fromConfigSequenceAdapterConfigSchema, } from './FromConfigAdapter';
+import { configSchema as refNameAliasAdapterConfigSchema } from './RefNameAliasAdapter';
+const LazyConfigurationEditorComponent = lazy(() => import('./ConfigurationEditorWidget/components/ConfigurationEditor'));
+export default class extends Plugin {
+    constructor() {
+        super(...arguments);
+        this.name = 'ConfigurationPlugin';
+    }
+    install(pluginManager) {
+        pluginManager.addAdapterType(() => new AdapterType({
+            name: 'FromConfigAdapter',
+            configSchema: fromConfigAdapterConfigSchema,
+            getAdapterClass: () => import('./FromConfigAdapter/FromConfigAdapter').then(r => r.default),
+            adapterMetadata: {
+                category: null,
+                hiddenFromGUI: true,
+                displayName: null,
+                description: null,
+            },
+        }));
+        pluginManager.addAdapterType(() => new AdapterType({
+            name: 'FromConfigRegionsAdapter',
+            configSchema: fromConfigRegionsAdapterConfigSchema,
+            getAdapterClass: () => import('./FromConfigAdapter/FromConfigRegionsAdapter').then(r => r.default),
+            adapterMetadata: {
+                category: null,
+                hiddenFromGUI: true,
+                displayName: null,
+                description: null,
+            },
+        }));
+        pluginManager.addAdapterType(() => new AdapterType({
+            name: 'FromConfigSequenceAdapter',
+            configSchema: fromConfigSequenceAdapterConfigSchema,
+            getAdapterClass: () => import('./FromConfigAdapter/FromConfigSequenceAdapter').then(r => r.default),
+            adapterMetadata: {
+                category: null,
+                hiddenFromGUI: true,
+                displayName: null,
+                description: null,
+            },
+        }));
+        pluginManager.addAdapterType(() => new AdapterType({
+            name: 'RefNameAliasAdapter',
+            configSchema: refNameAliasAdapterConfigSchema,
+            getAdapterClass: () => import('./RefNameAliasAdapter/RefNameAliasAdapter').then(r => r.default),
+            adapterMetadata: {
+                category: null,
+                hiddenFromGUI: true,
+                displayName: null,
+                description: null,
+            },
+        }));
+        pluginManager.addWidgetType(() => {
+            return new WidgetType({
+                name: 'ConfigurationEditorWidget',
+                HeadingComponent: ConfigurationEditorHeadingComponent,
+                configSchema: ConfigurationEditorConfigSchema,
+                stateModel: ConfigurationEditorStateModelFactory(pluginManager),
+                ReactComponent: LazyConfigurationEditorComponent,
+            });
+        });
+    }
+}
+export { default as JsonEditor } from './ConfigurationEditorWidget/components/JsonEditor';
+export { LazyConfigurationEditorComponent as ConfigurationEditor };
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-config",
-  "version": "1.7.9",
+  "version": "2.0.0",
   "description": "JBrowse 2 config utilities",
   "keywords": [
     "jbrowse",
@@ -20,38 +20,45 @@
   "main": "dist/index.js",
   "files": [
     "dist",
-    "src"
+    "src",
+    "esm"
   ],
   "scripts": {
-    "build": "babel src --root-mode upward --out-dir dist --extensions .ts,.js,.tsx,.jsx",
+    "build": "npm-run-all build:*",
     "test": "cd ../..; jest plugins/config",
     "prepublishOnly": "yarn test",
     "prepack": "yarn build; yarn useDist",
     "postpack": "yarn useSrc",
     "useDist": "node ../../scripts/useDist.js",
     "useSrc": "node ../../scripts/useSrc.js",
-    "postbuild": "tsc --build tsconfig.build.json"
+    "prebuild": "npm run clean",
+    "build:esm": "tsc --build tsconfig.build.esm.json",
+    "build:es5": "tsc --build tsconfig.build.es5.json",
+    "clean": "rimraf dist esm *.tsbuildinfo"
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
-    "@material-ui/icons": "^4.9.1",
+    "@mui/icons-material": "^5.0.1",
     "pluralize": "^8.0.0",
-    "react-color": "^2.19.3",
-    "react-simple-code-editor": "0.9.3",
-    "react-syntax-highlighter": "^14.0.0"
+    "react-color": "^2.19.3"
   },
   "peerDependencies": {
     "@jbrowse/core": "^1.0.0",
-    "@material-ui/core": "^4.12.2",
-    "mobx-react": "^6.0.0",
-    "mobx-state-tree": "3.14.1",
+    "@mui/material": "^5.0.0",
+    "mobx": "^6.0.0",
+    "mobx-react": "^7.0.0",
+    "mobx-state-tree": "^5.0.0",
     "prop-types": "^15.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "rxjs": "^6.0.0"
+    "rxjs": "^6.0.0",
+    "tss-react": "^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a6504c385d703ce6e755d05652ef659ffe28c864"
+  "distModule": "esm/index.js",
+  "srcModule": "src/index.ts",
+  "module": "esm/index.js",
+  "gitHead": "ecc7f5d47351a5ea04bc00f3a6eb6dfb607342e6"
 }

package/src/ConfigurationEditorWidget/components/{CallbackEditor.js → CallbackEditor.tsx}

@@ -7,35 +7,44 @@ import {
   InputLabel,
   Tooltip,
   IconButton,
-  makeStyles,
-} from '@material-ui/core'
-import HelpIcon from '@material-ui/icons/Help'
+  TextField,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import HelpIcon from '@mui/icons-material/Help'
 import { getEnv } from 'mobx-state-tree'
-import { observer, PropTypes } from 'mobx-react'
-import Editor from 'react-simple-code-editor'
-
-// fontSize and fontFamily have to match between Editor and SyntaxHighlighter
-const fontSize = '12px'
+import { observer } from 'mobx-react'
 
 // Optimize by using system default fonts:
 // https://css-tricks.com/snippets/css/font-stacks/
 const fontFamily =
   'Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace'
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
   callbackEditor: {
     marginTop: '16px',
     borderBottom: `1px solid ${theme.palette.divider}`,
     fontFamily,
-    fontSize,
+  },
+  textAreaFont: {
+    fontFamily,
   },
 }))
 
-function CallbackEditor({ slot }) {
-  const classes = useStyles()
+function CallbackEditor({
+  slot,
+}: {
+  slot: {
+    set: (arg: string) => void
+    description: string
+    name: string
+    value: string
+    contextVariable: string
+  }
+}) {
+  const { classes } = useStyles()
 
   const [code, setCode] = useState(slot.value)
-  const [error, setCodeError] = useState()
+  const [error, setCodeError] = useState<unknown>()
   const debouncedCode = useDebounce(code, 400)
 
   useEffect(() => {
@@ -43,12 +52,16 @@ function CallbackEditor({ slot }) {
       const jexlDebouncedCode = debouncedCode.startsWith('jexl:')
         ? debouncedCode
         : `jexl:${debouncedCode}`
+
+      if (jexlDebouncedCode === 'jexl:') {
+        throw new Error('Empty jexl expression is not valid')
+      }
       stringToJexlExpression(
         jexlDebouncedCode,
         getEnv(slot).pluginManager?.jexl,
       )
       slot.set(jexlDebouncedCode)
-      setCodeError(null)
+      setCodeError(undefined)
     } catch (e) {
       console.error({ e })
       setCodeError(e)
@@ -63,13 +76,17 @@ function CallbackEditor({ slot }) {
         <InputLabel shrink htmlFor="callback-editor">
           {slot.name}
         </InputLabel>
-        <Editor
+        <TextField
+          multiline
           className={classes.callbackEditor}
           value={code.startsWith('jexl:') ? code.split('jexl:')[1] : code}
-          onValueChange={newCode => setCode(newCode)}
-          highlight={newCode => newCode}
-          padding={10}
+          onChange={event => setCode(event.target.value)}
           style={{ background: error ? '#fdd' : undefined }}
+          InputProps={{
+            classes: {
+              input: classes.textAreaFont,
+            },
+          }}
         />
         {error ? (
           <FormHelperText
@@ -106,7 +123,5 @@ function CallbackEditor({ slot }) {
     </>
   )
 }
-CallbackEditor.propTypes = {
-  slot: PropTypes.objectOrObservableObject.isRequired,
-}
+
 export default observer(CallbackEditor)

package/src/ConfigurationEditorWidget/components/CodeEditor.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react'
+import { TextField } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+// fontSize and fontFamily have to match between Editor and SyntaxHighlighter
+const fontSize = '12px'
+// Optimize by using system default fonts: https://css-tricks.com/snippets/css/font-stacks/
+const fontFamily =
+  'Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace'
+
+const useStyles = makeStyles()(theme => ({
+  callbackEditor: {
+    fontFamily,
+    fontSize,
+    background: theme.palette.background.default,
+    overflowX: 'auto',
+    marginTop: '16px',
+    border: '1px solid rgba(0,0,0,0.42)',
+  },
+  textAreaFont: {
+    fontFamily,
+  },
+}))
+
+export default function CodeEditor({
+  contents,
+  setContents,
+}: {
+  contents: string
+  setContents: (arg: string) => void
+}) {
+  const { classes } = useStyles()
+  const [error, setCodeError] = useState<unknown>()
+  const [val, setVal] = useState(contents)
+  useEffect(() => {
+    try {
+      JSON.parse(contents)
+      setCodeError(undefined)
+      setContents(val)
+    } catch (e) {
+      console.error({ e })
+      setCodeError(e)
+    }
+  }, [val, contents, setContents])
+
+  return (
+    <TextField
+      className={classes.callbackEditor}
+      value={contents}
+      onChange={event => setVal(event.target.value)}
+      style={{ background: error ? '#fdd' : undefined }}
+      InputProps={{
+        classes: {
+          input: classes.textAreaFont,
+        },
+      }}
+    />
+  )
+}

package/src/ConfigurationEditorWidget/components/ColorEditor.tsx

@@ -1,7 +1,6 @@
 import React, { lazy, useState } from 'react'
 import { observer } from 'mobx-react'
-import ReactPropTypes from 'prop-types'
-import TextField from '@material-ui/core/TextField'
+import { TextField } from '@mui/material'
 import { Color, RGBColor } from 'react-color'
 
 const ColorPicker = lazy(() => import('./ColorPicker'))
@@ -18,14 +17,14 @@ function serializeColor(color: Color) {
 
 export const ColorSlot = (props: {
   value: string
-  label: string
-  TextFieldProps: {
+  label?: string
+  TextFieldProps?: {
     helperText: string
     fullWidth: boolean
   }
   onChange: (arg: string) => void
 }) => {
-  const { value, label, TextFieldProps, onChange } = props
+  const { value = '#000', label = '', TextFieldProps = {}, onChange } = props
   const [displayed, setDisplayed] = useState(false)
 
   return (
@@ -42,35 +41,20 @@ export const ColorSlot = (props: {
           },
         }}
         onClick={() => setDisplayed(!displayed)}
-        onChange={event => {
-          onChange(event.target.value)
-        }}
+        onChange={event => onChange(event.target.value)}
         {...TextFieldProps}
       />
       {displayed ? (
         <React.Suspense fallback={<div />}>
           <ColorPicker
             color={value}
-            onChange={event => {
-              onChange(serializeColor(event.rgb))
-            }}
+            onChange={event => onChange(serializeColor(event.rgb))}
           />
         </React.Suspense>
       ) : null}
     </>
   )
 }
-ColorSlot.propTypes = {
-  onChange: ReactPropTypes.func.isRequired,
-  label: ReactPropTypes.string,
-  TextFieldProps: ReactPropTypes.shape({}),
-  value: ReactPropTypes.string,
-}
-ColorSlot.defaultProps = {
-  label: '',
-  value: '#000',
-  TextFieldProps: {},
-}
 
 function ColorEditorSlot(props: {
   slot: {
@@ -85,9 +69,7 @@ function ColorEditorSlot(props: {
     <ColorSlot
       label={slot.name}
       value={slot.value}
-      onChange={(color: string) => {
-        slot.set(color)
-      }}
+      onChange={color => slot.set(color)}
       TextFieldProps={{
         helperText: slot.description,
         fullWidth: true,
@@ -95,12 +77,5 @@ function ColorEditorSlot(props: {
     />
   )
 }
-ColorEditorSlot.propTypes = {
-  slot: ReactPropTypes.shape({
-    name: ReactPropTypes.string.isRequired,
-    description: ReactPropTypes.string,
-    value: ReactPropTypes.string.isRequired,
-    set: ReactPropTypes.func.isRequired,
-  }).isRequired,
-}
+
 export default observer(ColorEditorSlot)

package/src/ConfigurationEditorWidget/components/ColorPicker.tsx

@@ -1,9 +1,8 @@
 import React, { useState } from 'react'
-import { makeStyles } from '@material-ui/core/styles'
-import ReactPropTypes from 'prop-types'
+import { makeStyles } from 'tss-react/mui'
 import { ChromePicker, Color, ColorResult } from 'react-color'
 
-const useStyles = makeStyles({
+const useStyles = makeStyles()({
   popover: {
     position: 'absolute',
     zIndex: 2,
@@ -22,12 +21,9 @@ export function ColorPicker(props: {
   onChange: (color: ColorResult) => void
 }) {
   const { color, onChange } = props
-  const classes = useStyles()
+  const { classes } = useStyles()
   const [displayColorPicker, setDisplayColorPicker] = useState(true)
 
-  const handleClose = () => {
-    setDisplayColorPicker(false)
-  }
   return (
     <div>
       {displayColorPicker ? (
@@ -35,7 +31,7 @@ export function ColorPicker(props: {
           <div
             role="presentation"
             className={classes.cover}
-            onClick={handleClose}
+            onClick={() => setDisplayColorPicker(false)}
           />
           <ChromePicker color={color} onChange={onChange} />
         </div>
@@ -44,9 +40,4 @@ export function ColorPicker(props: {
   )
 }
 
-ColorPicker.propTypes = {
-  color: ReactPropTypes.string.isRequired,
-  onChange: ReactPropTypes.func.isRequired,
-}
-
 export default ColorPicker

package/src/ConfigurationEditorWidget/components/ConfigurationEditor.tsx

@@ -0,0 +1,169 @@
+import React from 'react'
+import {
+  readConfObject,
+  getTypeNamesFromExplicitlyTypedUnion,
+  isConfigurationSchemaType,
+  isConfigurationSlotType,
+  AnyConfigurationModel,
+} from '@jbrowse/core/configuration'
+import {
+  FormGroup,
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+import { getMembers, IAnyType } from 'mobx-state-tree'
+import { singular } from 'pluralize'
+
+// icons
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+
+// locals
+import SlotEditor from './SlotEditor'
+import TypeSelector from './TypeSelector'
+
+const useStyles = makeStyles()(theme => ({
+  expandIcon: {
+    color: '#fff',
+  },
+  root: {
+    padding: theme.spacing(1, 3, 1, 1),
+  },
+  expansionPanelDetails: {
+    display: 'block',
+    padding: theme.spacing(1),
+  },
+
+  accordion: {
+    border: `1px solid ${theme.palette.text.primary}`,
+  },
+}))
+
+const Member = observer(
+  (props: {
+    slotName: string
+    slotSchema: IAnyType
+    schema: AnyConfigurationModel
+    slot?: AnyConfigurationModel | AnyConfigurationModel[]
+    path?: string[]
+  }) => {
+    const { classes } = useStyles()
+    const {
+      slotName,
+      slotSchema,
+      schema,
+      slot = schema[slotName],
+      path = [],
+    } = props
+    let typeSelector
+    if (isConfigurationSchemaType(slotSchema)) {
+      if (slot.length) {
+        return slot.map((subslot: AnyConfigurationModel, slotIndex: number) => {
+          const key = `${singular(slotName)} ${slotIndex + 1}`
+          return <Member {...props} key={key} slot={subslot} slotName={key} />
+        })
+      }
+      // if this is an explicitly typed schema, make a type-selecting dropdown
+      // that can be used to change its type
+      const typeNameChoices = getTypeNamesFromExplicitlyTypedUnion(slotSchema)
+      if (typeNameChoices.length) {
+        typeSelector = (
+          <TypeSelector
+            typeNameChoices={typeNameChoices}
+            slotName={slotName}
+            slot={slot}
+            onChange={evt => {
+              if (evt.target.value !== slot.type) {
+                schema.setSubschema(slotName, { type: evt.target.value })
+              }
+            }}
+          />
+        )
+      }
+      return (
+        <Accordion defaultExpanded className={classes.accordion}>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+          >
+            <Typography>{[...path, slotName].join('🡒')}</Typography>
+          </AccordionSummary>
+          <AccordionDetails className={classes.expansionPanelDetails}>
+            {typeSelector}
+            <FormGroup>
+              <Schema schema={slot} path={[...path, slotName]} />
+            </FormGroup>
+          </AccordionDetails>
+        </Accordion>
+      )
+    }
+
+    if (isConfigurationSlotType(slotSchema)) {
+      // this is a regular config slot
+      return <SlotEditor key={slotName} slot={slot} slotSchema={slotSchema} />
+    }
+
+    return null
+  },
+)
+
+const Schema = observer(
+  ({
+    schema,
+    path = [],
+  }: {
+    schema: AnyConfigurationModel
+    path?: string[]
+  }) => {
+    const properties = getMembers(schema).properties
+    return (
+      <>
+        {Object.entries(properties).map(([slotName, slotSchema]) => (
+          <Member
+            key={slotName}
+            slotName={slotName}
+            slotSchema={slotSchema}
+            path={path}
+            schema={schema}
+          />
+        ))}
+      </>
+    )
+  },
+)
+
+const ConfigurationEditor = observer(
+  ({ model }: { model: { target: AnyConfigurationModel } }) => {
+    const { classes } = useStyles()
+    // key forces a re-render, otherwise the same field can end up being used
+    // for different tracks since only the backing model changes for example
+    // see pr #804
+    const { target } = model
+    const key = target && readConfObject(target, 'trackId')
+    const name = target && readConfObject(target, 'name')
+    return (
+      <>
+        <Accordion key={key} defaultExpanded className={classes.accordion}>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+          >
+            <Typography>{name ?? 'Configuration'}</Typography>
+          </AccordionSummary>
+          <AccordionDetails
+            className={classes.expansionPanelDetails}
+            data-testid="configEditor"
+          >
+            {!target ? 'no target set' : <Schema schema={target} />}
+          </AccordionDetails>
+        </Accordion>
+
+        {/* blank space at the bottom of screen allows scroll */}
+        <div style={{ height: 300 }} />
+      </>
+    )
+  },
+)
+
+export default ConfigurationEditor

package/src/ConfigurationEditorWidget/components/JsonEditor.js

@@ -1,13 +1,9 @@
 import React, { lazy, useEffect, useState } from 'react'
 import { useDebounce } from '@jbrowse/core/util'
-import {
-  FormControl,
-  FormHelperText,
-  InputLabel,
-  makeStyles,
-} from '@material-ui/core'
+import { FormControl, FormHelperText, InputLabel } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { observer, PropTypes } from 'mobx-react'
-const useStyles = makeStyles({
+const useStyles = makeStyles()({
   error: {
     color: 'red',
     fontSize: '0.8em',
@@ -17,7 +13,7 @@ const useStyles = makeStyles({
 const CodeEditor = lazy(() => import('./CodeEditor'))
 
 function JsonEditor({ slot }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const [contents, setContents] = useState(
     JSON.stringify(slot.value, null, '  '),
   )