@jbrowse/plugin-config 2.3.4 → 2.4.0

package/src/ConfigurationEditorWidget/components/BooleanEditor.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+
+import {
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormHelperText,
+} from '@mui/material'
+
+export default observer(function ({
+  slot,
+}: {
+  slot: {
+    name: string
+    value: boolean
+    set: (arg: boolean) => void
+    description: string
+  }
+}) {
+  return (
+    <FormControl>
+      <FormControlLabel
+        label={slot.name}
+        control={
+          <Checkbox
+            checked={slot.value}
+            onChange={evt => slot.set(evt.target.checked)}
+          />
+        }
+      />
+      <FormHelperText>{slot.description}</FormHelperText>
+    </FormControl>
+  )
+})

package/src/ConfigurationEditorWidget/components/ConfigurationEditor.tsx

@@ -28,7 +28,7 @@ import { AbstractSessionModel } from '@jbrowse/core/util'
 
 const useStyles = makeStyles()(theme => ({
   expandIcon: {
-    color: '#fff',
+    color: theme.palette.tertiary?.contrastText || '#fff',
   },
   root: {
     padding: theme.spacing(1, 3, 1, 1),
@@ -37,7 +37,6 @@ const useStyles = makeStyles()(theme => ({
     display: 'block',
     padding: theme.spacing(1),
   },
-
   accordion: {
     border: `1px solid ${theme.palette.text.primary}`,
   },
@@ -47,133 +46,127 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-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 className={classes.noOverflow}>
-              <Schema schema={slot} path={[...path, slotName]} />
-            </FormGroup>
-          </AccordionDetails>
-        </Accordion>
+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} />
-    }
+  if (isConfigurationSlotType(slotSchema)) {
+    // this is a regular config slot
+    return <SlotEditor key={slotName} slot={slot} slotSchema={slotSchema} />
+  }
 
-    return null
-  },
-)
+  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 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(
-  ({
-    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>
+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>
 
-        {/* blank space at the bottom of screen allows scroll */}
-        <div style={{ height: 300 }} />
-      </>
-    )
-  },
-)
+      {/* blank space at the bottom of screen allows scroll */}
+      <div style={{ height: 300 }} />
+    </>
+  )
+})
 
 export default ConfigurationEditor

package/src/ConfigurationEditorWidget/components/ConfigurationTextField.tsx

@@ -0,0 +1,22 @@
+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-ignore
+        component: 'div',
+      }}
+      fullWidth
+    />
+  )
+}

package/src/ConfigurationEditorWidget/components/NumberEditor.tsx

@@ -0,0 +1,34 @@
+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 = parseFloat(val)
+    if (!Number.isNaN(num)) {
+      slot.set(num)
+    } else {
+      slot.reset?.()
+    }
+  }, [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

@@ -0,0 +1,94 @@
+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>
+      {Array.from(slot.value, ([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>
+    </>
+  )
+})