react-msaview 3.1.4 → 3.1.6

package/src/components/dialogs/SettingsDialog.tsx

@@ -35,142 +35,146 @@ function FormControlLabel2(rest: FormControlLabelProps) {
   )
 }
 
+function Checkbox2({
+  checked,
+  label,
+  onChange,
+}: {
+  checked: boolean
+  label: string
+  onChange: () => void
+}) {
+  return (
+    <FormControlLabel2
+      control={<Checkbox checked={checked} onChange={onChange} />}
+      label={label}
+    />
+  )
+}
+
 const SettingsContent = observer(function ({ model }: { model: MsaViewModel }) {
+  return (
+    <>
+      <TreeSettings model={model} />
+      <MSASettings model={model} />
+    </>
+  )
+})
+
+function TreeSettings({ model }: { model: MsaViewModel }) {
   const { classes } = useStyles()
   const {
-    bgColor,
-    colWidth,
-    colorSchemeName,
     drawTree,
     drawNodeBubbles,
     labelsAlignRight,
     noTree,
-    rowHeight,
     showBranchLen,
     treeWidthMatchesArea,
     treeWidth,
   } = model
+
   return (
-    <>
-      <div>
-        <Button onClick={() => model.clearHidden()}>Clear hidden</Button>
-        <h1>Tree options</h1>
-        <FormControlLabel2
-          control={
-            <Checkbox
-              checked={showBranchLen}
-              onChange={() => model.setShowBranchLen(!showBranchLen)}
-            />
-          }
-          label="Show branch length?"
-        />
+    <div>
+      <h1>Tree options</h1>
+      <Checkbox2
+        checked={showBranchLen}
+        onChange={() => model.setShowBranchLen(!showBranchLen)}
+        label="Show branch length?"
+      />
 
-        <FormControlLabel2
-          control={
-            <Checkbox
-              checked={drawNodeBubbles}
-              onChange={() => model.setDrawNodeBubbles(!drawNodeBubbles)}
-            />
-          }
-          label="Draw clickable bubbles on tree branches?"
-        />
-        <FormControlLabel2
-          control={
-            <Checkbox
-              checked={drawTree}
-              onChange={() => model.setDrawTree(!drawTree)}
-            />
-          }
-          label="Show tree?"
-        />
+      <Checkbox2
+        checked={drawNodeBubbles}
+        onChange={() => model.setDrawNodeBubbles(!drawNodeBubbles)}
+        label="Draw clickable bubbles on tree branches?"
+      />
+      <Checkbox2
+        checked={drawTree}
+        onChange={() => model.setDrawTree(!drawTree)}
+        label="Show tree?"
+      />
 
-        <FormControlLabel2
-          control={
-            <Checkbox
-              checked={labelsAlignRight}
-              onChange={() => model.setLabelsAlignRight(!labelsAlignRight)}
-            />
-          }
-          label="Tree labels align right?"
-        />
-        {!noTree ? (
-          <div>
-            <FormControlLabel2
-              control={
-                <Checkbox
-                  checked={treeWidthMatchesArea}
-                  onChange={() =>
-                    model.setTreeWidthMatchesArea(!treeWidthMatchesArea)
-                  }
-                />
-              }
-              label="Make tree width fit to tree area?"
-            />
-            {!treeWidthMatchesArea ? (
-              <div className={classes.flex}>
-                <Typography>Tree width ({treeWidth}px)</Typography>
-                <Slider
-                  className={classes.field}
-                  min={50}
-                  max={600}
-                  value={treeWidth}
-                  onChange={(_, val) => model.setTreeWidth(val as number)}
-                />
-              </div>
-            ) : null}
-          </div>
-        ) : null}
-      </div>
-      <div>
-        <h1>MSA options</h1>
-
-        <FormControlLabel2
-          control={
-            <Checkbox
-              checked={bgColor}
-              onChange={() => model.setBgColor(!bgColor)}
-            />
-          }
-          label="Color background tiles of MSA?"
-        />
-
-        <div className={classes.flex}>
-          <Typography>Column width ({colWidth}px)</Typography>
-          <Slider
-            className={classes.field}
-            min={1}
-            max={50}
-            value={colWidth}
-            onChange={(_, val) => model.setColWidth(val as number)}
-          />
-        </div>
-        <div className={classes.flex}>
-          <Typography>Row height ({rowHeight}px)</Typography>
-          <Slider
-            className={classes.field}
-            min={1}
-            max={50}
-            value={rowHeight}
-            onChange={(_, val) => model.setRowHeight(val as number)}
+      <Checkbox2
+        checked={labelsAlignRight}
+        onChange={() => model.setLabelsAlignRight(!labelsAlignRight)}
+        label="Tree labels align right?"
+      />
+      {!noTree ? (
+        <div>
+          <Checkbox2
+            checked={treeWidthMatchesArea}
+            onChange={() =>
+              model.setTreeWidthMatchesArea(!treeWidthMatchesArea)
+            }
+            label="Make tree width fit to tree area?"
           />
+          {!treeWidthMatchesArea ? (
+            <div className={classes.flex}>
+              <Typography>Tree width ({treeWidth}px)</Typography>
+              <Slider
+                className={classes.field}
+                min={50}
+                max={600}
+                value={treeWidth}
+                onChange={(_, val) => model.setTreeWidth(val as number)}
+              />
+            </div>
+          ) : null}
         </div>
+      ) : null}
+    </div>
+  )
+}
+
+function MSASettings({ model }: { model: MsaViewModel }) {
+  const { classes } = useStyles()
+  const { bgColor, colWidth, colorSchemeName, rowHeight } = model
+
+  return (
+    <div>
+      <h1>MSA options</h1>
+
+      <Checkbox2
+        checked={bgColor}
+        onChange={() => model.setBgColor(!bgColor)}
+        label="Color background tiles of MSA?"
+      />
 
-        <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 className={classes.flex}>
+        <Typography>Column width ({colWidth}px)</Typography>
+        <Slider
+          className={classes.field}
+          min={1}
+          max={50}
+          value={colWidth}
+          onChange={(_, val) => model.setColWidth(val as number)}
+        />
       </div>
-    </>
+      <div className={classes.flex}>
+        <Typography>Row height ({rowHeight}px)</Typography>
+        <Slider
+          className={classes.field}
+          min={1}
+          max={50}
+          value={rowHeight}
+          onChange={(_, val) => model.setRowHeight(val as number)}
+        />
+      </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,

package/src/measureTextCanvas.ts

@@ -1,6 +1,6 @@
 let canvasHandle: HTMLCanvasElement | undefined
 
-export default function measureTextCanvas(text: string, fontSize: number) {
+export function measureTextCanvas(text: string, fontSize: number) {
   if (!canvasHandle) {
     canvasHandle = document.createElement('canvas')
   }

package/src/model.ts

@@ -1,10 +1,12 @@
 import React from 'react'
 import { autorun } from 'mobx'
-import { Instance, cast, types, addDisposer, SnapshotIn } from 'mobx-state-tree'
+import { Instance, cast, types, addDisposer } from 'mobx-state-tree'
 import { hierarchy, cluster, HierarchyNode } from 'd3-hierarchy'
 import { ascending } from 'd3-array'
 import Stockholm from 'stockholm-js'
 import { saveAs } from 'file-saver'
+import { Theme } from '@mui/material'
+
 // jbrowse
 import { FileLocation, ElementId } from '@jbrowse/core/util/types/mst'
 import { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
@@ -16,7 +18,6 @@ import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewMo
 import {
   clamp,
   collapse,
-  filterHiddenLeafNodes,
   generateNodeIds,
   maxLength,
   setBrLength,
@@ -24,20 +25,26 @@ import {
   NodeWithIds,
   NodeWithIdsAndLength,
 } from './util'
+
+import { blocksX, blocksY } from './calculateBlocks'
+import { measureTextCanvas } from './measureTextCanvas'
+
+// components
 import TextTrack from './components/TextTrack'
 import BoxTrack from './components/BoxTrack'
+
+// parsers
 import ClustalMSA from './parsers/ClustalMSA'
 import StockholmMSA from './parsers/StockholmMSA'
 import FastaMSA from './parsers/FastaMSA'
 import parseNewick from './parseNewick'
 import colorSchemes from './colorSchemes'
+
+// models
 import { UniprotTrack } from './UniprotTrack'
-import { StructureModel } from './StructureModel'
+import { DataModelF } from './DataModel'
 import { DialogQueueSessionMixin } from './DialogQueue'
-import { renderToSvg } from './renderToSvg'
-import { Theme } from '@mui/material'
-import { blocksX, blocksY } from './calculateBlocks'
-import measureTextCanvas from './measureTextCanvas'
+import { SelectedStructuresMixin } from './SelectedStructuresMixin'
 
 export interface RowDetails {
   [key: string]: unknown
@@ -82,16 +89,30 @@ export interface IBoxTrack {
 
 export type BasicTrack = IBoxTrack | ITextTrack
 
-export type StructureSnap = SnapshotIn<typeof StructureModel>
-
 /**
  * #stateModel MsaView
  * extends
  * - BaseViewModel
  * - DialogQueueSessionMixin
+ * - SelectedStructuresMixin
  */
 function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
 
+function reparseTree(tree: NodeWithIds): NodeWithIds {
+  return {
+    ...tree,
+    branchset: tree.branchset.map(r =>
+      r.branchset.length
+        ? reparseTree(r)
+        : {
+            branchset: [r],
+            id: `${r.id}-leafnode`,
+            name: `${r.name}-hidden`,
+          },
+    ),
+  }
+}
+
 export type DialogComponentType =
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   | React.LazyExoticComponent<React.FC<any>>
@@ -102,6 +123,7 @@ const model = types
   .compose(
     BaseViewModel,
     DialogQueueSessionMixin(),
+    SelectedStructuresMixin(),
     types.model('MsaView', {
       /**
        * #property
@@ -157,12 +179,6 @@ const model = types
        */
       scrollX: 0,
 
-      /**
-       * #property
-       * currently "selected" structures, generally PDB 3-D protein structures
-       */
-      selectedStructures: types.array(StructureModel),
-
       /**
        * #property
        * right-align the labels
@@ -244,12 +260,7 @@ const model = types
        */
       collapsed: types.array(types.string),
 
-      /**
-       * #property
-       * array of leaf nodes that are 'hidden', similar to collapsed but for leaf nodes
-       */
-      hidden: types.array(types.string),
-
+      collapsed2: types.array(types.string),
       /**
        * #property
        * focus on particular subtree
@@ -274,26 +285,7 @@ const model = types
        * data from the loaded tree/msa/treeMetadata, generally loaded by
        * autorun
        */
-      data: types.optional(
-        types
-          .model({
-            tree: types.maybe(types.string),
-            msa: types.maybe(types.string),
-            treeMetadata: types.maybe(types.string),
-          })
-          .actions(self => ({
-            setTree(tree?: string) {
-              self.tree = tree
-            },
-            setMSA(msa?: string) {
-              self.msa = msa
-            },
-            setTreeMetadata(treeMetadata?: string) {
-              self.treeMetadata = treeMetadata
-            },
-          })),
-        { tree: '', msa: '' },
-      ),
+      data: types.optional(DataModelF(), { tree: '', msa: '' }),
     }),
   )
   .volatile(() => ({
@@ -321,6 +313,18 @@ const model = types
      */
     mouseCol: undefined as number | undefined,
 
+    /**
+     * #volatile
+     * the currently mouse-click row
+     */
+    mouseClickRow: undefined as number | undefined,
+
+    /**
+     * #volatile
+     * the currently mouse-click column
+     */
+    mouseClickCol: undefined as number | undefined,
+
     /**
      * #volatile
      * a dummy variable that is incremented when ref changes so autorun for
@@ -333,6 +337,11 @@ const model = types
      */
     minimapHeight: 56,
 
+    /**
+     * #volatile
+     */
+    marginLeft: 20,
+
     /**
      * #volatile
      */
@@ -352,49 +361,6 @@ const model = types
       self.height = height
     },
 
-    /**
-     * #action
-     * add to the selected structures
-     */
-    addStructureToSelection(elt: StructureSnap) {
-      self.selectedStructures.push(elt)
-    },
-
-    /**
-     * #action
-     * remove from the selected structures
-     */
-    removeStructureFromSelection(elt: StructureSnap) {
-      const r = self.selectedStructures.find(node => node.id === elt.id)
-      if (r) {
-        self.selectedStructures.remove(r)
-      }
-    },
-
-    /**
-     * #action
-     * toggle a structure from the selected structures list
-     */
-    toggleStructureSelection(elt: {
-      id: string
-      structure: { startPos: number; endPos: number; pdb: string }
-    }) {
-      const r = self.selectedStructures.find(node => node.id === elt.id)
-      if (r) {
-        self.selectedStructures.remove(r)
-      } else {
-        self.selectedStructures.push(elt)
-      }
-    },
-
-    /**
-     * #action
-     * clear all selected structures
-     */
-    clearSelectedStructures() {
-      self.selectedStructures = cast([])
-    },
-
     /**
      * #action
      * set error state
@@ -412,6 +378,15 @@ const model = types
       self.mouseRow = row
     },
 
+    /**
+     * #action
+     * set mouse click position (row, column) in the MSA
+     */
+    setMouseClickPos(col?: number, row?: number) {
+      self.mouseClickCol = col
+      self.mouseClickRow = row
+    },
+
     /**
      * #action
      * set row height (px)
@@ -488,20 +463,6 @@ const model = types
       self.drawTree = arg
     },
 
-    /**
-     * #action
-     */
-    hideNode(arg: string) {
-      self.hidden.push(arg)
-    },
-
-    /**
-     * #action
-     */
-    clearHidden() {
-      self.hidden.clear()
-    },
-
     /**
      * #action
      */
@@ -513,6 +474,16 @@ const model = types
       }
     },
 
+    /**
+     * #action
+     */
+    toggleCollapsed2(node: string) {
+      if (self.collapsed2.includes(node)) {
+        self.collapsed2.remove(node)
+      } else {
+        self.collapsed2.push(node)
+      }
+    },
     /**
      * #action
      */
@@ -675,7 +646,7 @@ const model = types
      * #getter
      */
     get _tree(): NodeWithIds {
-      return self.data.tree
+      const ret = self.data.tree
         ? generateNodeIds(parseNewick(self.data.tree))
         : this.MSA?.getTree() || {
             noTree: true,
@@ -683,6 +654,7 @@ const model = types
             id: 'empty',
             name: 'empty',
           }
+      return reparseTree(ret)
     },
     /**
      * #getter
@@ -721,18 +693,13 @@ const model = types
         }
       }
 
-      if (self.collapsed.length) {
-        self.collapsed
+      if (self.collapsed.length || self.collapsed2.length) {
+        ;[...self.collapsed, ...self.collapsed2]
           .map(collapsedId => hier.find(node => node.data.id === collapsedId))
           .filter(notEmpty)
           .map(node => collapse(node))
       }
-      if (self.hidden.length) {
-        self.hidden
-          .map(hiddenId => hier.find(node => node.data.id === hiddenId))
-          .filter(notEmpty)
-          .map(node => filterHiddenLeafNodes(node.parent, node.id))
-      }
+
       return hier
     },
     /**
@@ -758,6 +725,13 @@ const model = types
     get msaAreaWidth() {
       return self.width - self.treeAreaWidth
     },
+
+    /**
+     * #getter
+     */
+    get treeAreaWidthMinusMargin() {
+      return self.treeAreaWidth - self.marginLeft
+    },
     /**
      * #getter
      */
@@ -1148,7 +1122,7 @@ const model = types
     relativePxToBp(rowName: string, position: number) {
       const { rowNames, rows } = self
       const index = rowNames.indexOf(rowName)
-      if (index !== -1) {
+      if (index !== -1 && rows[index]) {
         const row = rows[index][1]
 
         let k = 0
@@ -1170,7 +1144,7 @@ const model = types
     relativePxToBp2(rowName: string, position: number) {
       const { rowNames, rows } = self
       const index = rowNames.indexOf(rowName)
-      if (index !== -1) {
+      if (index !== -1 && rows[index]) {
         const row = rows[index][1]
 
         let k = 0
@@ -1219,6 +1193,7 @@ const model = types
       includeMinimap?: boolean
       exportType: string
     }) {
+      const { renderToSvg } = await import('./renderToSvg')
       const html = await renderToSvg(self as MsaViewModel, opts)
       const blob = new Blob([html], { type: 'image/svg+xml' })
       saveAs(blob, 'image.svg')
@@ -1286,7 +1261,10 @@ const model = types
         autorun(async () => {
           if (self.treeWidthMatchesArea) {
             self.setTreeWidth(
-              Math.max(50, self.treeAreaWidth - self.labelsWidth - 10),
+              Math.max(
+                50,
+                self.treeAreaWidth - self.labelsWidth - 10 - self.marginLeft,
+              ),
             )
           }
         }),

package/src/parsers/ClustalMSA.ts

@@ -60,20 +60,6 @@ export default class ClustalMSA {
   }
 
   get tracks() {
-    return this.seqConsensus?.trim()
-      ? [
-          {
-            id: 'seqConsensus',
-            name: 'Sequence consensus',
-            data: this.seqConsensus,
-            customColorScheme: {
-              '*': 'white',
-              ':': 'grey',
-              '.': 'darkgrey',
-              ' ': 'black',
-            },
-          },
-        ]
-      : []
+    return []
   }
 }

package/src/util.ts

@@ -145,17 +145,6 @@ export function collapse(d: HierarchyNode<NodeWithIds>) {
   }
 }
 
-// Collapse the node and all it's children, from
-// https://bl.ocks.org/d3noob/43a860bc0024792f8803bba8ca0d5ecd
-export function filterHiddenLeafNodes(
-  d: HierarchyNode<NodeWithIds> | null,
-  hiddenId?: string,
-) {
-  if (d?.children) {
-    d.children = d.children.filter(f => f.id !== hiddenId)
-  }
-}
-
 export function clamp(min: number, num: number, max: number) {
   return Math.min(Math.max(num, min), max)
 }

package/src/version.ts

@@ -1 +1 @@
-export const version = '3.1.4'
+export const version = '3.1.6'