jbrowse-plugin-msaview 1.0.18 → 2.0.0

package/dist/utils/fetch.d.ts

@@ -0,0 +1,4 @@
+export declare function myfetch(url: string, args?: RequestInit): Promise<Response>;
+export declare function textfetch(url: string, args?: RequestInit): Promise<string>;
+export declare function jsonfetch(url: string, args?: RequestInit): Promise<any>;
+export declare function timeout(time: number): Promise<unknown>;

package/dist/utils/fetch.js

@@ -0,0 +1,19 @@
+export async function myfetch(url, args) {
+    const response = await fetch(url, args);
+    if (!response.ok) {
+        throw new Error(`HTTP ${response.status} fetching ${url} ${await response.text()}`);
+    }
+    return response;
+}
+export async function textfetch(url, args) {
+    const response = await myfetch(url, args);
+    return response.text();
+}
+export async function jsonfetch(url, args) {
+    const response = await myfetch(url, args);
+    return response.json();
+}
+export function timeout(time) {
+    return new Promise(res => setTimeout(res, time));
+}
+//# sourceMappingURL=fetch.js.map

package/dist/utils/fetch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fetch.js","sourceRoot":"","sources":["../../src/utils/fetch.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,KAAK,UAAU,OAAO,CAAC,GAAW,EAAE,IAAkB;IAC3D,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;IAEvC,IAAI,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CACb,QAAQ,QAAQ,CAAC,MAAM,aAAa,GAAG,IAAI,MAAM,QAAQ,CAAC,IAAI,EAAE,EAAE,CACnE,CAAA;IACH,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,GAAW,EAAE,IAAkB;IAC7D,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;IACzC,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAA;AACxB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,GAAW,EAAE,IAAkB;IAC7D,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA;IACzC,OAAO,QAAQ,CAAC,IAAI,EAAE,CAAA;AACxB,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,IAAY;IAClC,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAA;AAClD,CAAC"}

package/dist/utils/msa.d.ts

@@ -0,0 +1,8 @@
+export declare function launchMSA({ algorithm, sequence, onProgress, }: {
+    algorithm: string;
+    sequence: string;
+    onProgress: (arg: string) => void;
+}): Promise<{
+    msa: string;
+    tree: string;
+}>;

package/dist/utils/msa.js

@@ -0,0 +1,75 @@
+import { textfetch, timeout } from './fetch';
+const base = `https://www.ebi.ac.uk/Tools/services/rest`;
+async function runClustalOmega({ sequence, onProgress, }) {
+    const jobId = await textfetch(`${base}/clustalo/run`, {
+        method: 'POST',
+        body: new URLSearchParams({
+            email: 'colin.diesh@gmail.com',
+            sequence,
+        }),
+    });
+    await wait({ jobId, algorithm: 'clustalo', onProgress });
+    return {
+        msa: await textfetch(`${base}/clustalo/result/${jobId}/aln-clustal_num`),
+        tree: await textfetch(`${base}/clustalo/result/${jobId}/phylotree`),
+    };
+}
+async function runMuscle({ sequence, onProgress, }) {
+    const jobId = await textfetch(`${base}/muscle/run`, {
+        method: 'POST',
+        body: new URLSearchParams({
+            email: 'colin.diesh@gmail.com',
+            format: 'clw',
+            tree: 'tree1',
+            sequence,
+        }),
+    });
+    await wait({ jobId, algorithm: 'muscle', onProgress });
+    return {
+        msa: await textfetch(`${base}/muscle/result/${jobId}/fa`),
+        tree: await textfetch(`${base}/muscle/result/${jobId}/phylotree`),
+    };
+}
+async function runKalign({ sequence, onProgress, }) {
+    const jobId = await textfetch(`${base}/kalign/run`, {
+        method: 'POST',
+        body: new URLSearchParams({
+            email: 'colin.diesh@gmail.com',
+            stype: 'protein',
+            sequence,
+        }),
+    });
+    await wait({ jobId, algorithm: 'kalign', onProgress });
+    return {
+        msa: await textfetch(`${base}/kalign/result/${jobId}/fa`),
+        tree: await textfetch(`${base}/kalign/result/${jobId}/phylotree`),
+    };
+}
+async function wait({ onProgress, jobId, algorithm, }) {
+    while (true) {
+        for (let i = 0; i < 10; i++) {
+            await timeout(1000);
+            onProgress(`Re-checking MSA status in... ${10 - i}`);
+        }
+        const result = await textfetch(`${base}/${algorithm}/status/${jobId}`);
+        if (result === 'FINISHED') {
+            break;
+        }
+    }
+}
+export async function launchMSA({ algorithm, sequence, onProgress, }) {
+    onProgress(`Launching ${algorithm} MSA...`);
+    if (algorithm === 'clustalo') {
+        return runClustalOmega({ sequence, onProgress });
+    }
+    else if (algorithm === 'muscle') {
+        return runMuscle({ sequence, onProgress });
+    }
+    else if (algorithm === 'kalign') {
+        return runKalign({ sequence, onProgress });
+    }
+    else {
+        throw new Error('unknown algorithm');
+    }
+}
+//# sourceMappingURL=msa.js.map

package/dist/utils/msa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"msa.js","sourceRoot":"","sources":["../../src/utils/msa.ts"],"names":[],"mappings":"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"}

package/dist/utils/ncbiBlast.d.ts

@@ -0,0 +1,20 @@
+export declare const BLAST_URL = "https://blast.ncbi.nlm.nih.gov/blast/Blast.cgi";
+export declare function queryBlast({ query, blastDatabase, blastProgram, onProgress, onRid, }: {
+    query: string;
+    blastDatabase: string;
+    blastProgram: string;
+    onProgress: (arg: string) => void;
+    onRid: (arg: string) => void;
+}): Promise<{
+    rid: string;
+    hits: {
+        description: {
+            accession: string;
+            id: string;
+            sciname: string;
+        }[];
+        hsps: {
+            hseq: string;
+        }[];
+    }[];
+}>;

package/dist/utils/ncbiBlast.js

@@ -0,0 +1,66 @@
+import { jsonfetch, textfetch, timeout } from './fetch';
+export const BLAST_URL = `https://blast.ncbi.nlm.nih.gov/blast/Blast.cgi`;
+export async function queryBlast({ query, blastDatabase, blastProgram, onProgress, onRid, }) {
+    onProgress('Submitting to NCBI BLAST...');
+    const { rid } = await initialQuery({
+        query,
+        blastDatabase,
+        blastProgram,
+    });
+    onRid(rid);
+    await waitForRid({ rid, onProgress });
+    const ret = await jsonfetch(`${BLAST_URL}?CMD=Get&RID=${rid}&FORMAT_TYPE=JSON2_S&FORMAT_OBJECT=Alignment`);
+    const hits = ret.BlastOutput2[0].report.results.search.hits;
+    return { rid, hits };
+}
+async function initialQuery({ query, blastProgram, blastDatabase, }) {
+    const res = await textfetch(BLAST_URL, {
+        method: 'POST',
+        body: new URLSearchParams({
+            CMD: 'Put',
+            PROGRAM: blastProgram,
+            DATABASE: blastDatabase,
+            QUERY: query,
+            ...(blastDatabase === 'nr_clustered_seq'
+                ? {
+                    CLUSTERED_DB: 'on',
+                    DB_TYPE: 'Experimental Databases',
+                }
+                : {}),
+        }),
+    });
+    // the initial submission/query to the BLAST "REST API" does not return JSON
+    // as a response (e.g. FORMAT_TYPE=JSON does not work), so the RID is
+    // literally parsed from the text of the HTML that is returned
+    const rid = res.match(/^    RID = (.*$)/m)?.[1];
+    const rtoe = res.match(/^    RTOE = (.*$)/m)?.[1];
+    if (!rid) {
+        throw new Error('Failed to get RID from BLAST request');
+    }
+    return { rid, rtoe };
+}
+async function waitForRid({ rid, onProgress, }) {
+    while (true) {
+        const iter = 20;
+        for (let i = 0; i < iter; i++) {
+            await timeout(1000);
+            onProgress(`Re-checking BLAST status in... ${iter - i}`);
+        }
+        const res = await textfetch(`${BLAST_URL}?CMD=Get&FORMAT_OBJECT=SearchInfo&RID=${rid}`);
+        if (res.match(/\s+Status=WAITING/m)) {
+            continue;
+        }
+        else if (res.match(/\s+Status=FAILED/m)) {
+            throw new Error(`BLAST ${rid} failed; please report to blast-help@ncbi.nlm.nih.gov`);
+        }
+        else if (res.match(/\s+Status=READY/m)) {
+            if (res.match(/\s+ThereAreHits=yes/m)) {
+                return true;
+            }
+            else {
+                throw new Error('No hits found');
+            }
+        }
+    }
+}
+//# sourceMappingURL=ncbiBlast.js.map

package/dist/utils/ncbiBlast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ncbiBlast.js","sourceRoot":"","sources":["../../src/utils/ncbiBlast.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,64 +1,75 @@
 {
-  "version": "1.0.18",
+  "version": "2.0.0",
+  "license": "MIT",
   "name": "jbrowse-plugin-msaview",
   "keywords": [
     "jbrowse",
     "jbrowse2"
   ],
   "main": "dist/index.js",
-  "module": "dist/jbrowse-plugin-msaview.esm.js",
-  "typings": "dist/index.d.ts",
   "files": [
     "dist",
     "src"
   ],
+  "config": {
+    "port": 9000,
+    "browse": {
+      "port": 8999
+    },
+    "jbrowse": {
+      "plugin": {
+        "name": "MsaView"
+      }
+    }
+  },
   "scripts": {
-    "setup": "node scripts/setup.js && npm run browse-install",
     "clean": "rimraf dist",
-    "start": "tsdx watch --verbose --noClean --format umd --name JBrowsePluginMsaView --onFirstSuccess \"serve --cors --listen 9000 .\"",
+    "start": "node esbuild.mjs",
+    "build": "tsc && NODE_ENV=production node esbuild.mjs",
     "prebuild": "npm run clean",
-    "build": "tsdx build --format cjs,esm,umd --name JBrowsePluginMsaView && cp distconfig.json dist/config.json",
-    "browse-install": "cd .jbrowse && rm -rf * && jbrowse create .",
-    "browse": "cd .jbrowse && cp ../jbrowse_config.json . && mv jbrowse_config.json config.json && npx serve .",
-    "test": "tsdx test",
-    "lint": "tsdx lint",
-    "prepublishOnly": "npm test",
-    "prepare": "npm run build",
-    "postinstall": "jbrowse-plugin-postinstall",
+    "lint": "eslint --report-unused-disable-directives --max-warnings 0 src/",
+    "prepack": "npm run build",
     "postversion": "git push --follow-tags"
   },
   "jbrowse-plugin": {
     "name": "MsaView"
   },
-  "prettier": {
-    "semi": false,
-    "singleQuote": true,
-    "trailingComma": "all"
-  },
   "dependencies": {
-    "@material-ui/icons": "^4.11.2",
-    "react-msaview": "^1.2.11"
-  },
-  "peerDependencies": {
-    "@jbrowse/core": "^1.0.4"
+    "g2p_mapper": "^1.0.4",
+    "pako": "^2.1.0",
+    "react-msaview": "^3.0.3"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.10.4",
-    "@jbrowse/core": "^1.0.4",
-    "@jbrowse/development-tools": "^1.0.3",
-    "@material-ui/core": "^4.9.13",
-    "@material-ui/lab": "^4.0.0-alpha.45",
-    "@types/react": "^17.0.0",
-    "cypress": "^6.2.1",
-    "mobx": "^5.0.0",
-    "mobx-react": "^6.0.0",
-    "mobx-state-tree": "3.14.1",
-    "react": "^16.8.0",
-    "rimraf": "^3.0.2",
-    "rxjs": "^6.0.0",
-    "serve": "^11.3.2",
-    "start-server-and-test": "^1.11.7",
-    "tslib": "^2.0.3",
-    "typescript": "^4.1.3"
+    "@emotion/react": "^11.10.4",
+    "@eslint/compat": "^1.1.0",
+    "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
+    "@jbrowse/core": "^2.10.1",
+    "@jbrowse/plugin-linear-genome-view": "^2.7.0",
+    "@mui/icons-material": "^5.15.6",
+    "@mui/material": "^5.14.12",
+    "@mui/system": "^5.14.12",
+    "@mui/x-data-grid": "^7.3.0",
+    "@types/node": "^20.8.6",
+    "@types/pako": "^2.0.1",
+    "@types/react": "^18.2.28",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
+    "esbuild": "^0.23.0",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.0",
+    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "mobx": "^6.10.2",
+    "mobx-react": "^9.0.1",
+    "mobx-state-tree": "^5.3.0",
+    "prettier": "^3.0.3",
+    "pretty-bytes": "^6.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^5.0.5",
+    "rxjs": "^7.8.1",
+    "tss-react": "^4.9.2",
+    "typescript": "^5.2.2"
   }
 }

package/src/AddHighlightModel/GenomeMouseoverHighlight.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { getSession } from '@jbrowse/core/util'
+import { useStyles } from './util'
+
+const GenomeMouseoverHighlight = observer(function GenomeMouseoverHighlight2({
+  model,
+}: {
+  model: LinearGenomeViewModel
+}) {
+  const { hovered } = getSession(model)
+  return hovered &&
+    typeof hovered === 'object' &&
+    'hoverPosition' in hovered ? (
+    <HoverHighlight model={model} />
+  ) : null
+})
+
+const HoverHighlight = observer(function HoverHighlight2({
+  model,
+}: {
+  model: LinearGenomeViewModel
+}) {
+  const { classes } = useStyles()
+  const session = getSession(model)
+  if (session.views.some(s => s.type === 'MsaView')) {
+    const { hovered } = session
+    const { offsetPx } = model
+    // @ts-expect-error
+    const { coord, refName } = hovered.hoverPosition
+
+    const s = model.bpToPx({ refName, coord: coord - 1 })
+    const e = model.bpToPx({ refName, coord: coord })
+    if (s && e) {
+      const width = Math.max(Math.abs(e.offsetPx - s.offsetPx), 4)
+      const left = Math.min(s.offsetPx, e.offsetPx) - offsetPx
+      return <div className={classes.highlight} style={{ left, width }} />
+    }
+  }
+  return null
+})
+
+export default GenomeMouseoverHighlight

package/src/AddHighlightModel/HighlightComponents.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+// locals
+import MsaToGenomeHighlight from './MsaToGenomeHighlight'
+import GenomeMouseoverHighlight from './GenomeMouseoverHighlight'
+
+type LGV = LinearGenomeViewModel
+
+const HighlightComponents = observer(function HighlightComponents2({
+  model,
+}: {
+  model: LGV
+}) {
+  return (
+    <>
+      <MsaToGenomeHighlight model={model} />
+      <GenomeMouseoverHighlight model={model} />
+    </>
+  )
+})
+
+export default HighlightComponents

package/src/AddHighlightModel/MsaToGenomeHighlight.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { getSession } from '@jbrowse/core/util'
+
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
+
+// locals
+import { JBrowsePluginMsaViewModel } from '../MsaViewPanel/model'
+import { useStyles } from './util'
+
+type LGV = LinearGenomeViewModel
+
+function getCanonicalName(assembly: Assembly, s: string) {
+  return assembly.getCanonicalRefName(s) ?? s
+}
+
+const MsaToGenomeHighlight = observer(function MsaToGenomeHighlight2({
+  model,
+}: {
+  model: LGV
+}) {
+  const { classes } = useStyles()
+  const { assemblyManager, views } = getSession(model)
+  const p = views.find(f => f.type === 'MsaView') as JBrowsePluginMsaViewModel
+  const assembly = assemblyManager.get(model.assemblyNames[0])
+  return assembly ? (
+    <>
+      {p?.connectedHighlights.map((r, idx) => {
+        const refName = getCanonicalName(assembly, r.refName)
+        const s = model.bpToPx({ refName, coord: r.start })
+        const e = model.bpToPx({ refName, coord: r.end })
+        if (s && e) {
+          const width = Math.max(Math.abs(e.offsetPx - s.offsetPx), 4)
+          const left = Math.min(s.offsetPx, e.offsetPx) - model.offsetPx
+          return (
+            <div
+              key={`${JSON.stringify(r)}-${idx}`}
+              className={classes.highlight}
+              style={{ left, width }}
+            />
+          )
+        }
+        return null
+      })}
+    </>
+  ) : null
+})
+
+export default MsaToGenomeHighlight

package/src/AddHighlightModel/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+// locals
+import HighlightComponents from './HighlightComponents'
+
+export default function AddHighlightComponentsModelF(
+  pluginManager: PluginManager,
+) {
+  pluginManager.addToExtensionPoint(
+    'LinearGenomeView-TracksContainerComponent',
+    // @ts-expect-error
+    (
+      rest: React.ReactNode[] = [],
+      { model }: { model: LinearGenomeViewModel },
+    ) => {
+      return [
+        ...rest,
+        <HighlightComponents
+          key="highlight_protein_viewer_msaview"
+          model={model}
+        />,
+      ]
+    },
+  )
+}

package/src/AddHighlightModel/util.ts

@@ -0,0 +1,14 @@
+import { makeStyles } from 'tss-react/mui'
+
+export const useStyles = makeStyles()({
+  highlight: {
+    height: '100%',
+    background: 'rgba(255,255,0,0.2)',
+    border: '1px solid rgba(50,50,0,0.2)',
+    position: 'absolute',
+    zIndex: 1000,
+    textAlign: 'center',
+    pointerEvents: 'none',
+    overflow: 'hidden',
+  },
+})

package/src/LaunchMsaView/components/LaunchMsaViewDialog.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react'
+import { Dialog } from '@jbrowse/core/ui'
+import { Box, Tab, Tabs } from '@mui/material'
+import { AbstractTrackModel, Feature } from '@jbrowse/core/util'
+
+// locals
+
+import { CustomTabPanel, a11yProps } from './TabUtils'
+import NewNcbiBlastQueryPanel from './NewNCBIBlastQuery'
+import PreLoadedMSA from './PreLoadedMSA/PreLoadedMSADataPanel'
+
+export default function LaunchProteinViewDialog({
+  handleClose,
+  feature,
+  model,
+}: {
+  handleClose: () => void
+  feature: Feature
+  model: AbstractTrackModel
+}) {
+  const [value, setValue] = useState(0)
+
+  return (
+    <Dialog
+      maxWidth="xl"
+      title="Launch MSA view"
+      onClose={() => handleClose()}
+      open
+    >
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs value={value} onChange={(_, val) => setValue(val)}>
+          <Tab label="NCBI BLAST query" {...a11yProps(0)} />
+          <Tab label="UCSC 100-way dataset" {...a11yProps(1)} />
+        </Tabs>
+      </Box>
+      <CustomTabPanel value={value} index={0}>
+        <NewNcbiBlastQueryPanel
+          handleClose={handleClose}
+          feature={feature}
+          model={model}
+        />
+      </CustomTabPanel>
+      <CustomTabPanel value={value} index={1}>
+        <PreLoadedMSA
+          model={model}
+          feature={feature}
+          handleClose={handleClose}
+        />
+      </CustomTabPanel>
+    </Dialog>
+  )
+}