@jbrowse/plugin-config 1.7.11 → 2.0.0

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, '  '),
   )

package/src/ConfigurationEditorWidget/components/SlotEditor.js

@@ -22,13 +22,13 @@ import {
   Paper,
   SvgIcon,
   TextField,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
 // icons
-import DeleteIcon from '@material-ui/icons/Delete'
-import AddIcon from '@material-ui/icons/Add'
-import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked'
+import DeleteIcon from '@mui/icons-material/Delete'
+import AddIcon from '@mui/icons-material/Add'
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked'
 
 // locals
 import StringArrayEditor from './StringArrayEditor'
@@ -39,7 +39,6 @@ import JsonEditor from './JsonEditor'
 // adds ability to have html in helperText. note that FormHelperTextProps is
 // div because the default is p which does not like div children
 const MyTextField = props => {
-  // eslint-disable-next-line react/prop-types
   const { helperText } = props
   return (
     <TextField
@@ -79,14 +78,14 @@ const SvgCheckbox = () => (
   </SvgIcon>
 )
 
-const useMapEditorStyles = makeStyles(theme => ({
+const useMapEditorStyles = makeStyles()(theme => ({
   card: {
     marginTop: theme.spacing(1),
   },
 }))
 
 const StringArrayMapEditor = observer(({ slot }) => {
-  const classes = useMapEditorStyles()
+  const { classes } = useMapEditorStyles()
   const [value, setValue] = useState('')
   return (
     <>
@@ -155,7 +154,7 @@ const StringArrayMapEditor = observer(({ slot }) => {
 })
 
 const NumberMapEditor = observer(({ slot }) => {
-  const classes = useMapEditorStyles()
+  const { classes } = useMapEditorStyles()
   const [value, setValue] = useState('')
   return (
     <>
@@ -320,7 +319,7 @@ const valueComponents = {
   configRelationships: JsonEditor,
 }
 
-export const useSlotEditorStyles = makeStyles(theme => ({
+export const useSlotEditorStyles = makeStyles()(theme => ({
   paper: {
     display: 'flex',
     marginBottom: theme.spacing(2),
@@ -339,7 +338,7 @@ export const useSlotEditorStyles = makeStyles(theme => ({
 }))
 
 const SlotEditor = observer(({ slot, slotSchema }) => {
-  const classes = useSlotEditorStyles()
+  const { classes } = useSlotEditorStyles()
   const { type } = slot
   let ValueComponent = slot.isCallback ? CallbackEditor : valueComponents[type]
   if (!ValueComponent) {

package/src/ConfigurationEditorWidget/components/StringArrayEditor.tsx

@@ -10,10 +10,10 @@ import {
   List,
   ListItem,
   TextField,
-} from '@material-ui/core'
+} from '@mui/material'
 
 // icons
-import DeleteIcon from '@material-ui/icons/Delete'
+import DeleteIcon from '@mui/icons-material/Delete'
 
 const StringArrayEditor = observer(
   ({

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

@@ -1,13 +1,22 @@
-import MenuItem from '@material-ui/core/MenuItem'
-import Paper from '@material-ui/core/Paper'
-import TextField from '@material-ui/core/TextField'
-import { observer } from 'mobx-react'
 import React from 'react'
+import { MenuItem, Paper, TextField } from '@mui/material'
+import { observer } from 'mobx-react'
 import { useSlotEditorStyles } from './SlotEditor'
+import { AnyConfigurationModel } from '@jbrowse/core/configuration'
 
 const TypeSelector = observer(
-  ({ typeNameChoices, slot, slotName, onChange }) => {
-    const classes = useSlotEditorStyles()
+  ({
+    typeNameChoices,
+    slot,
+    slotName,
+    onChange,
+  }: {
+    typeNameChoices: string[]
+    slot: AnyConfigurationModel
+    slotName: string
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  }) => {
+    const { classes } = useSlotEditorStyles()
     return (
       <Paper className={classes.paper}>
         <div className={classes.paperContent}>
@@ -15,7 +24,6 @@ const TypeSelector = observer(
             value={slot.type}
             label="Type"
             select
-            // error={filterError}
             helperText={`Type of ${slotName} to use`}
             fullWidth
             onChange={onChange}