react-msaview 3.1.7 → 3.1.8

package/src/model.ts

@@ -1,5 +1,5 @@
 import React from 'react'
-import { autorun } from 'mobx'
+import { autorun, transaction } from 'mobx'
 import { Instance, cast, types, addDisposer } from 'mobx-state-tree'
 import { hierarchy, cluster, HierarchyNode } from 'd3-hierarchy'
 import { ascending } from 'd3-array'
@@ -11,8 +11,13 @@ import { Theme } from '@mui/material'
 import { FileLocation, ElementId } from '@jbrowse/core/util/types/mst'
 import { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
 import { openLocation } from '@jbrowse/core/util/io'
-import { notEmpty, sum } from '@jbrowse/core/util'
-import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel'
+import {
+  groupBy,
+  localStorageGetItem,
+  localStorageSetItem,
+  notEmpty,
+  sum,
+} from '@jbrowse/core/util'
 
 // locals
 import {
@@ -24,14 +29,16 @@ import {
   skipBlanks,
   NodeWithIds,
   NodeWithIdsAndLength,
+  len,
 } from './util'
-
+import { colord } from 'colord'
+import { reparseTree } from './reparseTree'
 import { blocksX, blocksY } from './calculateBlocks'
 import { measureTextCanvas } from './measureTextCanvas'
+import palettes from './ggplotPalettes'
 
 // components
 import TextTrack from './components/TextTrack'
-import BoxTrack from './components/BoxTrack'
 
 // parsers
 import ClustalMSA from './parsers/ClustalMSA'
@@ -41,1257 +48,1248 @@ import parseNewick from './parseNewick'
 import colorSchemes from './colorSchemes'
 
 // models
-import { UniprotTrack } from './UniprotTrack'
-import { DataModelF } from './DataModel'
-import { DialogQueueSessionMixin } from './DialogQueue'
-import { SelectedStructuresMixin } from './SelectedStructuresMixin'
+import { DataModelF } from './model/DataModel'
+import { DialogQueueSessionMixin } from './model/DialogQueue'
+import { TreeF } from './model/treeModel'
+import { MSAModelF } from './model/msaModel'
+import {
+  InterProScanResults,
+  launchInterProScan,
+  loadInterProScanResults,
+} from './launchInterProScan'
 
-export interface RowDetails {
-  [key: string]: unknown
+interface Accession {
+  accession: string
   name: string
-  range?: { start: number; end: number }
+  description: string
 }
-
 export interface BasicTrackModel {
   id: string
   name: string
   associatedRowName?: string
   height: number
 }
-export interface Structure {
-  pdb: string
-  startPos: number
-  endPos: number
-}
 
 export interface TextTrackModel extends BasicTrackModel {
   customColorScheme?: Record<string, string>
   data: string
 }
 
-export interface BoxTrackModel extends BasicTrackModel {
-  features: {
-    start: number
-    end: number
-  }[]
-}
 export interface ITextTrack {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ReactComponent: React.FC<any>
   model: TextTrackModel
 }
 
-export interface IBoxTrack {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ReactComponent: React.FC<any>
-  model: BoxTrackModel
-}
-
-export type BasicTrack = IBoxTrack | ITextTrack
+export type BasicTrack = ITextTrack
 
 /**
  * #stateModel MsaView
  * extends
- * - BaseViewModel
  * - DialogQueueSessionMixin
- * - SelectedStructuresMixin
+ * - MSAModel
+ * - Tree
  */
-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`,
-          },
-    ),
-  }
-}
+function stateModelFactory() {
+  return types
+    .compose(
+      DialogQueueSessionMixin(),
+      TreeF(),
+      MSAModelF(),
+      types.model('MsaView', {
+        /**
+         * #property
+         * id of view, randomly generated if not provided
+         */
+        id: ElementId,
+        /**
+         * #property
+         */
+        featureMode: false,
+        /**
+         * #property
+         */
+        subFeatureRows: false,
+
+        /**
+         * #property
+         * hardcoded view type
+         */
+        type: types.literal('MsaView'),
+
+        /**
+         * #property
+         * height of the div containing the view, px
+         */
+        height: types.optional(types.number, 550),
+
+        /**
+         * #property
+         * height of each row, px
+         */
+        rowHeight: 20,
+
+        /**
+         * #property
+         * scroll position, Y-offset, px
+         */
+        scrollY: 0,
+
+        /**
+         * #property
+         * scroll position, X-offset, px
+         */
+        scrollX: 0,
+
+        /**
+         * #property
+         * width of columns, px
+         */
+        colWidth: 16,
+
+        /**
+         * #property
+         * filehandle object for the tree
+         */
+        treeFilehandle: types.maybe(FileLocation),
+
+        /**
+         * #property
+         * filehandle object for the MSA (which could contain a tree e.g. with
+         * stockholm files)
+         */
+        msaFilehandle: types.maybe(FileLocation),
+
+        /**
+         * #property
+         * filehandle object for tree metadata
+         */
+        treeMetadataFilehandle: types.maybe(FileLocation),
+
+        /**
+         * #property
+         *
+         */
+        currentAlignment: 0,
+
+        /**
+         * #property
+         * array of tree parent nodes that are 'collapsed'
+         */
+        collapsed: types.array(types.string),
+
+        /**
+         * #property
+         * array of tree leaf nodes that are 'collapsed'
+         */
+        collapsed2: types.array(types.string),
+        /**
+         * #property
+         * focus on particular subtree
+         */
+        showOnly: types.maybe(types.string),
+        /**
+         * #property
+         * turned off tracks
+         */
+        turnedOffTracks: types.map(types.boolean),
+
+        /**
+         * #property
+         * data from the loaded tree/msa/treeMetadata, generally loaded by
+         * autorun
+         */
+        data: types.optional(DataModelF(), { tree: '', msa: '' }),
+        /**
+         * #property
+         */
+        featureFilters: types.map(types.boolean),
+      }),
+    )
+    .volatile(() => ({
+      status: undefined as { msg: string; url?: string } | undefined,
+      /**
+       * #volatile
+       * high resolution scale factor, helps make canvas look better on hi-dpi
+       * screens
+       */
+      highResScaleFactor: 1,
+      /**
+       * #volatile
+       */
+      loadingMSA: false,
+      /**
+       * #volatile
+       */
+      loadingTree: false,
+      /**
+       * #volatile
+       */
+      width: 800,
+      /**
+       * #volatile
+       * resize handle width between tree and msa area, px
+       */
+      resizeHandleWidth: 5,
 
-export type DialogComponentType =
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  | React.LazyExoticComponent<React.FC<any>>
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  | React.FC<any>
+      /**
+       * #volatile
+       * size of blocks of content to be drawn, px
+       */
+      blockSize: 1000,
 
-const model = types
-  .compose(
-    BaseViewModel,
-    DialogQueueSessionMixin(),
-    SelectedStructuresMixin(),
-    types.model('MsaView', {
       /**
-       * #property
-       * id of view, randomly generated if not provided
+       * #volatile
+       * the currently mouse-hovered row
        */
-      id: ElementId,
+      mouseRow: undefined as number | undefined,
 
       /**
-       * #property
-       * hardcoded view type
+       * #volatile
+       * the currently mouse-hovered column
        */
-      type: types.literal('MsaView'),
+      mouseCol: undefined as number | undefined,
 
       /**
-       * #property
-       * height of the div containing the view, px
+       * #volatile
+       * the currently mouse-click row
        */
-      height: types.optional(types.number, 550),
+      mouseClickRow: undefined as number | undefined,
 
       /**
-       * #property
-       * width of the area the tree is drawn in, px
+       * #volatile
+       * the currently mouse-click column
        */
-      treeAreaWidth: types.optional(types.number, 400),
+      mouseClickCol: undefined as number | undefined,
 
       /**
-       * #property
-       * width of the tree within the treeArea, px
+       * #volatile
+       * a dummy variable that is incremented when ref changes so autorun for
+       * drawing canvas commands will run
        */
-      treeWidth: types.optional(types.number, 300),
+      nref: 0,
 
       /**
-       * #getter
-       * synchronization that matches treeWidth to treeAreaWidth
+       * #volatile
        */
-      treeWidthMatchesArea: true,
+      minimapHeight: 56,
 
       /**
-       * #property
-       * height of each row, px
+       * #volatile
        */
-      rowHeight: 20,
+      marginLeft: 20,
 
       /**
-       * #property
-       * scroll position, Y-offset, px
+       * #volatile
        */
-      scrollY: 0,
+      error: undefined as unknown,
 
       /**
-       * #property
-       * scroll position, X-offset, px
+       * #volatile
        */
-      scrollX: 0,
+      annotPos: undefined as { left: number; right: number } | undefined,
 
       /**
-       * #property
-       * right-align the labels
+       * #volatile
+       *
+       */
+      loadedInterProAnnotations: undefined as
+        | undefined
+        | Record<string, InterProScanResults>,
+      /**
+       * #volatile
+       */
+      interProScanJobIds: JSON.parse(
+        localStorageGetItem('msaview-interproscanqueries') || '[]',
+      ) as { jobId: string; date: number }[],
+    }))
+    .actions(self => ({
+      /**
+       * #action
+       */
+      setLoadingMSA(arg: boolean) {
+        self.loadingMSA = arg
+      },
+      /**
+       * #action
+       */
+      setLoadingTree(arg: boolean) {
+        self.loadingTree = arg
+      },
+      /**
+       * #action
        */
-      labelsAlignRight: false,
+      setWidth(arg: number) {
+        self.width = arg
+      },
+      /**
+       * #action
+       * set the height of the view in px
+       */
+      setHeight(height: number) {
+        self.height = height
+      },
 
       /**
-       * #property
-       * width of columns, px
+       * #action
+       * set error state
        */
-      colWidth: 16,
+      setError(error?: unknown) {
+        self.error = error
+      },
 
       /**
-       * #property
-       * use "branch length" e.g. evolutionary distance to draw tree branch
-       * lengths. if false, the layout is a "cladogram" that does not take into
-       * account evolutionary distances
+       * #action
+       * set mouse position (row, column) in the MSA
        */
-      showBranchLen: true,
+      setMousePos(col?: number, row?: number) {
+        self.mouseCol = col
+        self.mouseRow = row
+      },
       /**
-       * #property
-       * draw MSA tiles with a background color
+       * #action
        */
-      bgColor: true,
+      setFeatureMode(arg: boolean) {
+        self.featureMode = arg
+      },
 
       /**
-       * #property
-       * draw tree, boolean
+       * #action
+       */
+      setSubFeatureRows(arg: boolean) {
+        self.subFeatureRows = arg
+      },
+      /**
+       * #action
+       * set mouse click position (row, column) in the MSA
        */
-      drawTree: true,
+      setMouseClickPos(col?: number, row?: number) {
+        self.mouseClickCol = col
+        self.mouseClickRow = row
+      },
 
       /**
-       * #property
-       * draw clickable node bubbles on the tree
+       * #action
+       * set row height (px)
        */
-      drawNodeBubbles: true,
+      setRowHeight(n: number) {
+        self.rowHeight = n
+      },
 
       /**
-       * #property
-       * high resolution scale factor, helps make canvas look better on hi-dpi
-       * screens
+       * #action
+       * set col width (px)
        */
-      highResScaleFactor: 2,
+      setColWidth(n: number) {
+        self.colWidth = n
+      },
 
       /**
-       * #property
-       * default color scheme name
+       * #action
+       * set scroll Y-offset (px)
        */
-      colorSchemeName: 'maeditor',
+      setScrollY(n: number) {
+        self.scrollY = n
+      },
 
       /**
-       * #property
-       * filehandle object for the tree
+       * #action
+       *
        */
-      treeFilehandle: types.maybe(FileLocation),
+      setCurrentAlignment(n: number) {
+        self.currentAlignment = n
+      },
 
       /**
-       * #property
-       * filehandle object for the MSA (which could contain a tree e.g. with
-       * stockholm files)
+       * #action
        */
-      msaFilehandle: types.maybe(FileLocation),
+      toggleCollapsed(node: string) {
+        if (self.collapsed.includes(node)) {
+          self.collapsed.remove(node)
+        } else {
+          self.collapsed.push(node)
+        }
+      },
 
       /**
-       * #property
-       * filehandle object for tree metadata
+       * #action
        */
-      treeMetadataFilehandle: types.maybe(FileLocation),
+      toggleCollapsed2(node: string) {
+        if (self.collapsed2.includes(node)) {
+          self.collapsed2.remove(node)
+        } else {
+          self.collapsed2.push(node)
+        }
+      },
+      /**
+       * #action
+       */
+      setShowOnly(node?: string) {
+        self.showOnly = node
+      },
 
       /**
-       * #property
-       *
+       * #action
        */
-      currentAlignment: 0,
+      setData(data: { msa?: string; tree?: string }) {
+        self.data = cast(data)
+      },
 
       /**
-       * #property
-       * array of tree nodes that are 'collapsed'
+       * #action
        */
-      collapsed: types.array(types.string),
-
-      collapsed2: types.array(types.string),
+      setMSAFilehandle(msaFilehandle?: FileLocationType) {
+        self.msaFilehandle = msaFilehandle
+      },
+
       /**
-       * #property
-       * focus on particular subtree
-       */
-      showOnly: types.maybe(types.string),
-
-      /**
-       * #property
-       * a list of "tracks" to display, as box-like glyphs (e.g. protein
-       * domains)
-       */
-      boxTracks: types.array(UniprotTrack),
-
-      /**
-       * #property
-       * turned off tracks
-       */
-      turnedOffTracks: types.map(types.boolean),
-
-      /**
-       * #property
-       * data from the loaded tree/msa/treeMetadata, generally loaded by
-       * autorun
-       */
-      data: types.optional(DataModelF(), { tree: '', msa: '' }),
-    }),
-  )
-  .volatile(() => ({
-    /**
-     * #volatile
-     * resize handle width between tree and msa area, px
-     */
-    resizeHandleWidth: 5,
-
-    /**
-     * #volatile
-     * size of blocks of content to be drawn, px
-     */
-    blockSize: 1000,
-
-    /**
-     * #volatile
-     * the currently mouse-hovered row
-     */
-    mouseRow: undefined as number | undefined,
-
-    /**
-     * #volatile
-     * the currently mouse-hovered column
-     */
-    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
-     * drawing canvas commands will run
-     */
-    nref: 0,
-
-    /**
-     * #volatile
-     */
-    minimapHeight: 56,
-
-    /**
-     * #volatile
-     */
-    marginLeft: 20,
-
-    /**
-     * #volatile
-     */
-    error: undefined as unknown,
-
-    /**
-     * #volatile
-     */
-    annotPos: undefined as { left: number; right: number } | undefined,
-  }))
-  .actions(self => ({
-    /**
-     * #action
-     * set the height of the view in px
-     */
-    setHeight(height: number) {
-      self.height = height
-    },
-
-    /**
-     * #action
-     * set error state
-     */
-    setError(error?: unknown) {
-      self.error = error
-    },
-
-    /**
-     * #action
-     * set mouse position (row, column) in the MSA
-     */
-    setMousePos(col?: number, row?: number) {
-      self.mouseCol = col
-      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)
-     */
-    setRowHeight(n: number) {
-      self.rowHeight = n
-    },
-
-    /**
-     * #action
-     * set col width (px)
-     */
-    setColWidth(n: number) {
-      self.colWidth = n
-    },
-
-    /**
-     * #action
-     * set color scheme name
-     */
-    setColorSchemeName(name: string) {
-      self.colorSchemeName = name
-    },
-
-    /**
-     * #action
-     * synchronize the treewidth and treeareawidth
-     */
-    setTreeWidthMatchesArea(arg: boolean) {
-      self.treeWidthMatchesArea = arg
-    },
-
-    /**
-     * #action
-     * set scroll Y-offset (px)
-     */
-    setScrollY(n: number) {
-      self.scrollY = n
-    },
-
-    /**
-     * #action
-     * set tree area width (px)
-     */
-    setTreeAreaWidth(n: number) {
-      self.treeAreaWidth = n
-    },
-    /**
-     * #action
-     * set tree width (px)
-     */
-    setTreeWidth(n: number) {
-      self.treeWidth = n
-    },
-
-    /**
-     * #action
-     *
-     */
-    setCurrentAlignment(n: number) {
-      self.currentAlignment = n
-    },
-
-    /**
-     * #action
-     */
-    setLabelsAlignRight(arg: boolean) {
-      self.labelsAlignRight = arg
-    },
-    /**
-     * #action
-     */
-    setDrawTree(arg: boolean) {
-      self.drawTree = arg
-    },
-
-    /**
-     * #action
-     */
-    toggleCollapsed(node: string) {
-      if (self.collapsed.includes(node)) {
-        self.collapsed.remove(node)
-      } else {
-        self.collapsed.push(node)
-      }
-    },
-
-    /**
-     * #action
-     */
-    toggleCollapsed2(node: string) {
-      if (self.collapsed2.includes(node)) {
-        self.collapsed2.remove(node)
-      } else {
-        self.collapsed2.push(node)
-      }
-    },
-    /**
-     * #action
-     */
-    setShowOnly(node?: string) {
-      self.showOnly = node
-    },
-
-    /**
-     * #action
-     */
-    setShowBranchLen(arg: boolean) {
-      self.showBranchLen = arg
-    },
-
-    /**
-     * #action
-     */
-    setBgColor(arg: boolean) {
-      self.bgColor = arg
-    },
-
-    /**
-     * #action
-     */
-    setDrawNodeBubbles(arg: boolean) {
-      self.drawNodeBubbles = arg
-    },
-
-    /**
-     * #action
-     */
-    setData(data: { msa?: string; tree?: string }) {
-      self.data = cast(data)
-    },
-
-    /**
-     * #action
-     */
-    async setMSAFilehandle(msaFilehandle?: FileLocationType) {
-      self.msaFilehandle = msaFilehandle
-    },
-
-    /**
-     * #action
-     */
-    async setTreeFilehandle(treeFilehandle?: FileLocationType) {
-      if (treeFilehandle && 'blobId' in treeFilehandle) {
-        const r = await openLocation(treeFilehandle).readFile('utf8')
-        this.setTree(r)
-      } else {
+       * #action
+       */
+      setTreeFilehandle(treeFilehandle?: FileLocationType) {
         self.treeFilehandle = treeFilehandle
-      }
-    },
-
-    /**
-     * #action
-     */
-    setMSA(result: string) {
-      self.data.setMSA(result)
-    },
-
-    /**
-     * #action
-     */
-    setTree(result: string) {
-      self.data.setTree(result)
-    },
-
-    /**
-     * #action
-     */
-    setTreeMetadata(result: string) {
-      self.data.setTreeMetadata(result)
-    },
-  }))
-
-  .views(self => ({
-    /**
-     * #getter
-     */
-    get colorScheme() {
-      return colorSchemes[self.colorSchemeName]
-    },
-
-    /**
-     * #getter
-     */
-    get header() {
-      return this.MSA?.getHeader() || {}
-    },
-
-    /**
-     * #method
-     */
-    getRowData(name: string) {
-      const matches = name.match(/\S+\/(\d+)-(\d+)/)
-      return {
-        data: this.MSA?.getRowData(name) || ({} as Record<string, unknown>),
-        ...(matches && {
-          range: {
-            start: +matches[1],
-            end: +matches[2],
-          },
-        }),
-      }
-    },
-    /**
-     * #getter
-     */
-    get currentAlignmentName() {
-      return this.alignmentNames[self.currentAlignment]
-    },
-    /**
-     * #getter
-     */
-    get alignmentNames() {
-      return this.MSA?.alignmentNames || []
-    },
-    /**
-     * #getter
-     */
-    get noTree() {
-      return !!this._tree.noTree
-    },
-    /**
-     * #getter
-     */
-    get menuItems() {
-      return []
-    },
-    /**
-     * #getter
-     */
-    get treeMetadata() {
-      return self.data.treeMetadata ? JSON.parse(self.data.treeMetadata) : {}
-    },
-    /**
-     * #getter
-     */
-    get MSA() {
-      const text = self.data.msa
-      if (text) {
-        if (Stockholm.sniff(text)) {
-          return new StockholmMSA(text, self.currentAlignment)
-        } else if (text.startsWith('>')) {
-          return new FastaMSA(text)
-        } else {
-          return new ClustalMSA(text)
+      },
+
+      /**
+       * #action
+       */
+      setMSA(result: string) {
+        self.data.setMSA(result)
+      },
+
+      /**
+       * #action
+       */
+      setTree(result: string) {
+        self.data.setTree(result)
+      },
+
+      /**
+       * #action
+       */
+      setTreeMetadata(result: string) {
+        self.data.setTreeMetadata(result)
+      },
+    }))
+
+    .views(self => ({
+      /**
+       * #method
+       * unused here, but can be used by derived classes to add extra items
+       */
+      extraViewMenuItems() {
+        return []
+      },
+      /**
+       * #getter
+       */
+      get colorScheme() {
+        return colorSchemes[self.colorSchemeName]
+      },
+
+      /**
+       * #getter
+       */
+      get header() {
+        return this.MSA?.getHeader() || {}
+      },
+
+      /**
+       * #method
+       */
+      getRowData(name: string) {
+        return {
+          data: this.MSA?.getRowData(name),
         }
-      }
-      return null
-    },
-    /**
-     * #getter
-     */
-    get numColumns() {
-      return (this.MSA?.getWidth() || 0) - this.blanks.length
-    },
-    /**
-     * #getter
-     */
-    get _tree(): NodeWithIds {
-      const ret = self.data.tree
-        ? generateNodeIds(parseNewick(self.data.tree))
-        : this.MSA?.getTree() || {
-            noTree: true,
-            branchset: [],
-            id: 'empty',
-            name: 'empty',
+      },
+
+      /**
+       * #getter
+       */
+      get alignmentNames() {
+        return this.MSA?.alignmentNames || []
+      },
+      /**
+       * #getter
+       */
+      get noTree() {
+        return !!this._tree.noTree
+      },
+      /**
+       * #getter
+       */
+      get noAnnotations() {
+        return !self.loadedInterProAnnotations
+      },
+      /**
+       * #getter
+       */
+      get menuItems() {
+        return []
+      },
+      /**
+       * #getter
+       */
+      get treeMetadata() {
+        return self.data.treeMetadata ? JSON.parse(self.data.treeMetadata) : {}
+      },
+      /**
+       * #getter
+       */
+      get MSA() {
+        const text = self.data.msa
+        if (text) {
+          if (Stockholm.sniff(text)) {
+            return new StockholmMSA(text, self.currentAlignment)
+          } else if (text.startsWith('>')) {
+            return new FastaMSA(text)
+          } else {
+            return new ClustalMSA(text)
+          }
+        }
+        return null
+      },
+      /**
+       * #getter
+       */
+      get numColumns() {
+        return (this.MSA?.getWidth() || 0) - this.blanks.length
+      },
+
+      /**
+       * #getter
+       */
+      get _tree(): NodeWithIds {
+        const ret = self.data.tree
+          ? generateNodeIds(parseNewick(self.data.tree))
+          : this.MSA?.getTree() || {
+              noTree: true,
+              branchset: [],
+              id: 'empty',
+              name: 'empty',
+            }
+        return reparseTree(ret)
+      },
+      /**
+       * #getter
+       */
+      get rowNames(): string[] {
+        return this.hierarchy.leaves().map(n => n.data.name)
+      },
+      /**
+       * #getter
+       */
+      get mouseOverRowName() {
+        const { mouseRow } = self
+        return mouseRow !== undefined ? this.rowNames[mouseRow] : undefined
+      },
+
+      /**
+       * #getter
+       */
+      get root() {
+        let hier = hierarchy(this._tree, d => d.branchset)
+          .sum(d => (d.branchset ? 0 : 1))
+          .sort((a, b) => ascending(a.data.length || 1, b.data.length || 1))
+
+        if (self.showOnly) {
+          const res = hier.find(n => n.data.id === self.showOnly)
+          if (res) {
+            hier = res
           }
-      return reparseTree(ret)
-    },
-    /**
-     * #getter
-     */
-    get rowNames(): string[] {
-      return this.hierarchy.leaves().map(node => node.data.name)
-    },
-    /**
-     * #getter
-     */
-    get mouseOverRowName() {
-      return self.mouseRow !== undefined
-        ? this.rowNames[self.mouseRow]
-        : undefined
-    },
-
-    /**
-     * #method
-     */
-    getMouseOverResidue(rowName: string) {
-      return this.columns[rowName]
-    },
-
-    /**
-     * #getter
-     */
-    get root() {
-      let hier = hierarchy(this._tree, d => d.branchset)
-        .sum(d => (d.branchset ? 0 : 1))
-        .sort((a, b) => ascending(a.data.length || 1, b.data.length || 1))
-
-      if (self.showOnly) {
-        const res = hier.find(node => node.data.id === self.showOnly)
-        if (res) {
-          hier = res
         }
-      }
 
-      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))
-      }
 
-      return hier
-    },
-    /**
-     * #getter
-     */
-    get structures(): Record<string, Structure[]> {
-      return this.MSA?.getStructures() || {}
-    },
-    /**
-     * #getter
-     */
-    get inverseStructures() {
-      return Object.fromEntries(
-        Object.entries(this.structures).flatMap(([key, val]) =>
-          val.map(pdbEntry => [pdbEntry.pdb, { id: key }]),
-        ),
-      )
-    },
-    /**
-     * #getter
-     * widget width minus the tree area gives the space for the MSA
-     */
-    get msaAreaWidth() {
-      return self.width - self.treeAreaWidth
-    },
-
-    /**
-     * #getter
-     */
-    get treeAreaWidthMinusMargin() {
-      return self.treeAreaWidth - self.marginLeft
-    },
-    /**
-     * #getter
-     */
-    get blanks() {
-      const blanks = []
-      const strs = this.hierarchy
-        .leaves()
-        .map(leaf => this.MSA?.getRow(leaf.data.name))
-        .filter((item): item is string => !!item)
-
-      for (let i = 0; i < strs[0]?.length; i++) {
-        let counter = 0
-        for (const str of strs) {
-          if (str[i] === '-') {
-            counter++
+        return hier
+      },
+
+      /**
+       * #getter
+       * widget width minus the tree area gives the space for the MSA
+       */
+      get msaAreaWidth() {
+        return self.width - self.treeAreaWidth
+      },
+
+      /**
+       * #getter
+       */
+      get treeAreaWidthMinusMargin() {
+        return self.treeAreaWidth - self.marginLeft
+      },
+      /**
+       * #getter
+       */
+      get blanks() {
+        const blanks = []
+        const strs = this.hierarchy
+          .leaves()
+          .map(leaf => this.MSA?.getRow(leaf.data.name))
+          .filter((item): item is string => !!item)
+
+        for (let i = 0; i < strs[0]?.length; i++) {
+          let counter = 0
+          for (const str of strs) {
+            if (str[i] === '-') {
+              counter++
+            }
           }
-        }
-        if (counter === strs.length) {
-          blanks.push(i)
-        }
-      }
-      return blanks
-    },
-    /**
-     * #getter
-     */
-    get rows() {
-      const MSA = this.MSA
-      return this.hierarchy
-        .leaves()
-        .map(leaf => [leaf.data.name, MSA?.getRow(leaf.data.name)] as const)
-        .filter((f): f is [string, string] => !!f[1])
-    },
-    /**
-     * #getter
-     */
-    get columns() {
-      return Object.fromEntries(
-        this.rows.map((row, index) => [row[0], this.columns2d[index]] as const),
-      )
-    },
-    /**
-     * #getter
-     */
-    get columns2d() {
-      return this.rows.map(r => r[1]).map(str => skipBlanks(this.blanks, str))
-    },
-    /**
-     * #getter
-     */
-    get fontSize() {
-      return Math.max(8, self.rowHeight - 8)
-    },
-    /**
-     * #getter
-     */
-    get colStats() {
-      const r = [] as Record<string, number>[]
-      const columns = this.columns2d
-      for (const column of columns) {
-        for (let j = 0; j < column.length; j++) {
-          const l = r[j] || {}
-          if (!l[column[j]]) {
-            l[column[j]] = 0
+          if (counter === strs.length) {
+            blanks.push(i)
           }
-          l[column[j]]++
-          r[j] = l
-        }
-      }
-      return r
-    },
-    /**
-     * #getter
-     * generates a new tree that is clustered with x,y positions
-     */
-    get hierarchy(): HierarchyNode<NodeWithIdsAndLength> {
-      const r = this.root
-      const clust = cluster<NodeWithIds>()
-        .size([this.totalHeight, self.treeWidth])
-        .separation(() => 1)
-      clust(r)
-      setBrLength(r, (r.data.length = 0), self.treeWidth / maxLength(r))
-      return r as HierarchyNode<NodeWithIdsAndLength>
-    },
-
-    /**
-     * #getter
-     */
-    get totalHeight() {
-      return this.root.leaves().length * self.rowHeight
-    },
-  }))
-  .views(self => ({
-    /**
-     * #getter
-     */
-    get totalWidth() {
-      return self.numColumns * self.colWidth
-    },
-  }))
-
-  .views(self => ({
-    /**
-     * #getter
-     */
-    get initialized() {
-      return (
-        (self.data.msa ||
-          self.data.tree ||
-          self.msaFilehandle ||
-          self.treeFilehandle) &&
-        !self.error
-      )
-    },
-    /**
-     * #getter
-     */
-    get blocksX() {
-      return blocksX({
-        viewportWidth: self.msaAreaWidth,
-        viewportX: -self.scrollX,
-        blockSize: self.blockSize,
-        mapWidth: self.totalWidth,
-      })
-    },
-    /**
-     * #getter
-     */
-    get blocksY() {
-      return blocksY({
-        viewportHeight: self.height,
-        viewportY: -self.scrollY,
-        blockSize: self.blockSize,
-        mapHeight: self.totalHeight,
-      })
-    },
-  }))
-  .views(self => ({
-    /**
-     * #getter
-     */
-    get blocks2d() {
-      const ret = []
-      for (const by of self.blocksY) {
-        for (const bx of self.blocksX) {
-          ret.push([bx, by])
         }
-      }
-      return ret
-    },
-
-    /**
-     * #getter
-     */
-    get done() {
-      return self.initialized && (self.data.msa || self.data.tree)
-    },
-    /**
-     * #getter
-     */
-    get maxScrollX() {
-      return -self.totalWidth + (self.msaAreaWidth - 100)
-    },
-  }))
-  .actions(self => ({
-    /**
-     * #action
-     */
-    addUniprotTrack(node: { name: string; accession: string }) {
-      if (self.boxTracks.some(t => t.name === node.name)) {
-        if (self.turnedOffTracks.has(node.name)) {
-          this.toggleTrack(node.name)
+        return blanks
+      },
+      /**
+       * #getter
+       */
+      get rows() {
+        const MSA = this.MSA
+        return this.hierarchy
+          .leaves()
+          .map(leaf => [leaf.data.name, MSA?.getRow(leaf.data.name)] as const)
+          .filter((f): f is [string, string] => !!f[1])
+      },
+      /**
+       * #getter
+       */
+      get columns() {
+        return Object.fromEntries(
+          this.rows.map(
+            (row, index) => [row[0], this.columns2d[index]] as const,
+          ),
+        )
+      },
+      /**
+       * #getter
+       */
+      get columns2d() {
+        return this.rows.map(r => r[1]).map(str => skipBlanks(this.blanks, str))
+      },
+      /**
+       * #getter
+       */
+      get fontSize() {
+        return Math.min(Math.max(6, self.rowHeight - 8), 18)
+      },
+      /**
+       * #getter
+       */
+      get colStats() {
+        const r = [] as Record<string, number>[]
+        const columns = this.columns2d
+        for (const column of columns) {
+          for (let j = 0; j < column.length; j++) {
+            const l = r[j] || {}
+            if (!l[column[j]]) {
+              l[column[j]] = 0
+            }
+            l[column[j]]++
+            r[j] = l
+          }
         }
-      } else {
-        self.boxTracks.push({
-          ...node,
-          id: node.name,
-          associatedRowName: node.name,
+        return r
+      },
+      /**
+       * #getter
+       * generates a new tree that is clustered with x,y positions
+       */
+      get hierarchy(): HierarchyNode<NodeWithIdsAndLength> {
+        const r = this.root
+        const clust = cluster<NodeWithIds>()
+          .size([this.totalHeight, self.treeWidth])
+          .separation(() => 1)
+        clust(r)
+        setBrLength(r, (r.data.length = 0), self.treeWidth / maxLength(r))
+        return r as HierarchyNode<NodeWithIdsAndLength>
+      },
+
+      /**
+       * #getter
+       */
+      get totalHeight() {
+        return this.root.leaves().length * self.rowHeight
+      },
+    }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get totalWidth() {
+        return self.numColumns * self.colWidth
+      },
+    }))
+
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get initialized() {
+        return (self.data.msa || self.data.tree) && !self.error
+      },
+      /**
+       * #getter
+       */
+      get blocksX() {
+        return blocksX({
+          viewportWidth: self.msaAreaWidth,
+          viewportX: -self.scrollX,
+          blockSize: self.blockSize,
+          mapWidth: self.totalWidth,
         })
-      }
-    },
-
-    /**
-     * #action
-     */
-    doScrollY(deltaY: number) {
-      self.scrollY = clamp(-self.totalHeight + 10, self.scrollY + deltaY, 0)
-    },
-
-    /**
-     * #action
-     */
-    doScrollX(deltaX: number) {
-      self.scrollX = clamp(self.maxScrollX, self.scrollX + deltaX, 0)
-    },
-
-    /**
-     * #action
-     */
-    setScrollX(n: number) {
-      self.scrollX = clamp(self.maxScrollX, n, 0)
-    },
-
-    /**
-     * #action
-     */
-    setMouseoveredColumn(n: number, chain: string, file: string) {
-      let j = 0
-      let i = 0
-      const { id } = self.inverseStructures[file.slice(0, -4)] || {}
-      const row = self.MSA?.getRow(id)
-
-      if (row) {
-        for (i = 0; i < row.length && j < n; i++) {
-          if (row[i] !== '-') {
-            j++
+      },
+      /**
+       * #getter
+       */
+      get blocksY() {
+        return blocksY({
+          viewportHeight: self.height,
+          viewportY: -self.scrollY,
+          blockSize: self.blockSize,
+          mapHeight: self.totalHeight,
+        })
+      },
+    }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get blocks2d() {
+        const ret = []
+        for (const by of self.blocksY) {
+          for (const bx of self.blocksX) {
+            ret.push([bx, by])
           }
         }
-        self.mouseCol = j + 1
-      } else {
-        self.mouseCol = undefined
-      }
-    },
-    /**
-     * #action
-     */
-    toggleTrack(id: string) {
-      if (self.turnedOffTracks.has(id)) {
-        self.turnedOffTracks.delete(id)
-      } else {
-        self.turnedOffTracks.set(id, true)
-      }
-    },
-  }))
-  .views(self => ({
-    /**
-     * #getter
-     */
-    get labelsWidth() {
-      let x = 0
-      const { rowHeight, hierarchy, treeMetadata, fontSize } = self
-      if (rowHeight > 5) {
-        for (const node of hierarchy.leaves()) {
-          x = Math.max(
-            measureTextCanvas(
-              treeMetadata[node.data.name]?.genome || node.data.name,
-              fontSize,
-            ),
-            x,
-          )
+        return ret
+      },
+
+      /**
+       * #getter
+       */
+      get isLoading() {
+        return self.loadingMSA || self.loadingTree
+      },
+      /**
+       * #getter
+       */
+      get maxScrollX() {
+        return -self.totalWidth + (self.msaAreaWidth - 100)
+      },
+    }))
+    .actions(self => ({
+      /**
+       * #action
+       */
+      zoomIn() {
+        self.colWidth = Math.ceil(self.colWidth * 1.5)
+        self.rowHeight = Math.ceil(self.rowHeight * 1.5)
+        self.scrollX = clamp(self.maxScrollX, self.scrollX, 0)
+      },
+      /**
+       * #action
+       */
+      zoomOut() {
+        self.colWidth = Math.max(1, Math.floor(self.colWidth * 0.75))
+        self.rowHeight = Math.max(1.5, Math.floor(self.rowHeight * 0.75))
+        self.scrollX = clamp(self.maxScrollX, self.scrollX, 0)
+      },
+      /**
+       * #action
+       */
+      setLoadedInterProAnnotations(data: Record<string, InterProScanResults>) {
+        self.loadedInterProAnnotations = data
+      },
+
+      /**
+       * #action
+       */
+      doScrollY(deltaY: number) {
+        self.scrollY = clamp(-self.totalHeight + 10, self.scrollY + deltaY, 0)
+      },
+
+      /**
+       * #action
+       */
+      doScrollX(deltaX: number) {
+        self.scrollX = clamp(self.maxScrollX, self.scrollX + deltaX, 0)
+      },
+
+      /**
+       * #action
+       */
+      setScrollX(n: number) {
+        self.scrollX = clamp(self.maxScrollX, n, 0)
+      },
+
+      /**
+       * #action
+       */
+      toggleTrack(id: string) {
+        if (self.turnedOffTracks.has(id)) {
+          self.turnedOffTracks.delete(id)
+        } else {
+          self.turnedOffTracks.set(id, true)
         }
-      }
-      return x
-    },
-
-    /**
-     * #getter
-     */
-    get secondaryStructureConsensus() {
-      return self.MSA?.secondaryStructureConsensus
-    },
-
-    /**
-     * #getter
-     */
-    get seqConsensus() {
-      return self.MSA?.seqConsensus
-    },
-
-    /**
-     * #getter
-     */
-    get conservation() {
-      if (self.columns2d.length) {
-        for (let i = 0; i < self.columns2d[0].length; i++) {
-          const col = []
-          for (const column of self.columns2d) {
-            col.push(column[i])
+      },
+      /**
+       * #action
+       */
+      addInterProScanJobId(arg: string) {
+        self.interProScanJobIds = [
+          ...self.interProScanJobIds,
+          { jobId: arg, date: +Date.now() },
+        ]
+      },
+      /**
+       * #action
+       */
+      setStatus(status?: { msg: string; url?: string }) {
+        self.status = status
+      },
+    }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get labelsWidth() {
+        let x = 0
+        const { rowHeight, hierarchy, treeMetadata, fontSize } = self
+        if (rowHeight > 5) {
+          for (const node of hierarchy.leaves()) {
+            x = Math.max(
+              measureTextCanvas(
+                treeMetadata[node.data.name]?.genome || node.data.name,
+                fontSize,
+              ),
+              x,
+            )
           }
         }
-      }
-      return ['a']
-    },
-
-    /**
-     * #getter
-     */
-    get adapterTrackModels(): BasicTrack[] {
-      return (
-        self.MSA?.tracks.map(t => ({
-          model: {
-            ...t,
-            data: t.data ? skipBlanks(self.blanks, t.data) : undefined,
-            height: self.rowHeight,
-          } as TextTrackModel,
-          ReactComponent: TextTrack,
-        })) || []
-      )
-    },
-
-    /**
-     * #getter
-     */
-    get boxTrackModels(): BasicTrack[] {
-      return self.boxTracks
-        .filter(track => self.rows.some(row => row[0] === track.name))
-        .map(track => ({
-          model: track as BoxTrackModel,
-          ReactComponent: BoxTrack,
-        }))
-    },
-
-    /**
-     * #getter
-     */
-    get tracks(): BasicTrack[] {
-      return [...this.adapterTrackModels, ...this.boxTrackModels]
-    },
-    /**
-     * #getter
-     */
-    get turnedOnTracks() {
-      return this.tracks.filter(f => !self.turnedOffTracks.has(f.model.id))
-    },
-
-    /**
-     * #method
-     * returns coordinate in the current relative coordinate scheme
-     */
-    pxToBp(coord: number) {
-      return Math.floor((coord - self.scrollX) / self.colWidth)
-    },
-
-    /**
-     * #method
-     */
-    rowSpecificBpToPx(rowName: string, position: number) {
-      const { rowNames, rows } = self
-      const index = rowNames.indexOf(rowName)
-      const row = rows[index][1]
-      const details = self.getRowData(rowName)
-      const offset = details.range?.start || 0
-      const current = position - offset
-      const s = new Set(self.blanks)
-
-      if (current < 0) {
-        return 0
-      }
+        return x
+      },
 
-      let j = 0
-      let i = 0
+      /**
+       * #getter
+       */
+      get secondaryStructureConsensus() {
+        return self.MSA?.secondaryStructureConsensus
+      },
 
-      for (; i < row.length; i++) {
-        if (row[i] !== '-' && j++ === current) {
-          break
-        }
-      }
+      /**
+       * #getter
+       */
+      get seqConsensus() {
+        return self.MSA?.seqConsensus
+      },
 
-      let count = 0
-      for (let k = 0; k < row.length; k++) {
-        if (s.has(k) && k < i + 1) {
-          count++
+      /**
+       * #getter
+       */
+      get conservation() {
+        if (self.columns2d.length) {
+          for (let i = 0; i < self.columns2d[0].length; i++) {
+            const col = []
+            for (const column of self.columns2d) {
+              col.push(column[i])
+            }
+          }
         }
-      }
+        return ['a']
+      },
 
-      return i - count
-    },
+      /**
+       * #getter
+       */
+      get adapterTrackModels(): BasicTrack[] {
+        return (
+          self.MSA?.tracks.map(t => ({
+            model: {
+              ...t,
+              data: t.data ? skipBlanks(self.blanks, t.data) : undefined,
+              height: self.rowHeight,
+            } as TextTrackModel,
+            ReactComponent: TextTrack,
+          })) || []
+        )
+      },
 
-    /**
-     * #method
-     */
-    globalBpToPx(position: number) {
-      let count = 0
-      const s = new Set(self.blanks)
+      /**
+       * #getter
+       */
+      get tracks(): BasicTrack[] {
+        return this.adapterTrackModels
+      },
 
-      for (let k = 0; k < self.rows[0]?.[1].length; k++) {
-        if (s.has(k) && k < position + 1) {
-          count++
-        }
-      }
+      /**
+       * #getter
+       */
+      get turnedOnTracks() {
+        return this.tracks.filter(f => !self.turnedOffTracks.has(f.model.id))
+      },
 
-      return position - count
-    },
-
-    /**
-     * #method
-     */
-    relativePxToBp(rowName: string, position: number) {
-      const { rowNames, rows } = self
-      const index = rowNames.indexOf(rowName)
-      if (index !== -1 && rows[index]) {
-        const row = rows[index][1]
-
-        let k = 0
-        for (let i = 0; i < position; i++) {
-          if (row[i] !== '-') {
-            k++
-          } else if (k >= position) {
-            break
+      /**
+       * #method
+       * return a row-specific sequence coordinate, skipping gaps, given a global
+       * coordinate
+       */
+      globalCoordToRowSpecificSeqCoord(rowName: string, position: number) {
+        const { rowNames, rows } = self
+        const index = rowNames.indexOf(rowName)
+        if (index !== -1 && rows[index]) {
+          const row = rows[index][1]
+
+          let k = 0
+          for (let i = 0; i < position; i++) {
+            if (row[i] !== '-') {
+              k++
+            } else if (k >= position) {
+              break
+            }
           }
+          return k
         }
-        return k
-      }
-      return 0
-    },
-
-    /**
-     * #method
-     */
-    relativePxToBp2(rowName: string, position: number) {
-      const { rowNames, rows } = self
-      const index = rowNames.indexOf(rowName)
-      if (index !== -1 && rows[index]) {
-        const row = rows[index][1]
-
-        let k = 0
-        let i = 0
-        for (; k < position; i++) {
-          if (row[i] !== '-') {
-            k++
-          } else if (k >= position) {
-            break
+        return 0
+      },
+
+      /**
+       * #method
+       * return a global coordinate given a row-specific sequence coordinate
+       * which does not not include gaps
+       */
+      seqCoordToRowSpecificGlobalCoord(rowName: string, position: number) {
+        const { rowNames, rows } = self
+        const index = rowNames.indexOf(rowName)
+        if (index !== -1 && rows[index]) {
+          const row = rows[index][1]
+
+          let k = 0
+          let i = 0
+          for (; k < position; i++) {
+            if (row[i] !== '-') {
+              k++
+            } else if (k >= position) {
+              break
+            }
           }
+          return i
         }
-        return i
-      }
-      return 0
-    },
-    /**
-     * #method
-     */
-    getPos(pos: number) {
-      let j = 0
-      for (let i = 0, k = 0; i < pos; i++, j++) {
-        while (j === self.blanks[k]) {
-          k++
-          j++
+        return 0
+      },
+    }))
+
+    .views(self => ({
+      /**
+       * #getter
+       * total height of track area (px)
+       */
+      get totalTrackAreaHeight() {
+        return sum(self.turnedOnTracks.map(r => r.model.height))
+      },
+      /**
+       * #getter
+       */
+      get tidyTypes() {
+        const types = new Map<string, Accession>()
+        if (this.tidyAnnotations) {
+          for (const { name, accession, description } of this.tidyAnnotations) {
+            types.set(accession, { name, accession, description })
+          }
         }
-      }
-      return j
-    },
-  }))
-
-  .views(self => ({
-    /**
-     * #getter
-     * total height of track area (px)
-     */
-    get totalTrackAreaHeight() {
-      return sum(self.turnedOnTracks.map(r => r.model.height))
-    },
-  }))
-  .actions(self => ({
-    /**
-     * #action
-     */
-    async exportSVG(opts: {
-      theme: Theme
-      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')
-    },
-    /**
-     * #action
-     * internal, used for drawing to canvas
-     */
-    incrementRef() {
-      self.nref++
-    },
-    afterCreate() {
-      // autorun opens treeFilehandle
-      addDisposer(
-        self,
-        autorun(async () => {
-          const { treeFilehandle } = self
-          if (treeFilehandle) {
-            try {
-              self.setTree(await openLocation(treeFilehandle).readFile('utf8'))
-            } catch (e) {
-              console.error(e)
-              self.setError(e)
+        return types
+      },
+      get tidyAnnotations() {
+        const ret = []
+        const { loadedInterProAnnotations } = self
+        if (loadedInterProAnnotations) {
+          for (const [id, val] of Object.entries(loadedInterProAnnotations)) {
+            for (const { signature, locations } of val.matches) {
+              const { entry } = signature
+              if (entry) {
+                const { name, accession, description } = entry
+                for (const { start, end } of locations) {
+                  ret.push({
+                    id,
+                    name,
+                    accession,
+                    description,
+                    start,
+                    end,
+                  })
+                }
+              }
             }
           }
-        }),
-      )
-      // autorun opens treeMetadataFilehandle
-      addDisposer(
-        self,
-        autorun(async () => {
-          const { treeMetadataFilehandle } = self
-          if (treeMetadataFilehandle) {
-            try {
-              self.setTreeMetadata(
-                await openLocation(treeMetadataFilehandle).readFile('utf8'),
-              )
-            } catch (e) {
-              console.error(e)
-              self.setError(e)
+        }
+        return ret.sort((a, b) => len(b) - len(a))
+      },
+      /**
+       * #getter
+       */
+      get tidyFilteredAnnotations() {
+        return this.tidyAnnotations.filter(r =>
+          self.featureFilters.get(r.accession),
+        )
+      },
+      /**
+       * #getter
+       */
+      get tidyFilteredGatheredAnnotations() {
+        return groupBy(this.tidyFilteredAnnotations, r => r.id)
+      },
+    }))
+    .views(self => ({
+      get fillPalette() {
+        const arr = [...self.tidyTypes.keys()]
+        let i = 0
+        const map = {} as Record<string, string>
+        for (const key of arr) {
+          const k = Math.min(arr.length - 1, palettes.length - 1)
+          map[key] = palettes[k][i]
+          i++
+        }
+        return map
+      },
+      get strokePalette() {
+        return Object.fromEntries(
+          Object.entries(this.fillPalette).map(([key, val]) => [
+            key,
+            colord(val).darken(0.1).toHex(),
+          ]),
+        )
+      },
+    }))
+    .actions(self => ({
+      /**
+       * #action
+       */
+      async loadInterProScanResults(jobId: string) {
+        self.setStatus({ msg: 'Loading ' + jobId })
+        const ret = await loadInterProScanResults(jobId)
+        self.setStatus()
+        self.setLoadedInterProAnnotations(
+          Object.fromEntries(ret.results.map(r => [r.xref[0].id, r])),
+        )
+      },
+      /**
+       * #action
+       */
+      async queryInterProScan(programs: string[]) {
+        const { rows } = self
+        if (rows.length > 140) {
+          throw new Error('Too many sequences, please run InterProScan offline')
+        }
+
+        const ret = await launchInterProScan({
+          algorithm: 'interproscan',
+          programs: programs,
+          seq: rows
+            .map(row => `>${row[0]}\n${row[1].replaceAll('-', '')}`)
+            .join('\n'),
+          onProgress: arg => self.setStatus(arg),
+          onJobId: jobId => self.addInterProScanJobId(jobId),
+        })
+
+        self.setLoadedInterProAnnotations(
+          Object.fromEntries(ret.results.map(r => [r.xref[0].id, r])),
+        )
+      },
+      /**
+       * #action
+       */
+      reset() {
+        transaction(() => {
+          self.setData({ tree: '', msa: '' })
+          self.setScrollY(0)
+          self.setScrollX(0)
+          self.setCurrentAlignment(0)
+          self.setTreeFilehandle(undefined)
+          self.setMSAFilehandle(undefined)
+        })
+      },
+      /**
+       * #action
+       */
+      async exportSVG(opts: {
+        theme: Theme
+        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')
+      },
+      /**
+       * #action
+       * internal, used for drawing to canvas
+       */
+      incrementRef() {
+        self.nref++
+      },
+
+      /**
+       * #action
+       */
+      initFilter(arg: string) {
+        const ret = self.featureFilters.get(arg)
+        if (ret === undefined) {
+          self.featureFilters.set(arg, true)
+        }
+      },
+      /**
+       * #action
+       */
+      setFilter(arg: string, flag: boolean) {
+        self.featureFilters.set(arg, flag)
+      },
+
+      afterCreate() {
+        addDisposer(
+          self,
+          autorun(() => {
+            for (const key of self.tidyTypes.keys()) {
+              this.initFilter(key)
             }
-          }
-        }),
-      )
-
-      // autorun opens msaFilehandle
-      addDisposer(
-        self,
-        autorun(async () => {
-          const { msaFilehandle } = self
-          if (msaFilehandle) {
-            try {
-              self.setMSA(await openLocation(msaFilehandle).readFile('utf8'))
-            } catch (e) {
-              console.error(e)
-              self.setError(e)
+          }),
+        )
+        addDisposer(
+          self,
+          autorun(async () => {
+            // const res = Object.fromEntries(
+            //   await Promise.all(
+            //     self.annotationTracks.map(async f => {
+            //       const d = await jsonfetch(
+            //         `https://jbrowse.org/demos/interproscan/json/${encodeURIComponent(f)}`,
+            //       )
+            //       return [
+            //         decodeURIComponent(f).replace('.json', ''),
+            //         d.result.results[0],
+            //       ] as const
+            //     }),
+            //   ),
+            // )
+            // self.setLoadedInterProAnnotations(res)
+          }),
+        )
+        // autorun opens treeFilehandle
+        addDisposer(
+          self,
+          autorun(async () => {
+            const { treeFilehandle } = self
+            if (treeFilehandle) {
+              try {
+                self.setLoadingTree(true)
+                self.setTree(
+                  await openLocation(treeFilehandle).readFile('utf8'),
+                )
+                if (treeFilehandle.locationType === 'BlobLocation') {
+                  // clear filehandle after loading if from a local file
+                  self.setTreeFilehandle(undefined)
+                }
+              } catch (e) {
+                console.error(e)
+                self.setError(e)
+              } finally {
+                self.setLoadingTree(false)
+              }
             }
-          }
-        }),
-      )
-
-      // autorun synchronizes treeWidth with treeAreaWidth
-      addDisposer(
-        self,
-        autorun(async () => {
-          if (self.treeWidthMatchesArea) {
-            self.setTreeWidth(
-              Math.max(
-                50,
-                self.treeAreaWidth - self.labelsWidth - 10 - self.marginLeft,
-              ),
+          }),
+        )
+        // autorun opens treeMetadataFilehandle
+        addDisposer(
+          self,
+          autorun(async () => {
+            const { treeMetadataFilehandle } = self
+            if (treeMetadataFilehandle) {
+              try {
+                self.setTreeMetadata(
+                  await openLocation(treeMetadataFilehandle).readFile('utf8'),
+                )
+              } catch (e) {
+                console.error(e)
+                self.setError(e)
+              }
+            }
+          }),
+        )
+
+        // autorun opens msaFilehandle
+        addDisposer(
+          self,
+          autorun(async () => {
+            const { msaFilehandle } = self
+            if (msaFilehandle) {
+              try {
+                self.setLoadingMSA(true)
+                const res = await openLocation(msaFilehandle).readFile('utf8')
+                transaction(() => {
+                  self.setMSA(res)
+                  if (msaFilehandle.locationType === 'BlobLocation') {
+                    // clear filehandle after loading if from a local file
+                    self.setMSAFilehandle(undefined)
+                  }
+                })
+              } catch (e) {
+                console.error(e)
+                self.setError(e)
+              } finally {
+                self.setLoadingMSA(false)
+              }
+            }
+          }),
+        )
+
+        // autorun synchronizes treeWidth with treeAreaWidth
+        addDisposer(
+          self,
+          autorun(async () => {
+            if (self.treeWidthMatchesArea) {
+              self.setTreeWidth(
+                Math.max(
+                  50,
+                  self.treeAreaWidth - self.labelsWidth - 10 - self.marginLeft,
+                ),
+              )
+            }
+          }),
+        )
+
+        addDisposer(
+          self,
+          autorun(() => {
+            localStorageSetItem(
+              'msaview-interproscanqueries',
+              JSON.stringify(self.interProScanJobIds),
             )
-          }
-        }),
-      )
-    },
-  }))
-  .postProcessSnapshot(result => {
-    const snap = result as Omit<typeof result, symbol>
-    const {
-      data: { tree, msa, treeMetadata },
-      ...rest
-    } = snap
-
-    // remove the MSA/tree data from the tree if the filehandle available in
-    // which case it can be reloaded on refresh
-    return {
-      data: {
-        // https://andreasimonecosta.dev/posts/the-shortest-way-to-conditionally-insert-properties-into-an-object-literal/
-        ...(!result.treeFilehandle && { tree }),
-        ...(!result.msaFilehandle && { msa }),
-        ...(!result.treeMetadataFilehandle && { treeMetadata }),
-      },
-      ...rest,
-    }
-  })
-
-export default model
-
-export type MsaViewStateModel = typeof model
+          }),
+        )
+      },
+    }))
+    .postProcessSnapshot(result => {
+      const snap = result as Omit<typeof result, symbol>
+      const {
+        data: { tree, msa, treeMetadata },
+        ...rest
+      } = snap
+
+      // remove the MSA/tree data from the tree if the filehandle available in
+      // which case it can be reloaded on refresh
+      return {
+        data: {
+          ...(result.treeFilehandle ? {} : { tree }),
+          ...(result.msaFilehandle ? {} : { msa }),
+          ...(result.treeMetadataFilehandle ? {} : { treeMetadata }),
+        },
+        ...rest,
+      }
+    })
+}
+
+export default stateModelFactory
+
+export type MsaViewStateModel = ReturnType<typeof stateModelFactory>
 export type MsaViewModel = Instance<MsaViewStateModel>