@jbrowse/plugin-config 1.7.11 → 2.1.0

package/src/ConfigurationEditorWidget/components/ConfigurationEditor.js

@@ -1,154 +0,0 @@
-import React from 'react'
-import {
-  readConfObject,
-  getTypeNamesFromExplicitlyTypedUnion,
-  isConfigurationSchemaType,
-  isConfigurationSlotType,
-} from '@jbrowse/core/configuration'
-import {
-  FormGroup,
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  Typography,
-  makeStyles,
-} from '@material-ui/core'
-import { observer } from 'mobx-react'
-import { getMembers } from 'mobx-state-tree'
-import { singular } from 'pluralize'
-
-// icons
-import ExpandMoreIcon from '@material-ui/icons/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 => {
-  const classes = useStyles()
-  const {
-    slotName,
-    slotSchema,
-    schema,
-    slot = schema[slotName],
-    path = [],
-  } = props
-  let typeSelector
-  if (isConfigurationSchemaType(slotSchema)) {
-    if (slot.length) {
-      return slot.map((subslot, slotIndex) => {
-        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}
-        TransitionProps={{ unmountOnExit: true, timeout: 150 }}
-      >
-        <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 = [] }) => {
-  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 }) => {
-  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 key = model.target && readConfObject(model.target, 'trackId')
-  const name = model.target && readConfObject(model.target, 'name')
-  return (
-    <>
-      <Accordion
-        key={key}
-        defaultExpanded
-        className={classes.accordion}
-        TransitionProps={{ unmountOnExit: true, timeout: 150 }}
-      >
-        <AccordionSummary
-          expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
-        >
-          <Typography>{name ? name : 'Configuration'}</Typography>
-        </AccordionSummary>
-        <AccordionDetails
-          className={classes.expansionPanelDetails}
-          data-testid="configEditor"
-        >
-          {!model.target ? 'no target set' : <Schema schema={model.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,56 +0,0 @@
-import React, { lazy, useEffect, useState } from 'react'
-import { useDebounce } from '@jbrowse/core/util'
-import {
-  FormControl,
-  FormHelperText,
-  InputLabel,
-  makeStyles,
-} from '@material-ui/core'
-import { observer, PropTypes } from 'mobx-react'
-const useStyles = makeStyles({
-  error: {
-    color: 'red',
-    fontSize: '0.8em',
-  },
-})
-
-const CodeEditor = lazy(() => import('./CodeEditor'))
-
-function JsonEditor({ slot }) {
-  const classes = useStyles()
-  const [contents, setContents] = useState(
-    JSON.stringify(slot.value, null, '  '),
-  )
-  const [error, setError] = useState()
-  const debouncedJson = useDebounce(contents, 400)
-
-  useEffect(() => {
-    try {
-      slot.set(JSON.parse(debouncedJson))
-      setError(undefined)
-    } catch (e) {
-      setError(e.message)
-    }
-  }, [debouncedJson, slot])
-
-  return (
-    <>
-      {error ? <p className={classes.error}>{error}</p> : null}
-      <FormControl error={error}>
-        <InputLabel shrink htmlFor="callback-editor">
-          {slot.name}
-        </InputLabel>
-        <React.Suspense fallback={<div />}>
-          <CodeEditor contents={contents} setContents={setContents} />
-        </React.Suspense>
-        <FormHelperText>{slot.description}</FormHelperText>
-      </FormControl>
-    </>
-  )
-}
-
-JsonEditor.propTypes = {
-  slot: PropTypes.objectOrObservableObject.isRequired,
-}
-
-export default observer(JsonEditor)

package/src/ConfigurationEditorWidget/components/SlotEditor.js

@@ -1,377 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { observer } from 'mobx-react'
-import { getPropertyMembers, getEnv } from 'mobx-state-tree'
-import { FileSelector, SanitizedHTML } from '@jbrowse/core/ui'
-import {
-  getPropertyType,
-  getSubType,
-  getUnionSubTypes,
-} from '@jbrowse/core/util/mst-reflection'
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  Checkbox,
-  FormControl,
-  FormControlLabel,
-  FormHelperText,
-  IconButton,
-  InputAdornment,
-  InputLabel,
-  MenuItem,
-  Paper,
-  SvgIcon,
-  TextField,
-  makeStyles,
-} from '@material-ui/core'
-
-// icons
-import DeleteIcon from '@material-ui/icons/Delete'
-import AddIcon from '@material-ui/icons/Add'
-import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked'
-
-// locals
-import StringArrayEditor from './StringArrayEditor'
-import CallbackEditor from './CallbackEditor'
-import ColorEditor from './ColorEditor'
-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
-      {...props}
-      helperText={<SanitizedHTML html={helperText} />}
-      FormHelperTextProps={{
-        component: 'div',
-      }}
-      fullWidth
-    />
-  )
-}
-
-const StringEditor = observer(({ slot }) => (
-  <MyTextField
-    label={slot.name}
-    helperText={slot.description}
-    value={slot.value}
-    onChange={evt => slot.set(evt.target.value)}
-  />
-))
-
-const TextEditor = observer(({ slot }) => (
-  <TextField
-    label={slot.name}
-    helperText={slot.description}
-    multiline
-    value={slot.value}
-    onChange={evt => slot.set(evt.target.value)}
-  />
-))
-
-// checked checkbox, looks like a styled (x)
-const SvgCheckbox = () => (
-  <SvgIcon>
-    <path d="M20.41,3C21.8,5.71 22.35,8.84 22,12C21.8,15.16 20.7,18.29 18.83,21L17.3,20C18.91,17.57 19.85,14.8 20,12C20.34,9.2 19.89,6.43 18.7,4L20.41,3M5.17,3L6.7,4C5.09,6.43 4.15,9.2 4,12C3.66,14.8 4.12,17.57 5.3,20L3.61,21C2.21,18.29 1.65,15.17 2,12C2.2,8.84 3.3,5.71 5.17,3M12.08,10.68L14.4,7.45H16.93L13.15,12.45L15.35,17.37H13.09L11.71,14L9.28,17.33H6.76L10.66,12.21L8.53,7.45H10.8L12.08,10.68Z" />
-  </SvgIcon>
-)
-
-const useMapEditorStyles = makeStyles(theme => ({
-  card: {
-    marginTop: theme.spacing(1),
-  },
-}))
-
-const StringArrayMapEditor = observer(({ slot }) => {
-  const classes = useMapEditorStyles()
-  const [value, setValue] = useState('')
-  return (
-    <>
-      <InputLabel>{slot.name}</InputLabel>
-      {Array.from(slot.value, ([key, val]) => (
-        <Card raised key={key} className={classes.card}>
-          <CardHeader
-            title={key}
-            action={
-              <IconButton color="secondary" onClick={() => slot.remove(key)}>
-                <DeleteIcon />
-              </IconButton>
-            }
-          />
-          <CardContent>
-            <StringArrayEditor
-              slot={{
-                value: val,
-                description: `Values associated with entry ${key}`,
-                setAtIndex: (idx, strValue) => {
-                  slot.setAtKeyIndex(key, idx, strValue)
-                },
-                removeAtIndex: idx => {
-                  slot.removeAtKeyIndex(key, idx)
-                },
-                add: strValue => {
-                  slot.addToKey(key, strValue)
-                },
-              }}
-            />
-          </CardContent>
-        </Card>
-      ))}
-      <Card raised className={classes.card}>
-        <CardHeader
-          disableTypography
-          title={
-            <TextField
-              fullWidth
-              value={value}
-              placeholder="add new"
-              onChange={event => setValue(event.target.value)}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <IconButton
-                      disabled={value === ''}
-                      onClick={() => {
-                        slot.add(value, [])
-                        setValue('')
-                      }}
-                      color="secondary"
-                    >
-                      <AddIcon />
-                    </IconButton>
-                  </InputAdornment>
-                ),
-              }}
-            />
-          }
-        />
-      </Card>
-      <FormHelperText>{slot.description}</FormHelperText>
-    </>
-  )
-})
-
-const NumberMapEditor = observer(({ slot }) => {
-  const classes = useMapEditorStyles()
-  const [value, setValue] = useState('')
-  return (
-    <>
-      <InputLabel>{slot.name}</InputLabel>
-      {Array.from(slot.value, ([key, val]) => (
-        <Card raised key={key} className={classes.card}>
-          <CardHeader
-            title={key}
-            action={
-              <IconButton color="secondary" onClick={() => slot.remove(key)}>
-                <DeleteIcon />
-              </IconButton>
-            }
-          />
-          <CardContent>
-            <NumberEditor
-              slot={{
-                value: val,
-                set: numValue => slot.add(key, numValue),
-              }}
-            />
-          </CardContent>
-        </Card>
-      ))}
-      <Card raised className={classes.card}>
-        <CardHeader
-          disableTypography
-          title={
-            <TextField
-              fullWidth
-              value={value}
-              placeholder="add new"
-              onChange={event => setValue(event.target.value)}
-              InputProps={{
-                endAdornment: (
-                  <InputAdornment position="end">
-                    <IconButton
-                      disabled={value === ''}
-                      onClick={() => {
-                        slot.add(value, 0)
-                        setValue('')
-                      }}
-                      color="secondary"
-                    >
-                      <AddIcon />
-                    </IconButton>
-                  </InputAdornment>
-                ),
-              }}
-            />
-          }
-        />
-      </Card>
-      <FormHelperText>{slot.description}</FormHelperText>
-    </>
-  )
-})
-
-const NumberEditor = observer(({ slot }) => {
-  const [val, setVal] = useState(slot.value)
-  useEffect(() => {
-    const num = parseFloat(val, 10)
-    if (!Number.isNaN(num)) {
-      slot.set(num)
-    } else {
-      slot.reset()
-    }
-  }, [slot, val])
-  return (
-    <MyTextField
-      label={slot.name}
-      helperText={slot.description}
-      value={val}
-      type="number"
-      onChange={evt => setVal(evt.target.value)}
-    />
-  )
-})
-
-const IntegerEditor = observer(({ slot }) => {
-  const [val, setVal] = useState(slot.value)
-  useEffect(() => {
-    const num = parseInt(val, 10)
-    if (!Number.isNaN(num)) {
-      slot.set(num)
-    }
-  }, [slot, val])
-  return (
-    <MyTextField
-      label={slot.name}
-      helperText={slot.description}
-      value={val}
-      type="number"
-      onChange={evt => setVal(evt.target.value)}
-    />
-  )
-})
-
-const BooleanEditor = observer(({ slot }) => (
-  <FormControl>
-    <FormControlLabel
-      label={slot.name}
-      control={
-        <Checkbox
-          checked={slot.value}
-          onChange={evt => slot.set(evt.target.checked)}
-        />
-      }
-    />
-    <FormHelperText>{slot.description}</FormHelperText>
-  </FormControl>
-))
-
-const StringEnumEditor = observer(({ slot, slotSchema }) => {
-  const p = getPropertyMembers(getSubType(slotSchema))
-  const choices = getUnionSubTypes(
-    getUnionSubTypes(getSubType(getPropertyType(p, 'value')))[1],
-  ).map(t => t.value)
-
-  return (
-    <MyTextField
-      value={slot.value}
-      label={slot.name}
-      select
-      helperText={slot.description}
-      onChange={evt => slot.set(evt.target.value)}
-    >
-      {choices.map(str => (
-        <MenuItem key={str} value={str}>
-          {str}
-        </MenuItem>
-      ))}
-    </MyTextField>
-  )
-})
-
-const FileSelectorWrapper = observer(({ slot }) => {
-  return (
-    <FileSelector
-      location={slot.value}
-      setLocation={location => slot.set(location)}
-      name={slot.name}
-      description={slot.description}
-      rootModel={getEnv(slot).pluginManager?.rootModel}
-    />
-  )
-})
-
-const valueComponents = {
-  string: StringEditor,
-  text: TextEditor,
-  fileLocation: FileSelectorWrapper,
-  stringArray: StringArrayEditor,
-  stringArrayMap: StringArrayMapEditor,
-  numberMap: NumberMapEditor,
-  number: NumberEditor,
-  integer: IntegerEditor,
-  color: ColorEditor,
-  stringEnum: StringEnumEditor,
-  boolean: BooleanEditor,
-  frozen: JsonEditor,
-  configRelationships: JsonEditor,
-}
-
-export const useSlotEditorStyles = makeStyles(theme => ({
-  paper: {
-    display: 'flex',
-    marginBottom: theme.spacing(2),
-    position: 'relative',
-  },
-  paperContent: {
-    width: '100%',
-  },
-  slotModeSwitch: {
-    width: 24,
-    background: theme.palette.secondary.light,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-}))
-
-const SlotEditor = observer(({ slot, slotSchema }) => {
-  const classes = useSlotEditorStyles()
-  const { type } = slot
-  let ValueComponent = slot.isCallback ? CallbackEditor : valueComponents[type]
-  if (!ValueComponent) {
-    console.warn(`no slot editor defined for ${type}, editing as string`)
-    ValueComponent = StringEditor
-  }
-  if (!(type in valueComponents)) {
-    console.warn(`SlotEditor needs to implement ${type}`)
-  }
-  return (
-    <Paper className={classes.paper}>
-      <div className={classes.paperContent}>
-        <ValueComponent slot={slot} slotSchema={slotSchema} />
-      </div>
-      <div className={classes.slotModeSwitch}>
-        {slot.contextVariable.length ? (
-          <IconButton
-            className={classes.slotModeIcon}
-            onClick={() =>
-              slot.isCallback ? slot.convertToValue() : slot.convertToCallback()
-            }
-            title={`convert to ${
-              slot.isCallback ? 'regular value' : 'callback'
-            }`}
-            color="secondary"
-          >
-            {!slot.isCallback ? <RadioButtonUncheckedIcon /> : <SvgCheckbox />}
-          </IconButton>
-        ) : null}
-      </div>
-    </Paper>
-  )
-})
-
-export default SlotEditor