@jbrowse/plugin-config 2.3.4 → 2.4.1

package/esm/FromConfigAdapter/FromConfigAdapter.js.map

@@ -1 +1 @@
-{"version":3,"file":"FromConfigAdapter.js","sourceRoot":"","sources":["../../src/FromConfigAdapter/FromConfigAdapter.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"FromConfigAdapter.js","sourceRoot":"","sources":["../../src/FromConfigAdapter/FromConfigAdapter.ts"],"names":[],"mappings":"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"}

package/esm/RefNameAliasAdapter/RefNameAliasAdapter.js

@@ -1,14 +1,13 @@
 import { BaseAdapter, } from '@jbrowse/core/data_adapters/BaseAdapter';
 import { openLocation } from '@jbrowse/core/util/io';
-import { readConfObject } from '@jbrowse/core/configuration';
 export default class RefNameAliasAdapter extends BaseAdapter {
     async getRefNameAliases() {
-        const loc = readConfObject(this.config, 'location');
+        const loc = this.getConf('location');
         if (loc.uri === '' || loc.uri === '/path/to/my/aliases.txt') {
             return [];
         }
-        const results = await openLocation(loc).readFile('utf8');
-        const refColumn = readConfObject(this.config, 'refNameColumn');
+        const results = await openLocation(loc, this.pluginManager).readFile('utf8');
+        const refColumn = this.getConf('refNameColumn');
         return results
             .trim()
             .split(/\n|\r\n|\r/)

package/esm/RefNameAliasAdapter/RefNameAliasAdapter.js.map

@@ -1 +1 @@
-{"version":3,"file":"RefNameAliasAdapter.js","sourceRoot":"","sources":["../../src/RefNameAliasAdapter/RefNameAliasAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,GACZ,MAAM,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAE5D,MAAM,CAAC,OAAO,OAAO,mBACnB,SAAQ,WAAW;IAGnB,KAAK,CAAC,iBAAiB;QACrB,MAAM,GAAG,GAAG,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;QACnD,IAAI,GAAG,CAAC,GAAG,KAAK,EAAE,IAAI,GAAG,CAAC,GAAG,KAAK,yBAAyB,EAAE;YAC3D,OAAO,EAAE,CAAA;SACV;QACD,MAAM,OAAO,GAAG,MAAM,YAAY,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;QACxD,MAAM,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;QAC9D,OAAO,OAAO;aACX,IAAI,EAAE;aACN,KAAK,CAAC,YAAY,CAAC;aACnB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;aACtC,GAAG,CAAC,GAAG,CAAC,EAAE;YACT,MAAM,OAAO,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;YAC/B,MAAM,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAA;YAC9C,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,CAAA;QAC9D,CAAC,CAAC,CAAA;IACN,CAAC;IAED,KAAK,CAAC,aAAa,KAAI,CAAC;CACzB"}
+{"version":3,"file":"RefNameAliasAdapter.js","sourceRoot":"","sources":["../../src/RefNameAliasAdapter/RefNameAliasAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,GACZ,MAAM,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,MAAM,CAAC,OAAO,OAAO,mBACnB,SAAQ,WAAW;IAGnB,KAAK,CAAC,iBAAiB;QACrB,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;QACpC,IAAI,GAAG,CAAC,GAAG,KAAK,EAAE,IAAI,GAAG,CAAC,GAAG,KAAK,yBAAyB,EAAE;YAC3D,OAAO,EAAE,CAAA;SACV;QACD,MAAM,OAAO,GAAG,MAAM,YAAY,CAAC,GAAG,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;QAC5E,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAA;QAC/C,OAAO,OAAO;aACX,IAAI,EAAE;aACN,KAAK,CAAC,YAAY,CAAC;aACnB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;aACtC,GAAG,CAAC,GAAG,CAAC,EAAE;YACT,MAAM,OAAO,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;YAC/B,MAAM,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAA;YAC9C,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,CAAA;QAC9D,CAAC,CAAC,CAAA;IACN,CAAC;IAED,KAAK,CAAC,aAAa,KAAI,CAAC;CACzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-config",
-  "version": "2.3.4",
+  "version": "2.4.1",
   "description": "JBrowse 2 config utilities",
   "keywords": [
     "jbrowse",
@@ -57,5 +57,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "98ae48be91ee2371e1b2768a907b4997995e9915"
+  "gitHead": "747c50c4edc0184827efa4f8dfc576ca9a72caeb"
 }

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-expect-error
+        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 = 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

@@ -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>
+      {[...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>
+    </>
+  )
+})