Clear selection

src/ProteinView/clearSelection.ts

@@ -0,0 +1,5 @@
+import { PluginContext } from 'molstar/lib/mol-plugin/context'
+
+export default function clearSelection({ plugin }: { plugin: PluginContext }) {
+  plugin?.managers.interactivity.lociSelects.deselectAll()
+}

src/ProteinView/components/Header.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import { observer } from 'mobx-react'
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+
+// icons
+import MenuIcon from '@mui/icons-material/Menu'
+
+// locals
+import { JBrowsePluginProteinViewModel } from '../model'
+import ProteinAlignment from './ProteinAlignment'
+import { Visibility } from '@mui/icons-material'
+
+const ProteinViewHeader = observer(function ({
+  model,
+}: {
+  model: JBrowsePluginProteinViewModel
+}) {
+  const { clickString, hoverString, showHighlight, zoomToBaseLevel } = model
+  const [show, setShow] = useState(true)
+  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>
+    </div>
+  )
+})
+
+export default ProteinViewHeader

src/ProteinView/components/HelpButton.tsx

@@ -1,23 +1,31 @@
-import React, { Suspense, lazy, useState } from 'react'
+import React, { lazy } from 'react'
 import { IconButton } from '@mui/material'
+import { getSession } from '@jbrowse/core/util'
 
 // locals
+import { JBrowsePluginProteinViewModel } from '../model'
+
+// icons
 import Help from '@mui/icons-material/Help'
 
 const HelpDialog = lazy(() => import('./HelpDialog'))
 
-export default function HelpButton() {
-  const [open, setOpen] = useState(false)
+export default function HelpButton({
+  model,
+}: {
+  model: JBrowsePluginProteinViewModel
+}) {
   return (
-    <>
-      <IconButton style={{ float: 'right' }} onClick={() => setOpen(true)}>
-        <Help />
-      </IconButton>
-      {open ? (
-        <Suspense fallback={null}>
-          <HelpDialog handleClose={() => setOpen(false)} />
-        </Suspense>
-      ) : null}
-    </>
+    <IconButton
+      style={{ float: 'right' }}
+      onClick={() =>
+        getSession(model).queueDialog(handleClose => [
+          HelpDialog,
+          { handleClose },
+        ])
+      }
+    >
+      <Help />
+    </IconButton>
   )
 }

src/ProteinView/components/ProteinAlignment.tsx

@@ -21,6 +21,7 @@ const ProteinAlignment = observer(function ({
     alignment,
     structurePositionToAlignmentMap,
     alignmentToStructurePosition,
+    showHighlight,
   } = model
   const a0 = alignment!.alns[0].seq as string
   const a1 = alignment!.alns[1].seq as string
@@ -52,7 +53,8 @@ const ProteinAlignment = observer(function ({
   }
   return (
     <div>
-      <HelpButton />
+      <HelpButton model={model} />
+
       <Typography>
         Alignment of the protein structure file&apos;s sequence with the
         selected transcript&apos;s sequence. Green is the aligned portion
@@ -78,6 +80,7 @@ const ProteinAlignment = observer(function ({
           </Tooltip>
           <SplitString
             str={a0}
+            showHighlight={showHighlight}
             col={alignmentHoverPos}
             set={set}
             onMouseOver={onMouseOver}
@@ -87,6 +90,7 @@ const ProteinAlignment = observer(function ({
         <div>
           <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
           <SplitString
+            showHighlight={showHighlight}
             str={con}
             col={alignmentHoverPos}
             set={set}
@@ -101,6 +105,7 @@ const ProteinAlignment = observer(function ({
           <SplitString
             str={a1}
             col={alignmentHoverPos}
+            showHighlight={showHighlight}
             set={set}
             onMouseOver={onMouseOver}
             onClick={onClick}

src/ProteinView/components/ProteinView.tsx

@@ -1,20 +1,24 @@
 import React, { useEffect } from 'react'
 import { observer } from 'mobx-react'
-import { ErrorMessage } from '@jbrowse/core/ui'
+import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
+import { PluginContext } from 'molstar/lib/mol-plugin/context'
 
 // locals
-
 import { JBrowsePluginProteinViewModel } from '../model'
-import ProteinViewHeader from './ProteinViewHeader'
+import Header from './Header'
 
 // hooks
 import useProteinView from '../useProteinView'
 import useProteinViewClickBehavior from '../useProteinViewClickBehavior'
 import useProteinViewHoverBehavior from '../useProteinViewHoverBehavior'
+
+// utils
 import selectResidue from '../selectResidue'
-import css from '../css/molstar'
 import highlightResidue from '../highlightResidue'
-import { PluginContext } from 'molstar/lib/mol-plugin/context'
+import clearSelection from '../clearSelection'
+
+// css
+import css from '../css/molstar'
 
 if (document?.head) {
   const style = document.createElement('style')
@@ -27,21 +31,23 @@ const ProteinView = observer(function ({
 }: {
   model: JBrowsePluginProteinViewModel
 }) {
-  const { url, data, showControls } = model
+  const { url, data, showControls, alignment } = 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" />
   )
 })
 
@@ -62,6 +68,7 @@ const ProteinViewContainer = observer(function ({
     structureSeqToTranscriptSeqPosition,
     seq2,
     structureSeqHoverPos,
+    showHighlight,
   } = model
 
   const { error } = useProteinViewClickBehavior({ plugin, model })
@@ -78,14 +85,18 @@ const ProteinViewContainer = observer(function ({
     if (!plugin || !structureSeqToTranscriptSeqPosition || !structure) {
       return
     }
-    for (const coord of Object.keys(structureSeqToTranscriptSeqPosition)) {
-      selectResidue({
-        structure,
-        plugin,
-        selectedResidue: +coord + 1,
-      })
+    if (showHighlight) {
+      for (const coord of Object.keys(structureSeqToTranscriptSeqPosition)) {
+        selectResidue({
+          structure,
+          plugin,
+          selectedResidue: +coord + 1,
+        })
+      }
+    } else {
+      clearSelection({ plugin })
     }
-  }, [plugin, structure, structureSeqToTranscriptSeqPosition])
+  }, [plugin, structure, showHighlight, structureSeqToTranscriptSeqPosition])
 
   useEffect(() => {
     if (!plugin || !structure || structureSeqHoverPos === undefined) {
@@ -105,7 +116,7 @@ const ProteinViewContainer = observer(function ({
   return (
     <div>
       {error ? <ErrorMessage error={error} /> : null}
-      <ProteinViewHeader model={model} />
+      <Header model={model} />
       <div
         ref={parentRef}
         style={{

src/ProteinView/components/SplitString.tsx

@@ -1,16 +1,19 @@
 import React from 'react'
+
 export default function SplitString({
   str,
   col,
   set,
   onMouseOver,
   onClick,
+  showHighlight,
 }: {
   str: string
   col?: number
   set?: Set<number>
   onMouseOver?: (arg: number) => void
   onClick?: (arg: number) => void
+  showHighlight: boolean
 }) {
   return str.split('').map((d, i) => (
     <span
@@ -21,7 +24,7 @@ export default function SplitString({
         background:
           col !== undefined && i === col
             ? '#f69'
-            : set?.has(i)
+            : set?.has(i) && showHighlight
               ? '#33ff19'
               : undefined,
       }}

src/ProteinView/model.ts

@@ -89,6 +89,14 @@ function stateModelFactory() {
          * #property
          */
         connectedViewId: types.maybe(types.string),
+        /**
+         * #property
+         */
+        showHighlight: true,
+        /**
+         * #property
+         */
+        zoomToBaseLevel: false,
       }),
     )
     .volatile(() => ({
@@ -206,6 +214,18 @@ function stateModelFactory() {
       setAlignment(r?: ReturnType<typeof parsePairwise>) {
         self.alignment = r
       },
+      /**
+       * #action
+       */
+      setShowHighlight(arg: boolean) {
+        self.showHighlight = arg
+      },
+      /**
+       * #action
+       */
+      setZoomToBaseLevel(arg: boolean) {
+        self.zoomToBaseLevel = arg
+      },
     }))
     .views(self => ({
       /**

src/ProteinView/proteinToGenomeMapping.ts

@@ -42,7 +42,8 @@ export async function clickProteinToGenome({
 }) {
   const session = getSession(model)
   const result = proteinToGenomeMapping({ structureSeqPos, model })
-  const { genomeToTranscriptSeqMapping } = model
+  const { genomeToTranscriptSeqMapping, zoomToBaseLevel } = model
+  const { assemblyManager } = session
   if (!genomeToTranscriptSeqMapping || result === undefined) {
     return undefined
   }
@@ -57,9 +58,17 @@ export async function clickProteinToGenome({
       end: s2,
     },
   ])
-  await lgv.navToLocString(
-    `${refName}:${s1}-${s2}${strand === -1 ? '[rev]' : ''}`,
-  )
+
+  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(
+      `${refName}:${s1}-${s2}${strand === -1 ? '[rev]' : ''}`,
+    )
+  }
 }
 
 export function hoverProteinToGenome({