react-msaview 2.1.1 → 2.1.3

package/src/model.ts

@@ -49,7 +49,10 @@ export interface TextTrackModel extends BasicTrackModel {
 }
 
 export interface BoxTrackModel extends BasicTrackModel {
-  features: { start: number; end: number }[]
+  features: {
+    start: number
+    end: number
+  }[]
 }
 export interface ITextTrack {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -64,65 +67,175 @@ export interface IBoxTrack {
 }
 
 type BasicTrack = IBoxTrack | ITextTrack
-
-const MSAModel = types
-  .model('MsaView', {
-    id: ElementId,
-    type: types.literal('MsaView'),
-    height: types.optional(types.number, 550),
-    treeAreaWidth: types.optional(types.number, 400),
-    treeWidth: types.optional(types.number, 300),
-    rowHeight: 20,
-    scrollY: 0,
-    scrollX: 0,
-    resizeHandleWidth: 5,
-    blockSize: 1000,
-    mouseRow: types.maybe(types.number),
-    mouseCol: types.maybe(types.number),
-    selectedStructures: types.array(StructureModel),
-    labelsAlignRight: false,
-    colWidth: 16,
-    showBranchLen: true,
-    bgColor: true,
-    drawTree: true,
-    drawNodeBubbles: true,
-    highResScaleFactor: 2,
-    colorSchemeName: 'maeditor',
-    treeFilehandle: types.maybe(FileLocation),
-    msaFilehandle: types.maybe(FileLocation),
-    currentAlignment: 0,
-    collapsed: types.array(types.string),
-    showOnly: types.maybe(types.string),
-    boxTracks: types.array(UniprotTrack),
-    turnedOffTracks: types.map(types.boolean),
-    annotatedRegions: types.array(
-      types.model({
-        start: types.number,
-        end: types.number,
-        attributes: types.frozen<Record<string, string[]>>(),
-      }),
-    ),
-    data: types.optional(
-      types
-        .model({
-          tree: types.maybe(types.string),
-          msa: types.maybe(types.string),
-        })
-        .actions(self => ({
-          setTree(tree?: string) {
-            self.tree = tree
-          },
-          setMSA(msa?: string) {
-            self.msa = msa
-          },
-        })),
-      { tree: '', msa: '' },
-    ),
-  })
+type StructureSnap = SnapshotIn<typeof StructureModel>
+
+/**
+ * #stateModel MsaView
+ */
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+const model = types
+  .compose(
+    BaseViewModel,
+    types.model('MsaView', {
+      /**
+       * #property
+       */
+      id: ElementId,
+      /**
+       * #property
+       */
+      type: types.literal('MsaView'),
+      /**
+       * #property
+       */
+      height: types.optional(types.number, 550),
+      /**
+       * #property
+       */
+      treeAreaWidth: types.optional(types.number, 400),
+      /**
+       * #property
+       */
+      treeWidth: types.optional(types.number, 300),
+      /**
+       * #property
+       */
+      rowHeight: 20,
+      /**
+       * #property
+       */
+      scrollY: 0,
+      /**
+       * #property
+       */
+      scrollX: 0,
+      /**
+       * #property
+       */
+      resizeHandleWidth: 5,
+      /**
+       * #property
+       */
+      blockSize: 1000,
+      /**
+       * #property
+       */
+      mouseRow: types.maybe(types.number),
+      /**
+       * #property
+       */
+      mouseCol: types.maybe(types.number),
+      /**
+       * #property
+       */
+      selectedStructures: types.array(StructureModel),
+      /**
+       * #property
+       */
+      labelsAlignRight: false,
+      /**
+       * #property
+       */
+      colWidth: 16,
+      /**
+       * #property
+       */
+      showBranchLen: true,
+      /**
+       * #property
+       */
+      bgColor: true,
+      /**
+       * #property
+       */
+      drawTree: true,
+      /**
+       * #property
+       */
+      drawNodeBubbles: true,
+      /**
+       * #property
+       */
+      highResScaleFactor: 2,
+      /**
+       * #property
+       */
+      colorSchemeName: 'maeditor',
+      /**
+       * #property
+       */
+      treeFilehandle: types.maybe(FileLocation),
+      /**
+       * #property
+       */
+      msaFilehandle: types.maybe(FileLocation),
+      /**
+       * #property
+       */
+      treeMetadataFilehandle: types.maybe(FileLocation),
+      /**
+       * #property
+       */
+      currentAlignment: 0,
+      /**
+       * #property
+       */
+      collapsed: types.array(types.string),
+      /**
+       * #property
+       */
+      showOnly: types.maybe(types.string),
+      /**
+       * #property
+       */
+      boxTracks: types.array(UniprotTrack),
+      /**
+       * #property
+       */
+      turnedOffTracks: types.map(types.boolean),
+      /**
+       * #property
+       */
+      annotatedRegions: types.array(
+        types.model({
+          start: types.number,
+          end: types.number,
+          attributes: types.frozen<Record<string, string[]>>(),
+        }),
+      ),
+      /**
+       * #property
+       */
+      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: '' },
+      ),
+    }),
+  )
   .volatile(() => ({
     rulerHeight: 20,
     error: undefined as unknown,
-    margin: { left: 20, top: 20 },
+    margin: {
+      left: 20,
+      top: 20,
+    },
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     DialogComponent: undefined as undefined | React.FC<any>,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -132,23 +245,38 @@ const MSAModel = types
     annotPos: undefined as { left: number; right: number } | undefined,
   }))
   .actions(self => ({
+    /**
+     * #action
+     */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    setDialogComponent(dlg: React.FC<any> | undefined, props: any) {
+    setDialogComponent(dlg?: React.FC<any>, props?: any) {
       self.DialogComponent = dlg
       self.DialogProps = props
     },
+    /**
+     * #action
+     */
     setHeight(height: number) {
       self.height = height
     },
-    addStructureToSelection(elt: SnapshotIn<typeof StructureModel>) {
+    /**
+     * #action
+     */
+    addStructureToSelection(elt: StructureSnap) {
       self.selectedStructures.push(elt)
     },
-    removeStructureFromSelection(elt: SnapshotIn<typeof StructureModel>) {
+    /**
+     * #action
+     */
+    removeStructureFromSelection(elt: StructureSnap) {
       const r = self.selectedStructures.find(node => node.id === elt.id)
       if (r) {
         self.selectedStructures.remove(r)
       }
     },
+    /**
+     * #action
+     */
     toggleStructureSelection(elt: {
       id: string
       structure: { startPos: number; endPos: number; pdb: string }
@@ -160,47 +288,88 @@ const MSAModel = types
         self.selectedStructures.push(elt)
       }
     },
+    /**
+     * #action
+     */
     clearSelectedStructures() {
-      // @ts-expect-error
-      self.selectedStructures = []
+      self.selectedStructures = cast([])
     },
+    /**
+     * #action
+     */
     setError(error?: unknown) {
       self.error = error
     },
+    /**
+     * #action
+     */
     setMousePos(col?: number, row?: number) {
       self.mouseCol = col
       self.mouseRow = row
     },
+    /**
+     * #action
+     */
     setRowHeight(n: number) {
       self.rowHeight = n
     },
+    /**
+     * #action
+     */
     setColWidth(n: number) {
       self.colWidth = n
     },
+    /**
+     * #action
+     */
     setColorSchemeName(name: string) {
       self.colorSchemeName = name
     },
+    /**
+     * #action
+     */
     setScrollY(n: number) {
       self.scrollY = n
     },
+    /**
+     * #action
+     */
     setScrollX(n: number) {
       self.scrollX = n
     },
+    /**
+     * #action
+     */
     setTreeAreaWidth(n: number) {
       self.treeAreaWidth = n
     },
+    /**
+     * #action
+     */
     setTreeWidth(n: number) {
       self.treeWidth = n
     },
+    /**
+     * #action
+     */
     setCurrentAlignment(n: number) {
       self.currentAlignment = n
     },
+    /**
+     * #action
+     */
     toggleLabelsAlignRight() {
       self.labelsAlignRight = !self.labelsAlignRight
     },
+    /**
+     * #action
+     */
     toggleDrawTree() {
       self.drawTree = !self.drawTree
     },
+    /**
+     * #action
+     */
     toggleCollapsed(node: string) {
       if (self.collapsed.includes(node)) {
         self.collapsed.remove(node)
@@ -208,24 +377,45 @@ const MSAModel = types
         self.collapsed.push(node)
       }
     },
+    /**
+     * #action
+     */
     setShowOnly(node?: string) {
       self.showOnly = node
     },
+    /**
+     * #action
+     */
     toggleBranchLen() {
       self.showBranchLen = !self.showBranchLen
     },
+    /**
+     * #action
+     */
     toggleBgColor() {
       self.bgColor = !self.bgColor
     },
+    /**
+     * #action
+     */
     toggleNodeBubbles() {
       self.drawNodeBubbles = !self.drawNodeBubbles
     },
+    /**
+     * #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')
@@ -234,12 +424,24 @@ const MSAModel = types
         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)
+    },
 
     afterCreate() {
       addDisposer(
@@ -256,6 +458,22 @@ const MSAModel = types
           }
         }),
       )
+      addDisposer(
+        self,
+        autorun(async () => {
+          const { treeMetadataFilehandle } = self
+          if (treeMetadataFilehandle) {
+            try {
+              this.setTreeMetadata(
+                await openLocation(treeMetadataFilehandle).readFile('utf8'),
+              )
+            } catch (e) {
+              console.error(e)
+              this.setError(e)
+            }
+          }
+        }),
+      )
       addDisposer(
         self,
         autorun(async () => {
@@ -278,6 +496,9 @@ const MSAModel = types
     let oldValX = 0
     let oldValY = 0
     return {
+      /**
+       * #getter
+       */
       get initialized() {
         return (
           (self.data.msa ||
@@ -287,7 +508,9 @@ const MSAModel = types
           !self.error
         )
       },
-
+      /**
+       * #getter
+       */
       get blocksX() {
         const { scrollX, blockSize: size, colWidth } = self
         const ret = -(size * Math.floor(scrollX / size)) - size
@@ -307,7 +530,9 @@ const MSAModel = types
         }
         return oldBlocksX
       },
-
+      /**
+       * #getter
+       */
       get blocksY() {
         const { scrollY, blockSize: size, rowHeight } = self
         const ret = -(size * Math.floor(scrollY / size)) - 2 * size
@@ -330,21 +555,33 @@ const MSAModel = types
     }
   })
   .views(self => ({
+    /**
+     * #getter
+     */
     get blocks2d() {
       return self.blocksY.flatMap(by => self.blocksX.map(bx => [bx, by]))
     },
+    /**
+     * #getter
+     */
     get done() {
       return self.initialized && (self.data.msa || self.data.tree)
     },
-
+    /**
+     * #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 {
@@ -352,23 +589,39 @@ const MSAModel = types
         ...(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) {
@@ -382,11 +635,15 @@ const MSAModel = types
       }
       return null
     },
-
+    /**
+     * #getter
+     */
     get numColumns() {
       return ((this.MSA?.getWidth() || 0) - this.blanks.length) * self.colWidth
     },
-
+    /**
+     * #getter
+     */
     get tree(): NodeWithIds {
       return self.data.tree
         ? generateNodeIds(parseNewick(self.data.tree))
@@ -397,21 +654,30 @@ const MSAModel = types
             name: 'empty',
           }
     },
-
+    /**
+     * #getter
+     */
     get rowNames(): string[] {
       return this.hierarchy.leaves().map(node => node.data.name)
     },
-
-    get mouseOverRowName() {
+    /**
+     * #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))
@@ -431,7 +697,9 @@ const MSAModel = types
       }
       return hier
     },
-
+    /**
+     * #getter
+     */
     get structures(): Record<
       string,
       {
@@ -442,7 +710,9 @@ const MSAModel = types
     > {
       return this.MSA?.getStructures() || {}
     },
-
+    /**
+     * #getter
+     */
     get inverseStructures() {
       return Object.fromEntries(
         Object.entries(this.structures).flatMap(([key, val]) =>
@@ -450,12 +720,15 @@ const MSAModel = types
         ),
       )
     },
-
+    /**
+     * #getter
+     */
     get msaAreaWidth() {
-      // @ts-expect-error
       return self.width - self.treeAreaWidth
     },
-
+    /**
+     * #getter
+     */
     get blanks() {
       const blanks = []
       const strs = this.hierarchy
@@ -476,24 +749,32 @@ const MSAModel = types
       }
       return blanks
     },
-
+    /**
+     * #getter
+     */
     get rows() {
       return this.hierarchy
         .leaves()
         .map(({ data }) => [data.name, this.MSA?.getRow(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 colStats() {
       const r = [] as Record<string, number>[]
       const columns = this.columns2d
@@ -509,8 +790,10 @@ const MSAModel = types
       }
       return r
     },
-
-    // generates a new tree that is clustered with x,y positions
+    /**
+     * #getter
+     * generates a new tree that is clustered with x,y positions
+     */
     get hierarchy(): HierarchyNode<NodeWithIdsAndLength> {
       const root = this.root
       const clust = cluster<NodeWithIds>()
@@ -524,12 +807,17 @@ const MSAModel = types
       )
       return root as HierarchyNode<NodeWithIdsAndLength>
     },
-
+    /**
+     * #getter
+     */
     get totalHeight() {
       return this.root.leaves().length * self.rowHeight
     },
   }))
   .actions(self => ({
+    /**
+     * #action
+     */
     addUniprotTrack(node: { name: string; accession: string }) {
       if (self.boxTracks.some(t => t.name === node.name)) {
         if (self.turnedOffTracks.has(node.name)) {
@@ -543,11 +831,15 @@ const MSAModel = types
         })
       }
     },
-
+    /**
+     * #action
+     */
     doScrollY(deltaY: number) {
       self.scrollY = clamp(-self.totalHeight + 10, self.scrollY + deltaY, 0)
     },
-
+    /**
+     * #action
+     */
     doScrollX(deltaX: number) {
       self.scrollX = clamp(
         -self.numColumns + (self.msaAreaWidth - 100),
@@ -555,6 +847,9 @@ const MSAModel = types
         0,
       )
     },
+    /**
+     * #action
+     */
     setMouseoveredColumn(n: number, chain: string, file: string) {
       let j = 0
       let i = 0
@@ -572,7 +867,9 @@ const MSAModel = types
         self.mouseCol = undefined
       }
     },
-
+    /**
+     * #action
+     */
     toggleTrack(id: string) {
       if (self.turnedOffTracks.has(id)) {
         self.turnedOffTracks.delete(id)
@@ -582,14 +879,21 @@ const MSAModel = types
     },
   }))
   .views(self => ({
+    /**
+     * #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++) {
@@ -601,7 +905,9 @@ const MSAModel = types
       }
       return ['a']
     },
-
+    /**
+     * #getter
+     */
     get tracks(): BasicTrack[] {
       const blanks = self.blanks
       const adapterTracks = self.MSA
@@ -663,16 +969,22 @@ const MSAModel = types
 
       return [...adapterTracks, ...boxTracks, ...annotationTracks]
     },
-
+    /**
+     * #getter
+     */
     get turnedOnTracks() {
       return this.tracks.filter(f => !self.turnedOffTracks.has(f.model.id))
     },
-
-    // returns coordinate in the current relative coordinate scheme
+    /**
+     * #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, blanks } = self
       const index = rowNames.indexOf(rowName)
@@ -680,6 +992,7 @@ const MSAModel = types
       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
@@ -696,24 +1009,31 @@ const MSAModel = types
 
       let count = 0
       for (let k = 0; k < row.length; k++) {
-        if (blanks.includes(k) && k < i + 1) {
+        if (s.has(k) && k < i + 1) {
           count++
         }
       }
 
       return i - count
     },
+    /**
+     * #method
+     */
     globalBpToPx(position: number) {
       let count = 0
+      const s = new Set(self.blanks)
+
       for (let k = 0; k < self.rows[0]?.[1].length; k++) {
-        if (self.blanks.includes(k) && k < position + 1) {
+        if (s.has(k) && k < position + 1) {
           count++
         }
       }
 
       return position - count
     },
-
+    /**
+     * #method
+     */
     relativePxToBp(rowName: string, position: number) {
       const { rowNames, rows } = self
       const index = rowNames.indexOf(rowName)
@@ -732,7 +1052,9 @@ const MSAModel = types
       }
       return 0
     },
-
+    /**
+     * #method
+     */
     getPos(pos: number) {
       let j = 0
       for (let i = 0, k = 0; i < pos; i++, j++) {
@@ -745,6 +1067,9 @@ const MSAModel = types
     },
   }))
   .actions(self => ({
+    /**
+     * #action
+     */
     addAnnotation(
       start: number,
       end: number,
@@ -756,21 +1081,23 @@ const MSAModel = types
         attributes,
       })
     },
-
-    setOffsets(left: number, right: number) {
+    /**
+     * #action
+     */
+    setAnnotationClickBoundaries(left: number, right: number) {
       self.annotPos = { left, right }
     },
-
-    clearAnnotPos() {
+    /**
+     * #action
+     */
+    clearAnnotationClickBoundaries() {
       self.annotPos = undefined
     },
   }))
-
-const model = types.snapshotProcessor(types.compose(BaseViewModel, MSAModel), {
-  postProcessor(result) {
+  .postProcessSnapshot(result => {
     const snap = result as Omit<typeof result, symbol>
     const {
-      data: { tree, msa },
+      data: { tree, msa, treeMetadata },
       ...rest
     } = snap
 
@@ -781,11 +1108,11 @@ const model = types.snapshotProcessor(types.compose(BaseViewModel, MSAModel), {
         // 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