Updates

GMOD · Aug 19, 2024 · 0ff2559 · 0ff2559
1 parent bf1de37
commit 0ff2559
Show file tree

Hide file tree

Showing 10 changed files with 353 additions and 334 deletions.
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -13,7 +13,13 @@ const urlParams = new URLSearchParams(window.location.search)
 const val = urlParams.get('data')
 
 const mymodel = AppGlobal.create(
-  val ? JSON.parse(val) : { msaview: { type: 'MsaView' } },
+  val
+    ? JSON.parse(val)
+    : {
+        msaview: {
+          type: 'MsaView',
+        },
+      },
 )
 
 let lastTime = 0

diff --git a/lib/bundle_test/index.html b/lib/bundle_test/index.html
@@ -5,30 +5,33 @@
     </script>
     <script
       crossorigin
-      src="https://unpkg.com/react@17/umd/react.development.js"
+      src="https://unpkg.com/react@18/umd/react.development.js"
     ></script>
     <script
       crossorigin
-      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
+      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
     ></script>
     <script crossorigin src="../bundle/index.js"></script>
   </head>
   <body>
-    <div id="root" />
+    <div id="root" style="width: 1800px" />
     <script>
-      const { MSAView, MSAModel } = window.ReactMSAView
-      const model = MSAModel.create({
+      const { MSAView, MSAModelF } = window.ReactMSAView
+      const model = MSAModelF().create({
         id: `${Math.random()}`,
         type: 'MsaView',
       })
+
       // can pass msaFilehandle and treeFilehandle if you want to point at a URL of a MSA/tree
+
       // const model = MSAModel.create({ id: `${Math.random()}`, type: "MsaView", msaFilehandle: {uri:'http://path/to/msa.stock'} });
+
       // or pass a string of an msa/tree directly to the "data" field if not pointing to a URL
-      // const model = MSAModel.create({ id: `${Math.random()}`, type: "MsaView", data: {msa:/*string of msa here */} });
 
-      // choose MSA width, calculate width of div/rendering area if needed beforehand
+      // const model = MSAModel.create({ id: `${Math.random()}`, type: "MsaView", data: {msa:/*string of msa here */} });
       model.setWidth(1800)
 
+      // choose MSA width, calculate width of div/rendering area if needed beforehand
       ReactDOM.render(
         React.createElement(MSAView, { model }),
         document.getElementById('root'),

diff --git a/lib/rollup.config.js b/lib/rollup.config.js
@@ -1,6 +1,5 @@
 import commonjs from '@rollup/plugin-commonjs'
 import replace from '@rollup/plugin-replace'
-import json from '@rollup/plugin-json'
 import nodePolyfills from 'rollup-plugin-polyfill-node'
 import terser from '@rollup/plugin-terser'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
@@ -35,7 +34,6 @@ export default {
     }),
     nodeResolve({ browser: true }),
     commonjs(),
-    json(),
     nodePolyfills(),
     terser(),
   ],

diff --git a/lib/src/colorSchemes.ts b/lib/src/colorSchemes.ts
@@ -495,8 +495,8 @@ export function getClustalXColor(
 // info http://www.jalview.org/help/html/colourSchemes/clustal.html
 // modifications:
 // reference to clustalX source code scheme modifies what the jalview.org
-// scheme says there the jalview.org colorscheme says WLVIMAFCHP but it
-// should be WLVIMAFCHPY, colprot.xml says e.g. %#ACFHILMVWYPp" which has Y
+// scheme says there the jalview.org colorscheme says WLVIMAFCHP but it should
+// be WLVIMAFCHPY, colprot.xml says e.g. %#ACFHILMVWYPp" which has Y
 export function getPercentIdentityColor(
   stats: Record<string, number>,
   total: number,

diff --git a/lib/src/components/minimap/Minimap.tsx b/lib/src/components/minimap/Minimap.tsx
@@ -2,13 +2,15 @@ import React, { useEffect, useRef, useState } from 'react'
 import { observer } from 'mobx-react'
 import type { MsaViewModel } from '../../model'
 
+interface ClickCoord {
+  clientX: number
+  scrollX: number
+}
+
 const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
-  const [mouseDown, setMouseDown] = useState<{
-    clientX: number
-    scrollX: number
-  }>()
-  const scheduled = useRef(false)
+  const [mouseDown, setMouseDown] = useState<ClickCoord>()
   const [hovered, setHovered] = useState(false)
+  const scheduled = useRef(false)
   const { scrollX, msaAreaWidth, minimapHeight, colWidth, numColumns } = model
   const unit = msaAreaWidth / numColumns / colWidth
   const left = -scrollX
@@ -48,11 +50,17 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
   const barHeight = 12
   const polygonHeight = minimapHeight - barHeight
   return (
-    <div style={{ position: 'relative', height: minimapHeight, width: '100%' }}>
+    <div
+      style={{
+        position: 'relative',
+        height: minimapHeight,
+        width: '100%',
+      }}
+    >
       <div
         style={{
-          boxSizing: 'border-box',
           height: barHeight,
+          boxSizing: 'border-box',
           border: '1px solid #555',
         }}
       />

diff --git a/lib/src/components/msa/MSACanvasBlock.tsx b/lib/src/components/msa/MSACanvasBlock.tsx
@@ -86,7 +86,7 @@ const MSACanvasBlock = observer(function ({
         const { left, top } = ref.current.getBoundingClientRect()
         const mouseX = event.clientX - left + offsetX
         const mouseY = event.clientY - top + offsetY
-        const x = Math.floor(mouseX / colWidth) + 1
+        const x = Math.floor(mouseX / colWidth)
         const y = Math.floor(mouseY / rowHeight)
         if (x === mouseClickCol && y === mouseClickRow) {
           model.setMouseClickPos(undefined, undefined)

diff --git a/lib/src/components/msa/MSAMouseoverCanvas.tsx b/lib/src/components/msa/MSAMouseoverCanvas.tsx
@@ -6,7 +6,11 @@ import { autorun } from 'mobx'
 import type { MsaViewModel } from '../../model'
 import { renderMouseover } from './renderMSAMouseover'
 
-const MSAMouseoverCanvas = observer(({ model }: { model: MsaViewModel }) => {
+const MSAMouseoverCanvas = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
   const ref = useRef<HTMLCanvasElement>(null)
   const { height, width } = model
   useEffect(() => {

diff --git a/lib/src/model.ts b/lib/src/model.ts
@@ -597,7 +597,7 @@ function stateModelFactory() {
       /**
        * #getter
        */
-      get menuItems() {
+      menuItems() {
         return []
       },
       /**

diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "next",
+    "eslint-plugin-react-hooks": "^5.1.0-rc-d48603a5-20240813",
     "eslint-plugin-react-refresh": "^0.4.9",
     "eslint-plugin-unicorn": "^55.0.0",
     "globals": "^15.9.0",