@jbrowse/plugin-linear-genome-view 1.6.4 → 1.6.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "1.6.4",
+  "version": "1.6.7",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7f157fbb2302d8825f99d01bcc0fd0616116c5d2"
+  "gitHead": "02012ec299c36647f755316571775d36b0fee5ec"
 }

package/src/BaseLinearDisplay/components/BaseLinearDisplay.tsx

@@ -31,7 +31,7 @@ const useStyles = makeStyles(theme => ({
     color: theme.palette.common.white,
     fontFamily: theme.typography.fontFamily,
     padding: '4px 8px',
-    fontSize: theme.typography.pxToRem(10),
+    fontSize: theme.typography.pxToRem(12),
     lineHeight: `${round(14 / 10)}em`,
     maxWidth: 300,
     wordWrap: 'break-word',
@@ -96,9 +96,7 @@ const Tooltip = observer(
           {...attributes.popper}
         >
           <TooltipContents
-            ref={(elt: HTMLDivElement) =>
-              setWidth(elt?.getBoundingClientRect().width || 0)
-            }
+            ref={elt => setWidth(elt?.getBoundingClientRect().width || 0)}
             message={contents}
           />
         </div>

package/src/BaseLinearDisplay/components/LinearBlocks.tsx

@@ -1,7 +1,7 @@
+import React from 'react'
 import { makeStyles } from '@material-ui/core/styles'
 import { getContainingView } from '@jbrowse/core/util'
-import { observer, PropTypes } from 'mobx-react'
-import React from 'react'
+import { observer } from 'mobx-react'
 import {
   ContentBlock,
   ElidedBlock,
@@ -14,6 +14,7 @@ import {
   ElidedBlock as ElidedBlockComponent,
   InterRegionPaddingBlock as InterRegionPaddingBlockComponent,
 } from './Block'
+import { LinearGenomeViewModel } from '../../LinearGenomeView'
 
 const useStyles = makeStyles({
   linearBlocks: {
@@ -96,8 +97,7 @@ const RenderedBlocks = observer(
 function LinearBlocks({ model }: { model: BaseLinearDisplayModel }) {
   const classes = useStyles()
   const { blockDefinitions } = model
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const viewModel = getContainingView(model) as any
+  const viewModel = getContainingView(model) as LinearGenomeViewModel
   return (
     <div
       data-testid="Blockset"
@@ -111,9 +111,5 @@ function LinearBlocks({ model }: { model: BaseLinearDisplayModel }) {
   )
 }
 
-LinearBlocks.propTypes = {
-  model: PropTypes.observableObject.isRequired,
-}
-
 export { RenderedBlocks, useStyles }
 export default observer(LinearBlocks)

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -387,7 +387,10 @@ export const BaseLinearDisplay = types
         self.setError()
         const aborter = new AbortController()
         const view = getContainingView(self) as LGV
-        if (!view.initialized) {
+
+        // extra check for contentBlocks.length
+        // https://github.com/GMOD/jbrowse-components/issues/2694
+        if (!view.initialized || !view.staticBlocks.contentBlocks.length) {
           return
         }
 
@@ -411,7 +414,7 @@ export const BaseLinearDisplay = types
       afterAttach() {
         // this autorun performs stats estimation
         //
-        // the chain of events calls estimateRegionStats against the data
+        // the chain of events calls estimateRegionsStats against the data
         // adapter which by default uses featureDensity, but can also respond
         // with a byte size estimate and fetch size limit (data adapter can
         // define what is too much data)
@@ -423,7 +426,12 @@ export const BaseLinearDisplay = types
                 const aborter = new AbortController()
                 const view = getContainingView(self) as LGV
 
-                if (!view.initialized) {
+                // extra check for contentBlocks.length
+                // https://github.com/GMOD/jbrowse-components/issues/2694
+                if (
+                  !view.initialized ||
+                  !view.staticBlocks.contentBlocks.length
+                ) {
                   return
                 }
 

package/src/LinearBasicDisplay/model.ts

@@ -139,7 +139,7 @@ const stateModelFactory = (configSchema: AnyConfigurationSchemaType) =>
             {
               label: 'Set max height',
               onClick: () => {
-                getSession(self).queueDialog((doneCallback: Function) => [
+                getSession(self).queueDialog(doneCallback => [
                   SetMaxHeightDlg,
                   { model: self, handleClose: doneCallback },
                 ])

package/src/LinearGenomeView/components/HelpDialog.tsx

@@ -53,7 +53,9 @@ export default function HelpDialog({
           <li>
             Jump to a specific region by typing the region into the location box
             as: <code>ref:start..end</code> or <code>ref:start-end</code>.
-            Commas are allowed in the start and end coordinates.
+            Commas are allowed in the start and end coordinates. A
+            space-separated list of locstrings can be used to open up multiple
+            chromosomes at a time
           </li>
         </ul>
         <h3>Example Searches</h3>
@@ -68,6 +70,17 @@ export default function HelpDialog({
             <code>chr4:79,500,000..80,000,000</code> - jumps the region on
             chromosome 4 between 79.5Mb and 80Mb.
           </li>
+          <li>
+            <code>chr1:1-100 chr2:1-100</code> - create a split view of
+            chr1:1-100 and chr2:1-100
+          </li>
+          <li>
+            <code>chr1 chr2 chr3</code> - open up multiple chromosomes at once
+          </li>
+          <li>
+            <code>chr1:1-100[rev] chr2:1-100</code> - open up the first region
+            in the horizontally flipped orientation
+          </li>
         </ul>
       </DialogContent>
       <Divider />

package/src/LinearGenomeView/components/LinearGenomeViewSvg.tsx

@@ -3,7 +3,7 @@ import { renderToStaticMarkup } from 'react-dom/server'
 import { when } from 'mobx'
 import { getParent } from 'mobx-state-tree'
 import { getConf, readConfObject } from '@jbrowse/core/configuration'
-import { getSession } from '@jbrowse/core/util'
+import { getSession, getBpDisplayStr } from '@jbrowse/core/util'
 import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema'
 import Base1DView from '@jbrowse/core/util/Base1DViewModel'
 
@@ -18,18 +18,6 @@ import { Polygon, Cytobands } from './OverviewScaleBar'
 
 type LGV = LinearGenomeViewModel
 
-function getBpDisplayStr(totalBp: number) {
-  let displayBp
-  if (Math.floor(totalBp / 1000000) > 0) {
-    displayBp = `${parseFloat((totalBp / 1000000).toPrecision(3))}Mbp`
-  } else if (Math.floor(totalBp / 1000) > 0) {
-    displayBp = `${parseFloat((totalBp / 1000).toPrecision(3))}Kbp`
-  } else {
-    displayBp = `${Math.floor(totalBp)}bp`
-  }
-  return displayBp
-}
-
 function ScaleBar({ model, fontSize }: { model: LGV; fontSize: number }) {
   const {
     offsetPx,

package/src/LinearGenomeView/components/OverviewScaleBar.tsx

@@ -181,7 +181,7 @@ const Cytobands = observer(
     assembly?: Assembly
     block: ContentBlock
   }) => {
-    const { offsetPx } = block
+    const { offsetPx, reversed } = block
     const cytobands = assembly?.cytobands
       ?.map(f => ({
         refName: assembly.getCanonicalRefName(f.get('refName')),
@@ -205,6 +205,10 @@ const Cytobands = observer(
         ]
       })
 
+    const arr = cytobands || []
+    const lcap = reversed ? arr.length - 1 : 0
+    const rcap = reversed ? 0 : arr.length - 1
+
     let firstCent = true
     return cytobands ? (
       <g transform={`translate(-${offsetPx})`}>
@@ -238,7 +242,7 @@ const Cytobands = observer(
             )
           }
 
-          if (index === 0) {
+          if (lcap === index) {
             return (
               <path
                 key={key}
@@ -252,7 +256,7 @@ const Cytobands = observer(
                 fill={colorMap[type]}
               />
             )
-          } else if (index === cytobands.length - 1) {
+          } else if (rcap === index) {
             return (
               <path
                 key={key}

package/src/LinearGenomeView/components/TrackContainer.tsx

@@ -4,7 +4,7 @@ import { isAlive } from 'mobx-state-tree'
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
 import { getConf } from '@jbrowse/core/configuration'
 import { ResizeHandle } from '@jbrowse/core/ui'
-import { useDebouncedCallback, getContainingView } from '@jbrowse/core/util'
+import { useDebouncedCallback } from '@jbrowse/core/util'
 import clsx from 'clsx'
 import Paper from '@material-ui/core/Paper'
 import { makeStyles } from '@material-ui/core/styles'
@@ -13,7 +13,9 @@ import { LinearGenomeViewModel, RESIZE_HANDLE_HEIGHT } from '..'
 import TrackLabel from './TrackLabel'
 
 const useStyles = makeStyles(theme => ({
-  root: {},
+  root: {
+    margin: 2,
+  },
   resizeHandle: {
     height: RESIZE_HANDLE_HEIGHT,
     boxSizing: 'border-box',
@@ -29,16 +31,8 @@ const useStyles = makeStyles(theme => ({
     zIndex: 3,
     borderRadius: theme.shape.borderRadius,
   },
-  renderingComponentContainer: {
-    position: 'absolute',
-    // -1 offset because of the 1px border of the Paper
-    left: -1,
-    height: '100%',
-    width: '100%',
-  },
   trackLabel: {
     zIndex: 3,
-    margin: theme.spacing(1),
   },
   trackLabelInline: {
     position: 'relative',
@@ -60,16 +54,37 @@ const useStyles = makeStyles(theme => ({
 
 type LGV = LinearGenomeViewModel
 
-function TrackContainer(props: {
+function TrackContainerLabel({
+  model,
+  view,
+}: {
+  model: BaseTrackModel
+  view: LGV
+}) {
+  const classes = useStyles()
+  const labelStyle =
+    view.trackLabels === 'overlapping'
+      ? classes.trackLabelOverlap
+      : classes.trackLabelInline
+  return view.trackLabels !== 'hidden' ? (
+    <TrackLabel
+      track={model}
+      className={clsx(classes.trackLabel, labelStyle)}
+    />
+  ) : null
+}
+
+function TrackContainer({
+  model,
+  track,
+}: {
   model: LinearGenomeViewModel
   track: BaseTrackModel
 }) {
   const classes = useStyles()
-  const { model, track } = props
   const display = track.displays[0]
   const { horizontalScroll, draggingTrackId, moveTrack } = model
   const { height } = display
-  const view = getContainingView(display) as LGV
   const trackId = getConf(track, 'trackId')
   const ref = useRef(null)
 
@@ -95,21 +110,9 @@ function TrackContainer(props: {
   const dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id
 
   return (
-    <div className={classes.root}>
-      {view.trackLabels !== 'hidden' ? (
-        <TrackLabel
-          track={track}
-          className={clsx(
-            classes.trackLabel,
-            view.trackLabels === 'overlapping'
-              ? classes.trackLabelOverlap
-              : classes.trackLabelInline,
-          )}
-        />
-      ) : null}
-
-      <Paper
-        variant="outlined"
+    <Paper className={classes.root} variant="outlined">
+      <TrackContainerLabel model={track} view={model} />
+      <div
         className={classes.trackRenderingContainer}
         style={{ height }}
         onScroll={event => {
@@ -117,17 +120,12 @@ function TrackContainer(props: {
           display.setScrollTop(target.scrollTop)
         }}
         onDragEnter={debouncedOnDragEnter}
-        data-testid={`trackRenderingContainer-${view.id}-${trackId}`}
+        data-testid={`trackRenderingContainer-${model.id}-${trackId}`}
         role="presentation"
       >
-        <div
-          ref={ref}
-          className={classes.renderingComponentContainer}
-          style={{ transform: `scaleX(${model.scaleFactor})` }}
-        >
+        <div ref={ref} style={{ transform: `scaleX(${model.scaleFactor})` }}>
           <RenderingComponent
             model={display}
-            blockState={{}}
             onHorizontalScroll={horizontalScroll}
           />
         </div>
@@ -140,11 +138,10 @@ function TrackContainer(props: {
               top: display.height - 20,
             }}
           >
-            {' '}
             <DisplayBlurb model={display} />
           </div>
         ) : null}
-      </Paper>
+      </div>
       <div
         className={classes.overlay}
         style={{
@@ -157,7 +154,7 @@ function TrackContainer(props: {
         onDrag={display.resizeHeight}
         className={classes.resizeHandle}
       />
-    </div>
+    </Paper>
   )
 }
 

package/src/LinearGenomeView/components/TrackLabel.tsx

@@ -102,7 +102,10 @@ const TrackLabel = React.forwardRef(
       handleClose()
     }
 
-    const items = track.trackMenuItems()
+    const items = [
+      ...session.getTrackActionMenuItems?.(trackConf),
+      ...track.trackMenuItems(),
+    ].sort((a, b) => (b.priority || 0) - (a.priority || 0))
 
     return (
       <>
@@ -148,10 +151,7 @@ const TrackLabel = React.forwardRef(
           onMenuItemClick={handleMenuItemClick}
           open={Boolean(anchorEl)}
           onClose={handleClose}
-          menuItems={[
-            ...session.getTrackActionMenuItems?.(trackConf),
-            ...items,
-          ].sort((a, b) => (b.priority || 0) - (a.priority || 0))}
+          menuItems={items}
         />
       </>
     )

package/src/LinearGenomeView/components/TracksContainer.tsx

@@ -185,7 +185,6 @@ function TracksContainer({
           />
         }
       />
-      <div className={classes.spacer} />
       {children}
     </div>
   )

package/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap

@@ -449,10 +449,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-spacer"
-    />
-    <div
-      class="makeStyles-root"
+      class="MuiPaper-root makeStyles-root MuiPaper-outlined MuiPaper-rounded"
     >
       <div
         class="MuiPaper-root makeStyles-trackLabel makeStyles-trackLabelOverlap makeStyles-root MuiPaper-elevation1 MuiPaper-rounded"
@@ -505,10 +502,9 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
         <button
           aria-controls="simple-menu"
           aria-haspopup="true"
-          class="MuiButtonBase-root MuiIconButton-root makeStyles-iconButton MuiIconButton-colorSecondary MuiIconButton-disabled MuiButtonBase-disabled"
+          class="MuiButtonBase-root MuiIconButton-root makeStyles-iconButton MuiIconButton-colorSecondary"
           data-testid="track_menu_icon"
-          disabled=""
-          tabindex="-1"
+          tabindex="0"
           type="button"
         >
           <span
@@ -525,16 +521,18 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
               />
             </svg>
           </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
         </button>
       </div>
       <div
-        class="MuiPaper-root makeStyles-trackRenderingContainer MuiPaper-outlined MuiPaper-rounded"
+        class="makeStyles-trackRenderingContainer"
         data-testid="trackRenderingContainer-lgv-testConfig"
         role="presentation"
         style="height: 100px;"
       >
         <div
-          class="makeStyles-renderingComponentContainer"
           style="transform: scaleX(1);"
         >
           <div
@@ -768,7 +766,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
             class="MuiAutocomplete-root"
             data-testid="autocomplete"
             role="combobox"
-            style="width: 255.22500000000002px;"
+            style="width: 255.27500000000003px;"
           >
             <div
               class="MuiFormControl-root MuiTextField-root makeStyles-headerRefName MuiFormControl-fullWidth"
@@ -788,7 +786,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
                   placeholder="Search for location"
                   spellcheck="false"
                   type="text"
-                  value="ctgA:1..100;ctgB:1,001..1,698"
+                  value="ctgA:1..100 ctgB:1,001..1,698"
                 />
                 <div
                   class="MuiInputAdornment-root MuiInputAdornment-positionEnd"
@@ -1341,10 +1339,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
       </div>
     </div>
     <div
-      class="makeStyles-spacer"
-    />
-    <div
-      class="makeStyles-root"
+      class="MuiPaper-root makeStyles-root MuiPaper-outlined MuiPaper-rounded"
     >
       <div
         class="MuiPaper-root makeStyles-trackLabel makeStyles-trackLabelOverlap makeStyles-root MuiPaper-elevation1 MuiPaper-rounded"
@@ -1397,10 +1392,9 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         <button
           aria-controls="simple-menu"
           aria-haspopup="true"
-          class="MuiButtonBase-root MuiIconButton-root makeStyles-iconButton MuiIconButton-colorSecondary MuiIconButton-disabled MuiButtonBase-disabled"
+          class="MuiButtonBase-root MuiIconButton-root makeStyles-iconButton MuiIconButton-colorSecondary"
           data-testid="track_menu_icon"
-          disabled=""
-          tabindex="-1"
+          tabindex="0"
           type="button"
         >
           <span
@@ -1417,16 +1411,18 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
               />
             </svg>
           </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
         </button>
       </div>
       <div
-        class="MuiPaper-root makeStyles-trackRenderingContainer MuiPaper-outlined MuiPaper-rounded"
+        class="makeStyles-trackRenderingContainer"
         data-testid="trackRenderingContainer-lgv-testConfig"
         role="presentation"
         style="height: 100px;"
       >
         <div
-          class="makeStyles-renderingComponentContainer"
           style="transform: scaleX(1);"
         >
           <div
@@ -1498,7 +1494,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
       />
     </div>
     <div
-      class="makeStyles-root"
+      class="MuiPaper-root makeStyles-root MuiPaper-outlined MuiPaper-rounded"
     >
       <div
         class="MuiPaper-root makeStyles-trackLabel makeStyles-trackLabelOverlap makeStyles-root MuiPaper-elevation1 MuiPaper-rounded"
@@ -1551,10 +1547,9 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         <button
           aria-controls="simple-menu"
           aria-haspopup="true"
-          class="MuiButtonBase-root MuiIconButton-root makeStyles-iconButton MuiIconButton-colorSecondary MuiIconButton-disabled MuiButtonBase-disabled"
+          class="MuiButtonBase-root MuiIconButton-root makeStyles-iconButton MuiIconButton-colorSecondary"
           data-testid="track_menu_icon"
-          disabled=""
-          tabindex="-1"
+          tabindex="0"
           type="button"
         >
           <span
@@ -1571,16 +1566,18 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
               />
             </svg>
           </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
         </button>
       </div>
       <div
-        class="MuiPaper-root makeStyles-trackRenderingContainer MuiPaper-outlined MuiPaper-rounded"
+        class="makeStyles-trackRenderingContainer"
         data-testid="trackRenderingContainer-lgv-testConfig2"
         role="presentation"
         style="height: 100px;"
       >
         <div
-          class="makeStyles-renderingComponentContainer"
           style="transform: scaleX(1);"
         >
           <div

package/src/LinearGenomeView/index.test.ts

@@ -11,6 +11,7 @@ import { LinearGenomeViewStateModel, stateModelFactory } from '.'
 import { BaseLinearDisplayComponent } from '..'
 import { stateModelFactory as LinearBasicDisplayStateModelFactory } from '../LinearBareDisplay'
 import hg38DisplayedRegions from './hg38DisplayedRegions.json'
+import volvoxDisplayedRegions from './volvoxDisplayedRegions.json'
 
 // use initializer function to avoid having console.warn jest.fn in a global
 function initialize() {
@@ -54,22 +55,7 @@ function initialize() {
   const Assembly = types
     .model({})
     .volatile(() => ({
-      regions: [
-        {
-          assemblyName: 'volvox',
-          start: 0,
-          end: 50001,
-          refName: 'ctgA',
-          reversed: false,
-        },
-        {
-          assemblyName: 'volvox',
-          start: 0,
-          end: 6079,
-          refName: 'ctgB',
-          reversed: false,
-        },
-      ],
+      regions: volvoxDisplayedRegions,
     }))
     .views(() => ({
       getCanonicalRefName(refName: string) {
@@ -79,6 +65,19 @@ function initialize() {
         return refName
       },
     }))
+
+  const AssemblyManager = types
+    .model({
+      assemblies: types.map(Assembly),
+    })
+    .actions(self => ({
+      isValidRefName(str: string) {
+        return !str.includes(':')
+      },
+      get(str: string) {
+        return self.assemblies.get(str)
+      },
+    }))
   const LinearGenomeModel = stateModelFactory(stubManager)
   const Session = types
     .model({
@@ -86,6 +85,13 @@ function initialize() {
       rpcManager: 'rpcManagerExists',
       view: types.maybe(LinearGenomeModel),
       configuration: types.map(types.string),
+      assemblyManager: types.optional(AssemblyManager, {
+        assemblies: {
+          volvox: {
+            regions: volvoxDisplayedRegions,
+          },
+        },
+      }),
     })
     .actions(self => ({
       setView(view: Instance<LinearGenomeViewStateModel>) {
@@ -93,9 +99,6 @@ function initialize() {
         return view
       },
     }))
-    .volatile((/* self */) => ({
-      assemblyManager: new Map([['volvox', Assembly.create({})]]),
-    }))
 
   return { Session, LinearGenomeModel, Assembly }
 }
@@ -294,29 +297,6 @@ test('can navToMultiple', () => {
   ])
   expect(model.offsetPx).toBe(2799)
   expect(model.bpPerPx).toBeCloseTo(12.531)
-
-  expect(() =>
-    model.navToMultiple([
-      { refName: 'ctgB', start: 5000, end: 10000 },
-      { refName: 'ctgC', start: 5000, end: 10000 },
-    ]),
-  ).toThrow('Start of region ctgC:5,001..10,000 should be 1, but it is not')
-
-  expect(() =>
-    model.navToMultiple([
-      { refName: 'ctgB', start: 0, end: 5000 },
-      { refName: 'ctgC', start: 0, end: 5000 },
-    ]),
-  ).toThrow('End of region ctgB:1..5,000 should be 10,000, but it is not')
-
-  expect(() =>
-    model.navToMultiple([
-      { refName: 'ctgA', start: 5000, end: 10000 },
-      { refName: 'ctgA', start: 0, end: 5000 },
-    ]),
-  ).toThrow(
-    'Entered location ctgA:1..5,000 does not match with displayed regions',
-  )
 })
 
 describe('Zoom to selected displayed regions', () => {
@@ -992,3 +972,25 @@ test('navToLocString with human assembly', () => {
   expect(model.view.offsetPx).toBe(9914777550)
   model.view.navToLocString('chr3:-1,100,000,000..-1,000,000,000')
 })
+
+test('multi region', () => {
+  const { Session, LinearGenomeModel } = initialize()
+  const model = Session.create({
+    configuration: {},
+  }).setView(
+    LinearGenomeModel.create({
+      type: 'LinearGenomeView',
+      tracks: [{ name: 'foo track', type: 'BasicTrack' }],
+    }),
+  )
+  model.setWidth(800)
+  model.setDisplayedRegions(volvoxDisplayedRegions.slice(0, 1))
+
+  model.navToLocString('ctgA ctgB')
+  expect(model.displayedRegions[0].refName).toBe('ctgA')
+  expect(model.displayedRegions[1].refName).toBe('ctgB')
+  // [
+  //   { refName: 'ctgA', start: 0, end: 50001 },
+  //   { refName: 'ctgB', start: 0, end: 6079 },
+  // ])
+})