react-msaview 3.1.7 → 3.1.8

package/src/components/BoxTrackBlock.tsx

@@ -1,200 +0,0 @@
-import React, { useRef, useMemo, useEffect } from 'react'
-import { observer } from 'mobx-react'
-import { getSnapshot, isStateTreeNode } from 'mobx-state-tree'
-
-// locals
-import { IBoxTrack, MsaViewModel } from '../model'
-import Layout from '../layout'
-
-interface Feat {
-  start: number
-  end: number
-}
-
-const BoxTrackBlock = observer(function ({
-  track,
-  model,
-  offsetX,
-}: {
-  track: IBoxTrack
-  model: MsaViewModel
-  offsetX: number
-}) {
-  const {
-    blockSize,
-    colWidth,
-    blanks,
-    rowHeight,
-    highResScaleFactor,
-    fontSize,
-    scrollX,
-  } = model
-  const { height, features, associatedRowName } = track.model
-
-  const feats: Feat[] = isStateTreeNode(features)
-    ? // @ts-expect-error
-      getSnapshot(features)
-    : features
-
-  const layout = useMemo(() => {
-    const temp = new Layout()
-
-    feats?.forEach((feature, index) => {
-      const { start, end } = feature
-      if (associatedRowName) {
-        const s = model.rowSpecificBpToPx(associatedRowName, start - 1)
-        const e = model.rowSpecificBpToPx(associatedRowName, end)
-        temp.addRect(`${index}`, s, e, rowHeight, feature)
-      } else {
-        const s = model.globalBpToPx(start - 1)
-        const e = model.globalBpToPx(end)
-        temp.addRect(`${index}`, s, e, rowHeight, feature)
-      }
-    })
-    return temp
-
-    // might convert to autorun based drawing
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rowHeight, feats, associatedRowName, model, blanks])
-
-  const ref = useRef<HTMLCanvasElement>(null)
-  const labelRef = useRef<HTMLCanvasElement>(null)
-  const mouseoverRef = useRef<HTMLCanvasElement>(null)
-
-  useEffect(() => {
-    if (!ref.current) {
-      return
-    }
-
-    const ctx = ref.current.getContext('2d')
-    if (!ctx) {
-      return
-    }
-
-    ctx.resetTransform()
-    ctx.scale(highResScaleFactor, highResScaleFactor)
-    ctx.clearRect(0, 0, blockSize, height)
-    ctx.translate(-offsetX, 0)
-    ctx.textAlign = 'center'
-    ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
-
-    const xStart = Math.max(0, Math.floor(offsetX / colWidth))
-    ctx.fillStyle = 'goldenrod'
-    layout.rectangles.forEach(value => {
-      const { minX, maxX, minY, maxY } = value
-
-      const x1 = (minX - xStart) * colWidth + offsetX - (offsetX % colWidth)
-      const x2 = (maxX - xStart) * colWidth + offsetX - (offsetX % colWidth)
-
-      if (x2 - x1 > 0) {
-        ctx.fillRect(x1, minY, x2 - x1, (maxY - minY) / 2)
-      }
-    })
-  }, [
-    associatedRowName,
-    fontSize,
-    blockSize,
-    colWidth,
-    layout.rectangles,
-    model,
-    rowHeight,
-    height,
-    offsetX,
-    highResScaleFactor,
-    features,
-    blanks,
-  ])
-
-  useEffect(() => {
-    if (!labelRef.current) {
-      return
-    }
-
-    const ctx = labelRef.current.getContext('2d')
-    if (!ctx) {
-      return
-    }
-
-    // this logic is very similar to MSACanvas
-    ctx.resetTransform()
-    ctx.scale(highResScaleFactor, highResScaleFactor)
-    ctx.clearRect(0, 0, blockSize, height)
-    ctx.translate(-offsetX, 0)
-    ctx.textAlign = 'center'
-    ctx.font = ctx.font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`)
-
-    ctx.fillStyle = 'black'
-    ctx.textAlign = 'left'
-    for (const value of layout.rectangles.values()) {
-      const { minX, maxX, maxY, minY, data } = value
-
-      const x1 = minX * colWidth
-      const x2 = maxX * colWidth
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const feature = data as any
-
-      if (x2 - x1 > 0) {
-        const note = feature.attributes?.Note?.[0]
-        const name = feature.attributes?.Name?.[0]
-        const type = feature.type
-        ctx.fillText(
-          [type, name, note].filter(f => !!f).join(' - '),
-          Math.max(Math.min(-scrollX, x2), x1),
-          minY + (maxY - minY),
-        )
-      }
-    }
-  }, [
-    blockSize,
-    colWidth,
-    scrollX,
-    highResScaleFactor,
-    height,
-    layout.rectangles,
-    offsetX,
-    features,
-    model,
-    rowHeight,
-    blanks,
-  ])
-
-  return !features ? null : (
-    <>
-      <canvas
-        ref={ref}
-        height={height * highResScaleFactor}
-        width={blockSize * highResScaleFactor}
-        style={{
-          position: 'absolute',
-          left: scrollX + offsetX,
-          width: blockSize,
-          height,
-        }}
-      />
-      <canvas
-        ref={labelRef}
-        height={height * highResScaleFactor}
-        width={blockSize * highResScaleFactor}
-        style={{
-          position: 'absolute',
-          left: scrollX + offsetX,
-          width: blockSize,
-          height,
-        }}
-      />
-      <canvas
-        ref={mouseoverRef}
-        height={height * highResScaleFactor}
-        width={blockSize * highResScaleFactor}
-        style={{
-          position: 'absolute',
-          left: scrollX + offsetX,
-          width: blockSize,
-          height,
-        }}
-      />
-    </>
-  )
-})
-
-export default BoxTrackBlock

package/src/components/Header.tsx

@@ -1,99 +0,0 @@
-import React, { Suspense, lazy, useState } from 'react'
-import { IconButton } from '@mui/material'
-import { observer } from 'mobx-react'
-
-// locals
-import { MsaViewModel } from '../model'
-
-// icons
-import FolderOpen from '@mui/icons-material/FolderOpen'
-import Settings from '@mui/icons-material/Settings'
-import Help from '@mui/icons-material/Help'
-import Assignment from '@mui/icons-material/Assignment'
-import List from '@mui/icons-material/List'
-
-// locals
-import ZoomControls from './ZoomControls'
-import MultiAlignmentSelector from './MultiAlignmentSelector'
-import HeaderInfoArea from './HeaderInfoArea'
-
-const SettingsDialog = lazy(() => import('./dialogs/SettingsDialog'))
-const AboutDialog = lazy(() => import('./dialogs/AboutDialog'))
-const MetadataDialog = lazy(() => import('./dialogs/MetadataDialog'))
-const TracklistDialog = lazy(() => import('./dialogs/TracklistDialog'))
-
-const Header = observer(function ({ model }: { model: MsaViewModel }) {
-  const [settingsDialogViz, setSettingsDialogViz] = useState(false)
-  const [aboutDialogViz, setAboutDialogViz] = useState(false)
-  const [detailsDialogViz, setMetadataDialogViz] = useState(false)
-  const [tracklistDialogViz, setTracklistDialogViz] = useState(false)
-
-  return (
-    <div style={{ display: 'flex' }}>
-      <IconButton
-        onClick={async () => {
-          try {
-            model.setData({ tree: '', msa: '' })
-            model.clearSelectedStructures()
-            model.setScrollY(0)
-            model.setScrollX(0)
-            model.setCurrentAlignment(0)
-            await model.setTreeFilehandle(undefined)
-            await model.setMSAFilehandle(undefined)
-          } catch (e) {
-            console.error(e)
-            model.setError(e)
-          }
-        }}
-      >
-        <FolderOpen />
-      </IconButton>
-      <IconButton onClick={() => setSettingsDialogViz(true)}>
-        <Settings />
-      </IconButton>
-      <IconButton onClick={() => setMetadataDialogViz(true)}>
-        <Assignment />
-      </IconButton>
-      <IconButton onClick={() => setTracklistDialogViz(true)}>
-        <List />
-      </IconButton>
-      <Suspense fallback={null}>
-        {settingsDialogViz ? (
-          <SettingsDialog
-            model={model}
-            onClose={() => setSettingsDialogViz(false)}
-          />
-        ) : null}
-        {aboutDialogViz ? (
-          <AboutDialog onClose={() => setAboutDialogViz(false)} />
-        ) : null}
-        {detailsDialogViz ? (
-          <MetadataDialog
-            model={model}
-            onClose={() => setMetadataDialogViz(false)}
-          />
-        ) : null}
-
-        {tracklistDialogViz ? (
-          <TracklistDialog
-            model={model}
-            onClose={() => setTracklistDialogViz(false)}
-          />
-        ) : null}
-      </Suspense>
-      <MultiAlignmentSelector model={model} />
-      <ZoomControls model={model} />
-      <HeaderInfoArea model={model} />
-      <Spacer />
-      <IconButton onClick={() => setAboutDialogViz(true)}>
-        <Help />
-      </IconButton>
-    </div>
-  )
-})
-
-function Spacer() {
-  return <div style={{ flex: 1 }} />
-}
-
-export default Header

package/src/components/HeaderInfoArea.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import { Typography } from '@mui/material'
-import { observer } from 'mobx-react'
-
-// locals
-import { MsaViewModel } from '../model'
-
-const HeaderInfoArea = observer(({ model }: { model: MsaViewModel }) => {
-  const { mouseOverRowName, mouseCol } = model
-  return (
-    <div>
-      {mouseOverRowName && mouseCol !== undefined ? (
-        <Typography>
-          {mouseOverRowName}:{model.relativePxToBp(mouseOverRowName, mouseCol)}
-        </Typography>
-      ) : null}
-    </div>
-  )
-})
-
-export default HeaderInfoArea

package/src/components/VerticalGuide.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-
-import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
-import { Tooltip } from '@mui/material'
-
-// icons
-import { MsaViewModel } from '../model'
-
-const useStyles = makeStyles()({
-  guide: {
-    pointerEvents: 'none',
-    height: '100%',
-    width: 1,
-    position: 'absolute',
-    zIndex: 10,
-  },
-})
-
-const VerticalGuide = observer(function ({
-  model,
-  coordX,
-}: {
-  model: MsaViewModel
-  coordX: number
-}) {
-  const { treeAreaWidth } = model
-  const { classes } = useStyles()
-  return (
-    <>
-      <Tooltip open placement="top" title={`${model.pxToBp(coordX) + 1}`} arrow>
-        <div
-          style={{
-            left: coordX + treeAreaWidth,
-            position: 'absolute',
-            height: 1,
-          }}
-        />
-      </Tooltip>
-      <div
-        className={classes.guide}
-        style={{
-          left: coordX + treeAreaWidth,
-          background: 'red',
-        }}
-      />
-    </>
-  )
-})
-export default VerticalGuide

package/src/components/ZoomControls.tsx

@@ -1,86 +0,0 @@
-import React, { Suspense, lazy, useState } from 'react'
-import { IconButton } from '@mui/material'
-import { observer } from 'mobx-react'
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
-
-// locals
-import { MsaViewModel } from '../model'
-
-// icons
-import MoreVert from '@mui/icons-material/MoreVert'
-import ZoomIn from '@mui/icons-material/ZoomIn'
-import ZoomOut from '@mui/icons-material/ZoomOut'
-
-// lazies
-const ExportSVGDialog = lazy(() => import('./ExportSVGDialog'))
-
-const ZoomControls = observer(function ZoomControls({
-  model,
-}: {
-  model: MsaViewModel
-}) {
-  const { colWidth, rowHeight } = model
-  const [exportSvgDialogOpen, setExportSvgDialogOpen] = useState(false)
-  return (
-    <>
-      <IconButton
-        onClick={() => {
-          model.setColWidth(Math.ceil(colWidth * 1.5))
-          model.setRowHeight(Math.ceil(rowHeight * 1.5))
-        }}
-      >
-        <ZoomIn />
-      </IconButton>
-      <IconButton
-        onClick={() => {
-          model.setColWidth(Math.max(1, Math.floor(colWidth * 0.75)))
-          model.setRowHeight(Math.max(1.5, Math.floor(rowHeight * 0.75)))
-        }}
-      >
-        <ZoomOut />
-      </IconButton>
-      <CascadingMenuButton
-        menuItems={[
-          {
-            label: 'Decrease row height',
-            onClick: () => model.setRowHeight(Math.max(1.5, rowHeight * 0.75)),
-          },
-          {
-            label: 'Increase row height',
-            onClick: () => model.setRowHeight(rowHeight * 1.5),
-          },
-          {
-            label: 'Decrease col width',
-            onClick: () => model.setColWidth(Math.max(1, colWidth * 0.75)),
-          },
-          {
-            label: 'Increase col width',
-            onClick: () => model.setColWidth(colWidth * 1.5),
-          },
-          {
-            label: 'Reset zoom to default',
-            onClick: () => {
-              model.setColWidth(16)
-              model.setRowHeight(20)
-            },
-          },
-          {
-            label: 'Export SVG',
-            onClick: () => setExportSvgDialogOpen(true),
-          },
-        ]}
-      >
-        <MoreVert />
-      </CascadingMenuButton>
-      {exportSvgDialogOpen ? (
-        <Suspense fallback={null}>
-          <ExportSVGDialog
-            model={model}
-            onClose={() => setExportSvgDialogOpen(false)}
-          />
-        </Suspense>
-      ) : null}
-    </>
-  )
-})
-export default ZoomControls

package/dist/components/{MSAPanel → msa}/renderMSABlock.d.ts

@@ -1,5 +1,5 @@
-import { MsaViewModel } from '../../model';
 import { Theme } from '@mui/material';
+import { MsaViewModel } from '../../model';
 export declare function renderMSABlock({ model, offsetX, offsetY, contrastScheme, ctx, theme, highResScaleFactorOverride, blockSizeXOverride, blockSizeYOverride, }: {
     offsetX: number;
     offsetY: number;