@jbrowse/plugin-config 1.6.4 → 1.6.7

package/dist/plugin-config.esm.js

@@ -11,17 +11,15 @@ import SimpleFeature from '@jbrowse/core/util/simpleFeature';
 import { ObservableCreate } from '@jbrowse/core/util/rxjs';
 import { toArray } from 'rxjs/operators';
 import { openLocation } from '@jbrowse/core/util/io';
-import { useDebounce, iterMap } from '@jbrowse/core/util';
-import { FormControl, InputLabel, FormHelperText, makeStyles, useTheme, Tooltip, IconButton, Paper, TextField as TextField$1, SvgIcon, List, ListItem, InputAdornment, Card, CardHeader, CardContent, FormControlLabel, Checkbox, MenuItem } from '@material-ui/core';
+import { useDebounce } from '@jbrowse/core/util';
+import { FormControl, InputLabel, FormHelperText, makeStyles, useTheme, Tooltip, IconButton, Paper, TextField as TextField$1, SvgIcon, List, ListItem, InputAdornment, Card, CardHeader, CardContent, FormControlLabel, Checkbox, MenuItem, Accordion, AccordionSummary, Typography, AccordionDetails, FormGroup } from '@material-ui/core';
 import Editor from 'react-simple-code-editor';
 import { Light } from 'react-syntax-highlighter';
 import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json';
 import a11yDark from 'react-syntax-highlighter/dist/cjs/styles/hljs/a11y-dark';
 import a11yLight from 'react-syntax-highlighter/dist/cjs/styles/hljs/a11y-light';
-import FormGroup from '@material-ui/core/FormGroup';
-import FormLabel from '@material-ui/core/FormLabel';
-import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
 import { singular } from 'pluralize';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { FileSelector } from '@jbrowse/core/ui';
 import { getSubType, getUnionSubTypes, getPropertyType } from '@jbrowse/core/util/mst-reflection';
 import DeleteIcon from '@material-ui/icons/Delete';
@@ -33,6 +31,7 @@ import ReactPropTypes from 'prop-types';
 import TextField from '@material-ui/core/TextField';
 import MenuItem$1 from '@material-ui/core/MenuItem';
 import Paper$1 from '@material-ui/core/Paper';
+import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
 import { ChromePicker } from 'react-color';
 
 function ownKeys(object, enumerableOnly) {
@@ -273,10 +272,6 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
-function _toArray(arr) {
-  return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
-}
-
 function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
@@ -1657,7 +1652,7 @@ var RefNameAliasAdapter = /*#__PURE__*/function (_BaseAdapter) {
     key: "getRefNameAliases",
     value: function () {
       var _getRefNameAliases = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-        var loc, results;
+        var loc, results, refColumn;
         return runtime_1.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
@@ -1677,13 +1672,15 @@ var RefNameAliasAdapter = /*#__PURE__*/function (_BaseAdapter) {
 
               case 5:
                 results = _context.sent;
+                refColumn = readConfObject(this.config, 'refNameColumn');
                 return _context.abrupt("return", results.trim().split('\n').filter(function (f) {
                   return !!f && !f.startsWith('#');
                 }).map(function (row) {
-                  var _row$split = row.split('\t'),
-                      _row$split2 = _toArray(_row$split),
-                      refName = _row$split2[0],
-                      aliases = _row$split2.slice(1);
+                  var aliases = row.split('\t');
+
+                  var _aliases$splice = aliases.splice(refColumn, 1),
+                      _aliases$splice2 = _slicedToArray(_aliases$splice, 1),
+                      refName = _aliases$splice2[0];
 
                   return {
                     refName: refName,
@@ -1691,7 +1688,7 @@ var RefNameAliasAdapter = /*#__PURE__*/function (_BaseAdapter) {
                   };
                 }));
 
-              case 7:
+              case 8:
               case "end":
                 return _context.stop();
             }
@@ -1738,6 +1735,10 @@ var refNameAliasAdapterConfigSchema = /*#__PURE__*/ConfigurationSchema('RefNameA
       uri: '/path/to/my/aliases.txt',
       locationType: 'UriLocation'
     }
+  },
+  refNameColumn: {
+    type: 'number',
+    defaultValue: 0
   }
 }, {
   explicitlyTyped: true
@@ -1975,10 +1976,12 @@ function CallbackEditor(_ref) {
 
       var jexlDebouncedCode = debouncedCode.startsWith('jexl:') ? debouncedCode : "jexl:".concat(debouncedCode);
       stringToJexlExpression(jexlDebouncedCode, (_getEnv$pluginManager = getEnv(slot).pluginManager) === null || _getEnv$pluginManager === void 0 ? void 0 : _getEnv$pluginManager.jexl);
-      slot.set(jexlDebouncedCode); // slot.set `jexl:${debouncedCode}`
-
+      slot.set(jexlDebouncedCode);
       setCodeError(null);
     } catch (e) {
+      console.error({
+        e: e
+      });
       setCodeError(e);
     }
   }, [debouncedCode, slot]); // if default value is a callback, will have to remove jexl:
@@ -1991,7 +1994,7 @@ function CallbackEditor(_ref) {
     className: classes.callbackEditor,
     value: code.startsWith('jexl:') ? code.split('jexl:')[1] : code,
     onValueChange: function onValueChange(newCode) {
-      setCode(newCode);
+      return setCode(newCode);
     },
     highlight: function highlight(newCode) {
       return newCode;
@@ -2000,7 +2003,11 @@ function CallbackEditor(_ref) {
     style: {
       background: error ? '#fdd' : undefined
     }
-  }), /*#__PURE__*/React.createElement(FormHelperText, null, slot.description)), /*#__PURE__*/React.createElement(Tooltip, {
+  }), error ? /*#__PURE__*/React.createElement(FormHelperText, {
+    style: {
+      color: '#f00'
+    }
+  }, "".concat(error)) : null, /*#__PURE__*/React.createElement(FormHelperText, null, slot.description)), /*#__PURE__*/React.createElement(Tooltip, {
     title: /*#__PURE__*/React.createElement("div", null, "Callbacks are written in Jexl format. Click to learn more.", /*#__PURE__*/React.createElement("br", null), " Names of available context items: ", slot.contextVariable),
     arrow: true
   }, /*#__PURE__*/React.createElement(IconButton, {
@@ -2455,13 +2462,10 @@ var useSlotEditorStyles = /*#__PURE__*/makeStyles(function (theme) {
     paper: {
       display: 'flex',
       marginBottom: theme.spacing(2),
-      position: 'relative',
-      overflow: 'visible'
+      position: 'relative'
     },
     paperContent: {
-      flex: 'auto',
-      padding: theme.spacing(1),
-      overflow: 'auto'
+      width: '100%'
     },
     slotModeSwitch: {
       width: 24,
@@ -2533,18 +2537,20 @@ var TypeSelector = /*#__PURE__*/observer(function (_ref) {
   }))));
 });
 
-var useStyles$3 = /*#__PURE__*/makeStyles$1(function (theme) {
+var useStyles$3 = /*#__PURE__*/makeStyles(function (theme) {
   return {
-    subSchemaContainer: {
-      marginLeft: theme.spacing(1),
-      borderLeft: "1px solid ".concat(theme.palette.secondary.main),
-      paddingLeft: theme.spacing(1),
-      marginBottom: theme.spacing(1)
+    expandIcon: {
+      color: '#fff'
     },
     root: {
-      padding: theme.spacing(1, 3, 1, 1),
-      background: theme.palette.background["default"],
-      overflowX: 'hidden'
+      padding: theme.spacing(1, 3, 1, 1)
+    },
+    expansionPanelDetails: {
+      display: 'block',
+      padding: theme.spacing(1)
+    },
+    accordion: {
+      border: "1px solid ".concat(theme.palette.text.primary)
     }
   };
 });
@@ -2554,19 +2560,21 @@ var Member = /*#__PURE__*/observer(function (props) {
       slotSchema = props.slotSchema,
       schema = props.schema,
       _props$slot = props.slot,
-      slot = _props$slot === void 0 ? schema[slotName] : _props$slot;
+      slot = _props$slot === void 0 ? schema[slotName] : _props$slot,
+      _props$path = props.path,
+      path = _props$path === void 0 ? [] : _props$path;
   var typeSelector;
 
   if (isConfigurationSchemaType(slotSchema)) {
     if (slot.length) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, slot.map(function (subslot, slotIndex) {
+      return slot.map(function (subslot, slotIndex) {
         var key = "".concat(singular(slotName), " ").concat(slotIndex + 1);
         return /*#__PURE__*/React.createElement(Member, _extends({}, 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
 
@@ -2588,10 +2596,22 @@ var Member = /*#__PURE__*/observer(function (props) {
       });
     }
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormLabel, null, slotName), /*#__PURE__*/React.createElement("div", {
-      className: classes.subSchemaContainer
+    return /*#__PURE__*/React.createElement(Accordion, {
+      defaultExpanded: true,
+      className: classes.accordion,
+      TransitionProps: {
+        unmountOnExit: true,
+        timeout: 150
+      }
+    }, /*#__PURE__*/React.createElement(AccordionSummary, {
+      expandIcon: /*#__PURE__*/React.createElement(ExpandMoreIcon, {
+        className: classes.expandIcon
+      })
+    }, /*#__PURE__*/React.createElement(Typography, null, [].concat(_toConsumableArray(path), [slotName]).join('🡒'))), /*#__PURE__*/React.createElement(AccordionDetails, {
+      className: classes.expansionPanelDetails
     }, typeSelector, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Schema, {
-      schema: slot
+      schema: slot,
+      path: [].concat(_toConsumableArray(path), [slotName])
     }))));
   }
 
@@ -2607,8 +2627,11 @@ var Member = /*#__PURE__*/observer(function (props) {
   return null;
 });
 var Schema = /*#__PURE__*/observer(function (_ref) {
-  var schema = _ref.schema;
-  return iterMap(Object.entries(getMembers(schema).properties), function (_ref2) {
+  var schema = _ref.schema,
+      _ref$path = _ref.path,
+      path = _ref$path === void 0 ? [] : _ref$path;
+  var properties = getMembers(schema).properties;
+  return Object.entries(properties).map(function (_ref2) {
     var _ref3 = _slicedToArray(_ref2, 2),
         slotName = _ref3[0],
         slotSchema = _ref3[1];
@@ -2617,6 +2640,7 @@ var Schema = /*#__PURE__*/observer(function (_ref) {
       key: slotName,
       slotName: slotName,
       slotSchema: slotSchema,
+      path: path,
       schema: schema
     });
   });
@@ -2628,13 +2652,25 @@ var ConfigurationEditor = /*#__PURE__*/observer(function (_ref4) {
   // see pr #804
 
   var key = model.target && readConfObject(model.target, 'trackId');
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.root,
+  var name = model.target && readConfObject(model.target, 'name');
+  return /*#__PURE__*/React.createElement(Accordion, {
     key: key,
+    defaultExpanded: true,
+    className: classes.accordion,
+    TransitionProps: {
+      unmountOnExit: true,
+      timeout: 150
+    }
+  }, /*#__PURE__*/React.createElement(AccordionSummary, {
+    expandIcon: /*#__PURE__*/React.createElement(ExpandMoreIcon, {
+      className: classes.expandIcon
+    })
+  }, /*#__PURE__*/React.createElement(Typography, null, name ? name : 'Configuration')), /*#__PURE__*/React.createElement(AccordionDetails, {
+    className: classes.expansionPanelDetails,
     "data-testid": "configEditor"
   }, !model.target ? 'no target set' : /*#__PURE__*/React.createElement(Schema, {
     schema: model.target
-  }));
+  })));
 });
 
 var ConfigurationEditor$1 = {