Add collapsible accordion sections in configuration editor

packages/core/BaseFeatureWidget/BaseFeatureDetail.tsx

@@ -8,14 +8,16 @@ import {
   Typography,
   Divider,
   Tooltip,
+  makeStyles,
 } from '@material-ui/core'
 import ExpandMore from '@material-ui/icons/ExpandMore'
-import { makeStyles } from '@material-ui/core/styles'
 import { DataGrid } from '@mui/x-data-grid'
 import { observer } from 'mobx-react'
 import clsx from 'clsx'
 import isObject from 'is-object'
 import { IAnyStateTreeNode } from 'mobx-state-tree'
+
+// locals
 import { getConf } from '../configuration'
 import { measureText, getSession } from '../util'
 import SanitizedHTML from '../ui/SanitizedHTML'

packages/core/ui/theme.test.ts

@@ -42,15 +42,15 @@ describe('theme utils', () => {
       overrides: { MuiPaper: muiPaperStyle },
     })
     expect(theme.overrides?.MuiPaper).toEqual(muiPaperStyle)
-    expect(Object.keys(theme.overrides || {}).length).toBe(9)
+    expect(Object.keys(theme.overrides || {}).length).toBe(10)
   })
   it('allows modifying a default override', () => {
     const muiButtonStyle = { textSecondary: { color: 'orange' } }
     const theme = createJBrowseTheme({
       overrides: { MuiButton: muiButtonStyle },
     })
     expect(theme.overrides?.MuiButton).toEqual(muiButtonStyle)
-    expect(Object.keys(theme.overrides || {}).length).toBe(8)
+    expect(Object.keys(theme.overrides || {}).length).toBe(9)
   })
   it('allows adding a custom prop', () => {
     const muiPaperProps = { variant: 'outlined' as 'outlined' }

packages/core/ui/theme.ts

@@ -143,6 +143,15 @@ export function createJBrowseDefaultOverrides(palette: PaletteOptions = {}) {
         color: generatedPalette.tertiary.main,
       },
     },
+    MuiAccordion: {
+      root: {
+        // avoid extra padding around accordion element
+        margin: 0,
+        '&$expanded': {
+          margin: 0,
+        },
+      },
+    },
     MuiAccordionSummary: {
       root: {
         // !important needed to combat the MuiButton being applied to

plugins/config/src/ConfigurationEditorWidget/components/CallbackEditor.js

@@ -47,7 +47,7 @@ function CallbackEditor({ slot }) {
         jexlDebouncedCode,
         getEnv(slot).pluginManager?.jexl,
       )
-      slot.set(jexlDebouncedCode) // slot.set `jexl:${debouncedCode}`
+      slot.set(jexlDebouncedCode)
       setCodeError(null)
     } catch (e) {
       console.error({ e })
@@ -66,9 +66,7 @@ function CallbackEditor({ slot }) {
         <Editor
           className={classes.callbackEditor}
           value={code.startsWith('jexl:') ? code.split('jexl:')[1] : code}
-          onValueChange={newCode => {
-            setCode(newCode)
-          }}
+          onValueChange={newCode => setCode(newCode)}
           highlight={newCode => newCode}
           padding={10}
           style={{ background: error ? '#fdd' : undefined }}

plugins/config/src/ConfigurationEditorWidget/components/ConfigurationEditor.js

@@ -1,49 +1,62 @@
+import React from 'react'
 import {
   readConfObject,
   getTypeNamesFromExplicitlyTypedUnion,
   isConfigurationSchemaType,
   isConfigurationSlotType,
 } from '@jbrowse/core/configuration'
-
-import { iterMap } from '@jbrowse/core/util'
-import FormGroup from '@material-ui/core/FormGroup'
-import FormLabel from '@material-ui/core/FormLabel'
-import { makeStyles } from '@material-ui/core/styles'
+import {
+  FormGroup,
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Typography,
+  makeStyles,
+} from '@material-ui/core'
 import { observer } from 'mobx-react'
 import { getMembers } from 'mobx-state-tree'
 import { singular } from 'pluralize'
-import React from 'react'
+
+// icons
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
+
+// locals
 import SlotEditor from './SlotEditor'
 import TypeSelector from './TypeSelector'
 
 const useStyles = makeStyles(theme => ({
-  subSchemaContainer: {
-    marginLeft: theme.spacing(1),
-    borderLeft: `1px solid ${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',
+  },
+  expansionPanelDetails: {
+    display: 'block',
+    padding: theme.spacing(1),
+  },
+
+  accordion: {
+    border: `1px solid ${theme.palette.text.primary}`,
   },
 }))
 
 const Member = observer(props => {
   const classes = useStyles()
-  const { slotName, slotSchema, schema, slot = schema[slotName] } = props
+  const {
+    slotName,
+    slotSchema,
+    schema,
+    slot = schema[slotName],
+    path = [],
+  } = props
   let typeSelector
   if (isConfigurationSchemaType(slotSchema)) {
     if (slot.length) {
-      return (
-        <>
-          {slot.map((subslot, slotIndex) => {
-            const key = `${singular(slotName)} ${slotIndex + 1}`
-            return <Member {...props} key={key} slot={subslot} slotName={key} />
-          })}
-        </>
-      )
+      return slot.map((subslot, slotIndex) => {
+        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
@@ -63,15 +76,23 @@ const Member = observer(props => {
       )
     }
     return (
-      <>
-        <FormLabel>{slotName}</FormLabel>
-        <div className={classes.subSchemaContainer}>
+      <Accordion
+        defaultExpanded
+        className={classes.accordion}
+        TransitionProps={{ unmountOnExit: true, timeout: 150 }}
+      >
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+        >
+          <Typography>{[...path, slotName].join('🡒')}</Typography>
+        </AccordionSummary>
+        <AccordionDetails className={classes.expansionPanelDetails}>
           {typeSelector}
           <FormGroup>
-            <Schema schema={slot} />
+            <Schema schema={slot} path={[...path, slotName]} />
           </FormGroup>
-        </div>
-      </>
+        </AccordionDetails>
+      </Accordion>
     )
   }
 
@@ -83,13 +104,17 @@ const Member = observer(props => {
   return null
 })
 
-const Schema = observer(({ schema }) => {
-  return iterMap(
-    Object.entries(getMembers(schema).properties),
-    ([slotName, slotSchema]) => (
-      <Member key={slotName} {...{ slotName, slotSchema, schema }} />
-    ),
-  )
+const Schema = observer(({ schema, path = [] }) => {
+  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 }) => {
@@ -98,10 +123,26 @@ const ConfigurationEditor = observer(({ model }) => {
   // for different tracks since only the backing model changes for example
   // see pr #804
   const key = model.target && readConfObject(model.target, 'trackId')
+  const name = model.target && readConfObject(model.target, 'name')
   return (
-    <div className={classes.root} key={key} data-testid="configEditor">
-      {!model.target ? 'no target set' : <Schema schema={model.target} />}
-    </div>
+    <Accordion
+      key={key}
+      defaultExpanded
+      className={classes.accordion}
+      TransitionProps={{ unmountOnExit: true, timeout: 150 }}
+    >
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+      >
+        <Typography>{name ? name : 'Configuration'}</Typography>
+      </AccordionSummary>
+      <AccordionDetails
+        className={classes.expansionPanelDetails}
+        data-testid="configEditor"
+      >
+        {!model.target ? 'no target set' : <Schema schema={model.target} />}
+      </AccordionDetails>
+    </Accordion>
   )
 })
 

plugins/config/src/ConfigurationEditorWidget/components/SlotEditor.js

@@ -370,12 +370,9 @@ export const useSlotEditorStyles = makeStyles(theme => ({
     display: 'flex',
     marginBottom: theme.spacing(2),
     position: 'relative',
-    overflow: 'visible',
   },
   paperContent: {
-    flex: 'auto',
-    padding: theme.spacing(1),
-    overflow: 'auto',
+    width: '100%',
   },
   slotModeSwitch: {
     width: 24,