@jbrowse/plugin-data-management 2.6.1 → 2.6.2

package/src/AddConnectionWidget/components/AddConnectionWidget.test.tsx

@@ -1,139 +0,0 @@
-import React from 'react'
-import { render, cleanup, fireEvent } from '@testing-library/react'
-import { createTestSession } from '@jbrowse/web/src/rootModel'
-
-// locals
-import AddConnectionWidget from './AddConnectionWidget'
-
-jest.mock('@jbrowse/web/src/makeWorkerInstance', () => () => {})
-
-describe('<AddConnectionWidget />', () => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let model: any
-  let session: ReturnType<typeof createTestSession>
-
-  beforeEach(() => {
-    session = createTestSession()
-    session.addAssemblyConf({
-      name: 'volMyt1',
-      sequence: {
-        trackId: 'ref0',
-        type: 'ReferenceSequenceTrack',
-        adapter: {
-          type: 'FromConfigSequenceAdapter',
-          features: [
-            {
-              refName: 'ctgA',
-              uniqueId: 'firstId',
-              start: 0,
-              end: 1000,
-              seq: 'cattgttgcggagttgaacaACGGCATTAGGAACACTTCCGTCTCtcacttttatacgattatgattggttctttagccttggtttagattggtagtagtagcggcgctaatgctacctgaattgagaactcgagcgggggctaggcaaattctgattcagcctgacttctcttggaaccctgcccataaatcaaagggttagtgcggccaaaacgttggacaacggtattagaagaccaacctgaccaccaaaccgtcaattaaccggtatcttctcggaaacggcggttctctcctagatagcgatctgtggtctcaccatgcaatttaaacaggtgagtaaagattgctacaaatacgagactagctgtcaccagatgctgttcatctgttggctccttggtcgctccgttgtacccaggctactttgaaagagcgcagaatacttagacggtatcgatcatggtagcatagcattctgataacatgtatggagttcgaacatccgtctggggccggacggtccgtttgaggttggttgatctgggtgatagtcagcaagatagacgttagataacaaattaaaggattttaccttagattgcgactagtacaacggtacatcggtgattcgcgctctactagatcacgctatgggtaccataaacaaacggtggaccttctcaagctggttgacgcctcagcaacataggcttcctcctccacgcatctcagcataaaaggcttataaactgcttctttgtgccagagcaactcaattaagcccttggtaccgtgggcacgcattctgtcacggtgaccaactgttcatcctgaatcgccgaatgggactatttggtacaggaatcaagcggatggcactactgcagcttatttacgacggtattcttaaagtttttaagacaatgtatttcatgggtagttcggtttgttttattgctacacaggctcttgtagacgacctacttagcactacgg',
-            },
-          ],
-        },
-      },
-    })
-    model = session.addWidget('AddConnectionWidget', 'addConnectionWidget')
-  })
-
-  afterEach(cleanup)
-
-  it('renders', () => {
-    const { container } = render(<AddConnectionWidget model={model} />)
-    expect(container.firstChild).toMatchSnapshot()
-  })
-
-  it('can handle a custom UCSC trackHub URL', async () => {
-    const mockFetch = async (url: RequestInfo | URL) => {
-      // @ts-expect-error
-      const urlText = url.href || url
-      let responseText = ''
-      if (urlText.endsWith('hub.txt')) {
-        responseText = `hub TestHub
-shortLabel Test Hub
-longLabel Test Genome Informatics Hub for human DNase and RNAseq data
-genomesFile genomes.txt
-email genome@test.com
-descriptionUrl test.html
-`
-      } else if (urlText.endsWith('genomes.txt')) {
-        responseText = `genome volMyt1
-trackDb hg19/trackDb.txt
-`
-      } else if (urlText.endsWith('trackDb.txt')) {
-        responseText = `track dnaseSignal
-bigDataUrl dnaseSignal.bigWig
-shortLabel DNAse Signal
-longLabel Depth of alignments of DNAse reads
-type bigWig
-`
-      }
-
-      return new Response(responseText)
-    }
-
-    jest.spyOn(global, 'fetch').mockImplementation(mockFetch)
-
-    const { findByTestId, getAllByRole, findAllByText, findByDisplayValue } =
-      render(<AddConnectionWidget model={model} />)
-    expect(session.connections.length).toBe(0)
-    fireEvent.mouseDown(getAllByRole('button')[0])
-    const ucscTrackHubSelection = await findAllByText('UCSC Track Hub')
-    fireEvent.click(ucscTrackHubSelection.at(-1)!)
-    fireEvent.click(await findByTestId('addConnectionNext'))
-    fireEvent.change(await findByDisplayValue('nameOfConnection'), {
-      target: { value: 'Test UCSC connection name' },
-    })
-    fireEvent.change(
-      await findByDisplayValue('http://mysite.com/path/to/hub.txt'),
-      {
-        target: { value: 'http://test.com/hub.txt' },
-      },
-    )
-    fireEvent.click(await findByTestId('addConnectionNext'))
-    expect(session.sessionConnections.length).toBe(1)
-  })
-
-  it('can handle a custom JBrowse 1 data directory URL', async () => {
-    const mockFetch = async (url: RequestInfo | URL) => {
-      // @ts-expect-error
-      const urlText = url.href || url
-      let responseText = ''
-      if (urlText.endsWith('trackList.json')) {
-        responseText = '{}'
-      } else if (urlText.endsWith('refSeqs.json')) {
-        responseText = '[]'
-      }
-      return new Response(responseText)
-    }
-    jest.spyOn(global, 'fetch').mockImplementation(mockFetch)
-
-    const {
-      findByTestId,
-      getAllByRole,
-      findByText,
-      findByPlaceholderText,
-      findByDisplayValue,
-    } = render(<AddConnectionWidget model={model} />)
-    expect(session.connections.length).toBe(0)
-    fireEvent.mouseDown(getAllByRole('button')[0])
-    fireEvent.click(await findByText('JBrowse 1 Data'))
-    fireEvent.click(await findByTestId('addConnectionNext'))
-    fireEvent.change(await findByDisplayValue('nameOfConnection'), {
-      target: { value: 'Test JBrowse 1 connection name' },
-    })
-    fireEvent.change(
-      await findByDisplayValue('http://mysite.com/jbrowse/data/'),
-      {
-        target: { value: 'http://test.com/jbrowse/data/' },
-      },
-    )
-    fireEvent.click(await findByText('Add item'))
-    fireEvent.change(await findByPlaceholderText('add new'), {
-      target: { value: 'volMyt1' },
-    })
-    fireEvent.click(await findByTestId('stringArrayAdd-assemblyNames'))
-    fireEvent.click(await findByTestId('addConnectionNext'))
-    expect(session.sessionConnections.length).toBe(1)
-  })
-})

package/src/AddConnectionWidget/components/AddConnectionWidget.tsx

@@ -1,114 +0,0 @@
-import React, { useState } from 'react'
-import { Button, Step, StepContent, StepLabel, Stepper } from '@mui/material'
-import { getSession, getEnv } from '@jbrowse/core/util'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration'
-import { ConnectionType } from '@jbrowse/core/pluggableElementTypes'
-
-// locals
-import ConfigureConnection from './ConfigureConnection'
-import ConnectionTypeSelect from './ConnectionTypeSelect'
-
-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),
-  },
-}))
-
-const steps = ['Select a Connection Type', 'Configure Connection']
-
-export default observer(function AddConnectionWidget({
-  model,
-}: {
-  model: unknown
-}) {
-  const [connectionType, setConnectionType] = useState<ConnectionType>()
-  const [configModel, setConfigModel] = useState<AnyConfigurationModel>()
-  const [activeStep, setActiveStep] = useState(0)
-  const { classes } = useStyles()
-  const session = getSession(model)
-  const { pluginManager } = getEnv(session)
-
-  return (
-    <div className={classes.root}>
-      <Stepper
-        className={classes.stepper}
-        activeStep={activeStep}
-        orientation="vertical"
-      >
-        {steps.map(label => (
-          <Step key={label}>
-            <StepLabel>{label}</StepLabel>
-            <StepContent>
-              {activeStep === 0 ? (
-                <ConnectionTypeSelect
-                  connectionTypeChoices={pluginManager.getConnectionElements()}
-                  connectionType={connectionType}
-                  setConnectionType={c => {
-                    setConnectionType(c)
-                    if (!c) {
-                      return
-                    }
-                    const connectionId = `${c.name}-${Date.now()}`
-                    setConfigModel(
-                      c.configSchema.create({ connectionId }, getEnv(model)),
-                    )
-                  }}
-                />
-              ) : connectionType && configModel ? (
-                <ConfigureConnection
-                  connectionType={connectionType}
-                  model={configModel}
-                  session={session}
-                />
-              ) : null}
-              <div className={classes.actionsContainer}>
-                <Button
-                  disabled={activeStep === 0}
-                  onClick={() => setActiveStep(activeStep - 1)}
-                  className={classes.button}
-                >
-                  Back
-                </Button>
-                <Button
-                  disabled={
-                    !(
-                      (activeStep === 0 && connectionType) ||
-                      (activeStep === 1 && configModel)
-                    )
-                  }
-                  variant="contained"
-                  color="primary"
-                  onClick={() => {
-                    if (activeStep === steps.length - 1) {
-                      const conf = session.addConnectionConf(configModel)
-                      session.makeConnection?.(conf)
-                      session.hideWidget(model)
-                    } else {
-                      setActiveStep(activeStep + 1)
-                    }
-                  }}
-                  className={classes.button}
-                  data-testid="addConnectionNext"
-                >
-                  {activeStep === steps.length - 1 ? 'Connect' : 'Next'}
-                </Button>
-              </div>
-            </StepContent>
-          </Step>
-        ))}
-      </Stepper>
-    </div>
-  )
-})

package/src/AddConnectionWidget/components/ConfigureConnection.tsx

@@ -1,26 +0,0 @@
-import React, { Suspense } from 'react'
-import { observer } from 'mobx-react'
-import { ConfigurationEditor } from '@jbrowse/plugin-config'
-import { ConnectionType } from '@jbrowse/core/pluggableElementTypes'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration'
-import { AbstractSessionModel } from '@jbrowse/core/util'
-import { LoadingEllipses } from '@jbrowse/core/ui'
-
-export default observer(function ({
-  connectionType,
-  model,
-  session,
-}: {
-  connectionType: ConnectionType
-  model: AnyConfigurationModel
-  session: AbstractSessionModel
-}) {
-  const ConfigEditorComponent =
-    connectionType.configEditorComponent || ConfigurationEditor
-
-  return (
-    <Suspense fallback={<LoadingEllipses />}>
-      <ConfigEditorComponent model={{ target: model }} session={session} />
-    </Suspense>
-  )
-})

package/src/AddConnectionWidget/components/ConnectionTypeSelect.tsx

@@ -1,64 +0,0 @@
-import React, { useEffect } from 'react'
-import { IconButton, MenuItem, TextField } from '@mui/material'
-import { ConnectionType } from '@jbrowse/core/pluggableElementTypes'
-import { observer } from 'mobx-react'
-
-// icons
-import OpenInNewIcon from '@mui/icons-material/OpenInNew'
-
-export default observer(function ConnectionTypeSelect({
-  connectionTypeChoices,
-  connectionType,
-  setConnectionType,
-}: {
-  connectionTypeChoices: ConnectionType[]
-  connectionType?: ConnectionType
-  setConnectionType: (c?: ConnectionType) => void
-}) {
-  useEffect(() => {
-    if (!connectionType) {
-      setConnectionType(connectionTypeChoices[0])
-    }
-  })
-
-  return (
-    <form autoComplete="off">
-      {connectionType ? (
-        <TextField
-          value={connectionType.name}
-          label="connectionType"
-          helperText={
-            connectionType.description ? (
-              <>
-                {connectionType.description}
-                {connectionType.url ? (
-                  <IconButton
-                    href={connectionType.url}
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
-                    <OpenInNewIcon />
-                  </IconButton>
-                ) : null}
-              </>
-            ) : null
-          }
-          select
-          fullWidth
-          onChange={event =>
-            setConnectionType(
-              connectionTypeChoices.find(c => c.name === event.target.value),
-            )
-          }
-          variant="outlined"
-        >
-          {connectionTypeChoices.map(c => (
-            <MenuItem key={c.name} value={c.name}>
-              {c.displayName || c.name}
-            </MenuItem>
-          ))}
-        </TextField>
-      ) : null}
-    </form>
-  )
-})

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

@@ -1,236 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<AddConnectionWidget /> renders 1`] = `
-<div
-  class="css-1ohm0fb-root"
->
-  <div
-    class="MuiStepper-root MuiStepper-vertical css-1nq3qk0-MuiStepper-root-stepper"
-  >
-    <div
-      class="MuiStep-root MuiStep-vertical css-8wcvy5-MuiStep-root"
-    >
-      <span
-        class="MuiStepLabel-root MuiStepLabel-vertical css-14sza3e-MuiStepLabel-root"
-      >
-        <span
-          class="MuiStepLabel-iconContainer Mui-active css-vnkopk-MuiStepLabel-iconContainer"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiStepIcon-root Mui-active css-1u4zpwo-MuiSvgIcon-root-MuiStepIcon-root"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <circle
-              cx="12"
-              cy="12"
-              r="12"
-            />
-            <text
-              class="MuiStepIcon-text css-117w1su-MuiStepIcon-text"
-              dominant-baseline="central"
-              text-anchor="middle"
-              x="12"
-              y="12"
-            >
-              1
-            </text>
-          </svg>
-        </span>
-        <span
-          class="MuiStepLabel-labelContainer css-1vyamtt-MuiStepLabel-labelContainer"
-        >
-          <span
-            class="MuiStepLabel-label Mui-active css-1hv8oq8-MuiStepLabel-label"
-          >
-            Select a Connection Type
-          </span>
-        </span>
-      </span>
-      <div
-        class="MuiStepContent-root css-14yr603-MuiStepContent-root"
-      >
-        <div
-          class="MuiCollapse-root MuiCollapse-vertical MuiStepContent-transition MuiCollapse-entered css-1rw7nzj-MuiCollapse-root-MuiStepContent-transition"
-          style="min-height: 0px;"
-        >
-          <div
-            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
-          >
-            <div
-              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
-            >
-              <form
-                autocomplete="off"
-              >
-                <div
-                  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-colorPrimary MuiFormLabel-filled MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined css-1jy569b-MuiFormLabel-root-MuiInputLabel-root"
-                    data-shrink="true"
-                    for="mui-1"
-                    id="mui-1-label"
-                  >
-                    connectionType
-                  </label>
-                  <div
-                    class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-md26zr-MuiInputBase-root-MuiOutlinedInput-root"
-                  >
-                    <div
-                      aria-describedby="mui-1-helper-text"
-                      aria-expanded="false"
-                      aria-haspopup="listbox"
-                      aria-labelledby="mui-1-label mui-1"
-                      class="MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input css-11u53oe-MuiSelect-select-MuiInputBase-input-MuiOutlinedInput-input"
-                      id="mui-1"
-                      role="button"
-                      tabindex="0"
-                    >
-                      UCSC Track Hub
-                    </div>
-                    <input
-                      aria-hidden="true"
-                      aria-invalid="false"
-                      class="MuiSelect-nativeInput css-yf8vq0-MuiSelect-nativeInput"
-                      tabindex="-1"
-                      value="UCSCTrackHubConnection"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      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"
-                    >
-                      <path
-                        d="M7 10l5 5 5-5z"
-                      />
-                    </svg>
-                    <fieldset
-                      aria-hidden="true"
-                      class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
-                    >
-                      <legend
-                        class="css-14lo706"
-                      >
-                        <span>
-                          connectionType
-                        </span>
-                      </legend>
-                    </fieldset>
-                  </div>
-                  <p
-                    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
-                      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
-                      href="//genome.ucsc.edu/goldenPath/help/hgTrackHubHelp.html#Intro"
-                      rel="noopener noreferrer"
-                      tabindex="0"
-                      target="_blank"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-                        data-testid="OpenInNewIcon"
-                        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
-                        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                      />
-                    </a>
-                  </p>
-                </div>
-              </form>
-              <div
-                class="css-1spe31o-actionsContainer"
-              >
-                <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium Mui-disabled MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium css-1j3hqkx-MuiButtonBase-root-MuiButton-root-button"
-                  disabled=""
-                  tabindex="-1"
-                  type="button"
-                >
-                  Back
-                </button>
-                <button
-                  class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1xo5g2a-MuiButtonBase-root-MuiButton-root-button"
-                  data-testid="addConnectionNext"
-                  tabindex="0"
-                  type="button"
-                >
-                  Next
-                  <span
-                    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                  />
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="MuiStepConnector-root MuiStepConnector-vertical Mui-disabled css-1pe7n21-MuiStepConnector-root"
-    >
-      <span
-        class="MuiStepConnector-line MuiStepConnector-lineVertical css-8t49rw-MuiStepConnector-line"
-      />
-    </div>
-    <div
-      class="MuiStep-root MuiStep-vertical css-8wcvy5-MuiStep-root"
-    >
-      <span
-        class="MuiStepLabel-root MuiStepLabel-vertical Mui-disabled css-14sza3e-MuiStepLabel-root"
-      >
-        <span
-          class="MuiStepLabel-iconContainer Mui-disabled css-vnkopk-MuiStepLabel-iconContainer"
-        >
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiStepIcon-root css-1u4zpwo-MuiSvgIcon-root-MuiStepIcon-root"
-            focusable="false"
-            viewBox="0 0 24 24"
-          >
-            <circle
-              cx="12"
-              cy="12"
-              r="12"
-            />
-            <text
-              class="MuiStepIcon-text css-117w1su-MuiStepIcon-text"
-              dominant-baseline="central"
-              text-anchor="middle"
-              x="12"
-              y="12"
-            >
-              2
-            </text>
-          </svg>
-        </span>
-        <span
-          class="MuiStepLabel-labelContainer css-1vyamtt-MuiStepLabel-labelContainer"
-        >
-          <span
-            class="MuiStepLabel-label Mui-disabled css-1hv8oq8-MuiStepLabel-label"
-          >
-            Configure Connection
-          </span>
-        </span>
-      </span>
-      <div
-        class="MuiStepContent-root MuiStepContent-last css-1mz1l2x-MuiStepContent-root"
-      />
-    </div>
-  </div>
-</div>
-`;

package/src/AddConnectionWidget/index.ts

@@ -1,19 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import { WidgetType } from '@jbrowse/core/pluggableElementTypes'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { lazy } from 'react'
-
-import stateModel from './model'
-const configSchema = ConfigurationSchema('AddConnectionWidget', {})
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addWidgetType(() => {
-    return new WidgetType({
-      name: 'AddConnectionWidget',
-      heading: 'Add a connection',
-      configSchema,
-      stateModel,
-      ReactComponent: lazy(() => import('./components/AddConnectionWidget')),
-    })
-  })
-}

package/src/AddConnectionWidget/model.ts

@@ -1,7 +0,0 @@
-import { types } from 'mobx-state-tree'
-import { ElementId } from '@jbrowse/core/util/types/mst'
-
-export default types.model('AddConnectionModel', {
-  id: ElementId,
-  type: types.literal('AddConnectionWidget'),
-})