react-msaview 3.2.0 → 3.2.1

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,
         },
       ]}

package/src/components/header/HeaderMenuExtra.tsx

@@ -36,32 +36,38 @@ const HeaderMenuExtra = observer(({ 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,
         },
 
         {
           label: 'Export SVG',
           icon: PhotoCamera,
-          onClick: () =>
-            model.queueDialog(onClose => [ExportSVGDialog, { onClose, model }]),
+          onClick: () => {
+            model.queueDialog(onClose => [ExportSVGDialog, { onClose, model }])
+          },
         },
         {
           label: 'Features/protein domains',
@@ -70,20 +76,22 @@ const HeaderMenuExtra = observer(({ model }: { model: MsaViewModel }) => {
             {
               label: 'Open domains...',
               icon: FolderOpen,
-              onClick: () =>
+              onClick: () => {
                 model.queueDialog(handleClose => [
                   UserProvidedDomainsDialog,
                   { handleClose, model },
-                ]),
+                ])
+              },
             },
             {
               label: 'Query InterProScan for domains...',
               icon: Search,
-              onClick: () =>
+              onClick: () => {
                 model.queueDialog(handleClose => [
                   InterProScanDialog,
                   { handleClose, model },
-                ]),
+                ])
+              },
             },
             {
               label: `Show domains${noDomains ? ' (no domains loaded)' : ''}`,
@@ -91,7 +99,9 @@ const HeaderMenuExtra = observer(({ model }: { model: MsaViewModel }) => {
               icon: Visibility,
               checked: actuallyShowDomains ? showDomains : false,
               type: 'checkbox',
-              onClick: () => model.setShowDomains(!showDomains),
+              onClick: () => {
+                model.setShowDomains(!showDomains)
+              },
             },
             {
               label: `Use sub-row layout${noDomains ? ' (no domains loaded)' : ''}`,
@@ -99,7 +109,9 @@ const HeaderMenuExtra = observer(({ model }: { model: MsaViewModel }) => {
               checked: actuallyShowDomains ? subFeatureRows : false,
               icon: Sort,
               type: 'checkbox',
-              onClick: () => model.setSubFeatureRows(!subFeatureRows),
+              onClick: () => {
+                model.setSubFeatureRows(!subFeatureRows)
+              },
             },
             {
               label: `Filter domains${noDomains ? ' (no domains loaded)' : ''}`,
@@ -114,7 +126,7 @@ const HeaderMenuExtra = observer(({ model }: { model: MsaViewModel }) => {
             },
           ],
         },
-        ...(model.extraViewMenuItems?.() || []),
+        ...model.extraViewMenuItems(),
       ]}
     >
       <MoreVert />

package/src/components/header/ZoomControls.tsx

@@ -19,30 +19,46 @@ const ZoomControls = observer(function ZoomControls({
 }) {
   return (
     <>
-      <IconButton onClick={() => model.zoomIn()}>
+      <IconButton
+        onClick={() => {
+          model.zoomIn()
+        }}
+      >
         <ZoomIn />
       </IconButton>
-      <IconButton onClick={() => model.zoomOut()}>
+      <IconButton
+        onClick={() => {
+          model.zoomOut()
+        }}
+      >
         <ZoomOut />
       </IconButton>
       <CascadingMenuButton
         menuItems={[
           {
             label: 'Zoom in horizontal',
-            onClick: () => model.zoomInHorizontal(),
+            onClick: () => {
+              model.zoomInHorizontal()
+            },
           },
           {
             label: 'Zoom in vertical',
-            onClick: () => model.zoomInVertical(),
+            onClick: () => {
+              model.zoomInVertical()
+            },
           },
           {
             label: 'Zoom out horizontal',
-            onClick: () => model.zoomOutHorizontal(),
+            onClick: () => {
+              model.zoomOutHorizontal()
+            },
           },
 
           {
             label: 'Zoom out vertical',
-            onClick: () => model.zoomOutVertical(),
+            onClick: () => {
+              model.zoomOutVertical()
+            },
           },
           {
             label: 'Reset zoom to default',