Misc updates, don't block loading until pairwise sequence analysis lo…

…aded
GMOD · Jun 3, 2024 · 591f50d · 591f50d
1 parent 952eaad
commit 591f50d
Show file tree

Hide file tree

Showing 7 changed files with 963 additions and 971 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -1,4 +1,5 @@
 module.exports = {
+  root: true,
   env: {
     browser: true,
     es2021: true,

diff --git a/package.json b/package.json
@@ -33,25 +33,25 @@
     "@jbrowse/plugin-linear-genome-view": "^2.4.2",
     "@mui/material": "^5.12.0",
     "@mui/system": "^5.12.0",
-    "@mui/x-data-grid": "^6.16.1",
+    "@mui/x-data-grid": "^7.3.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.11.16",
     "@types/pako": "^2.0.0",
     "@types/react": "^18.2.54",
     "@typescript-eslint/eslint-plugin": "^7.0.1",
     "@typescript-eslint/parser": "^7.0.1",
-    "esbuild": "^0.20.0",
+    "esbuild": "^0.21.4",
     "eslint": "^8.38.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^4.0.8",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-unicorn": "^51.0.0",
+    "eslint-plugin-unicorn": "^53.0.0",
     "jest": "^29.7.0",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.1",
-    "mobx-state-tree": "5.4.1",
+    "mobx-state-tree": "5.4.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",
     "pretty-bytes": "^6.1.1",

diff --git a/src/ProteinView/components/Header.tsx b/src/ProteinView/components/Header.tsx
@@ -1,61 +1,82 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { observer } from 'mobx-react'
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 
 // icons
 import MenuIcon from '@mui/icons-material/Menu'
+import Visibility from '@mui/icons-material/Visibility'
 
 // locals
 import { JBrowsePluginProteinViewModel } from '../model'
 import ProteinAlignment from './ProteinAlignment'
-import { Visibility } from '@mui/icons-material'
+import { LoadingEllipses } from '@jbrowse/core/ui'
 
 const ProteinViewHeader = observer(function ({
   model,
 }: {
   model: JBrowsePluginProteinViewModel
 }) {
-  const { clickString, hoverString, showHighlight, zoomToBaseLevel } = model
-  const [show, setShow] = useState(true)
+  const { alignment, showAlignment } = model
   return (
     <div>
-      <div style={{ display: 'flex' }}>
-        <span>
-          {[
-            clickString ? `Click: ${clickString}` : '',
-            hoverString ? `Hover: ${hoverString}` : '',
-          ].join(' ')}
-        </span>
-        <span style={{ flexGrow: 1 }} />
-        <CascadingMenuButton
-          menuItems={[
-            {
-              label: 'Show alignment',
-              type: 'checkbox',
-              checked: show,
-              icon: Visibility,
-              onClick: () => setShow(!show),
-            },
-            {
-              label: 'Show highlight',
-              type: 'checkbox',
-              checked: showHighlight,
-              icon: Visibility,
-              onClick: () => model.setShowHighlight(!showHighlight),
-            },
-            {
-              label: 'Zoom to base level on click',
-              type: 'checkbox',
-              checked: zoomToBaseLevel,
-              icon: Visibility,
-              onClick: () => model.setZoomToBaseLevel(!zoomToBaseLevel),
-            },
-          ]}
-        >
-          <MenuIcon />
-        </CascadingMenuButton>
-      </div>
-      <div>{show ? <ProteinAlignment model={model} /> : null}</div>
+      <InformativeHeaderArea model={model} />
+      {showAlignment && alignment ? (
+        <ProteinAlignment model={model} />
+      ) : (
+        <LoadingEllipses message="Loading pairwise alignment" />
+      )}
+    </div>
+  )
+})
+
+const InformativeHeaderArea = observer(function ({
+  model,
+}: {
+  model: JBrowsePluginProteinViewModel
+}) {
+  const {
+    showAlignment,
+    clickString,
+    hoverString,
+    showHighlight,
+    zoomToBaseLevel,
+  } = model
+  return (
+    <div style={{ display: 'flex' }}>
+      <span>
+        {[
+          clickString ? `Click: ${clickString}` : '',
+          hoverString ? `Hover: ${hoverString}` : '',
+        ].join(' ')}
+      </span>
+      <span style={{ flexGrow: 1 }} />
+      <CascadingMenuButton
+        menuItems={[
+          {
+            label: 'Show pairwise alignment area',
+            type: 'checkbox',
+            checked: showAlignment,
+            icon: Visibility,
+            onClick: () => model.setShowAlignment(!showAlignment),
+          },
+          {
+            label: 'Show pairwise alignment as highlight',
+            type: 'checkbox',
+            checked: showHighlight,
+            icon: Visibility,
+            onClick: () => model.setShowHighlight(!showHighlight),
+          },
+          {
+            label: 'Zoom to base level on click',
+            type: 'checkbox',
+            checked: zoomToBaseLevel,
+            icon: Visibility,
+            onClick: () => model.setZoomToBaseLevel(!zoomToBaseLevel),
+          },
+        ]}
+      >
+        <MenuIcon />
+      </CascadingMenuButton>
     </div>
   )
 })

diff --git a/src/ProteinView/components/ProteinView.tsx b/src/ProteinView/components/ProteinView.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { observer } from 'mobx-react'
-import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
+import { ErrorMessage } from '@jbrowse/core/ui'
 import { PluginContext } from 'molstar/lib/mol-plugin/context'
 
 // locals
@@ -31,23 +31,21 @@ const ProteinView = observer(function ({
 }: {
   model: JBrowsePluginProteinViewModel
 }) {
-  const { url, data, showControls, alignment } = model
+  const { url, data, showControls } = model
   const { plugin, seq, parentRef, error } = useProteinView({
     url,
     data,
     showControls,
   })
   return error ? (
     <ErrorMessage error={error} />
-  ) : alignment ? (
+  ) : (
     <ProteinViewContainer
       model={model}
       plugin={plugin}
       seq={seq}
       parentRef={parentRef}
     />
-  ) : (
-    <LoadingEllipses title="Loading pairwise alignment" />
   )
 })
 
@@ -69,6 +67,7 @@ const ProteinViewContainer = observer(function ({
     seq2,
     structureSeqHoverPos,
     showHighlight,
+    alignment,
   } = model
 
   const { error } = useProteinViewClickBehavior({ plugin, model })
@@ -114,7 +113,7 @@ const ProteinViewContainer = observer(function ({
   }, [plugin, structure, structureSeqHoverPos])
 
   return (
-    <div>
+    <div style={{ background: !alignment ? '#ccc' : undefined }}>
       {error ? <ErrorMessage error={error} /> : null}
       <Header model={model} />
       <div

diff --git a/src/ProteinView/model.ts b/src/ProteinView/model.ts
@@ -97,6 +97,10 @@ function stateModelFactory() {
          * #property
          */
         zoomToBaseLevel: false,
+        /**
+         * #property
+         */
+        showAlignment: true,
       }),
     )
     .volatile(() => ({
@@ -139,6 +143,12 @@ function stateModelFactory() {
       },
     }))
     .actions(self => ({
+      /**
+       * #action
+       */
+      setShowAlignment(f: boolean) {
+        self.showAlignment = f
+      },
       /**
        * #action
        */

diff --git a/src/ProteinView/proteinToGenomeMapping.ts b/src/ProteinView/proteinToGenomeMapping.ts
@@ -62,7 +62,6 @@ export async function clickProteinToGenome({
   if (!zoomToBaseLevel) {
     const assembly = assemblyManager.get(lgv.assemblyNames[0])
     const r = assembly?.getCanonicalRefName(refName) ?? refName
-    // @ts-expect-error
     lgv.centerAt(s1, r)
   } else {
     await lgv.navToLocString(