Skip to content

Commit

Permalink
Add slot.type to configuration editor elements (#4455)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmdcolin
cmdcolin committed Jun 18, 2024
1 parent c5d6cf6 commit f541a28
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 124 deletions.
156 changes: 77 additions & 79 deletions plugins/config/src/ConfigurationEditorWidget/components/ConfigurationEditor.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,88 +8,86 @@ import SVG from '@jbrowse/plugin-svg'
import { linearBasicDisplayConfigSchemaFactory } from '@jbrowse/plugin-linear-genome-view'
import ConfigurationEditor from './ConfigurationEditor'

describe('ConfigurationEditor widget', () => {
it('renders with just the required model elements', () => {
const TestSchema = ConfigurationSchema('TestThing', {
foo: {
type: 'string',
defaultValue: 'bar',
},
})

const { container } = render(
<ConfigurationEditor model={{ target: TestSchema.create() }} />,
)
expect(container).toMatchSnapshot()
test('renders with just the required model elements', () => {
const TestSchema = ConfigurationSchema('TestThing', {
foo: {
type: 'string',
defaultValue: 'bar',
},
})

it('renders all the different types of built-in slots', () => {
const TestSchema = ConfigurationSchema('TestThing', {
stringTest: {
name: 'stringTest',
description: 'stringTest',
type: 'string',
defaultValue: 'string1',
},
fileLocationTest: {
name: 'fileLocationTest',
description: 'fileLocationTest',
type: 'fileLocation',
defaultValue: { uri: '/path/to/my.file', locationType: 'UriLocation' },
},
stringArrayTest: {
name: 'stringArrayTest',
description: 'stringArrayTest',
type: 'stringArray',
defaultValue: ['string1', 'string2'],
},
stringArrayMapTest: {
name: 'stringArrayMapTest',
description: 'stringArrayMapTest',
type: 'stringArrayMap',
defaultValue: { key1: ['string1', 'string2'] },
},
numberTest: {
name: 'numberTest',
description: 'numberTest',
type: 'number',
defaultValue: 88.5,
},
integerTest: {
name: 'integerTest',
description: 'integerTest',
type: 'integer',
defaultValue: 42,
},
colorTest: {
name: 'colorTest',
description: 'colorTest',
type: 'color',
defaultValue: '#396494',
},
booleanTest: {
name: 'booleanTest',
description: 'booleanTest',
type: 'boolean',
defaultValue: true,
},
})
const { container } = render(
<ConfigurationEditor model={{ target: TestSchema.create() }} />,
)
expect(container).toMatchSnapshot()
})

const { container } = render(
<ConfigurationEditor model={{ target: TestSchema.create() }} />,
)
expect(container).toMatchSnapshot()
test('renders all the different types of built-in slots', () => {
const TestSchema = ConfigurationSchema('TestThing', {
stringTest: {
name: 'stringTest',
description: 'stringTest',
type: 'string',
defaultValue: 'string1',
},
fileLocationTest: {
name: 'fileLocationTest',
description: 'fileLocationTest',
type: 'fileLocation',
defaultValue: { uri: '/path/to/my.file', locationType: 'UriLocation' },
},
stringArrayTest: {
name: 'stringArrayTest',
description: 'stringArrayTest',
type: 'stringArray',
defaultValue: ['string1', 'string2'],
},
stringArrayMapTest: {
name: 'stringArrayMapTest',
description: 'stringArrayMapTest',
type: 'stringArrayMap',
defaultValue: { key1: ['string1', 'string2'] },
},
numberTest: {
name: 'numberTest',
description: 'numberTest',
type: 'number',
defaultValue: 88.5,
},
integerTest: {
name: 'integerTest',
description: 'integerTest',
type: 'integer',
defaultValue: 42,
},
colorTest: {
name: 'colorTest',
description: 'colorTest',
type: 'color',
defaultValue: '#396494',
},
booleanTest: {
name: 'booleanTest',
description: 'booleanTest',
type: 'boolean',
defaultValue: true,
},
})

it('renders with defaults of the PileupTrack schema', () => {
const pluginManager = new PluginManager([new Alignments(), new SVG()])
pluginManager.createPluggableElements()
pluginManager.configure()
const PileupDisplaySchema =
linearBasicDisplayConfigSchemaFactory(pluginManager)
const { container } = render(
<ConfigurationEditor model={{ target: PileupDisplaySchema.create() }} />,
)
expect(container).toMatchSnapshot()
})
const { container } = render(
<ConfigurationEditor model={{ target: TestSchema.create() }} />,
)
expect(container).toMatchSnapshot()
})

test('renders with defaults of the PileupTrack schema', () => {
const pluginManager = new PluginManager([new Alignments(), new SVG()])
pluginManager.createPluggableElements()
pluginManager.configure()
const PileupDisplaySchema =
linearBasicDisplayConfigSchemaFactory(pluginManager)
const { container } = render(
<ConfigurationEditor model={{ target: PileupDisplaySchema.create() }} />,
)
expect(container).toMatchSnapshot()
})
74 changes: 36 additions & 38 deletions plugins/config/src/ConfigurationEditorWidget/components/ConfigurationEditor.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
import React from 'react'
import {
readConfObject,
getTypeNamesFromExplicitlyTypedUnion,
isConfigurationSchemaType,
isConfigurationSlotType,
AnyConfigurationModel,
} from '@jbrowse/core/configuration'

import {
FormGroup,
Accordion,
Expand All @@ -18,21 +12,28 @@ import { observer } from 'mobx-react'
import { getMembers, IAnyType } from 'mobx-state-tree'
import { singular } from 'pluralize'

// jbrowse
import { AbstractSessionModel } from '@jbrowse/core/util'
import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML'
import {
readConfObject,
getTypeNamesFromExplicitlyTypedUnion,
isConfigurationSchemaType,
isConfigurationSlotType,
AnyConfigurationModel,
} from '@jbrowse/core/configuration'

// icons
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'

// locals
import SlotEditor from './SlotEditor'
import TypeSelector from './TypeSelector'
import { AbstractSessionModel } from '@jbrowse/core/util'

const useStyles = makeStyles()(theme => ({
expandIcon: {
icon: {
color: theme.palette.tertiary?.contrastText || '#fff',
},
root: {
padding: theme.spacing(1, 3, 1, 1),
},
expansionPanelDetails: {
display: 'block',
padding: theme.spacing(1),
Expand Down Expand Up @@ -61,54 +62,49 @@ const Member = observer(function (props: {
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}`
const key = subslot.type
? `${singular(slotName)} ${subslot.type}`
: `${singular(slotName)} ${slotIndex + 1}`
return <Member key={key} {...props} 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} />}
expandIcon={<ExpandMoreIcon className={classes.icon} />}
>
<Typography>{[...path, slotName].join('➔')}</Typography>
</AccordionSummary>
<AccordionDetails className={classes.expansionPanelDetails}>
{typeSelector}
{typeNameChoices.length ? (
<TypeSelector
typeNameChoices={typeNameChoices}
slotName={slotName}
slot={slot}
onChange={evt => {
if (evt.target.value !== slot.type) {
schema.setSubschema(slotName, { type: evt.target.value })
}
}}
/>
) : null}
<FormGroup className={classes.noOverflow}>
<Schema schema={slot} path={[...path, slotName]} />
</FormGroup>
</AccordionDetails>
</Accordion>
)
}

if (isConfigurationSlotType(slotSchema)) {
// this is a regular config slot
} else if (isConfigurationSlotType(slotSchema)) {
return <SlotEditor key={slotName} slot={slot} slotSchema={slotSchema} />
} else {
return null
}

return null
})

const Schema = observer(function ({
Expand Down Expand Up @@ -150,9 +146,11 @@ const ConfigurationEditor = observer(function ({
return (
<Accordion key={key} defaultExpanded className={classes.accordion}>
<AccordionSummary
expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
expandIcon={<ExpandMoreIcon className={classes.icon} />}
>
<Typography>{name ?? 'Configuration'}</Typography>
<Typography>
<SanitizedHTML html={name ?? 'Configuration'} />
</Typography>
</AccordionSummary>
<AccordionDetails
className={classes.expansionPanelDetails}
Expand Down
14 changes: 7 additions & 7 deletions .../src/ConfigurationEditorWidget/components/__snapshots__/ConfigurationEditor.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ConfigurationEditor widget renders all the different types of built-in slots 1`] = `
exports[`renders all the different types of built-in slots 1`] = `
<div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded Mui-expanded MuiAccordion-gutters css-cczqch-MuiPaper-root-MuiAccordion-root-accordion"
Expand All @@ -25,7 +25,7 @@ exports[`ConfigurationEditor widget renders all the different types of built-in
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ymsoo8-MuiSvgIcon-root-expandIcon"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nfyztd-MuiSvgIcon-root-icon"
data-testid="ExpandMoreIcon"
focusable="false"
viewBox="0 0 24 24"
Expand Down Expand Up @@ -862,7 +862,7 @@ exports[`ConfigurationEditor widget renders all the different types of built-in
</div>
`;

exports[`ConfigurationEditor widget renders with defaults of the PileupTrack schema 1`] = `
exports[`renders with defaults of the PileupTrack schema 1`] = `
<div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded Mui-expanded MuiAccordion-gutters css-cczqch-MuiPaper-root-MuiAccordion-root-accordion"
Expand All @@ -887,7 +887,7 @@ exports[`ConfigurationEditor widget renders with defaults of the PileupTrack sch
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ymsoo8-MuiSvgIcon-root-expandIcon"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nfyztd-MuiSvgIcon-root-icon"
data-testid="ExpandMoreIcon"
focusable="false"
viewBox="0 0 24 24"
Expand Down Expand Up @@ -1237,7 +1237,7 @@ exports[`ConfigurationEditor widget renders with defaults of the PileupTrack sch
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ymsoo8-MuiSvgIcon-root-expandIcon"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nfyztd-MuiSvgIcon-root-icon"
data-testid="ExpandMoreIcon"
focusable="false"
viewBox="0 0 24 24"
Expand Down Expand Up @@ -2005,7 +2005,7 @@ exports[`ConfigurationEditor widget renders with defaults of the PileupTrack sch
</div>
`;

exports[`ConfigurationEditor widget renders with just the required model elements 1`] = `
exports[`renders with just the required model elements 1`] = `
<div>
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiAccordion-root MuiAccordion-rounded Mui-expanded MuiAccordion-gutters css-cczqch-MuiPaper-root-MuiAccordion-root-accordion"
Expand All @@ -2030,7 +2030,7 @@ exports[`ConfigurationEditor widget renders with just the required model element
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-ymsoo8-MuiSvgIcon-root-expandIcon"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nfyztd-MuiSvgIcon-root-icon"
data-testid="ExpandMoreIcon"
focusable="false"
viewBox="0 0 24 24"
Expand Down

0 comments on commit f541a28

Please sign in to comment.