@jbrowse/plugin-config 2.5.0 → 2.6.2

package/src/ConfigurationEditorWidget/components/CallbackEditor.tsx

@@ -1,126 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { Tooltip, IconButton, TextField } from '@mui/material'
-import { useDebounce } from '@jbrowse/core/util'
-import { stringToJexlExpression } from '@jbrowse/core/util/jexlStrings'
-import { getEnv } from 'mobx-state-tree'
-import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
-
-// icons
-import HelpIcon from '@mui/icons-material/Help'
-
-// 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: {
-    marginTop: '16px',
-    borderBottom: `1px solid ${theme.palette.divider}`,
-    width: '100%',
-    fontFamily,
-  },
-  textAreaFont: {
-    fontFamily,
-  },
-  callbackContainer: {
-    width: '100%',
-    overflowX: 'auto',
-  },
-
-  error: {
-    color: 'red',
-    fontSize: '0.8em',
-  },
-}))
-
-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<unknown>()
-  const debouncedCode = useDebounce(code, 400)
-
-  useEffect(() => {
-    try {
-      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(undefined)
-    } catch (e) {
-      console.error({ e })
-      setCodeError(e)
-    }
-  }, [debouncedCode, slot])
-
-  // if default value is a callback, will have to remove jexl:
-  // do this last
-  return (
-    <>
-      {error ? <p className={classes.error}>{`${error}`}</p> : null}
-      <div className={classes.callbackContainer}>
-        <TextField
-          multiline
-          className={classes.callbackEditor}
-          value={code.startsWith('jexl:') ? code.split('jexl:')[1] : code}
-          onChange={event => setCode(event.target.value)}
-          style={{ background: error ? '#fdd' : undefined }}
-          InputProps={{
-            classes: {
-              input: classes.textAreaFont,
-            },
-          }}
-        />
-
-        <p>{slot.description}</p>
-        <Tooltip
-          title={
-            <div>
-              Callbacks are written in Jexl format. Click to learn more.
-              <br /> Names of available context items: {slot.contextVariable}
-            </div>
-          }
-          arrow
-        >
-          <IconButton
-            color="primary"
-            onClick={() => {
-              const newWindow = window.open(
-                'https://github.com/TomFrost/Jexl',
-                '_blank',
-                'noopener,noreferrer',
-              )
-              if (newWindow) {
-                newWindow.opener = null
-              }
-            }}
-          >
-            <HelpIcon />
-          </IconButton>
-        </Tooltip>
-      </div>
-    </>
-  )
-}
-
-export default observer(CallbackEditor)

package/src/ConfigurationEditorWidget/components/ColorEditor.test.tsx

@@ -1,14 +0,0 @@
-import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-
-import { ColorSlot } from './ColorEditor'
-
-test('can change value via the text field', () => {
-  const myfn = jest.fn()
-  const { getByDisplayValue } = render(
-    <ColorSlot value="green" onChange={myfn} />,
-  )
-  const ret = getByDisplayValue('green')
-  fireEvent.change(ret, { target: { value: 'red' } })
-  expect(myfn).toHaveBeenCalledWith('red')
-})

package/src/ConfigurationEditorWidget/components/ColorEditor.tsx

@@ -1,59 +0,0 @@
-import React, { lazy, useState } from 'react'
-import { observer } from 'mobx-react'
-import { TextField } from '@mui/material'
-
-const ColorPicker = lazy(() => import('@jbrowse/core/ui/ColorPicker'))
-
-export const ColorSlot = (props: {
-  value: string
-  label?: string
-  TextFieldProps?: {
-    helperText: string
-    fullWidth: boolean
-  }
-  onChange: (arg: string) => void
-}) => {
-  const { value = '#000', label = '', TextFieldProps = {}, onChange } = props
-  const [displayed, setDisplayed] = useState(false)
-
-  return (
-    <div style={{ display: 'flex' }}>
-      <TextField
-        value={value}
-        label={label}
-        onClick={() => setDisplayed(!displayed)}
-        onChange={event => onChange(event.target.value)}
-        {...TextFieldProps}
-      />
-      <div style={{ marginTop: 10 }}>
-        <React.Suspense fallback={<div />}>
-          <ColorPicker color={value} onChange={event => onChange(event)} />
-        </React.Suspense>
-      </div>
-    </div>
-  )
-}
-
-function ColorEditorSlot(props: {
-  slot: {
-    name: string
-    value: string
-    description: string
-    set: (arg: string) => void
-  }
-}) {
-  const { slot } = props
-  return (
-    <ColorSlot
-      label={slot.name}
-      value={slot.value}
-      onChange={color => slot.set(color)}
-      TextFieldProps={{
-        helperText: slot.description,
-        fullWidth: true,
-      }}
-    />
-  )
-}
-
-export default observer(ColorEditorSlot)

package/src/ConfigurationEditorWidget/components/ConfigurationEditor.test.tsx

@@ -1,95 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import PluginManager from '@jbrowse/core/PluginManager'
-import Alignments from '@jbrowse/plugin-alignments'
-import SVG from '@jbrowse/plugin-svg'
-import { linearBasicDisplayConfigSchemaFactory } from '@jbrowse/plugin-linear-genome-view'
-import ConfigurationEditor from './ConfigurationEditor'
-
-describe('ConfigurationEditor widget', () => {
-  it('renders with just the required model elements', () => {
-    const TestSchema = ConfigurationSchema('TestThing', {
-      foo: {
-        type: 'string',
-        defaultValue: 'bar',
-      },
-    })
-
-    const { container } = render(
-      <ConfigurationEditor model={{ target: TestSchema.create() }} />,
-    )
-    expect(container.firstChild).toMatchSnapshot()
-  })
-
-  it('renders all the different types of built-in slots', () => {
-    const TestSchema = ConfigurationSchema('TestThing', {
-      stringTest: {
-        name: 'stringTest',
-        description: 'stringTest',
-        type: 'string',
-        defaultValue: 'string1',
-      },
-      fileLocationTest: {
-        name: 'fileLocationTest',
-        description: 'fileLocationTest',
-        type: 'fileLocation',
-        defaultValue: { uri: '/path/to/my.file', locationType: 'UriLocation' },
-      },
-      stringArrayTest: {
-        name: 'stringArrayTest',
-        description: 'stringArrayTest',
-        type: 'stringArray',
-        defaultValue: ['string1', 'string2'],
-      },
-      stringArrayMapTest: {
-        name: 'stringArrayMapTest',
-        description: 'stringArrayMapTest',
-        type: 'stringArrayMap',
-        defaultValue: { key1: ['string1', 'string2'] },
-      },
-      numberTest: {
-        name: 'numberTest',
-        description: 'numberTest',
-        type: 'number',
-        defaultValue: 88.5,
-      },
-      integerTest: {
-        name: 'integerTest',
-        description: 'integerTest',
-        type: 'integer',
-        defaultValue: 42,
-      },
-      colorTest: {
-        name: 'colorTest',
-        description: 'colorTest',
-        type: 'color',
-        defaultValue: '#396494',
-      },
-      booleanTest: {
-        name: 'booleanTest',
-        description: 'booleanTest',
-        type: 'boolean',
-        defaultValue: true,
-      },
-    })
-
-    const { container } = render(
-      <ConfigurationEditor model={{ target: TestSchema.create() }} />,
-    )
-    expect(container.firstChild).toMatchSnapshot()
-  })
-
-  it('renders with defaults of the PileupTrack schema', () => {
-    const pluginManager = new PluginManager([new Alignments(), new SVG()])
-    pluginManager.createPluggableElements()
-    pluginManager.configure()
-    const PileupDisplaySchema =
-      linearBasicDisplayConfigSchemaFactory(pluginManager)
-    const { container } = render(
-      <ConfigurationEditor model={{ target: PileupDisplaySchema.create() }} />,
-    )
-    expect(container.firstChild).toMatchSnapshot()
-  })
-})

package/src/ConfigurationEditorWidget/components/ConfigurationEditor.tsx

@@ -1,167 +0,0 @@
-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'
-import { AbstractSessionModel } from '@jbrowse/core/util'
-
-const useStyles = makeStyles()(theme => ({
-  expandIcon: {
-    color: theme.palette.tertiary?.contrastText || '#fff',
-  },
-  root: {
-    padding: theme.spacing(1, 3, 1, 1),
-  },
-  expansionPanelDetails: {
-    display: 'block',
-    padding: theme.spacing(1),
-  },
-  accordion: {
-    border: `1px solid ${theme.palette.text.primary}`,
-  },
-  noOverflow: {
-    width: '100%',
-    overflowX: 'auto',
-  },
-}))
-
-const Member = observer(function (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 className={classes.noOverflow}>
-            <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(function ({
-  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(function ({
-  model,
-}: {
-  model: { target: AnyConfigurationModel }
-  session?: AbstractSessionModel
-}) {
-  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>
-  )
-})
-
-export default ConfigurationEditor

package/src/ConfigurationEditorWidget/components/ConfigurationTextField.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import { TextField, TextFieldProps } from '@mui/material'
-import { SanitizedHTML } from '@jbrowse/core/ui'
-
-// adds ability to have html in helperText. note that FormHelperTextProps is
-// div because the default is p which does not like div children
-export default function ConfigurationTextField(
-  props: { helperText?: string } & TextFieldProps,
-) {
-  const { helperText } = props
-  return (
-    <TextField
-      {...props}
-      helperText={<SanitizedHTML html={helperText || ''} />}
-      FormHelperTextProps={{
-        // @ts-expect-error
-        component: 'div',
-      }}
-      fullWidth
-    />
-  )
-}

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>
-    </>
-  )
-})