@jbrowse/plugin-config 2.6.1 → 2.6.3

package/src/ConfigurationEditorWidget/components/JsonEditor.tsx

@@ -1,84 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { InputLabel, TextField } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-
-// 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 => ({
-  error: {
-    color: 'red',
-    fontSize: '0.8em',
-  },
-  callbackEditor: {
-    fontFamily,
-    fontSize,
-    background: theme.palette.background.default,
-    width: 800,
-    marginTop: '16px',
-    border: '1px solid rgba(0,0,0,0.42)',
-  },
-  callbackContainer: {
-    width: '100%',
-    overflowX: 'auto',
-  },
-  textAreaFont: {
-    fontFamily,
-  },
-}))
-
-function JsonEditor({
-  slot,
-}: {
-  slot: {
-    name: string
-    description: string
-    value: unknown
-    set: (arg: unknown) => void
-  }
-}) {
-  const { classes } = useStyles()
-  const [contents, setContents] = useState(JSON.stringify(slot.value, null, 2))
-  const [error, setError] = useState<unknown>()
-
-  useEffect(() => {
-    try {
-      setError(undefined)
-      slot.set(JSON.parse(contents))
-    } catch (e) {
-      console.error({ e })
-      setError(e)
-    }
-  }, [contents, slot])
-
-  return (
-    <>
-      {error ? <p className={classes.error}>{`${error}`}</p> : null}
-      <div className={classes.callbackContainer}>
-        <InputLabel shrink htmlFor="json-editor">
-          {slot.name}
-        </InputLabel>
-        <TextField
-          id="json-editor"
-          className={classes.callbackEditor}
-          value={contents}
-          helperText={slot.description}
-          multiline
-          onChange={event => setContents(event.target.value)}
-          style={{ background: error ? '#fdd' : undefined }}
-          InputProps={{
-            classes: {
-              input: classes.textAreaFont,
-            },
-          }}
-        />
-      </div>
-    </>
-  )
-}
-
-export default observer(JsonEditor)

package/src/ConfigurationEditorWidget/components/NumberEditor.tsx

@@ -1,34 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { observer } from 'mobx-react'
-import ConfigurationTextField from './ConfigurationTextField'
-
-export default observer(function ({
-  slot,
-}: {
-  slot: {
-    name?: string
-    value: string
-    description?: string
-    set: (val: number) => void
-    reset?: () => void
-  }
-}) {
-  const [val, setVal] = useState(slot.value)
-  useEffect(() => {
-    const num = Number.parseFloat(val)
-    if (Number.isNaN(num)) {
-      slot.reset?.()
-    } else {
-      slot.set(num)
-    }
-  }, [slot, val])
-  return (
-    <ConfigurationTextField
-      label={slot.name}
-      helperText={slot.description}
-      value={val}
-      type="number"
-      onChange={evt => setVal(evt.target.value)}
-    />
-  )
-})

package/src/ConfigurationEditorWidget/components/NumberMapEditor.tsx

@@ -1,94 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  FormHelperText,
-  IconButton,
-  InputAdornment,
-  InputLabel,
-  TextField,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-
-// icons
-import DeleteIcon from '@mui/icons-material/Delete'
-import AddIcon from '@mui/icons-material/Add'
-import NumberEditor from './NumberEditor'
-
-const useStyles = makeStyles()(theme => ({
-  card: {
-    marginTop: theme.spacing(1),
-  },
-}))
-
-export default observer(function ({
-  slot,
-}: {
-  slot: {
-    name: string
-    value: Map<string, string>
-    remove: (key: string) => void
-    add: (key: string, val: number) => void
-    description: string
-  }
-}) {
-  const { classes } = useStyles()
-  const [value, setValue] = useState('')
-  return (
-    <>
-      <InputLabel>{slot.name}</InputLabel>
-      {[...slot.value].map(([key, val]) => (
-        <Card raised key={key} className={classes.card}>
-          <CardHeader
-            title={key}
-            action={
-              <IconButton onClick={() => slot.remove(key)}>
-                <DeleteIcon />
-              </IconButton>
-            }
-          />
-          <CardContent>
-            <NumberEditor
-              slot={{
-                value: val,
-                set: (val: number) => slot.add(key, val),
-              }}
-            />
-          </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('')
-                      }}
-                    >
-                      <AddIcon />
-                    </IconButton>
-                  </InputAdornment>
-                ),
-              }}
-            />
-          }
-        />
-      </Card>
-      <FormHelperText>{slot.description}</FormHelperText>
-    </>
-  )
-})

package/src/ConfigurationEditorWidget/components/SlotEditor.tsx

@@ -1,236 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { observer } from 'mobx-react'
-import { getPropertyMembers, IAnyType } from 'mobx-state-tree'
-import { getEnv, FileLocation } from '@jbrowse/core/util'
-import { FileSelector } from '@jbrowse/core/ui'
-import {
-  getSubType,
-  getUnionSubTypes,
-  ILiteralType,
-} from '@jbrowse/core/util/mst-reflection'
-import { IconButton, MenuItem, Paper, SvgIcon, TextField } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-
-// icons
-import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked'
-
-// locals
-import StringArrayEditor from './StringArrayEditor'
-import CallbackEditor from './CallbackEditor'
-import ColorEditor from './ColorEditor'
-import JsonEditor from './JsonEditor'
-import StringArrayMapEditor from './StringArrayMapEditor'
-import ConfigurationTextField from './ConfigurationTextField'
-import NumberMapEditor from './NumberMapEditor'
-import NumberEditor from './NumberEditor'
-import BooleanEditor from './BooleanEditor'
-import {
-  AnyConfigurationSlot,
-  AnyConfigurationSlotType,
-} from '@jbrowse/core/configuration'
-
-const StringEditor = observer(
-  ({
-    slot,
-  }: {
-    slot: {
-      name: string
-      description: string
-      value: string
-      set: (arg: string) => void
-    }
-  }) => (
-    <ConfigurationTextField
-      label={slot.name}
-      helperText={slot.description}
-      value={slot.value}
-      onChange={evt => slot.set(evt.target.value)}
-    />
-  ),
-)
-
-const TextEditor = observer(
-  ({
-    slot,
-  }: {
-    slot: {
-      name: string
-      description: string
-      value: string
-      set: (arg: string) => void
-    }
-  }) => (
-    <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 IntegerEditor = observer(
-  ({
-    slot,
-  }: {
-    slot: {
-      name: string
-      value: string
-      description: string
-      set: (num: number) => void
-    }
-  }) => {
-    const [val, setVal] = useState(slot.value)
-    useEffect(() => {
-      const num = Number.parseInt(val, 10)
-      if (!Number.isNaN(num)) {
-        slot.set(num)
-      }
-    }, [slot, val])
-    return (
-      <ConfigurationTextField
-        label={slot.name}
-        helperText={slot.description}
-        value={val}
-        type="number"
-        onChange={evt => setVal(evt.target.value)}
-      />
-    )
-  },
-)
-
-const StringEnumEditor = observer(function ({
-  slot,
-  slotSchema,
-}: {
-  slot: AnyConfigurationSlot
-  slotSchema: AnyConfigurationSlotType
-}) {
-  const p = getPropertyMembers(getSubType(slotSchema))
-  const choices = getUnionSubTypes(
-    getUnionSubTypes(getSubType(p.properties.value))[1],
-  ).map(t => (t as ILiteralType<string>).value)
-
-  return (
-    <ConfigurationTextField
-      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>
-      ))}
-    </ConfigurationTextField>
-  )
-})
-
-const FileSelectorWrapper = observer(function ({
-  slot,
-}: {
-  slot: {
-    name: string
-    value: FileLocation
-    set: (arg: FileLocation) => void
-    description: string
-  }
-}) {
-  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(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ({ slot, slotSchema }: { slot: any; slotSchema: IAnyType }) => {
-    const { classes } = useSlotEditorStyles()
-    const { type } = slot
-    let ValueComponent = slot.isCallback
-      ? CallbackEditor
-      : // @ts-expect-error
-        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
-              onClick={() =>
-                slot.isCallback
-                  ? slot.convertToValue()
-                  : slot.convertToCallback()
-              }
-              title={`convert to ${
-                slot.isCallback ? 'regular value' : 'callback'
-              }`}
-            >
-              {slot.isCallback ? <SvgCheckbox /> : <RadioButtonUncheckedIcon />}
-            </IconButton>
-          ) : null}
-        </div>
-      </Paper>
-    )
-  },
-)
-
-export default SlotEditor

package/src/ConfigurationEditorWidget/components/StringArrayEditor.tsx

@@ -1,112 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-
-import {
-  Button,
-  FormHelperText,
-  IconButton,
-  InputAdornment,
-  InputLabel,
-  List,
-  ListItem,
-  TextField,
-} from '@mui/material'
-
-// icons
-import DeleteIcon from '@mui/icons-material/Delete'
-
-const StringArrayEditor = observer(
-  ({
-    slot,
-  }: {
-    slot: {
-      name: string
-      value: string[]
-      setAtIndex: Function
-      removeAtIndex: Function
-      add: Function
-      description: string
-    }
-  }) => {
-    const [value, setValue] = useState('')
-    const [addNew, setAddNew] = useState(false)
-    return (
-      <>
-        {slot.name ? <InputLabel>{slot.name}</InputLabel> : null}
-        <List disablePadding>
-          {slot.value.map((val, idx) => (
-            <ListItem key={idx} disableGutters>
-              <TextField
-                value={val}
-                onChange={evt => slot.setAtIndex(idx, evt.target.value)}
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">
-                      <IconButton onClick={() => slot.removeAtIndex(idx)}>
-                        <DeleteIcon />
-                      </IconButton>
-                    </InputAdornment>
-                  ),
-                }}
-              />
-            </ListItem>
-          ))}
-
-          {addNew ? (
-            <ListItem disableGutters>
-              <TextField
-                value={value}
-                placeholder="add new"
-                onChange={event => setValue(event.target.value)}
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">
-                      <>
-                        <Button
-                          color="primary"
-                          variant="contained"
-                          style={{ margin: 2 }}
-                          data-testid={`stringArrayAdd-${slot.name}`}
-                          onClick={() => {
-                            setAddNew(false)
-                            slot.add(value)
-                            setValue('')
-                          }}
-                        >
-                          OK
-                        </Button>
-                        <Button
-                          color="primary"
-                          variant="contained"
-                          style={{ margin: 2 }}
-                          onClick={() => {
-                            setAddNew(false)
-                            setValue('')
-                          }}
-                        >
-                          Cancel
-                        </Button>
-                      </>
-                    </InputAdornment>
-                  ),
-                }}
-              />
-            </ListItem>
-          ) : null}
-          <Button
-            color="primary"
-            variant="contained"
-            style={{ margin: 4 }}
-            disabled={addNew}
-            onClick={() => setAddNew(true)}
-          >
-            Add item
-          </Button>
-        </List>
-        <FormHelperText>{slot.description}</FormHelperText>
-      </>
-    )
-  },
-)
-
-export default StringArrayEditor

package/src/ConfigurationEditorWidget/components/StringArrayMapEditor.tsx

@@ -1,104 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  FormHelperText,
-  IconButton,
-  InputAdornment,
-  InputLabel,
-  TextField,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-
-// icons
-import DeleteIcon from '@mui/icons-material/Delete'
-import AddIcon from '@mui/icons-material/Add'
-
-// locals
-import StringArrayEditor from './StringArrayEditor'
-
-const useStyles = makeStyles()(theme => ({
-  card: {
-    marginTop: theme.spacing(1),
-  },
-}))
-
-export default observer(function ({
-  slot,
-}: {
-  slot: {
-    name: string
-    value: Map<string, string[]>
-    remove: (key: string) => void
-    add: (key: string, val: string[]) => void
-    description: string
-    setAtKeyIndex: (key: string, idx: number, val: string) => void
-    removeAtKeyIndex: (key: string, idx: number) => void
-    addToKey: (key: string, val: string) => void
-  }
-}) {
-  const { classes } = useStyles()
-  const [value, setValue] = useState('')
-  return (
-    <>
-      <InputLabel>{slot.name}</InputLabel>
-      {[...slot.value].map(([key, val]) => (
-        <Card raised key={key} className={classes.card}>
-          <CardHeader
-            title={key}
-            action={
-              <IconButton onClick={() => slot.remove(key)}>
-                <DeleteIcon />
-              </IconButton>
-            }
-          />
-          <CardContent>
-            <StringArrayEditor
-              slot={{
-                name: slot.name,
-                value: val,
-                description: `Values associated with entry ${key}`,
-                setAtIndex: (idx: number, val: string) =>
-                  slot.setAtKeyIndex(key, idx, val),
-                removeAtIndex: (idx: number) => slot.removeAtKeyIndex(key, idx),
-                add: (val: string) => slot.addToKey(key, val),
-              }}
-            />
-          </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('')
-                      }}
-                    >
-                      <AddIcon />
-                    </IconButton>
-                  </InputAdornment>
-                ),
-              }}
-            />
-          }
-        />
-      </Card>
-      <FormHelperText>{slot.description}</FormHelperText>
-    </>
-  )
-})

package/src/ConfigurationEditorWidget/components/TypeSelector.tsx

@@ -1,43 +0,0 @@
-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,
-  }: {
-    typeNameChoices: string[]
-    slot: AnyConfigurationModel
-    slotName: string
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
-  }) => {
-    const { classes } = useSlotEditorStyles()
-    return (
-      <Paper className={classes.paper}>
-        <div className={classes.paperContent}>
-          <TextField
-            value={slot.type}
-            label="Type"
-            select
-            helperText={`Type of ${slotName} to use`}
-            fullWidth
-            onChange={onChange}
-          >
-            {typeNameChoices.map(str => (
-              <MenuItem key={str} value={str}>
-                {str}
-              </MenuItem>
-            ))}
-          </TextField>
-        </div>
-      </Paper>
-    )
-  },
-)
-
-export default TypeSelector