react-msaview 3.2.0 → 3.2.2

package/src/components/VerticalScrollbar.tsx

@@ -70,8 +70,12 @@ const VerticalScrollbar = observer(({ model }: { model: MsaViewModel }) => {
           height: Math.max(b - t, 20),
           zIndex: 100,
         }}
-        onMouseOver={() => setHovered(true)}
-        onMouseOut={() => setHovered(false)}
+        onMouseOver={() => {
+          setHovered(true)
+        }}
+        onMouseOut={() => {
+          setHovered(false)
+        }}
         onMouseDown={event => {
           setMouseDown({
             clientY: event.clientY,

package/src/components/dialogs/AboutDialog.tsx

@@ -5,7 +5,13 @@ import { version } from '../../version'
 
 export default function AboutDialog({ onClose }: { onClose: () => void }) {
   return (
-    <Dialog onClose={() => onClose()} open title="About this plugin">
+    <Dialog
+      onClose={() => {
+        onClose()
+      }}
+      open
+      title="About this plugin"
+    >
       <DialogContent>
         <Typography>
           MSAView {version} (

package/src/components/dialogs/AddTrackDialog.tsx

@@ -12,7 +12,7 @@ import type { FileLocation } from '@jbrowse/core/util/types'
 import { observer } from 'mobx-react'
 import type { MsaViewModel } from '../../model'
 
-export default observer(function ({
+const AddTrackDialog = observer(function ({
   model,
   onClose,
   open,
@@ -26,7 +26,13 @@ export default observer(function ({
   const [currentOption, setCurrentOption] = useState('')
 
   return (
-    <Dialog onClose={() => onClose()} open={open} title="Add track">
+    <Dialog
+      onClose={() => {
+        onClose()
+      }}
+      open={open}
+      title="Add track"
+    >
       <DialogContent>
         <Typography>
           Open relevant per-alignment tracks e.g. protein domains
@@ -62,7 +68,9 @@ export default observer(function ({
           <Button
             color="secondary"
             variant="contained"
-            onClick={() => onClose()}
+            onClick={() => {
+              onClose()
+            }}
           >
             Cancel
           </Button>
@@ -71,3 +79,5 @@ export default observer(function ({
     </Dialog>
   )
 })
+
+export default AddTrackDialog

package/src/components/dialogs/DomainDialog.tsx

@@ -20,10 +20,17 @@ export default function LaunchDomainViewDialog({
     <Dialog
       maxWidth="xl"
       title="Launch protein view"
-      onClose={() => handleClose()}
+      onClose={() => {
+        handleClose()
+      }}
       open
     >
-      <Tabs value={choice} onChange={(_, val) => setChoice(val)}>
+      <Tabs
+        value={choice}
+        onChange={(_, val) => {
+          setChoice(val)
+        }}
+      >
         <Tab value={0} label="Automatic lookup" />
         <Tab value={1} label="Manual" />
       </Tabs>

package/src/components/dialogs/ExportSVGDialog.tsx

@@ -28,7 +28,13 @@ export default function ExportSVGDialog({
   const [error, setError] = useState<unknown>()
   const theme = useTheme()
   return (
-    <Dialog onClose={() => onClose()} open title="Export SVG">
+    <Dialog
+      onClose={() => {
+        onClose()
+      }}
+      open
+      title="Export SVG"
+    >
       <DialogContent>
         {error ? <ErrorMessage error={error} /> : null}
         <Typography>Settings:</Typography>
@@ -36,14 +42,18 @@ export default function ExportSVGDialog({
           label="Include minimap?"
           disabled={exportType === 'entire'}
           checked={includeMinimap}
-          onChange={() => setIncludeMinimap(!includeMinimap)}
+          onChange={() => {
+            setIncludeMinimap(!includeMinimap)
+          }}
         />
         <div>
           <FormControl>
             <FormLabel>Export type</FormLabel>
             <RadioGroup
               value={exportType}
-              onChange={event => setExportType(event.target.value)}
+              onChange={event => {
+                setExportType(event.target.value)
+              }}
             >
               <FormControlLabel
                 value="entire"
@@ -63,24 +73,33 @@ export default function ExportSVGDialog({
         <Button
           variant="contained"
           color="primary"
-          onClick={async () => {
-            try {
-              await model.exportSVG({
-                theme,
-                includeMinimap:
-                  exportType === 'entire' ? false : includeMinimap,
-                exportType,
-              })
-            } catch (e) {
-              console.error(e)
-              setError(e)
-            }
-            onClose()
+          onClick={() => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            ;(async () => {
+              try {
+                await model.exportSVG({
+                  theme,
+                  includeMinimap:
+                    exportType === 'entire' ? false : includeMinimap,
+                  exportType,
+                })
+              } catch (e) {
+                console.error(e)
+                setError(e)
+              }
+              onClose()
+            })()
           }}
         >
           Submit
         </Button>
-        <Button variant="contained" color="secondary" onClick={() => onClose()}>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => {
+            onClose()
+          }}
+        >
           Cancel
         </Button>
       </DialogActions>

package/src/components/dialogs/FeatureDialog.tsx

@@ -35,8 +35,8 @@ const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
 })
 
 const Table = observer(function ({ model }: { model: MsaViewModel }) {
-  const { tidyTypes, featureFilters } = model
-  const values = [...tidyTypes.values()]
+  const { tidyInterProAnnotationTypes, featureFilters } = model
+  const values = [...tidyInterProAnnotationTypes.values()]
   const palette = getPalette(values.length - 1)
   return (
     <>
@@ -57,12 +57,12 @@ const Table = observer(function ({ model }: { model: MsaViewModel }) {
                 <input
                   type="checkbox"
                   checked={featureFilters.get(accession) ?? false}
-                  onChange={() =>
+                  onChange={() => {
                     model.setFilter(
                       accession,
                       !model.featureFilters.get(accession),
                     )
-                  }
+                  }}
                 />
               </td>
               <td>{accession}</td>
@@ -94,7 +94,9 @@ const FeatureTypeDialog = observer(function ({
 }) {
   return (
     <Dialog
-      onClose={() => onClose()}
+      onClose={() => {
+        onClose()
+      }}
       open
       title="Feature filters"
       maxWidth="xl"

package/src/components/dialogs/InterProScanDialog.tsx

@@ -151,7 +151,9 @@ const InterProScanDialog = observer(function ({
     <Dialog
       maxWidth="xl"
       title="Query InterProScan API for domains"
-      onClose={() => handleClose()}
+      onClose={() => {
+        handleClose()
+      }}
       open
     >
       <DialogContent>
@@ -159,7 +161,11 @@ const InterProScanDialog = observer(function ({
           This will run InterProScan via the InterProScan API on all rows of the
           current MSA
         </Typography>
-        <Button onClick={() => setShow(!show)}>
+        <Button
+          onClick={() => {
+            setShow(!show)
+          }}
+        >
           {show ? 'Hide' : 'Show'} advanced options
         </Button>
         {show ? (
@@ -169,18 +175,18 @@ const InterProScanDialog = observer(function ({
               <Button
                 variant="contained"
                 color="secondary"
-                onClick={() =>
+                onClick={() => {
                   setVals(vals.map(v => ({ ...v, checked: false })))
-                }
+                }}
               >
                 Select none
               </Button>
               <Button
                 variant="contained"
                 color="primary"
-                onClick={() =>
+                onClick={() => {
                   setVals(vals.map(v => ({ ...v, checked: true })))
-                }
+                }}
               >
                 Select all
               </Button>
@@ -196,7 +202,7 @@ const InterProScanDialog = observer(function ({
                           type="checkbox"
                           key={name}
                           checked={checked}
-                          onChange={() =>
+                          onChange={() => {
                             setVals(
                               vals.map(e =>
                                 e.name === name
@@ -204,7 +210,7 @@ const InterProScanDialog = observer(function ({
                                   : e,
                               ),
                             )
-                          }
+                          }}
                         />
                       </td>
                       <td>{name}</td>
@@ -220,7 +226,9 @@ const InterProScanDialog = observer(function ({
         <Button
           variant="contained"
           color="secondary"
-          onClick={() => handleClose()}
+          onClick={() => {
+            handleClose()
+          }}
         >
           Cancel
         </Button>
@@ -245,7 +253,9 @@ const InterProScanDialog = observer(function ({
                     .filter(f => !!f[1])
                     .map(row => `>${row[0]}\n${row[1]}`)
                     .join('\n'),
-                  onProgress: arg => model.setStatus(arg),
+                  onProgress: arg => {
+                    model.setStatus(arg)
+                  },
                   model,
                 })
               } catch (e) {

package/src/components/dialogs/MetadataDialog.tsx

@@ -21,7 +21,14 @@ const MetadataDialog = observer(function ({
   const { header } = model
 
   return (
-    <Dialog onClose={() => onClose()} open title="Metadata" maxWidth="xl">
+    <Dialog
+      onClose={() => {
+        onClose()
+      }}
+      open
+      title="Metadata"
+      maxWidth="xl"
+    >
       <DialogContent>
         <Attributes attributes={header} />
         <BaseCard title="sequence">

package/src/components/dialogs/SettingsDialog.tsx

@@ -23,6 +23,9 @@ const useStyles = makeStyles()(theme => ({
   flex: {
     display: 'flex',
   },
+  minw: {
+    width: '80em',
+  },
 }))
 
 const SettingsContent = observer(function ({ model }: { model: MsaViewModel }) {
@@ -56,39 +59,49 @@ const TreeSettings = observer(function TreeSettings({
       <h1>Tree options</h1>
       <Checkbox2
         checked={showBranchLen}
-        onChange={() => model.setShowBranchLen(!showBranchLen)}
+        onChange={() => {
+          model.setShowBranchLen(!showBranchLen)
+        }}
         label="Show branch length?"
       />
 
       <Checkbox2
         checked={drawNodeBubbles}
-        onChange={() => model.setDrawNodeBubbles(!drawNodeBubbles)}
+        onChange={() => {
+          model.setDrawNodeBubbles(!drawNodeBubbles)
+        }}
         label="Draw clickable bubbles on tree branches?"
       />
       <Checkbox2
         checked={drawTree}
-        onChange={() => model.setDrawTree(!drawTree)}
+        onChange={() => {
+          model.setDrawTree(!drawTree)
+        }}
         label="Show tree?"
       />
 
       <Checkbox2
         checked={labelsAlignRight}
-        onChange={() => model.setLabelsAlignRight(!labelsAlignRight)}
+        onChange={() => {
+          model.setLabelsAlignRight(!labelsAlignRight)
+        }}
         label="Tree labels align right?"
       />
 
       <Checkbox2
         checked={drawLabels}
-        onChange={() => model.setDrawLabels(!drawLabels)}
+        onChange={() => {
+          model.setDrawLabels(!drawLabels)
+        }}
         label="Draw labels"
       />
       {noTree ? null : (
         <div>
           <Checkbox2
             checked={treeWidthMatchesArea}
-            onChange={() =>
+            onChange={() => {
               model.setTreeWidthMatchesArea(!treeWidthMatchesArea)
-            }
+            }}
             label="Make tree width fit to tree area?"
           />
           {treeWidthMatchesArea ? null : (
@@ -99,7 +112,9 @@ const TreeSettings = observer(function TreeSettings({
                 min={50}
                 max={600}
                 value={treeWidth}
-                onChange={(_, val) => model.setTreeWidth(val as number)}
+                onChange={(_, val) => {
+                  model.setTreeWidth(val as number)
+                }}
               />
             </div>
           )}
@@ -131,25 +146,46 @@ const MSASettings = observer(function MSASettings({
       <h1>MSA options</h1>
       <Checkbox2
         checked={drawMsaLetters}
-        onChange={() => model.setDrawMsaLetters(!drawMsaLetters)}
+        onChange={() => {
+          model.setDrawMsaLetters(!drawMsaLetters)
+        }}
         label="Draw letters"
       />
       <Checkbox2
         checked={bgColor}
-        onChange={() => model.setBgColor(!bgColor)}
+        onChange={() => {
+          model.setBgColor(!bgColor)
+        }}
         label="Color background tiles of MSA?"
       />
       <Checkbox2
         checked={contrastLettering}
-        onChange={() => model.setContrastLettering(!contrastLettering)}
+        onChange={() => {
+          model.setContrastLettering(!contrastLettering)
+        }}
         label="Use contrast lettering"
       />
       <Checkbox2
         checked={hideGaps}
-        onChange={() => model.setHideGaps(!hideGaps)}
-        label={`Hide columns that are ${100 - allowedGappyness}% gaps`}
+        onChange={() => {
+          model.setHideGaps(!hideGaps)
+        }}
+        label={`Hide columns that are ${allowedGappyness}% gaps`}
       />
-
+      {hideGaps ? (
+        <div className={classes.flex}>
+          <Typography>Allowed gappyness ({100 - allowedGappyness}%)</Typography>
+          <Slider
+            className={classes.field}
+            min={1}
+            max={100}
+            value={allowedGappyness}
+            onChange={(_, val) => {
+              model.setAllowedGappyness(val as number)
+            }}
+          />
+        </div>
+      ) : null}
       <div className={classes.flex}>
         <Typography>Column width ({colWidth}px)</Typography>
         <Slider
@@ -157,7 +193,9 @@ const MSASettings = observer(function MSASettings({
           min={1}
           max={50}
           value={colWidth}
-          onChange={(_, val) => model.setColWidth(val as number)}
+          onChange={(_, val) => {
+            model.setColWidth(val as number)
+          }}
         />
       </div>
       <div className={classes.flex}>
@@ -167,27 +205,19 @@ const MSASettings = observer(function MSASettings({
           min={1}
           max={50}
           value={rowHeight}
-          onChange={(_, val) => model.setRowHeight(val as number)}
+          onChange={(_, val) => {
+            model.setRowHeight(val as number)
+          }}
         />
       </div>
-      {hideGaps ? (
-        <div className={classes.flex}>
-          <Typography>Allowed gappyness ({100 - allowedGappyness}%)</Typography>
-          <Slider
-            className={classes.field}
-            min={1}
-            max={100}
-            value={allowedGappyness}
-            onChange={(_, val) => model.setAllowedGappyness(val as number)}
-          />
-        </div>
-      ) : null}
 
       <TextField
         select
         label="Color scheme"
         value={colorSchemeName}
-        onChange={event => model.setColorSchemeName(event.target.value)}
+        onChange={event => {
+          model.setColorSchemeName(event.target.value)
+        }}
       >
         {Object.keys(colorSchemes).map(option => (
           <MenuItem key={option} value={option}>
@@ -206,12 +236,26 @@ const SettingsDialog = observer(function ({
   model: MsaViewModel
   onClose: () => void
 }) {
+  const { classes } = useStyles()
   return (
-    <Dialog open onClose={() => onClose()} title="Settings" maxWidth="xl">
-      <DialogContent style={{ width: '80em' }}>
+    <Dialog
+      open
+      onClose={() => {
+        onClose()
+      }}
+      title="Settings"
+      maxWidth="xl"
+    >
+      <DialogContent className={classes.minw}>
         <SettingsContent model={model} />
         <DialogActions>
-          <Button onClick={() => onClose()} variant="contained" color="primary">
+          <Button
+            onClick={() => {
+              onClose()
+            }}
+            variant="contained"
+            color="primary"
+          >
             Submit
           </Button>
         </DialogActions>

package/src/components/dialogs/TracklistDialog.tsx

@@ -14,7 +14,7 @@ import { observer } from 'mobx-react'
 // locals
 import type { MsaViewModel } from '../../model'
 
-export default observer(function ({
+const TracklistDialog = observer(function ({
   model,
   onClose,
 }: {
@@ -24,7 +24,13 @@ export default observer(function ({
   const { tracks } = model
 
   return (
-    <Dialog onClose={() => onClose()} open title="Add track">
+    <Dialog
+      onClose={() => {
+        onClose()
+      }}
+      open
+      title="Add track"
+    >
       <DialogContent>
         <Typography>
           Open relevant per-alignment tracks e.g. protein domains
@@ -49,7 +55,13 @@ export default observer(function ({
           })}
         </FormGroup>
         <DialogActions>
-          <Button onClick={() => onClose()} variant="contained" color="primary">
+          <Button
+            onClick={() => {
+              onClose()
+            }}
+            variant="contained"
+            color="primary"
+          >
             Close
           </Button>
         </DialogActions>
@@ -57,3 +69,5 @@ export default observer(function ({
     </Dialog>
   )
 })
+
+export default TracklistDialog

package/src/components/dialogs/UserProvidedDomainsDialog.tsx

@@ -34,7 +34,9 @@ const UserProvidedDomainsDialog = observer(function ({
     <Dialog
       maxWidth="xl"
       title="Open protein domains from file"
-      onClose={() => handleClose()}
+      onClose={() => {
+        handleClose()
+      }}
       open
     >
       <DialogContent>
@@ -48,7 +50,9 @@ const UserProvidedDomainsDialog = observer(function ({
             <FormControl component="fieldset">
               <RadioGroup
                 value={choice}
-                onChange={event => setChoice(event.target.value)}
+                onChange={event => {
+                  setChoice(event.target.value)
+                }}
               >
                 <FormControlLabel value="url" control={<Radio />} label="URL" />
                 <FormControlLabel
@@ -66,7 +70,9 @@ const UserProvidedDomainsDialog = observer(function ({
                 <TextField
                   label="URL"
                   value={interProURL}
-                  onChange={event => setInterProURL(event.target.value)}
+                  onChange={event => {
+                    setInterProURL(event.target.value)
+                  }}
                 />
               </div>
             ) : null}
@@ -81,7 +87,7 @@ const UserProvidedDomainsDialog = observer(function ({
                     type="file"
                     hidden
                     onChange={({ target }) => {
-                      const file = target?.files?.[0]
+                      const file = target.files?.[0]
                       if (file) {
                         setFile(file)
                       }
@@ -106,7 +112,7 @@ const UserProvidedDomainsDialog = observer(function ({
                   : await jsonfetch(interProURL)
 
                 model.setInterProAnnotations(
-                  Object.fromEntries(ret.results.map(r => [r.xref[0].id, r])),
+                  Object.fromEntries(ret.results.map(r => [r.xref[0]!.id, r])),
                 )
                 model.setShowDomains(true)
                 getSession(model).notify(

package/src/components/header/Header.tsx

@@ -32,7 +32,9 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
       <Spacer />
       <HeaderStatusArea model={model} />
       <IconButton
-        onClick={() => model.queueDialog(onClose => [AboutDialog, { onClose }])}
+        onClick={() => {
+          model.queueDialog(onClose => [AboutDialog, { onClose }])
+        }}
       >
         <Help />
       </IconButton>

package/src/components/header/HeaderInfoArea.tsx

@@ -13,13 +13,14 @@ const useStyles = makeStyles()({
   },
 })
 
-const HeaderInfoArea = observer(({ model }: { model: MsaViewModel }) => {
+const HeaderInfoArea = observer(function ({ model }: { model: MsaViewModel }) {
   const { mouseOverRowName, mouseCol } = model
   const { classes } = useStyles()
   return mouseOverRowName && mouseCol !== undefined ? (
     <Typography className={classes.margin}>
       {mouseOverRowName}:
-      {model.globalCoordToRowSpecificSeqCoord(mouseOverRowName, mouseCol)}
+      {model.mouseOverCoordToGapRemovedRowCoord(mouseOverRowName, mouseCol)} (
+      {model.mouseOverCoordToRowLetter(mouseOverRowName, mouseCol)})
     </Typography>
   ) : null
 })

package/src/components/header/HeaderMenu.tsx

@@ -24,24 +24,29 @@ const HeaderMenu = observer(function ({ model }: { model: MsaViewModel }) {
         {
           label: 'Return to import form',
           icon: FolderOpen,
-          onClick: () => model.reset(),
+          onClick: () => {
+            model.reset()
+          },
         },
         {
           label: 'Settings',
-          onClick: () =>
-            model.queueDialog(onClose => [SettingsDialog, { model, onClose }]),
+          onClick: () => {
+            model.queueDialog(onClose => [SettingsDialog, { model, onClose }])
+          },
           icon: Settings,
         },
         {
           label: 'Metadata',
-          onClick: () =>
-            model.queueDialog(onClose => [MetadataDialog, { model, onClose }]),
+          onClick: () => {
+            model.queueDialog(onClose => [MetadataDialog, { model, onClose }])
+          },
           icon: Assignment,
         },
         {
           label: 'Extra tracks',
-          onClick: () =>
-            model.queueDialog(onClose => [TracklistDialog, { model, onClose }]),
+          onClick: () => {
+            model.queueDialog(onClose => [TracklistDialog, { model, onClose }])
+          },
           icon: List,
         },
       ]}