react-msaview 5.5.0 → 5.6.1

package/src/stripDefaultSnapshot.test.ts

@@ -0,0 +1,57 @@
+import { getSnapshot } from '@jbrowse/mobx-state-tree'
+import { expect, test } from 'vitest'
+
+import stateModelFactory from './model.ts'
+
+const MsaView = stateModelFactory()
+
+test('default view produces a minimal snapshot (defaults stripped)', () => {
+  const model = MsaView.create({ type: 'MsaView' })
+  const snap = getSnapshot(model)
+  // only the always-present keys remain; every defaulted scalar/collection is gone
+  expect(snap.colWidth).toBeUndefined()
+  expect(snap.rowHeight).toBeUndefined()
+  expect(snap.showDomains).toBeUndefined()
+  expect(snap.colorSchemeName).toBeUndefined()
+  expect(snap.drawTree).toBeUndefined()
+  expect(snap.treeAreaWidth).toBeUndefined()
+  expect(snap.collapsed).toBeUndefined()
+  expect(snap.turnedOffTracks).toBeUndefined()
+  expect(snap.type).toBe('MsaView')
+})
+
+test('non-default values are retained in the snapshot', () => {
+  const model = MsaView.create({ type: 'MsaView' })
+  model.setColWidth(30)
+  model.setColorSchemeName('clustalx')
+  model.setDrawTree(false)
+  model.toggleCollapsed('nodeA')
+  const snap = getSnapshot(model)
+  expect(snap.colWidth).toBe(30)
+  expect(snap.colorSchemeName).toBe('clustalx')
+  expect(snap.drawTree).toBe(false)
+  expect(snap.collapsed).toEqual(['nodeA'])
+})
+
+test('setting a value back to its default strips it again', () => {
+  const model = MsaView.create({ type: 'MsaView' })
+  model.setColWidth(30)
+  expect(getSnapshot(model).colWidth).toBe(30)
+  model.setColWidth(12) // defaultColWidth
+  expect(getSnapshot(model).colWidth).toBeUndefined()
+})
+
+test('inline data is stripped when a filehandle can refetch it', () => {
+  const model = MsaView.create({
+    type: 'MsaView',
+    data: { msa: '>s1\nACGT', tree: '(a,b);' },
+    msaFilehandle: {
+      uri: 'http://example.com/x.fa',
+      locationType: 'UriLocation',
+    },
+  })
+  const snap = getSnapshot(model)
+  // msa dropped (msaFilehandle present), tree kept (no treeFilehandle)
+  expect(snap.data.msa).toBeUndefined()
+  expect(snap.data.tree).toBe('(a,b);')
+})

package/src/types.ts

@@ -15,9 +15,15 @@ export interface TextTrackModel extends BasicTrackModel {
   data?: string
 }
 
+// a track that draws a per-column bar chart (conservation, property
+// conservation). `barColor` doubles as the marker that a track is a bar track.
+export interface BarTrackModel extends BasicTrackModel {
+  barColor?: string
+}
+
 export interface BasicTrack {
   ReactComponent: React.FC<any>
-  model: TextTrackModel
+  model: TextTrackModel & BarTrackModel
 }
 
 export interface Node {

package/src/useCanvasAutorun.ts

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from 'react'
+import type React from 'react'
+
+import { autorun } from 'mobx'
+
+// Wires a canvas ref to a mobx autorun: grabs the 2d context once the canvas
+// mounts and re-runs `draw` whenever any observable it reads changes. Collapses
+// the getContext/null-guard/autorun-dispose boilerplate repeated by every
+// canvas block host. `deps` controls when the effect (and thus the context
+// lookup) is torn down and re-created, matching a normal useEffect dep array.
+export function useCanvasAutorun(
+  draw: (ctx: CanvasRenderingContext2D) => void,
+  deps: React.DependencyList,
+) {
+  const ref = useRef<HTMLCanvasElement>(null)
+  // the autorun tracks its own observable reads, so `draw` is intentionally not
+  // a dependency; `deps` alone controls when the effect re-subscribes
+  useEffect(() => {
+    const ctx = ref.current?.getContext('2d')
+    return ctx
+      ? autorun(() => {
+          draw(ctx)
+        })
+      : undefined
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, deps)
+  return ref
+}

package/src/version.ts

@@ -1 +1 @@
-export const version = '5.5.0'
+export const version = '5.6.1'

package/dist/components/dialogs/SettingsDialog.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { MsaViewModel } from '../../model.ts';
-declare const SettingsDialog: ({ model, onClose, }: {
-    model: MsaViewModel;
-    onClose: () => void;
-}) => React.JSX.Element;
-export default SettingsDialog;

package/dist/components/dialogs/SettingsDialog.js

@@ -1,100 +0,0 @@
-import React from 'react';
-import { Dialog } from '@jbrowse/core/ui';
-import { Button, DialogActions, DialogContent, MenuItem, Slider, TextField, Typography, } from '@mui/material';
-import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import colorSchemes from "../../colorSchemes.js";
-import Checkbox2 from "../Checkbox2.js";
-const useStyles = makeStyles()(theme => ({
-    field: {
-        margin: theme.spacing(4),
-    },
-    flex: {
-        display: 'flex',
-    },
-    minw: {
-        width: '80em',
-    },
-}));
-const toP = (s = 0) => +s.toFixed(1);
-const SettingsContent = observer(function ({ model }) {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TreeSettings, { model: model }),
-        React.createElement(MSASettings, { model: model })));
-});
-const TreeSettings = observer(function TreeSettings({ model, }) {
-    const { drawTree, drawLabels, drawNodeBubbles, labelsAlignRight, showBranchLen, } = model;
-    return (React.createElement("div", null,
-        React.createElement("h1", null, "Tree options"),
-        React.createElement(Checkbox2, { checked: showBranchLen, label: "Show branch length?", onChange: () => {
-                model.setShowBranchLen(!showBranchLen);
-            } }),
-        React.createElement(Checkbox2, { checked: drawNodeBubbles, label: "Draw clickable bubbles on tree branches?", onChange: () => {
-                model.setDrawNodeBubbles(!drawNodeBubbles);
-            } }),
-        React.createElement(Checkbox2, { checked: drawTree, label: "Show tree?", onChange: () => {
-                model.setDrawTree(!drawTree);
-            } }),
-        React.createElement(Checkbox2, { checked: labelsAlignRight, label: "Tree labels align right?", onChange: () => {
-                model.setLabelsAlignRight(!labelsAlignRight);
-            } }),
-        React.createElement(Checkbox2, { checked: drawLabels, label: "Draw labels", onChange: () => {
-                model.setDrawLabels(!drawLabels);
-            } })));
-});
-const MSASettings = observer(function MSASettings({ model, }) {
-    const { classes } = useStyles();
-    const { bgColor, colWidth, allowedGappyness, drawMsaLetters, colorSchemeName, hideGaps, rowHeight, } = model;
-    return (React.createElement("div", null,
-        React.createElement("h1", null, "MSA options"),
-        React.createElement(Checkbox2, { checked: drawMsaLetters, label: "Draw letters", onChange: () => {
-                model.setDrawMsaLetters(!drawMsaLetters);
-            } }),
-        React.createElement(Checkbox2, { checked: bgColor, label: "Color letters instead of background of tiles", onChange: () => {
-                model.setBgColor(!bgColor);
-            } }),
-        React.createElement(Checkbox2, { checked: hideGaps, label: "Enable hiding gappy columns?", onChange: () => {
-                model.setHideGaps(!hideGaps);
-            } }),
-        hideGaps ? (React.createElement("div", { className: classes.flex },
-            React.createElement(Typography, null,
-                "Hide columns w/ >",
-                allowedGappyness,
-                "% gaps"),
-            React.createElement(Slider, { className: classes.field, min: 1, max: 100, value: allowedGappyness, onChange: (_, val) => {
-                    model.setAllowedGappyness(val);
-                } }))) : null,
-        React.createElement("div", { className: classes.flex },
-            React.createElement(Typography, null,
-                "Column width (",
-                toP(colWidth),
-                "px)"),
-            React.createElement(Slider, { className: classes.field, min: 1, max: 50, value: colWidth, onChange: (_, val) => {
-                    model.setColWidth(val);
-                } })),
-        React.createElement("div", { className: classes.flex },
-            React.createElement(Typography, null,
-                "Row height (",
-                toP(rowHeight),
-                "px)"),
-            React.createElement(Slider, { className: classes.field, min: 1, max: 50, value: rowHeight, onChange: (_, val) => {
-                    model.setRowHeight(val);
-                } })),
-        React.createElement(TextField, { select: true, label: "Color scheme", value: colorSchemeName, onChange: event => {
-                model.setColorSchemeName(event.target.value);
-            } }, Object.keys(colorSchemes).map(option => (React.createElement(MenuItem, { key: option, value: option }, option))))));
-});
-const SettingsDialog = observer(function ({ model, onClose, }) {
-    const { classes } = useStyles();
-    return (React.createElement(Dialog, { open: true, title: "Settings", maxWidth: "xl", onClose: () => {
-            onClose();
-        } },
-        React.createElement(DialogContent, { className: classes.minw },
-            React.createElement(SettingsContent, { model: model }),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", color: "primary", onClick: () => {
-                        onClose();
-                    } }, "Submit")))));
-});
-export default SettingsDialog;
-//# sourceMappingURL=SettingsDialog.js.map

package/dist/components/dialogs/SettingsDialog.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SettingsDialog.js","sourceRoot":"","sources":["../../../src/components/dialogs/SettingsDialog.tsx"],"names":[],"mappings":"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"}

package/dist/components/header/HeaderMenu.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-import MoreVert from '@mui/icons-material/Menu';
-import Visibility from '@mui/icons-material/Visibility';
-import { observer } from 'mobx-react';
-const HeaderMenu = observer(({ model }) => {
-    const { tracks, turnedOffTracks } = model;
-    return (React.createElement(CascadingMenuButton, { menuItems: [
-            {
-                label: 'Tracks',
-                icon: Visibility,
-                type: 'subMenu',
-                subMenu: tracks.map(track => ({
-                    label: track.model.name,
-                    type: 'checkbox',
-                    checked: !turnedOffTracks.has(track.model.id),
-                    onClick: () => {
-                        model.toggleTrack(track.model.id);
-                    },
-                })),
-            },
-            ...model.extraViewMenuItems(),
-        ], anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'left' } },
-        React.createElement(MoreVert, null)));
-});
-export default HeaderMenu;
-//# sourceMappingURL=HeaderMenu.js.map

package/dist/components/header/HeaderMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeaderMenu.js","sourceRoot":"","sources":["../../../src/components/header/HeaderMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,mBAAmB,MAAM,sCAAsC,CAAA;AACtE,OAAO,QAAQ,MAAM,0BAA0B,CAAA;AAC/C,OAAO,UAAU,MAAM,gCAAgC,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,EAAE,KAAK,EAA2B,EAAE,EAAE;IACjE,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,CAAA;IACzC,OAAO,CACL,oBAAC,mBAAmB,IAClB,SAAS,EAAE;YACT;gBACE,KAAK,EAAE,QAAQ;gBACf,IAAI,EAAE,UAAU;gBAChB,IAAI,EAAE,SAAS;gBACf,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;oBAC5B,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI;oBACvB,IAAI,EAAE,UAAmB;oBACzB,OAAO,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;oBAC7C,OAAO,EAAE,GAAG,EAAE;wBACZ,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;oBACnC,CAAC;iBACF,CAAC,CAAC;aACJ;YACD,GAAG,KAAK,CAAC,kBAAkB,EAAE;SAC9B,EACD,YAAY,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,EACxD,eAAe,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE;QAExD,oBAAC,QAAQ,OAAG,CACQ,CACvB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,UAAU,CAAA"}

package/src/components/dialogs/SettingsDialog.tsx

@@ -1,234 +0,0 @@
-import React from 'react'
-
-import { Dialog } from '@jbrowse/core/ui'
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  MenuItem,
-  Slider,
-  TextField,
-  Typography,
-} from '@mui/material'
-import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
-
-import colorSchemes from '../../colorSchemes.ts'
-import Checkbox2 from '../Checkbox2.tsx'
-
-import type { MsaViewModel } from '../../model.ts'
-
-const useStyles = makeStyles()(theme => ({
-  field: {
-    margin: theme.spacing(4),
-  },
-  flex: {
-    display: 'flex',
-  },
-  minw: {
-    width: '80em',
-  },
-}))
-
-const toP = (s = 0) => +s.toFixed(1)
-
-const SettingsContent = observer(function ({ model }: { model: MsaViewModel }) {
-  return (
-    <>
-      <TreeSettings model={model} />
-      <MSASettings model={model} />
-    </>
-  )
-})
-
-const TreeSettings = observer(function TreeSettings({
-  model,
-}: {
-  model: MsaViewModel
-}) {
-  const {
-    drawTree,
-    drawLabels,
-    drawNodeBubbles,
-    labelsAlignRight,
-    showBranchLen,
-  } = model
-
-  return (
-    <div>
-      <h1>Tree options</h1>
-      <Checkbox2
-        checked={showBranchLen}
-        label="Show branch length?"
-        onChange={() => {
-          model.setShowBranchLen(!showBranchLen)
-        }}
-      />
-
-      <Checkbox2
-        checked={drawNodeBubbles}
-        label="Draw clickable bubbles on tree branches?"
-        onChange={() => {
-          model.setDrawNodeBubbles(!drawNodeBubbles)
-        }}
-      />
-      <Checkbox2
-        checked={drawTree}
-        label="Show tree?"
-        onChange={() => {
-          model.setDrawTree(!drawTree)
-        }}
-      />
-
-      <Checkbox2
-        checked={labelsAlignRight}
-        label="Tree labels align right?"
-        onChange={() => {
-          model.setLabelsAlignRight(!labelsAlignRight)
-        }}
-      />
-
-      <Checkbox2
-        checked={drawLabels}
-        label="Draw labels"
-        onChange={() => {
-          model.setDrawLabels(!drawLabels)
-        }}
-      />
-    </div>
-  )
-})
-
-const MSASettings = observer(function MSASettings({
-  model,
-}: {
-  model: MsaViewModel
-}) {
-  const { classes } = useStyles()
-  const {
-    bgColor,
-    colWidth,
-    allowedGappyness,
-    drawMsaLetters,
-    colorSchemeName,
-    hideGaps,
-    rowHeight,
-  } = model
-
-  return (
-    <div>
-      <h1>MSA options</h1>
-      <Checkbox2
-        checked={drawMsaLetters}
-        label="Draw letters"
-        onChange={() => {
-          model.setDrawMsaLetters(!drawMsaLetters)
-        }}
-      />
-      <Checkbox2
-        checked={bgColor}
-        label="Color letters instead of background of tiles"
-        onChange={() => {
-          model.setBgColor(!bgColor)
-        }}
-      />
-      <Checkbox2
-        checked={hideGaps}
-        label="Enable hiding gappy columns?"
-        onChange={() => {
-          model.setHideGaps(!hideGaps)
-        }}
-      />
-      {hideGaps ? (
-        <div className={classes.flex}>
-          <Typography>Hide columns w/ &gt;{allowedGappyness}% gaps</Typography>
-          <Slider
-            className={classes.field}
-            min={1}
-            max={100}
-            value={allowedGappyness}
-            onChange={(_, val) => {
-              model.setAllowedGappyness(val)
-            }}
-          />
-        </div>
-      ) : null}
-      <div className={classes.flex}>
-        <Typography>Column width ({toP(colWidth)}px)</Typography>
-        <Slider
-          className={classes.field}
-          min={1}
-          max={50}
-          value={colWidth}
-          onChange={(_, val) => {
-            model.setColWidth(val)
-          }}
-        />
-      </div>
-      <div className={classes.flex}>
-        <Typography>Row height ({toP(rowHeight)}px)</Typography>
-        <Slider
-          className={classes.field}
-          min={1}
-          max={50}
-          value={rowHeight}
-          onChange={(_, val) => {
-            model.setRowHeight(val)
-          }}
-        />
-      </div>
-
-      <TextField
-        select
-        label="Color scheme"
-        value={colorSchemeName}
-        onChange={event => {
-          model.setColorSchemeName(event.target.value)
-        }}
-      >
-        {Object.keys(colorSchemes).map(option => (
-          <MenuItem key={option} value={option}>
-            {option}
-          </MenuItem>
-        ))}
-      </TextField>
-    </div>
-  )
-})
-
-const SettingsDialog = observer(function ({
-  model,
-  onClose,
-}: {
-  model: MsaViewModel
-  onClose: () => void
-}) {
-  const { classes } = useStyles()
-  return (
-    <Dialog
-      open
-      title="Settings"
-      maxWidth="xl"
-      onClose={() => {
-        onClose()
-      }}
-    >
-      <DialogContent className={classes.minw}>
-        <SettingsContent model={model} />
-        <DialogActions>
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={() => {
-              onClose()
-            }}
-          >
-            Submit
-          </Button>
-        </DialogActions>
-      </DialogContent>
-    </Dialog>
-  )
-})
-
-export default SettingsDialog

package/src/components/header/HeaderMenu.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
-import MoreVert from '@mui/icons-material/Menu'
-import Visibility from '@mui/icons-material/Visibility'
-import { observer } from 'mobx-react'
-
-import type { MsaViewModel } from '../../model.ts'
-
-const HeaderMenu = observer(({ model }: { model: MsaViewModel }) => {
-  const { tracks, turnedOffTracks } = model
-  return (
-    <CascadingMenuButton
-      menuItems={[
-        {
-          label: 'Tracks',
-          icon: Visibility,
-          type: 'subMenu',
-          subMenu: tracks.map(track => ({
-            label: track.model.name,
-            type: 'checkbox' as const,
-            checked: !turnedOffTracks.has(track.model.id),
-            onClick: () => {
-              model.toggleTrack(track.model.id)
-            },
-          })),
-        },
-        ...model.extraViewMenuItems(),
-      ]}
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-      transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-    >
-      <MoreVert />
-    </CascadingMenuButton>
-  )
-})
-
-export default HeaderMenu