@jbrowse/plugin-alignments 1.7.9 → 2.0.0

package/esm/index.js

@@ -0,0 +1,91 @@
+import Plugin from '@jbrowse/core/Plugin';
+import * as MismatchParser from './BamAdapter/MismatchParser';
+import BamAdapterF from './CramAdapter';
+import CramAdapterF from './BamAdapter';
+import HtsgetBamAdapterF from './HtsgetBamAdapter';
+import SNPCoverageAdapterF from './SNPCoverageAdapter';
+import SNPCoverageRendererF from './SNPCoverageRenderer';
+import PileupRendererF from './PileupRenderer';
+import LinearAlignmentsDisplayF from './LinearAlignmentsDisplay';
+import LinearSNPCoverageDisplayF from './LinearSNPCoverageDisplay';
+import LinearPileupDisplayF from './LinearPileupDisplay';
+import AlignmentsTrackF from './AlignmentsTrack';
+import AlignmentsFeatureWidgetF from './AlignmentsFeatureDetail';
+import { PileupGetGlobalValueForTag, PileupGetVisibleModifications, } from './PileupRPC/rpcMethods';
+import { makeIndex, makeIndexType, getFileName, } from '@jbrowse/core/util/tracks';
+export { MismatchParser };
+export default class AlignmentsPlugin extends Plugin {
+    constructor() {
+        super(...arguments);
+        this.name = 'AlignmentsPlugin';
+    }
+    install(pluginManager) {
+        ;
+        [
+            CramAdapterF,
+            BamAdapterF,
+            LinearPileupDisplayF,
+            LinearSNPCoverageDisplayF,
+            AlignmentsTrackF,
+            SNPCoverageAdapterF,
+            HtsgetBamAdapterF,
+            PileupRendererF,
+            SNPCoverageRendererF,
+            LinearAlignmentsDisplayF,
+            AlignmentsFeatureWidgetF,
+        ].map(f => f(pluginManager));
+        pluginManager.addToExtensionPoint('Core-guessAdapterForLocation', (adapterGuesser) => {
+            return (file, index, adapterHint) => {
+                const regexGuess = /\.cram$/i;
+                const adapterName = 'CramAdapter';
+                const fileName = getFileName(file);
+                const obj = {
+                    type: adapterName,
+                    cramLocation: file,
+                    craiLocation: index || makeIndex(file, '.crai'),
+                };
+                if (regexGuess.test(fileName) && !adapterHint) {
+                    return obj;
+                }
+                else if (adapterHint === adapterName) {
+                    return obj;
+                }
+                return adapterGuesser(file, index, adapterHint);
+            };
+        });
+        pluginManager.addToExtensionPoint('Core-guessAdapterForLocation', (adapterGuesser) => {
+            return (file, index, adapterHint) => {
+                const regexGuess = /\.bam$/i;
+                const adapterName = 'BamAdapter';
+                const fileName = getFileName(file);
+                const indexName = index && getFileName(index);
+                const obj = {
+                    type: adapterName,
+                    bamLocation: file,
+                    index: {
+                        location: index || makeIndex(file, '.bai'),
+                        indexType: makeIndexType(indexName, 'CSI', 'BAI'),
+                    },
+                };
+                if (regexGuess.test(fileName) && !adapterHint) {
+                    return obj;
+                }
+                else if (adapterHint === adapterName) {
+                    return obj;
+                }
+                return adapterGuesser(file, index, adapterHint);
+            };
+        });
+        pluginManager.addToExtensionPoint('Core-guessTrackTypeForLocation', (trackTypeGuesser) => {
+            return (adapterName) => {
+                if (adapterName === 'BamAdapter' || adapterName === 'CramAdapter') {
+                    return 'AlignmentsTrack';
+                }
+                return trackTypeGuesser(adapterName);
+            };
+        });
+        pluginManager.addRpcMethod(() => new PileupGetGlobalValueForTag(pluginManager));
+        pluginManager.addRpcMethod(() => new PileupGetVisibleModifications(pluginManager));
+    }
+}
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

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

package/esm/shared.d.ts

@@ -0,0 +1,25 @@
+import { BlockSet } from '@jbrowse/core/util/blockTypes';
+import { IAnyStateTreeNode } from 'mobx-state-tree';
+import { AnyConfigurationModel } from '@jbrowse/core/configuration/configurationSchema';
+export declare function getUniqueTagValues(self: IAnyStateTreeNode & {
+    adapterConfig: AnyConfigurationModel;
+}, colorScheme: {
+    type: string;
+    tag?: string;
+}, blocks: BlockSet, opts?: {
+    headers?: Record<string, string>;
+    signal?: AbortSignal;
+    filters?: string[];
+}): Promise<string[]>;
+export declare function getUniqueModificationValues(self: IAnyStateTreeNode & {
+    parentTrack: IAnyStateTreeNode & {
+        configuration: AnyConfigurationModel;
+    };
+}, adapterConfig: AnyConfigurationModel, colorScheme: {
+    type: string;
+    tag?: string;
+}, blocks: BlockSet, opts?: {
+    headers?: Record<string, string>;
+    signal?: AbortSignal;
+    filters?: string[];
+}): Promise<string[]>;

package/esm/shared.js

@@ -0,0 +1,28 @@
+import { getSession } from '@jbrowse/core/util';
+import { getRpcSessionId } from '@jbrowse/core/util/tracks';
+export async function getUniqueTagValues(self, colorScheme, blocks, opts) {
+    const { rpcManager } = getSession(self);
+    const { adapterConfig } = self;
+    const sessionId = getRpcSessionId(self);
+    const values = await rpcManager.call(getRpcSessionId(self), 'PileupGetGlobalValueForTag', {
+        adapterConfig,
+        tag: colorScheme.tag,
+        sessionId,
+        regions: blocks.contentBlocks,
+        ...opts,
+    });
+    return values;
+}
+export async function getUniqueModificationValues(self, adapterConfig, colorScheme, blocks, opts) {
+    const { rpcManager } = getSession(self);
+    const sessionId = getRpcSessionId(self);
+    const values = await rpcManager.call(sessionId, 'PileupGetVisibleModifications', {
+        adapterConfig,
+        tag: colorScheme.tag,
+        sessionId,
+        regions: blocks.contentBlocks,
+        ...opts,
+    });
+    return values;
+}
+//# sourceMappingURL=shared.js.map

package/esm/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["../src/shared.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAI3D,MAAM,CAAC,KAAK,UAAU,kBAAkB,CACtC,IAAkE,EAClE,WAA2C,EAC3C,MAAgB,EAChB,IAIC;IAED,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;IACvC,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI,CAAA;IAC9B,MAAM,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,CAAA;IACvC,MAAM,MAAM,GAAG,MAAM,UAAU,CAAC,IAAI,CAClC,eAAe,CAAC,IAAI,CAAC,EACrB,4BAA4B,EAC5B;QACE,aAAa;QACb,GAAG,EAAE,WAAW,CAAC,GAAG;QACpB,SAAS;QACT,OAAO,EAAE,MAAM,CAAC,aAAa;QAC7B,GAAG,IAAI;KACR,CACF,CAAA;IACD,OAAO,MAAkB,CAAA;AAC3B,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,2BAA2B,CAC/C,IAEC,EACD,aAAoC,EACpC,WAA2C,EAC3C,MAAgB,EAChB,IAIC;IAED,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;IACvC,MAAM,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,CAAA;IACvC,MAAM,MAAM,GAAG,MAAM,UAAU,CAAC,IAAI,CAClC,SAAS,EACT,+BAA+B,EAC/B;QACE,aAAa;QACb,GAAG,EAAE,WAAW,CAAC,GAAG;QACpB,SAAS;QACT,OAAO,EAAE,MAAM,CAAC,aAAa;QAC7B,GAAG,IAAI;KACR,CACF,CAAA;IACD,OAAO,MAAkB,CAAA;AAC3B,CAAC"}

package/esm/util.d.ts

@@ -0,0 +1,19 @@
+import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter';
+import { Feature } from '@jbrowse/core/util/simpleFeature';
+import { AugmentedRegion } from '@jbrowse/core/util';
+export declare function getTag(feature: Feature, tag: string): any;
+export declare function getTagAlt(feature: Feature, tag: string, alt: string): any;
+export declare const orientationTypes: {
+    fr: {
+        [key: string]: string;
+    };
+    rf: {
+        [key: string]: string;
+    };
+    ff: {
+        [key: string]: string;
+    };
+};
+export declare function getColorWGBS(strand: number, base: string): "#f00" | "#00f" | "#888";
+export declare function fetchSequence(region: AugmentedRegion, adapter: BaseFeatureDataAdapter): Promise<any>;
+export declare function shouldFetchReferenceSequence(type?: string): boolean;

package/esm/util.js

@@ -0,0 +1,83 @@
+import { toArray } from 'rxjs/operators';
+// get tag from BAM or CRAM feature, where CRAM uses feature.get('tags') and
+// BAM does not
+export function getTag(feature, tag) {
+    const tags = feature.get('tags');
+    return tags ? tags[tag] : feature.get(tag);
+}
+// use fallback alt tag, used in situations where upper case/lower case tags
+// exist e.g. Mm/MM for base modifications
+export function getTagAlt(feature, tag, alt) {
+    return getTag(feature, tag) || getTag(feature, alt);
+}
+// orientation definitions from igv.js, see also
+// https://software.broadinstitute.org/software/igv/interpreting_pair_orientations
+export const orientationTypes = {
+    fr: {
+        F1R2: 'LR',
+        F2R1: 'LR',
+        F1F2: 'LL',
+        F2F1: 'LL',
+        R1R2: 'RR',
+        R2R1: 'RR',
+        R1F2: 'RL',
+        R2F1: 'RL',
+    },
+    rf: {
+        R1F2: 'LR',
+        R2F1: 'LR',
+        R1R2: 'LL',
+        R2R1: 'LL',
+        F1F2: 'RR',
+        F2F1: 'RR',
+        F1R2: 'RL',
+        F2R1: 'RL',
+    },
+    ff: {
+        F2F1: 'LR',
+        R1R2: 'LR',
+        F2R1: 'LL',
+        R1F2: 'LL',
+        R2F1: 'RR',
+        F1R2: 'RR',
+        R2R1: 'RL',
+        F1F2: 'RL',
+    },
+};
+export function getColorWGBS(strand, base) {
+    if (strand === 1) {
+        if (base === 'C') {
+            return '#f00';
+        }
+        if (base === 'T') {
+            return '#00f';
+        }
+    }
+    else if (strand === -1) {
+        if (base === 'G') {
+            return '#f00';
+        }
+        if (base === 'A') {
+            return '#00f';
+        }
+    }
+    return '#888';
+}
+export async function fetchSequence(region, adapter) {
+    var _a;
+    const { end, originalRefName, refName } = region;
+    const feats = await adapter
+        .getFeatures({
+        ...region,
+        refName: originalRefName || refName,
+        end: end + 1,
+    })
+        .pipe(toArray())
+        .toPromise();
+    return (_a = feats[0]) === null || _a === void 0 ? void 0 : _a.get('seq');
+}
+// has to check underlying C-G (aka CpG) on the reference sequence
+export function shouldFetchReferenceSequence(type) {
+    return type === 'methylation';
+}
+//# sourceMappingURL=util.js.map

package/esm/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAGxC,4EAA4E;AAC5E,eAAe;AACf,MAAM,UAAU,MAAM,CAAC,OAAgB,EAAE,GAAW;IAClD,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;IAChC,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAC5C,CAAC;AAED,4EAA4E;AAC5E,0CAA0C;AAC1C,MAAM,UAAU,SAAS,CAAC,OAAgB,EAAE,GAAW,EAAE,GAAW;IAClE,OAAO,MAAM,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,MAAM,CAAC,OAAO,EAAE,GAAG,CAAC,CAAA;AACrD,CAAC;AAED,gDAAgD;AAChD,kFAAkF;AAClF,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,EAAE,EAAE;QACF,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;QAEV,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;QAEV,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;QAEV,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;KACkB;IAE9B,EAAE,EAAE;QACF,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;QAEV,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;QAEV,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;QAEV,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;KACkB;IAE9B,EAAE,EAAE;QACF,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;QAEV,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;QAEV,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;QAEV,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,IAAI;KACkB;CAC/B,CAAA;AAED,MAAM,UAAU,YAAY,CAAC,MAAc,EAAE,IAAY;IACvD,IAAI,MAAM,KAAK,CAAC,EAAE;QAChB,IAAI,IAAI,KAAK,GAAG,EAAE;YAChB,OAAO,MAAM,CAAA;SACd;QACD,IAAI,IAAI,KAAK,GAAG,EAAE;YAChB,OAAO,MAAM,CAAA;SACd;KACF;SAAM,IAAI,MAAM,KAAK,CAAC,CAAC,EAAE;QACxB,IAAI,IAAI,KAAK,GAAG,EAAE;YAChB,OAAO,MAAM,CAAA;SACd;QACD,IAAI,IAAI,KAAK,GAAG,EAAE;YAChB,OAAO,MAAM,CAAA;SACd;KACF;IACD,OAAO,MAAM,CAAA;AACf,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,aAAa,CACjC,MAAuB,EACvB,OAA+B;;IAE/B,MAAM,EAAE,GAAG,EAAE,eAAe,EAAE,OAAO,EAAE,GAAG,MAAM,CAAA;IAEhD,MAAM,KAAK,GAAG,MAAM,OAAO;SACxB,WAAW,CAAC;QACX,GAAG,MAAM;QACT,OAAO,EAAE,eAAe,IAAI,OAAO;QACnC,GAAG,EAAE,GAAG,GAAG,CAAC;KACb,CAAC;SACD,IAAI,CAAC,OAAO,EAAE,CAAC;SACf,SAAS,EAAE,CAAA;IACd,OAAO,MAAA,KAAK,CAAC,CAAC,CAAC,0CAAE,GAAG,CAAC,KAAK,CAAC,CAAA;AAC7B,CAAC;AAED,kEAAkE;AAClE,MAAM,UAAU,4BAA4B,CAAC,IAAa;IACxD,OAAO,IAAI,KAAK,aAAa,CAAA;AAC/B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-alignments",
-  "version": "1.7.9",
+  "version": "2.0.0",
   "description": "JBrowse 2 alignments adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -20,23 +20,27 @@
   "main": "dist/index.js",
   "files": [
     "dist",
+    "esm",
     "src"
   ],
   "scripts": {
-    "build": "babel src --root-mode upward --out-dir dist --extensions .ts,.js,.tsx,.jsx",
-    "postbuild": "tsc --build tsconfig.build.json",
+    "build": "npm-run-all build:*",
     "test": "cd ../..; jest plugins/alignments",
     "prepublishOnly": "yarn test",
     "prepack": "yarn build; yarn useDist",
     "postpack": "yarn useSrc",
     "useDist": "node ../../scripts/useDist.js",
-    "useSrc": "node ../../scripts/useSrc.js"
+    "useSrc": "node ../../scripts/useSrc.js",
+    "prebuild": "npm run clean",
+    "build:esm": "tsc --build tsconfig.build.esm.json",
+    "build:es5": "tsc --build tsconfig.build.es5.json",
+    "clean": "rimraf dist esm *.tsbuildinfo"
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
     "@gmod/bam": "^1.1.15",
     "@gmod/cram": "^1.6.4",
-    "@material-ui/icons": "^4.9.1",
+    "@mui/icons-material": "^5.0.1",
     "color": "^3.1.2",
     "copy-to-clipboard": "^3.3.1",
     "fast-deep-equal": "^3.1.3",
@@ -46,16 +50,20 @@
     "@jbrowse/core": "^1.0.0",
     "@jbrowse/plugin-linear-genome-view": "^1.0.0",
     "@jbrowse/plugin-wiggle": "^1.0.0",
-    "@material-ui/core": "^4.12.2",
-    "mobx": "^5.10.1",
-    "mobx-react": "^6.0.0",
-    "mobx-state-tree": "3.14.1",
+    "@mui/material": "^5.0.0",
+    "mobx": "^6.0.0",
+    "mobx-react": "^7.0.0",
+    "mobx-state-tree": "^5.0.0",
     "prop-types": "^15.0.0",
     "react": ">=16.8.0",
-    "rxjs": "^6.0.0"
+    "rxjs": "^6.0.0",
+    "tss-react": "^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a6504c385d703ce6e755d05652ef659ffe28c864"
+  "distModule": "esm/index.js",
+  "srcModule": "src/index.ts",
+  "module": "esm/index.js",
+  "gitHead": "ecc7f5d47351a5ea04bc00f3a6eb6dfb607342e6"
 }

package/src/AlignmentsFeatureDetail/AlignmentsFeatureDetail.tsx

@@ -6,8 +6,8 @@ import {
   Checkbox,
   FormControlLabel,
   FormGroup,
-  makeStyles,
-} from '@material-ui/core'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 import { observer } from 'mobx-react'
 import { getSession } from '@jbrowse/core/util'
 import copy from 'copy-to-clipboard'
@@ -18,7 +18,7 @@ import {
 } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
 import { parseCigar } from '../BamAdapter/MismatchParser'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   compact: {
     paddingRight: 0,
     paddingTop: 0,
@@ -30,7 +30,7 @@ const omit = ['clipPos', 'flags']
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function AlignmentFlags(props: { feature: any }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { feature } = props
   const { flags } = feature
   const flagNames = [
@@ -77,12 +77,22 @@ function AlignmentFlags(props: { feature: any }) {
 
 function Formatter({ value }: { value: unknown }) {
   const [show, setShow] = useState(false)
+  const [copied, setCopied] = useState(false)
   const display = String(value)
   if (display.length > 100) {
     return (
       <>
-        <button type="button" onClick={() => copy(display)}>
-          Copy
+        <button
+          type="button"
+          onClick={() => {
+            copy(display)
+            setCopied(true)
+            setTimeout(() => {
+              setCopied(false)
+            }, 700)
+          }}
+        >
+          {copied ? 'Copied to clipboard' : 'Copy'}
         </button>
         <button type="button" onClick={() => setShow(val => !val)}>
           {show ? 'Show less' : 'Show more'}