Misc refactors

plugins/alignments/src/AlignmentsTrack/configSchemaF.ts

@@ -0,0 +1,22 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { createBaseTrackConfig } from '@jbrowse/core/pluggableElementTypes'
+import PluginManager from '@jbrowse/core/PluginManager'
+
+/**
+ * #config AlignmentsTrack
+ * has very little config; most config and state logic is on the display
+ */
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+export default function configSchemaFactory(pluginManager: PluginManager) {
+  return ConfigurationSchema(
+    'AlignmentsTrack',
+    {},
+    {
+      /**
+       * #baseConfiguration
+       */
+      baseConfiguration: createBaseTrackConfig(pluginManager),
+    },
+  )
+}

plugins/alignments/src/AlignmentsTrack/index.ts

@@ -1,32 +1,11 @@
 import PluginManager from '@jbrowse/core/PluginManager'
 import TrackType from '@jbrowse/core/pluggableElementTypes/TrackType'
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import {
-  createBaseTrackConfig,
-  createBaseTrackModel,
-} from '@jbrowse/core/pluggableElementTypes/models'
+import { createBaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models'
+import configSchemaF from './configSchemaF'
 
-/**
- * #config AlignmentsTrack
- * has very little config; most config and state logic is on the display
- */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
-function configSchemaFactory(pluginManager: PluginManager) {
-  return ConfigurationSchema(
-    'AlignmentsTrack',
-    {},
-    {
-      /**
-       * #baseConfiguration
-       */
-      baseConfiguration: createBaseTrackConfig(pluginManager),
-    },
-  )
-}
 export default function register(pm: PluginManager) {
   pm.addTrackType(() => {
-    const configSchema = configSchemaFactory(pm)
+    const configSchema = configSchemaF(pm)
     const track = new TrackType({
       name: 'AlignmentsTrack',
       displayName: 'Alignments track',

plugins/data-management/src/PluginStoreWidget/components/CustomPluginForm.tsx

@@ -1,11 +1,10 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import { getRoot } from 'mobx-state-tree'
-import { PluginDefinition } from '@jbrowse/core/PluginLoader'
+import { Dialog } from '@jbrowse/core/ui'
 import {
   Button,
   Collapse,
-  Dialog,
   DialogActions,
   DialogContent,
   DialogContentText,
@@ -53,26 +52,6 @@ function CustomPluginForm({
   const [cjsPluginUrl, setCJSPluginUrl] = useState('')
   const [advancedOptionsOpen, setAdvancedOptionsOpen] = useState(false)
 
-  function handleChange(event: React.ChangeEvent<HTMLTextAreaElement>) {
-    const { name, value } = event.target
-    if (name === 'umdName') {
-      setUMDPluginName(value)
-    }
-    if (name === 'umdUrl') {
-      setUMDPluginUrl(value)
-    }
-    if (name === 'esmUrl') {
-      setESMPluginUrl(value)
-    }
-    if (name === 'cjsUrl') {
-      setCJSPluginUrl(value)
-    }
-  }
-
-  function handleOpenAdvancedOptions() {
-    setAdvancedOptionsOpen(!advancedOptionsOpen)
-  }
-
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const { jbrowse } = getRoot<any>(model)
 
@@ -81,21 +60,15 @@ function CustomPluginForm({
   )
 
   function handleSubmit() {
-    if (!ready) {
-      return
-    }
-    const pluginDefinition: PluginDefinition = {}
     if (umdPluginName && umdPluginUrl) {
-      pluginDefinition.name = umdPluginName
-      pluginDefinition.umdUrl = umdPluginUrl
+      jbrowse.addPlugin({ name: umdPluginName, umdUrl: umdPluginUrl })
     }
     if (esmPluginUrl) {
-      pluginDefinition.esmUrl = esmPluginUrl
+      jbrowse.addPlugin({ esmUrl: esmPluginUrl })
     }
     if (cjsPluginUrl) {
-      pluginDefinition.cjsUrl = cjsPluginUrl
+      jbrowse.addPlugin({ cjsUrl: cjsPluginUrl })
     }
-    jbrowse.addPlugin(pluginDefinition)
   }
 
   function handleClose() {
@@ -120,17 +93,19 @@ function CustomPluginForm({
             label="Plugin name"
             variant="outlined"
             value={umdPluginName}
-            onChange={handleChange}
+            onChange={event => setUMDPluginName(event.target.value)}
           />
           <TextField
             id="umd-url-input"
             name="umdUrl"
             label="Plugin URL"
             variant="outlined"
             value={umdPluginUrl}
-            onChange={handleChange}
+            onChange={event => setUMDPluginUrl(event.target.value)}
           />
-          <DialogContentText onClick={handleOpenAdvancedOptions}>
+          <DialogContentText
+            onClick={() => setAdvancedOptionsOpen(!advancedOptionsOpen)}
+          >
             <IconButton
               className={cx(classes.expand, {
                 [classes.expandOpen]: advancedOptionsOpen,
@@ -156,15 +131,15 @@ function CustomPluginForm({
                 label="ESM build URL"
                 variant="outlined"
                 value={esmPluginUrl}
-                onChange={handleChange}
+                onChange={event => setESMPluginUrl(event.target.value)}
               />
               <TextField
                 id="cjs-url-input"
                 name="cjsUrl"
                 label="CJS build URL"
                 variant="outlined"
                 value={cjsPluginUrl}
-                onChange={handleChange}
+                onChange={event => setCJSPluginUrl(event.target.value)}
               />
             </div>
           </Collapse>

plugins/linear-genome-view/src/LinearGenomeView/components/GetSequenceDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { makeStyles } from 'tss-react/mui'
 import {
   Button,
@@ -96,33 +96,24 @@ function SequenceDialog({
   const { leftOffset, rightOffset } = model
   const loading = Boolean(sequenceChunks === undefined)
 
-  // avoid infinite looping of useEffect
-  // random note: the current selected region can't be a computed because it
-  // uses action on base1dview even though it's on the ephemeral base1dview
-  const regionsSelected = useMemo(
-    () => model.getSelectedRegions(leftOffset, rightOffset),
-    [model, leftOffset, rightOffset],
-  )
-
   useEffect(() => {
     let active = true
     const controller = new AbortController()
 
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     ;(async () => {
       try {
-        if (regionsSelected.length > 0) {
-          const chunks = await fetchSequence(
-            model,
-            regionsSelected,
-            controller.signal,
-          )
-          if (active) {
-            setSequenceChunks(chunks)
-          }
-        } else {
+        // random note: the current selected region can't be a computed because
+        // it uses action on base1dview even though it's on the ephemeral
+        // base1dview
+        const selection = model.getSelectedRegions(leftOffset, rightOffset)
+        if (selection.length === 0) {
           throw new Error('Selected region is out of bounds')
         }
+        const chunks = await fetchSequence(model, selection, controller.signal)
+        if (active) {
+          setSequenceChunks(chunks)
+        }
       } catch (e) {
         console.error(e)
         if (active) {
@@ -135,7 +126,7 @@ function SequenceDialog({
       controller.abort()
       active = false
     }
-  }, [model, session, regionsSelected])
+  }, [model, session, leftOffset, rightOffset])
 
   const sequence = sequenceChunks
     ? formatSeqFasta(
@@ -146,10 +137,10 @@ function SequenceDialog({
             const chunkRefName = chunk.get('refName')
             const chunkStart = chunk.get('start') + 1
             const chunkEnd = chunk.get('end')
-            const chunkLocstring = `${chunkRefName}:${chunkStart}-${chunkEnd}`
+            const loc = `${chunkRefName}:${chunkStart}-${chunkEnd}`
             if (chunkSeq?.length !== chunkEnd - chunkStart + 1) {
               throw new Error(
-                `${chunkLocstring} returned ${chunkSeq.length.toLocaleString()} bases, but should have returned ${(
+                `${loc} returned ${chunkSeq.length.toLocaleString()} bases, but should have returned ${(
                   chunkEnd - chunkStart
                 ).toLocaleString()}`,
               )
@@ -162,8 +153,7 @@ function SequenceDialog({
               chunkSeq = complement(chunkSeq)
             }
             return {
-              header:
-                chunkLocstring + (rev ? '-rev' : '') + (comp ? '-comp' : ''),
+              header: loc + (rev ? '-rev' : '') + (comp ? '-comp' : ''),
               seq: chunkSeq,
             }
           }),
@@ -178,7 +168,7 @@ function SequenceDialog({
       open
       onClose={() => {
         handleClose()
-        model.setOffsets(undefined, undefined)
+        model.setOffsets()
       }}
       title="Reference sequence"
     >

plugins/linear-genome-view/src/LinearGenomeView/model.ts

@@ -198,7 +198,8 @@ export function stateModelFactory(pluginManager: PluginManager) {
 
         /**
          * #property
-         * how to display the track labels, can be "overlapping", "offset", or "hidden"
+         * how to display the track labels, can be "overlapping", "offset", or
+         * "hidden"
          */
         trackLabels: types.optional(
           types.string,

products/jbrowse-web/src/ShareButton.tsx

@@ -224,7 +224,6 @@ const ShareDialog = observer(function ({
         open
         onClose={handleClose}
         title="JBrowse Shareable Link"
-        data-testid="share-dialog"
       >
         <DialogContent>
           <DialogContentText>
@@ -291,9 +290,7 @@ const ShareDialog = observer(function ({
 
       <SettingsDialog
         open={settingsDialogOpen}
-        onClose={() => {
-          setSettingsDialogOpen(false)
-        }}
+        onClose={() => setSettingsDialogOpen(false)}
         currentSetting={currentSetting}
       />
     </>