@jbrowse/plugin-config 2.0.1 → 2.1.0

package/esm/FromConfigAdapter/FromConfigSequenceAdapter.js

@@ -9,16 +9,8 @@ export default class FromConfigSequenceAdapter extends FromConfigAdapter {
      * @returns Observable of Feature objects in the region
      */
     getFeatures(region) {
-        // TODO: restore commented version below once TSDX supports Rollup v2
-        // xref: https://github.com/rollup/rollup/blob/master/CHANGELOG.md#bug-fixes-45
-        // return ObservableCreate<Feature>(async observer => {
-        //   const feats = await super.getFeatures(region).pipe(toArray()).toPromise()
-        const superGetFeatures = super.getFeatures;
         return ObservableCreate(async (observer) => {
-            const feats = await superGetFeatures
-                .call(this, region)
-                .pipe(toArray())
-                .toPromise();
+            const feats = await super.getFeatures(region).pipe(toArray()).toPromise();
             const feat = feats[0];
             observer.next(new SimpleFeature({
                 ...feat.toJSON(),

package/esm/FromConfigAdapter/FromConfigSequenceAdapter.js.map

@@ -1 +1 @@
-{"version":3,"file":"FromConfigSequenceAdapter.js","sourceRoot":"","sources":["../../src/FromConfigAdapter/FromConfigSequenceAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,aAA0B,MAAM,kCAAkC,CAAA;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE1D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,iBAAiB,MAAM,qBAAqB,CAAA;AAGnD,MAAM,CAAC,OAAO,OAAO,yBACnB,SAAQ,iBAAiB;IAGzB;;;;OAIG;IACH,WAAW,CAAC,MAAwB;QAClC,qEAAqE;QACrE,+EAA+E;QAC/E,uDAAuD;QACvD,8EAA8E;QAC9E,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAA;QAC1C,OAAO,gBAAgB,CAAU,KAAK,EAAC,QAAQ,EAAC,EAAE;YAChD,MAAM,KAAK,GAAG,MAAM,gBAAgB;iBACjC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC;iBAClB,IAAI,CAAC,OAAO,EAAE,CAAC;iBACf,SAAS,EAAE,CAAA;YACd,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;YACrB,QAAQ,CAAC,IAAI,CACX,IAAI,aAAa,CAAC;gBAChB,GAAG,IAAI,CAAC,MAAM,EAAE;gBAChB,QAAQ,EAAE,GAAG,IAAI,CAAC,EAAE,EAAE,IAAI,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,GAAG,EAAE;gBACtD,GAAG,EAAE,MAAM,CAAC,GAAG;gBACf,KAAK,EAAE,MAAM,CAAC,KAAK;gBACnB,GAAG,EAAE,IAAI;qBACN,GAAG,CAAC,KAAK,CAAC;qBACV,KAAK,CACJ,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAC7C,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAC5C;aACJ,CAAC,CACH,CAAA;YAED,QAAQ,CAAC,QAAQ,EAAE,CAAA;QACrB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,UAAU;QACd,MAAM,OAAO,GAAG,EAAE,CAAA;QAElB,wEAAwE;QACxE,KAAK,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC/C,IAAI,aAAa,CAAA;YACjB,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE;gBAC9B,IACE,aAAa;oBACb,aAAa,CAAC,GAAG,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;oBACzC,aAAa,CAAC,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EACzC;oBACA,aAAa,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;iBACvC;qBAAM;oBACL,IAAI,aAAa,EAAE;wBACjB,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;qBAC5B;oBACD,aAAa,GAAG;wBACd,OAAO;wBACP,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;wBAC3B,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;qBACxB,CAAA;iBACF;aACF;YACD,IAAI,aAAa,EAAE;gBACjB,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;aAC5B;SACF;QAED,OAAO,OAAO,CAAA;IAChB,CAAC;IAED;;;;OAIG;IACH,aAAa,EAAC,gBAAgB,IAAS,CAAC;CACzC"}
+{"version":3,"file":"FromConfigSequenceAdapter.js","sourceRoot":"","sources":["../../src/FromConfigAdapter/FromConfigSequenceAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,aAA0B,MAAM,kCAAkC,CAAA;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE1D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,iBAAiB,MAAM,qBAAqB,CAAA;AAGnD,MAAM,CAAC,OAAO,OAAO,yBACnB,SAAQ,iBAAiB;IAGzB;;;;OAIG;IACH,WAAW,CAAC,MAAwB;QAClC,OAAO,gBAAgB,CAAU,KAAK,EAAC,QAAQ,EAAC,EAAE;YAChD,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,SAAS,EAAE,CAAA;YACzE,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;YACrB,QAAQ,CAAC,IAAI,CACX,IAAI,aAAa,CAAC;gBAChB,GAAG,IAAI,CAAC,MAAM,EAAE;gBAChB,QAAQ,EAAE,GAAG,IAAI,CAAC,EAAE,EAAE,IAAI,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,GAAG,EAAE;gBACtD,GAAG,EAAE,MAAM,CAAC,GAAG;gBACf,KAAK,EAAE,MAAM,CAAC,KAAK;gBACnB,GAAG,EAAE,IAAI;qBACN,GAAG,CAAC,KAAK,CAAC;qBACV,KAAK,CACJ,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAC7C,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAC5C;aACJ,CAAC,CACH,CAAA;YAED,QAAQ,CAAC,QAAQ,EAAE,CAAA;QACrB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,UAAU;QACd,MAAM,OAAO,GAAG,EAAE,CAAA;QAElB,wEAAwE;QACxE,KAAK,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC/C,IAAI,aAAa,CAAA;YACjB,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE;gBAC9B,IACE,aAAa;oBACb,aAAa,CAAC,GAAG,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;oBACzC,aAAa,CAAC,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EACzC;oBACA,aAAa,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;iBACvC;qBAAM;oBACL,IAAI,aAAa,EAAE;wBACjB,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;qBAC5B;oBACD,aAAa,GAAG;wBACd,OAAO;wBACP,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;wBAC3B,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;qBACxB,CAAA;iBACF;aACF;YACD,IAAI,aAAa,EAAE;gBACjB,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;aAC5B;SACF;QAED,OAAO,OAAO,CAAA;IAChB,CAAC;IAED;;;;OAIG;IACH,aAAa,EAAC,gBAAgB,IAAS,CAAC;CACzC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-config",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "JBrowse 2 config utilities",
   "keywords": [
     "jbrowse",
@@ -39,8 +39,7 @@
   "dependencies": {
     "@babel/runtime": "^7.17.9",
     "@mui/icons-material": "^5.0.1",
-    "pluralize": "^8.0.0",
-    "react-color": "^2.19.3"
+    "pluralize": "^8.0.0"
   },
   "peerDependencies": {
     "@jbrowse/core": "^2.0.0",
@@ -60,5 +59,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "ed935bf5612af3818abdc8ef52d100d5d81d33a2"
+  "gitHead": "0db0462fa1f9f15ab4869da085bcab032b9483c3"
 }

package/src/ConfigurationEditorWidget/components/CallbackEditor.tsx

@@ -1,18 +1,13 @@
 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 {
-  FormControl,
-  FormHelperText,
-  InputLabel,
-  Tooltip,
-  IconButton,
-  TextField,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import HelpIcon from '@mui/icons-material/Help'
 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/
@@ -23,11 +18,21 @@ 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({
@@ -72,10 +77,8 @@ function CallbackEditor({
   // do this last
   return (
     <>
-      <FormControl>
-        <InputLabel shrink htmlFor="callback-editor">
-          {slot.name}
-        </InputLabel>
+      {error ? <p className={classes.error}>{`${error}`}</p> : null}
+      <div className={classes.callbackContainer}>
         <TextField
           multiline
           className={classes.callbackEditor}
@@ -88,38 +91,34 @@ function CallbackEditor({
             },
           }}
         />
-        {error ? (
-          <FormHelperText
-            style={{ color: '#f00' }}
-          >{`${error}`}</FormHelperText>
-        ) : null}
-        <FormHelperText>{slot.description}</FormHelperText>
-      </FormControl>
-      <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
-            }
-          }}
+
+        <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
         >
-          <HelpIcon />
-        </IconButton>
-      </Tooltip>
+          <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>
     </>
   )
 }

package/src/ConfigurationEditorWidget/components/ColorEditor.tsx

@@ -1,19 +1,8 @@
 import React, { lazy, useState } from 'react'
 import { observer } from 'mobx-react'
 import { TextField } from '@mui/material'
-import { Color, RGBColor } from 'react-color'
 
-const ColorPicker = lazy(() => import('./ColorPicker'))
-
-// this is needed because passing a entire color object into the react-color
-// for alpha, can't pass in an rgba string for example
-function serializeColor(color: Color) {
-  if (color instanceof Object) {
-    const { r, g, b, a } = color as RGBColor
-    return a === undefined ? `rgb(${r},${g},${b})` : `rgba(${r},${g},${b},${a})`
-  }
-  return color
-}
+const ColorPicker = lazy(() => import('@jbrowse/core/ui/ColorPicker'))
 
 export const ColorSlot = (props: {
   value: string
@@ -28,31 +17,20 @@ export const ColorSlot = (props: {
   const [displayed, setDisplayed] = useState(false)
 
   return (
-    <>
+    <div style={{ display: 'flex' }}>
       <TextField
         value={value}
         label={label}
-        InputProps={{
-          style: {
-            color: value,
-            borderRightWidth: '25px',
-            borderRightStyle: 'solid',
-            borderRightColor: value,
-          },
-        }}
         onClick={() => setDisplayed(!displayed)}
         onChange={event => onChange(event.target.value)}
         {...TextFieldProps}
       />
-      {displayed ? (
+      <div style={{ marginTop: 10 }}>
         <React.Suspense fallback={<div />}>
-          <ColorPicker
-            color={value}
-            onChange={event => onChange(serializeColor(event.rgb))}
-          />
+          <ColorPicker color={value} onChange={event => onChange(event)} />
         </React.Suspense>
-      ) : null}
-    </>
+      </div>
+    </div>
   )
 }
 

package/src/ConfigurationEditorWidget/components/ConfigurationEditor.tsx

@@ -40,6 +40,10 @@ const useStyles = makeStyles()(theme => ({
   accordion: {
     border: `1px solid ${theme.palette.text.primary}`,
   },
+  noOverflow: {
+    width: '100%',
+    overflowX: 'auto',
+  },
 }))
 
 const Member = observer(
@@ -92,7 +96,7 @@ const Member = observer(
           </AccordionSummary>
           <AccordionDetails className={classes.expansionPanelDetails}>
             {typeSelector}
-            <FormGroup>
+            <FormGroup className={classes.noOverflow}>
               <Schema schema={slot} path={[...path, slotName]} />
             </FormGroup>
           </AccordionDetails>

package/src/ConfigurationEditorWidget/components/JsonEditor.tsx

@@ -0,0 +1,84 @@
+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)