@jbrowse/plugin-data-management 1.7.11 → 2.1.0

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

@@ -2,23 +2,23 @@
 
 exports[`<AddConnectionWidget /> renders 1`] = `
 <div
-  class="makeStyles-root"
+  class="tss-1ohm0fb-root"
 >
   <div
-    class="MuiPaper-root MuiStepper-root MuiStepper-vertical makeStyles-stepper MuiPaper-elevation0"
+    class="MuiStepper-root MuiStepper-vertical tss-1v8zuu8-stepper css-9tmuzo-MuiStepper-root"
   >
     <div
-      class="MuiStep-root MuiStep-vertical"
+      class="MuiStep-root MuiStep-vertical css-8wcvy5-MuiStep-root"
     >
       <span
-        class="MuiStepLabel-root MuiStepLabel-vertical"
+        class="MuiStepLabel-root MuiStepLabel-vertical css-14sza3e-MuiStepLabel-root"
       >
         <span
-          class="MuiStepLabel-iconContainer"
+          class="MuiStepLabel-iconContainer css-vnkopk-MuiStepLabel-iconContainer"
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiStepIcon-root MuiStepIcon-active"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiStepIcon-root Mui-active css-1u4zpwo-MuiSvgIcon-root-MuiStepIcon-root"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -28,57 +28,64 @@ exports[`<AddConnectionWidget /> renders 1`] = `
               r="12"
             />
             <text
-              class="MuiStepIcon-text"
+              class="MuiStepIcon-text css-117w1su-MuiStepIcon-text"
+              dominant-baseline="central"
               text-anchor="middle"
               x="12"
-              y="16"
+              y="12"
             >
               1
             </text>
           </svg>
         </span>
         <span
-          class="MuiStepLabel-labelContainer"
+          class="MuiStepLabel-labelContainer css-16ubnlw-MuiStepLabel-labelContainer"
         >
           <span
-            class="MuiTypography-root MuiStepLabel-label MuiStepLabel-active MuiTypography-body2 MuiTypography-displayBlock"
+            class="MuiStepLabel-label Mui-active css-qivjh0-MuiStepLabel-label"
           >
             Select a Connection Type
           </span>
         </span>
       </span>
       <div
-        class="MuiStepContent-root"
-        icon="1"
+        class="MuiStepContent-root css-14yr603-MuiStepContent-root"
       >
         <div
-          class="MuiCollapse-root MuiStepContent-transition MuiCollapse-entered"
+          class="MuiCollapse-root MuiCollapse-vertical MuiStepContent-transition MuiCollapse-entered css-1rw7nzj-MuiCollapse-root-MuiStepContent-transition"
           style="min-height: 0px;"
         >
           <div
-            class="MuiCollapse-wrapper"
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
           >
             <div
-              class="MuiCollapse-wrapperInner"
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
             >
               <form
                 autocomplete="off"
               >
                 <div
-                  class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
+                  class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
                 >
                   <label
-                    class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+                    class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary MuiFormLabel-filled css-1sumxir-MuiFormLabel-root-MuiInputLabel-root"
                     data-shrink="true"
+                    for="mui-1"
+                    id="mui-1-label"
                   >
                     connectionType
                   </label>
                   <div
-                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+                    class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
+                    variant="outlined"
                   >
                     <div
+                      aria-describedby="mui-1-helper-text"
+                      aria-expanded="false"
                       aria-haspopup="listbox"
-                      class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
+                      aria-labelledby="mui-1-label mui-1"
+                      class="MuiSelect-select MuiSelect-outlined MuiOutlinedInput-input MuiInputBase-input css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
+                      id="mui-1"
                       role="button"
                       tabindex="0"
                     >
@@ -86,13 +93,14 @@ exports[`<AddConnectionWidget /> renders 1`] = `
                     </div>
                     <input
                       aria-hidden="true"
-                      class="MuiSelect-nativeInput"
+                      class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
                       tabindex="-1"
                       value="UCSCTrackHubConnection"
                     />
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiSelect-icon MuiSelect-iconOutlined css-hfutr2-MuiSvgIcon-root-MuiSelect-icon"
+                      data-testid="ArrowDropDownIcon"
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
@@ -102,10 +110,10 @@ exports[`<AddConnectionWidget /> renders 1`] = `
                     </svg>
                     <fieldset
                       aria-hidden="true"
-                      class="PrivateNotchedOutline-root MuiOutlinedInput-notchedOutline"
+                      class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
                     >
                       <legend
-                        class="PrivateNotchedOutline-legendLabelled PrivateNotchedOutline-legendNotched"
+                        class="css-1in441m"
                       >
                         <span>
                           connectionType
@@ -114,66 +122,55 @@ exports[`<AddConnectionWidget /> renders 1`] = `
                     </fieldset>
                   </div>
                   <p
-                    class="MuiFormHelperText-root MuiFormHelperText-contained MuiFormHelperText-filled"
+                    class="MuiFormHelperText-root MuiFormHelperText-sizeMedium MuiFormHelperText-contained MuiFormHelperText-filled css-1wc848c-MuiFormHelperText-root"
+                    id="mui-1-helper-text"
                   >
                     A track or assembly hub in the Track Hub format
                     <a
-                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary"
+                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorSecondary MuiIconButton-sizeMedium css-1gws2xf-MuiButtonBase-root-MuiIconButton-root"
                       href="//genome.ucsc.edu/goldenPath/help/hgTrackHubHelp.html#Intro"
                       rel="noopener noreferrer"
                       tabindex="0"
                       target="_blank"
                     >
-                      <span
-                        class="MuiIconButton-label"
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+                        data-testid="OpenInNewIcon"
+                        focusable="false"
+                        viewBox="0 0 24 24"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
-                          />
-                        </svg>
-                      </span>
+                        <path
+                          d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+                        />
+                      </svg>
                       <span
-                        class="MuiTouchRipple-root"
+                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                       />
                     </a>
                   </p>
                 </div>
               </form>
               <div
-                class="makeStyles-actionsContainer"
+                class="tss-1spe31o-actionsContainer"
               >
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-button MuiButton-disabled MuiButtonBase-disabled"
+                  class="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root Mui-disabled tss-11xjtta-button css-1e6y48t-MuiButtonBase-root-MuiButton-root"
                   disabled=""
                   tabindex="-1"
                   type="button"
                 >
-                  <span
-                    class="MuiButton-label"
-                  >
-                    Back
-                  </span>
+                  Back
                 </button>
                 <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button MuiButton-containedPrimary"
+                  class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root tss-11xjtta-button css-sghohy-MuiButtonBase-root-MuiButton-root"
                   data-testid="addConnectionNext"
                   tabindex="0"
                   type="button"
                 >
+                  Next
                   <span
-                    class="MuiButton-label"
-                  >
-                    Next
-                  </span>
-                  <span
-                    class="MuiTouchRipple-root"
+                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                   />
                 </button>
               </div>
@@ -183,24 +180,24 @@ exports[`<AddConnectionWidget /> renders 1`] = `
       </div>
     </div>
     <div
-      class="MuiStepConnector-root MuiStepConnector-vertical MuiStepConnector-disabled"
+      class="MuiStepConnector-root MuiStepConnector-vertical Mui-disabled css-1pe7n21-MuiStepConnector-root"
     >
       <span
-        class="MuiStepConnector-line MuiStepConnector-lineVertical"
+        class="MuiStepConnector-line MuiStepConnector-lineVertical css-8t49rw-MuiStepConnector-line"
       />
     </div>
     <div
-      class="MuiStep-root MuiStep-vertical"
+      class="MuiStep-root MuiStep-vertical css-8wcvy5-MuiStep-root"
     >
       <span
-        class="MuiStepLabel-root MuiStepLabel-vertical MuiStepLabel-disabled"
+        class="MuiStepLabel-root MuiStepLabel-vertical Mui-disabled css-14sza3e-MuiStepLabel-root"
       >
         <span
-          class="MuiStepLabel-iconContainer"
+          class="MuiStepLabel-iconContainer css-vnkopk-MuiStepLabel-iconContainer"
         >
           <svg
             aria-hidden="true"
-            class="MuiSvgIcon-root MuiStepIcon-root"
+            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiStepIcon-root css-1u4zpwo-MuiSvgIcon-root-MuiStepIcon-root"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -210,29 +207,28 @@ exports[`<AddConnectionWidget /> renders 1`] = `
               r="12"
             />
             <text
-              class="MuiStepIcon-text"
+              class="MuiStepIcon-text css-117w1su-MuiStepIcon-text"
+              dominant-baseline="central"
               text-anchor="middle"
               x="12"
-              y="16"
+              y="12"
             >
               2
             </text>
           </svg>
         </span>
         <span
-          class="MuiStepLabel-labelContainer"
+          class="MuiStepLabel-labelContainer css-16ubnlw-MuiStepLabel-labelContainer"
         >
           <span
-            class="MuiTypography-root MuiStepLabel-label MuiTypography-body2 MuiTypography-displayBlock"
+            class="MuiStepLabel-label Mui-disabled css-qivjh0-MuiStepLabel-label"
           >
             Configure Connection
           </span>
         </span>
       </span>
       <div
-        class="MuiStepContent-root MuiStepContent-last"
-        disabled=""
-        icon="2"
+        class="MuiStepContent-root MuiStepContent-last css-1mz1l2x-MuiStepContent-root"
       />
     </div>
   </div>

package/src/AddTrackWidget/components/{AddTrackWidget.test.js → AddTrackWidget.test.tsx}

@@ -1,15 +1,19 @@
 import React from 'react'
-import { render, cleanup, fireEvent } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 import { createTestSession } from '@jbrowse/web/src/rootModel'
 import AddTrackWidget from './AddTrackWidget'
+import { AddTrackModel } from '../model'
+import { AbstractSessionModel } from '@jbrowse/core/util'
 jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
 
 describe('<AddTrackWidget />', () => {
-  let session
-  let model
+  let session: AbstractSessionModel
+  let model: AddTrackModel
 
   beforeAll(() => {
+    // @ts-ignore
     session = createTestSession()
+    // @ts-ignore
     session.addAssemblyConf({
       name: 'volMyt1',
       sequence: {
@@ -29,6 +33,7 @@ describe('<AddTrackWidget />', () => {
         },
       },
     })
+    // @ts-ignore
     session.addTrackConf({
       trackId: 'i3jUPmrgMOS',
       type: 'FeatureTrack',
@@ -77,6 +82,8 @@ describe('<AddTrackWidget />', () => {
       },
       filterAttributes: ['type', 'start', 'end'],
     })
+
+    // @ts-ignore
     const view = session.addView('LinearGenomeView', {
       displayedRegions: [
         {
@@ -87,58 +94,36 @@ describe('<AddTrackWidget />', () => {
         },
       ],
     })
+
+    // @ts-ignore
     model = session.addWidget('AddTrackWidget', 'addTrackWidget', {
       view: view.id,
     })
   })
 
-  afterEach(cleanup)
-
-  it('renders', () => {
-    const { container } = render(<AddTrackWidget model={model} />)
-    expect(container.firstChild).toMatchSnapshot()
-  })
-
   it('adds a track', async () => {
     const { getByTestId, getAllByTestId, findByText, findAllByText } = render(
       <AddTrackWidget model={model} />,
     )
+    // @ts-ignore
     expect(session.sessionTracks.length).toBe(1)
     fireEvent.change(getAllByTestId('urlInput')[0], {
       target: { value: 'test.txt' },
     })
-    fireEvent.click(getByTestId('addTrackNextButton'))
+    fireEvent.click(getAllByTestId('addTrackNextButton')[0])
     fireEvent.mouseDown(getByTestId('adapterTypeSelect'))
     const bamAdapter = await findByText('BamAdapter')
     fireEvent.click(bamAdapter)
     fireEvent.change(getByTestId('trackNameInput'), {
       target: { value: 'Test track name' },
     })
-    const trackTypeSelect = getByTestId('trackTypeSelect')
-    fireEvent.mouseDown(trackTypeSelect)
-    const featureTrack = await findByText('FeatureTrack')
-    fireEvent.click(featureTrack)
-    const assemblyNameSelect = getByTestId('assemblyNameSelect')
-    fireEvent.mouseDown(assemblyNameSelect)
+    fireEvent.mouseDown(getByTestId('trackTypeSelect'))
+    fireEvent.click(await findByText('FeatureTrack'))
+    fireEvent.mouseDown(getByTestId('assemblyNameSelect'))
     const volMyt1 = await findAllByText('volMyt1')
     fireEvent.click(volMyt1[1])
-    fireEvent.click(getByTestId('addTrackNextButton'))
-    expect(session.sessionTracks.length).toBe(2)
-  })
-
-  xit('fails to add a track', async () => {
-    const { getByTestId, getAllByTestId, findByText } = render(
-      <AddTrackWidget model={model} />,
-    )
-    expect(session.sessionTracks.length).toBe(2)
-    fireEvent.change(getAllByTestId('urlInput')[0], {
-      target: { value: 'test.txt' },
-    })
-    fireEvent.click(getByTestId('addTrackNextButton'))
-    fireEvent.mouseDown(getByTestId('adapterTypeSelect'))
-    const chrom = await findByText('ChromSizesAdapter')
-    fireEvent.click(chrom)
-    fireEvent.click(getByTestId('addTrackNextButton'))
+    fireEvent.click(getAllByTestId('addTrackNextButton')[0])
+    // @ts-ignore
     expect(session.sessionTracks.length).toBe(2)
   })
 })

package/src/AddTrackWidget/components/AddTrackWidget.tsx

@@ -1,209 +1,45 @@
-import React, { useState } from 'react'
-import {
-  Button,
-  Step,
-  StepContent,
-  StepLabel,
-  Stepper,
-  Typography,
-  makeStyles,
-} from '@material-ui/core'
-import {
-  getSession,
-  isElectron,
-  supportedIndexingAdapters,
-} from '@jbrowse/core/util'
-import { getConf } from '@jbrowse/core/configuration'
+import React from 'react'
 import { observer } from 'mobx-react'
+import { FormControl, FormHelperText, Select, MenuItem } from '@mui/material'
+import { AddTrackWorkflowType } from '@jbrowse/core/pluggableElementTypes'
+import { useLocalStorage } from '@jbrowse/core/util'
 import { getEnv } from 'mobx-state-tree'
-import { Alert } from '@material-ui/lab'
 
 // locals
-import ConfirmTrack from './ConfirmTrack'
-import TrackSourceSelect from './TrackSourceSelect'
 import { AddTrackModel } from '../model'
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    marginTop: theme.spacing(1),
-  },
-  stepper: {
-    backgroundColor: theme.palette.background.default,
-  },
-  button: {
-    marginTop: theme.spacing(1),
-    marginRight: theme.spacing(1),
-  },
-  actionsContainer: {
-    marginBottom: theme.spacing(2),
-  },
-  stepContent: {
-    margin: theme.spacing(1),
-  },
-  alertContainer: {
-    padding: `${theme.spacing(2)}px 0px ${theme.spacing(2)}px 0px`,
-  },
-}))
-
-const steps = ['Enter track data', 'Confirm track type']
-
-function AddTrackWidget({ model }: { model: AddTrackModel }) {
-  const [activeStep, setActiveStep] = useState(0)
-  const classes = useStyles()
-  const session = getSession(model)
-  const { pluginManager } = getEnv(session)
-  const { rootModel } = pluginManager
-  const { jobsManager } = rootModel
-  const {
-    assembly,
-    trackAdapter,
-    trackData,
-    trackName,
-    trackType,
-    textIndexTrack,
-    textIndexingConf,
-  } = model
-  const [trackErrorMessage, setTrackErrorMessage] = useState<string>()
-
-  function getStepContent(step: number) {
-    switch (step) {
-      case 0:
-        return <TrackSourceSelect model={model} />
-      case 1:
-        return <ConfirmTrack model={model} />
-      default:
-        return <Typography>Unknown step</Typography>
-    }
-  }
-
-  async function handleNext() {
-    if (activeStep !== steps.length - 1) {
-      setActiveStep(activeStep + 1)
-      return
-    }
-
-    const trackId = `${trackName
-      .toLowerCase()
-      .replace(/ /g, '_')}-${Date.now()}${
-      session.adminMode ? '' : '-sessionTrack'
-    }`
-
-    const assemblyInstance = session.assemblyManager.get(assembly)
-
-    if (trackAdapter && trackAdapter.type !== 'UNKNOWN') {
-      // @ts-ignore
-      session.addTrackConf({
-        trackId,
-        type: trackType,
-        name: trackName,
-        assemblyNames: [assembly],
-        adapter: {
-          ...trackAdapter,
-          sequenceAdapter: getConf(assemblyInstance, ['sequence', 'adapter']),
-        },
-      })
-      const textSearchingDefault = {
-        attributes: ['Name', 'ID'],
-        exclude: ['CDS', 'exon'],
-      }
-      if (model.view) {
-        model.view.showTrack(trackId)
-        if (isElectron) {
-          if (textIndexTrack && supportedIndexingAdapters(trackAdapter.type)) {
-            const attr = textIndexingConf || textSearchingDefault
-            const indexName = trackName + '-index'
-            const indexingParams = {
-              ...attr,
-              assemblies: [assembly],
-              tracks: [trackId],
-              indexType: 'perTrack',
-              name: indexName,
-              timestamp: new Date().toISOString(),
-            }
-            const newEntry = {
-              indexingParams: indexingParams,
-              name: indexName,
-              cancelCallback: () => {
-                jobsManager.abortJob()
-              },
-            }
-            jobsManager.queueJob(newEntry)
-          }
-        }
-      } else {
-        session.notify(
-          'Open a new view, or use the track selector in an existing view, to view this track',
-          'info',
-        )
-      }
-      model.clearData()
-      // @ts-ignore
-      session.hideWidget(model)
-    } else {
-      setTrackErrorMessage(
-        'Failed to add track.\nThe configuration of this file is not currently supported.',
-      )
-    }
-  }
-
-  function handleBack() {
-    setTrackErrorMessage(undefined)
-    setActiveStep(activeStep - 1)
-  }
-
-  function isNextDisabled() {
-    switch (activeStep) {
-      case 0:
-        return !trackData
-      case 1:
-        return !(trackName && trackType && trackAdapter?.type && assembly)
-      default:
-        return true
-    }
-  }
-
+import DefaultAddTrackWorkflow from './DefaultAddTrackWorkflow'
+
+function AddTrackSelector({ model }: { model: AddTrackModel }) {
+  const [val, setVal] = useLocalStorage('trackSelector-choice', 'Default')
+  const { pluginManager } = getEnv(model)
+  const widgets = pluginManager.getElementTypesInGroup(
+    'add track workflow',
+  ) as AddTrackWorkflowType[]
+  const ComponentMap = {
+    Default: DefaultAddTrackWorkflow,
+    ...Object.fromEntries(widgets.map(w => [w.name, w.ReactComponent])),
+  } as { [key: string]: React.FC<{ model: AddTrackModel }> }
+
+  // make sure the selected value is in the list
+  const val2 = ComponentMap[val] ? val : 'Default'
+  const Component = ComponentMap[val2]
   return (
-    <div className={classes.root}>
-      <Stepper
-        className={classes.stepper}
-        activeStep={activeStep}
-        orientation="vertical"
-      >
-        {steps.map((label, idx) => (
-          <Step key={label}>
-            <StepLabel>{label}</StepLabel>
-            <StepContent>
-              {getStepContent(idx)}
-              <div className={classes.actionsContainer}>
-                <Button
-                  disabled={activeStep === 0}
-                  onClick={handleBack}
-                  className={classes.button}
-                >
-                  Back
-                </Button>
-                <Button
-                  disabled={isNextDisabled()}
-                  variant="contained"
-                  color="primary"
-                  onClick={handleNext}
-                  className={classes.button}
-                  data-testid="addTrackNextButton"
-                >
-                  {activeStep === steps.length - 1 ? 'Add' : 'Next'}
-                </Button>
-              </div>
-              {trackErrorMessage ? (
-                <div className={classes.alertContainer}>
-                  <Alert severity="error">{trackErrorMessage}</Alert>
-                </div>
-              ) : null}
-            </StepContent>
-          </Step>
-        ))}
-      </Stepper>
-    </div>
+    <>
+      <FormControl>
+        <Select value={val2} onChange={event => setVal(event.target.value)}>
+          {Object.keys(ComponentMap).map(e => (
+            <MenuItem key={e} value={e}>
+              {e}
+            </MenuItem>
+          ))}
+        </Select>
+        <FormHelperText>Type of add track workflow</FormHelperText>
+      </FormControl>
+
+      <br />
+      <Component model={model} />
+    </>
   )
 }
 
-export default observer(AddTrackWidget)
+export default observer(AddTrackSelector)