react-msaview 4.4.3 → 4.4.4

package/dist/components/Header.js

@@ -0,0 +1,62 @@
+import React, { Suspense, lazy, useState } from 'react';
+import { IconButton } from '@mui/material';
+import { observer } from 'mobx-react';
+// icons
+import FolderOpen from '@mui/icons-material/FolderOpen';
+import Settings from '@mui/icons-material/Settings';
+import Help from '@mui/icons-material/Help';
+import Assignment from '@mui/icons-material/Assignment';
+import List from '@mui/icons-material/List';
+// locals
+import ZoomControls from './ZoomControls';
+import MultiAlignmentSelector from './MultiAlignmentSelector';
+import HeaderInfoArea from './HeaderInfoArea';
+const SettingsDialog = lazy(() => import('./dialogs/SettingsDialog'));
+const AboutDialog = lazy(() => import('./dialogs/AboutDialog'));
+const MetadataDialog = lazy(() => import('./dialogs/MetadataDialog'));
+const TracklistDialog = lazy(() => import('./dialogs/TracklistDialog'));
+const Header = observer(function ({ model }) {
+    const [settingsDialogViz, setSettingsDialogViz] = useState(false);
+    const [aboutDialogViz, setAboutDialogViz] = useState(false);
+    const [detailsDialogViz, setMetadataDialogViz] = useState(false);
+    const [tracklistDialogViz, setTracklistDialogViz] = useState(false);
+    return (React.createElement("div", { style: { display: 'flex' } },
+        React.createElement(IconButton, { onClick: async () => {
+                try {
+                    model.setData({ tree: '', msa: '' });
+                    model.clearSelectedStructures();
+                    model.setScrollY(0);
+                    model.setScrollX(0);
+                    model.setCurrentAlignment(0);
+                    await model.setTreeFilehandle(undefined);
+                    await model.setMSAFilehandle(undefined);
+                }
+                catch (e) {
+                    console.error(e);
+                    model.setError(e);
+                }
+            } },
+            React.createElement(FolderOpen, null)),
+        React.createElement(IconButton, { onClick: () => setSettingsDialogViz(true) },
+            React.createElement(Settings, null)),
+        React.createElement(IconButton, { onClick: () => setMetadataDialogViz(true) },
+            React.createElement(Assignment, null)),
+        React.createElement(IconButton, { onClick: () => setTracklistDialogViz(true) },
+            React.createElement(List, null)),
+        React.createElement(Suspense, { fallback: null },
+            settingsDialogViz ? (React.createElement(SettingsDialog, { model: model, onClose: () => setSettingsDialogViz(false) })) : null,
+            aboutDialogViz ? (React.createElement(AboutDialog, { onClose: () => setAboutDialogViz(false) })) : null,
+            detailsDialogViz ? (React.createElement(MetadataDialog, { model: model, onClose: () => setMetadataDialogViz(false) })) : null,
+            tracklistDialogViz ? (React.createElement(TracklistDialog, { model: model, onClose: () => setTracklistDialogViz(false) })) : null),
+        React.createElement(MultiAlignmentSelector, { model: model }),
+        React.createElement(ZoomControls, { model: model }),
+        React.createElement(HeaderInfoArea, { model: model }),
+        React.createElement(Spacer, null),
+        React.createElement(IconButton, { onClick: () => setAboutDialogViz(true) },
+            React.createElement(Help, null))));
+});
+function Spacer() {
+    return React.createElement("div", { style: { flex: 1 } });
+}
+export default Header;
+//# sourceMappingURL=Header.js.map

package/dist/components/Header.js.map

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

package/dist/components/HeaderInfoArea.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MsaViewModel } from '../model';
+declare const HeaderInfoArea: ({ model }: {
+    model: MsaViewModel;
+}) => React.JSX.Element;
+export default HeaderInfoArea;

package/dist/components/HeaderInfoArea.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+const HeaderInfoArea = observer(({ model }) => {
+    const { mouseOverRowName, mouseCol } = model;
+    return (React.createElement("div", null, mouseOverRowName && mouseCol !== undefined ? (React.createElement(Typography, null,
+        mouseOverRowName,
+        ":",
+        model.relativePxToBp(mouseOverRowName, mouseCol))) : null));
+});
+export default HeaderInfoArea;
+//# sourceMappingURL=HeaderInfoArea.js.map

package/dist/components/HeaderInfoArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderInfoArea.js","sourceRoot":"","sources":["../../src/components/HeaderInfoArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAKrC,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,EAAE,KAAK,EAA2B,EAAE,EAAE;IACrE,MAAM,EAAE,gBAAgB,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAC5C,OAAO,CACL,iCACG,gBAAgB,IAAI,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,CAC5C,oBAAC,UAAU;QACR,gBAAgB;;QAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CACzD,CACd,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,cAAc,CAAA"}

package/dist/components/ImportForm/ImportFormExamples.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MsaViewModel } from '../../model';
+declare const ImportFormExamples: ({ model, }: {
+    model: MsaViewModel;
+}) => React.JSX.Element;
+export default ImportFormExamples;

package/dist/components/ImportForm/ImportFormExamples.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Typography, Link } from '@mui/material';
+import { observer } from 'mobx-react';
+import { smallTree, smallMSA, smallMSAOnly } from './data/seq2';
+import { load } from './util';
+const ListItem = ({ onClick, model, children, }) => (React.createElement("li", null,
+    React.createElement(Link, { onClick: event => {
+            model.setError(undefined);
+            event.preventDefault();
+            onClick();
+        }, href: "#" },
+        React.createElement(Typography, { display: "inline" }, children))));
+const ImportFormExamples = observer(function ({ model, }) {
+    return (React.createElement("ul", null,
+        React.createElement(ListItem, { model: model, onClick: () => load(model, undefined, {
+                uri: 'https://jbrowse.org/genomes/newick_trees/sarscov2phylo.pub.ft.nh',
+                locationType: 'UriLocation',
+            }) }, "230k COVID-19 samples (tree only)"),
+        React.createElement(ListItem, { model: model, onClick: () => {
+                model.setData({ msa: smallMSA, tree: smallTree });
+            } }, "Small protein MSA+tree"),
+        React.createElement(ListItem, { model: model, onClick: () => {
+                model.setData({ msa: smallMSAOnly });
+            } }, "Small MSA only"),
+        React.createElement(ListItem, { model: model, onClick: () => load(model, {
+                uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/pfam-cov2.stock',
+                locationType: 'UriLocation',
+            }) }, "PFAM SARS-CoV2 multi-stockholm"),
+        React.createElement(ListItem, { model: model, onClick: () => load(model, {
+                uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/Lysine.stock',
+                locationType: 'UriLocation',
+            }) }, "Lysine stockholm file"),
+        React.createElement(ListItem, { model: model, onClick: () => load(model, {
+                uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/PF01601_full.txt',
+                locationType: 'UriLocation',
+            }) }, "PF01601 stockholm file (SARS-CoV2 spike protein)"),
+        React.createElement(ListItem, { model: model, onClick: () => load(model, {
+                uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/europe_covid.fa',
+                locationType: 'UriLocation',
+            }) }, "Europe COVID full genomes (LR883044.1 and 199 other sequences)"),
+        React.createElement(ListItem, { model: model, onClick: () => load(model, {
+                uri: '/rhv_test-only.aligned_with_mafft_auto.fa',
+                locationType: 'UriLocation',
+            }, {
+                uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.nh',
+                locationType: 'UriLocation',
+            }) }, "MAFFT+VeryFastTree(17.9k samples)")));
+});
+export default ImportFormExamples;
+//# sourceMappingURL=ImportFormExamples.js.map

package/dist/components/ImportForm/ImportFormExamples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImportFormExamples.js","sourceRoot":"","sources":["../../../src/components/ImportForm/ImportFormExamples.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAC/D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,QAAQ,GAAG,CAAC,EAChB,OAAO,EACP,KAAK,EACL,QAAQ,GAKT,EAAE,EAAE,CAAC,CACJ;IACE,oBAAC,IAAI,IACH,OAAO,EAAE,KAAK,CAAC,EAAE;YACf,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;YACzB,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,OAAO,EAAE,CAAA;QACX,CAAC,EACD,IAAI,EAAC,GAAG;QAER,oBAAC,UAAU,IAAC,OAAO,EAAC,QAAQ,IAAE,QAAQ,CAAc,CAC/C,CACJ,CACN,CAAA;AAED,MAAM,kBAAkB,GAAG,QAAQ,CAAC,UAAU,EAC5C,KAAK,GAGN;IACC,OAAO,CACL;QACE,oBAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE,CACZ,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE;gBACrB,GAAG,EAAE,kEAAkE;gBACvE,YAAY,EAAE,aAAa;aAC5B,CAAC,wCAIK;QACX,oBAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAA;YACnD,CAAC,6BAGQ;QACX,oBAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE;gBACZ,KAAK,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,YAAY,EAAE,CAAC,CAAA;YACtC,CAAC,qBAGQ;QACX,oBAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE,CACZ,IAAI,CAAC,KAAK,EAAE;gBACV,GAAG,EAAE,0EAA0E;gBAC/E,YAAY,EAAE,aAAa;aAC5B,CAAC,qCAIK;QACX,oBAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE,CACZ,IAAI,CAAC,KAAK,EAAE;gBACV,GAAG,EAAE,uEAAuE;gBAC5E,YAAY,EAAE,aAAa;aAC5B,CAAC,4BAIK;QACX,oBAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE,CACZ,IAAI,CAAC,KAAK,EAAE;gBACV,GAAG,EAAE,2EAA2E;gBAChF,YAAY,EAAE,aAAa;aAC5B,CAAC,uDAIK;QACX,oBAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE,CACZ,IAAI,CAAC,KAAK,EAAE;gBACV,GAAG,EAAE,0EAA0E;gBAC/E,YAAY,EAAE,aAAa;aAC5B,CAAC,qEAIK;QACX,oBAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE,CACZ,IAAI,CACF,KAAK,EACL;gBACE,GAAG,EAAE,2CAA2C;gBAChD,YAAY,EAAE,aAAa;aAC5B,EACD;gBACE,GAAG,EAAE,mGAAmG;gBACxG,YAAY,EAAE,aAAa;aAC5B,CACF,wCAIM,CACR,CACN,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,kBAAkB,CAAA"}

package/dist/components/ImportForm/data/seq2.d.ts

@@ -0,0 +1,3 @@
+export declare const smallMSA = "CLUSTAL O(1.2.3) multiple sequence alignment\nUniProt/Swiss-Prot|P26898|IL2RA_SHEEP      MEPSLLMWRFFVFIVVPGCVTEACHDDPPSLRNA----------MFKVLRYE----VGTM\nUniProt/Swiss-Prot|P01590|IL2RA_MOUSE      MEPRLLMLGFLSLTIVPSCRAELCLYDPPEVPNA----------TFKALSYK----NGTI\nUniProt/Swiss-Prot|P41690|IL2RA_FELCA      MEPSLLLWGILTFVVVHGHVTELCDENPPDIQHA----------TFKALTYK----TGTM\nUniProt/Swiss-Prot|P01589|IL2RA_HUMAN      MDSYLLMWGLLTFIMVPGCQAELCDDDPPEIPHA----------TFKAMAYK----EGTM\nUniProt/Swiss-Prot|Q5MNY4|IL2RA_MACMU      MDPYLLMWGLLTFITVPGCQAELCDDDPPKITHA----------TFKAVAYK----EGTM\nUniProt/Swiss-Prot|Q95118|IL2RG_BOVIN      -----------------------------------LLMWGLLT-----------------\nUniProt/Swiss-Prot|P40321|IL2RG_CANFA      MLKPPLPLRSLLFLQLSLLGVGLNSTVPMPNGNEDIT------PDFFLTATPSETLSVSS\nUniProt/Swiss-Prot|P26896|IL2RB_RAT        MATVDLSWRLPLYILLLLLATT--------------------------------WVSAAV\nUniProt/Swiss-Prot|Q8BZM1|GLMN_MOUSE       PLPLRSLLFLQLPLLGVGLNP------------------PLPLRSLLFLQLPLLGVGLNP\nUniProt/Swiss-Prot|P36835|IL2_CAPHI        -----------LLGVGLNPKFLTP------------------------------------\nUniProt/Swiss-Prot|Q7JFM4|IL2_AOTVO        MLKPPLPLRSLLFLQLPLLGVGLNPKFLTPSGNEDIGGKPGTGGDFFLTSTPAGTLDVST\nUniProt/Swiss-Prot|Q29416|IL2_CANFA        --------------LFLQLSLLG-------------------------------------\n";
+export declare const smallMSAOnly = "CLUSTAL O(1.2.4) multiple sequence alignment\n\n\nsp|P69905|HBA_HUMAN       MVLSPADKTNVKAAWGKVGAHAGEYGAEALERMFLSFPTTKTYFPHFDLSHGSAQVKGHG\t60\nsp|P01942|HBA_MOUSE       MVLSGEDKSNIKAAWGKIGGHGAEYGAEALERMFASFPTTKTYFPHFDVSHGSAQVKGHG\t60\nsp|P13786|HBAZ_CAPHI      MSLTRTERTIILSLWSKISTQADVIGTETLERLFSCYPQAKTYFPHFDLHSGSAQLRAHG\t60\n                          * *:  ::: : : *.*:. :.   *:*:***:* .:* :********:  ****::.**\n\nsp|P69905|HBA_HUMAN       KKVADALTNAVAHVDDMPNALSALSDLHAHKLRVDPVNFKLLSHCLLVTLAAHLPAEFTP\t120\nsp|P01942|HBA_MOUSE       KKVADALASAAGHLDDLPGALSALSDLHAHKLRVDPVNFKLLSHCLLVTLASHHPADFTP\t120\nsp|P13786|HBAZ_CAPHI      SKVVAAVGDAVKSIDNVTSALSKLSELHAYVLRVDPVNFKFLSHCLLVTLASHFPADFTA\t120\n                          .**. *: .*.  :*:: .*** **:***: *********:**********:* **:**\n\nsp|P69905|HBA_HUMAN       AVHASLDKFLASVSTVLTSKYR\t142\nsp|P01942|HBA_MOUSE       AVHASLDKFLASVSTVLTSKYR\t142\nsp|P13786|HBAZ_CAPHI      DAHAAWDKFLSIVSGVLTEKYR\t142\n                           .**: ****: ** ***.***";
+export declare const smallTree = "(((UniProt/Swiss-Prot|P26898|IL2RA_SHEEP:0.24036,(UniProt/Swiss-Prot|P41690|IL2RA_FELCA:0.17737,(UniProt/Swiss-Prot|P01589|IL2RA_HUMAN:0.03906,UniProt/Swiss-Prot|Q5MNY4|IL2RA_MACMU:0.03787):0.13033):0.04964):0.02189,UniProt/Swiss-Prot|P01590|IL2RA_MOUSE:0.23072):0.06814,(((UniProt/Swiss-Prot|Q95118|IL2RG_BOVIN:0.09600,UniProt/Swiss-Prot|P40321|IL2RG_CANFA:0.09845):0.25333,UniProt/Swiss-Prot|Q29416|IL2_CANFA:-0.35055):0.10231,(UniProt/Swiss-Prot|P26896|IL2RB_RAT:0.33631,UniProt/Swiss-Prot|Q7JFM4|IL2_AOTVO:-0.33631):0.10166):0.01607,(UniProt/Swiss-Prot|Q8BZM1|GLMN_MOUSE:0.32378,UniProt/Swiss-Prot|P36835|IL2_CAPHI:-0.32378):0.09999)";

package/dist/components/ImportForm/data/seq2.js

@@ -0,0 +1,33 @@
+export const smallMSA = `CLUSTAL O(1.2.3) multiple sequence alignment
+UniProt/Swiss-Prot|P26898|IL2RA_SHEEP      MEPSLLMWRFFVFIVVPGCVTEACHDDPPSLRNA----------MFKVLRYE----VGTM
+UniProt/Swiss-Prot|P01590|IL2RA_MOUSE      MEPRLLMLGFLSLTIVPSCRAELCLYDPPEVPNA----------TFKALSYK----NGTI
+UniProt/Swiss-Prot|P41690|IL2RA_FELCA      MEPSLLLWGILTFVVVHGHVTELCDENPPDIQHA----------TFKALTYK----TGTM
+UniProt/Swiss-Prot|P01589|IL2RA_HUMAN      MDSYLLMWGLLTFIMVPGCQAELCDDDPPEIPHA----------TFKAMAYK----EGTM
+UniProt/Swiss-Prot|Q5MNY4|IL2RA_MACMU      MDPYLLMWGLLTFITVPGCQAELCDDDPPKITHA----------TFKAVAYK----EGTM
+UniProt/Swiss-Prot|Q95118|IL2RG_BOVIN      -----------------------------------LLMWGLLT-----------------
+UniProt/Swiss-Prot|P40321|IL2RG_CANFA      MLKPPLPLRSLLFLQLSLLGVGLNSTVPMPNGNEDIT------PDFFLTATPSETLSVSS
+UniProt/Swiss-Prot|P26896|IL2RB_RAT        MATVDLSWRLPLYILLLLLATT--------------------------------WVSAAV
+UniProt/Swiss-Prot|Q8BZM1|GLMN_MOUSE       PLPLRSLLFLQLPLLGVGLNP------------------PLPLRSLLFLQLPLLGVGLNP
+UniProt/Swiss-Prot|P36835|IL2_CAPHI        -----------LLGVGLNPKFLTP------------------------------------
+UniProt/Swiss-Prot|Q7JFM4|IL2_AOTVO        MLKPPLPLRSLLFLQLPLLGVGLNPKFLTPSGNEDIGGKPGTGGDFFLTSTPAGTLDVST
+UniProt/Swiss-Prot|Q29416|IL2_CANFA        --------------LFLQLSLLG-------------------------------------
+`;
+export const smallMSAOnly = `CLUSTAL O(1.2.4) multiple sequence alignment
+
+
+sp|P69905|HBA_HUMAN       MVLSPADKTNVKAAWGKVGAHAGEYGAEALERMFLSFPTTKTYFPHFDLSHGSAQVKGHG	60
+sp|P01942|HBA_MOUSE       MVLSGEDKSNIKAAWGKIGGHGAEYGAEALERMFASFPTTKTYFPHFDVSHGSAQVKGHG	60
+sp|P13786|HBAZ_CAPHI      MSLTRTERTIILSLWSKISTQADVIGTETLERLFSCYPQAKTYFPHFDLHSGSAQLRAHG	60
+                          * *:  ::: : : *.*:. :.   *:*:***:* .:* :********:  ****::.**
+
+sp|P69905|HBA_HUMAN       KKVADALTNAVAHVDDMPNALSALSDLHAHKLRVDPVNFKLLSHCLLVTLAAHLPAEFTP	120
+sp|P01942|HBA_MOUSE       KKVADALASAAGHLDDLPGALSALSDLHAHKLRVDPVNFKLLSHCLLVTLASHHPADFTP	120
+sp|P13786|HBAZ_CAPHI      SKVVAAVGDAVKSIDNVTSALSKLSELHAYVLRVDPVNFKFLSHCLLVTLASHFPADFTA	120
+                          .**. *: .*.  :*:: .*** **:***: *********:**********:* **:**
+
+sp|P69905|HBA_HUMAN       AVHASLDKFLASVSTVLTSKYR	142
+sp|P01942|HBA_MOUSE       AVHASLDKFLASVSTVLTSKYR	142
+sp|P13786|HBAZ_CAPHI      DAHAAWDKFLSIVSGVLTEKYR	142
+                           .**: ****: ** ***.***`;
+export const smallTree = '(((UniProt/Swiss-Prot|P26898|IL2RA_SHEEP:0.24036,(UniProt/Swiss-Prot|P41690|IL2RA_FELCA:0.17737,(UniProt/Swiss-Prot|P01589|IL2RA_HUMAN:0.03906,UniProt/Swiss-Prot|Q5MNY4|IL2RA_MACMU:0.03787):0.13033):0.04964):0.02189,UniProt/Swiss-Prot|P01590|IL2RA_MOUSE:0.23072):0.06814,(((UniProt/Swiss-Prot|Q95118|IL2RG_BOVIN:0.09600,UniProt/Swiss-Prot|P40321|IL2RG_CANFA:0.09845):0.25333,UniProt/Swiss-Prot|Q29416|IL2_CANFA:-0.35055):0.10231,(UniProt/Swiss-Prot|P26896|IL2RB_RAT:0.33631,UniProt/Swiss-Prot|Q7JFM4|IL2_AOTVO:-0.33631):0.10166):0.01607,(UniProt/Swiss-Prot|Q8BZM1|GLMN_MOUSE:0.32378,UniProt/Swiss-Prot|P36835|IL2_CAPHI:-0.32378):0.09999)';
+//# sourceMappingURL=seq2.js.map

package/dist/components/ImportForm/data/seq2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"seq2.js","sourceRoot":"","sources":["../../../../src/components/ImportForm/data/seq2.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;;;CAavB,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;iDAgBqB,CAAA;AAEjD,MAAM,CAAC,MAAM,SAAS,GACpB,+nBAA+nB,CAAA"}

package/dist/components/ImportForm/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MsaViewModel } from '../../model';
+declare const _default: ({ model }: {
+    model: MsaViewModel;
+}) => React.JSX.Element;
+export default _default;

package/dist/components/ImportForm/index.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import { observer } from 'mobx-react';
+import { Button, Container, Grid, Typography } from '@mui/material';
+import { FileSelector } from '@jbrowse/core/ui';
+import { load } from './util';
+import ImportFormExamples from './ImportFormExamples';
+export default observer(({ model }) => {
+    const [msaFile, setMsaFile] = useState();
+    const [treeFile, setTreeFile] = useState();
+    const { error } = model;
+    return (React.createElement(Container, null,
+        React.createElement("div", { style: { width: '50%' } },
+            error ? (React.createElement("div", { style: { padding: 20 } },
+                React.createElement(Typography, { color: "error" },
+                    "Error: ",
+                    `${error}`))) : null,
+            React.createElement(Typography, null, "Open an MSA file (stockholm or clustal format) and/or a tree file (newick format)."),
+            React.createElement(Typography, { color: "error" }, "Note: you can open up just an MSA or just a tree, both are not required. Some MSA files e.g. stockholm format have an embedded tree also and this is fine, and opening a separate tree file is not required.")),
+        React.createElement(Grid, { container: true, spacing: 10, justifyContent: "center", alignItems: "center" },
+            React.createElement(Grid, { item: true },
+                React.createElement(Typography, null, "MSA file or URL"),
+                React.createElement(FileSelector, { location: msaFile, setLocation: setMsaFile }),
+                React.createElement(Typography, null, "Tree file or URL"),
+                React.createElement(FileSelector, { location: treeFile, setLocation: setTreeFile })),
+            React.createElement(Grid, { item: true },
+                React.createElement(Button, { onClick: () => load(model, msaFile, treeFile), variant: "contained", color: "primary", disabled: !msaFile && !treeFile }, "Open")),
+            React.createElement(Grid, { item: true },
+                React.createElement(Typography, null, "Examples"),
+                React.createElement(ImportFormExamples, { model: model })))));
+});
+//# sourceMappingURL=index.js.map

package/dist/components/ImportForm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ImportForm/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAK/C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,kBAAkB,MAAM,sBAAsB,CAAA;AAErD,eAAe,QAAQ,CAAC,CAAC,EAAE,KAAK,EAA2B,EAAE,EAAE;IAC7D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAgB,CAAA;IACtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAAgB,CAAA;IACxD,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IAEvB,OAAO,CACL,oBAAC,SAAS;QACR,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;YACzB,KAAK,CAAC,CAAC,CAAC,CACP,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;gBACzB,oBAAC,UAAU,IAAC,KAAK,EAAC,OAAO;;oBAAS,GAAG,KAAK,EAAE,CAAc,CACtD,CACP,CAAC,CAAC,CAAC,IAAI;YACR,oBAAC,UAAU,6FAGE;YACb,oBAAC,UAAU,IAAC,KAAK,EAAC,OAAO,mNAKZ,CACT;QAEN,oBAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,EAAE,EAAE,cAAc,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ;YACtE,oBAAC,IAAI,IAAC,IAAI;gBACR,oBAAC,UAAU,0BAA6B;gBACxC,oBAAC,YAAY,IAAC,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,GAAI;gBAC5D,oBAAC,UAAU,2BAA8B;gBACzC,oBAAC,YAAY,IAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,GAAI,CACzD;YAEP,oBAAC,IAAI,IAAC,IAAI;gBACR,oBAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAC,EAC7C,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,SAAS,EACf,QAAQ,EAAE,CAAC,OAAO,IAAI,CAAC,QAAQ,WAGxB,CACJ;YAEP,oBAAC,IAAI,IAAC,IAAI;gBACR,oBAAC,UAAU,mBAAsB;gBACjC,oBAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,GAAI,CAC/B,CACF,CACG,CACb,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/components/ImportForm/util.d.ts

@@ -0,0 +1,3 @@
+import { FileLocation } from '@jbrowse/core/util';
+import { MsaViewModel } from '../../model';
+export declare function load(model: MsaViewModel, msaFile?: FileLocation, treeFile?: FileLocation): Promise<void>;

package/dist/components/ImportForm/util.js

@@ -0,0 +1,16 @@
+export async function load(model, msaFile, treeFile) {
+    model.setError(undefined);
+    try {
+        if (msaFile) {
+            await model.setMSAFilehandle(msaFile);
+        }
+        if (treeFile) {
+            await model.setTreeFilehandle(treeFile);
+        }
+    }
+    catch (e) {
+        console.error(e);
+        model.setError(e);
+    }
+}
+//# sourceMappingURL=util.js.map

package/dist/components/ImportForm/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/components/ImportForm/util.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,KAAK,UAAU,IAAI,CACxB,KAAmB,EACnB,OAAsB,EACtB,QAAuB;IAEvB,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;IACzB,IAAI,CAAC;QACH,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAA;QACvC,CAAC;QACD,IAAI,QAAQ,EAAE,CAAC;YACb,MAAM,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAA;QACzC,CAAC;IACH,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;QAChB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IACnB,CAAC;AACH,CAAC"}

package/dist/components/MSACanvas.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MsaViewModel } from '../model';
+declare const MSACanvas: ({ model }: {
+    model: MsaViewModel;
+}) => React.JSX.Element;
+export default MSACanvas;

package/dist/components/MSACanvas.js

@@ -0,0 +1,141 @@
+import React, { useEffect, useState, useCallback, useRef, useMemo } from 'react';
+import { Typography, CircularProgress, useTheme } from '@material-ui/core';
+import { observer } from 'mobx-react';
+import normalizeWheel from 'normalize-wheel';
+import { colorContrast } from '../util';
+import { getClustalXColor, getPercentIdentityColor } from '../colorSchemes';
+import * as PIXI from 'pixi.js';
+import { Stage, Graphics } from '@inlet/react-pixi';
+function Rectangle(props) {
+    const draw = useCallback(g => {
+        g.clear();
+        g.beginFill(props.color);
+        g.drawRect(props.x, props.y, props.width, props.height);
+        g.endFill();
+    }, [props]);
+    return React.createElement(Graphics, { draw: draw });
+}
+const MSABlock = observer(({ model }) => {
+    const { msaAreaWidth, height, colWidth, bgColor, columns, rowHeight, hierarchy, colorScheme, colorSchemeName, colStats, scrollX, } = model;
+    const theme = useTheme();
+    const contrastScheme = useMemo(() => colorContrast(colorScheme, theme), [colorScheme, theme]);
+    console.log({ scrollX });
+    return (React.createElement(Stage, { width: msaAreaWidth, height: height }, hierarchy.leaves().map(node => {
+        const { 
+        //@ts-ignore
+        x: y, 
+        //@ts-ignore
+        data: { name }, } = node;
+        return columns[name].split('').map((letter, i) => {
+            const color = colorSchemeName === 'clustalx_protein_dynamic'
+                ? getClustalXColor(colStats[i], model, name, i)
+                : colorSchemeName === 'percent_identity_dynamic'
+                    ? getPercentIdentityColor(colStats[i], model, name, i)
+                    : colorScheme[letter.toUpperCase()];
+            if (bgColor) {
+                const x = i * colWidth;
+                const hex = PIXI.utils.string2hex(color || '');
+                return (React.createElement(Rectangle, { key: y + '_' + x, color: hex, x: x + scrollX, y: y - rowHeight, width: colWidth, height: rowHeight }));
+            }
+        });
+    })));
+});
+const MSACanvas = observer(({ model }) => {
+    const { MSA, msaFilehandle } = model;
+    const ref = useRef(null);
+    // wheel
+    const scheduled = useRef(false);
+    const deltaX = useRef(0);
+    const deltaY = useRef(0);
+    // mouse click-and-drag scrolling
+    const prevX = useRef(0);
+    const prevY = useRef(0);
+    const [mouseDragging, setMouseDragging] = useState(false);
+    useEffect(() => {
+        const curr = ref.current;
+        if (!curr) {
+            return;
+        }
+        function onWheel(origEvent) {
+            const event = normalizeWheel(origEvent);
+            deltaX.current += event.pixelX;
+            deltaY.current += event.pixelY;
+            if (!scheduled.current) {
+                scheduled.current = true;
+                requestAnimationFrame(() => {
+                    model.doScrollX(-deltaX.current);
+                    model.doScrollY(-deltaY.current);
+                    deltaX.current = 0;
+                    deltaY.current = 0;
+                    scheduled.current = false;
+                });
+            }
+            origEvent.preventDefault();
+        }
+        curr.addEventListener('wheel', onWheel);
+        return () => {
+            curr.removeEventListener('wheel', onWheel);
+        };
+    }, [model]);
+    useEffect(() => {
+        let cleanup = () => { };
+        function globalMouseMove(event) {
+            event.preventDefault();
+            const currX = event.clientX;
+            const currY = event.clientY;
+            const distanceX = currX - prevX.current;
+            const distanceY = currY - prevY.current;
+            if (distanceX || distanceY) {
+                // use rAF to make it so multiple event handlers aren't fired per-frame
+                // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
+                if (!scheduled.current) {
+                    scheduled.current = true;
+                    window.requestAnimationFrame(() => {
+                        model.doScrollX(distanceX);
+                        model.doScrollY(distanceY);
+                        scheduled.current = false;
+                        prevX.current = event.clientX;
+                        prevY.current = event.clientY;
+                    });
+                }
+            }
+        }
+        function globalMouseUp() {
+            prevX.current = 0;
+            if (mouseDragging) {
+                setMouseDragging(false);
+            }
+        }
+        if (mouseDragging) {
+            window.addEventListener('mousemove', globalMouseMove, true);
+            window.addEventListener('mouseup', globalMouseUp, true);
+            cleanup = () => {
+                window.removeEventListener('mousemove', globalMouseMove, true);
+                window.removeEventListener('mouseup', globalMouseUp, true);
+            };
+        }
+        return cleanup;
+    }, [model, mouseDragging]);
+    return (React.createElement("div", { ref: ref, onMouseDown: event => {
+            // check if clicking a draggable element or a resize handle
+            const target = event.target;
+            if (target.draggable || target.dataset.resizer) {
+                return;
+            }
+            // otherwise do click and drag scroll
+            if (event.button === 0) {
+                prevX.current = event.clientX;
+                prevY.current = event.clientY;
+                setMouseDragging(true);
+            }
+        }, onMouseUp: event => {
+            event.preventDefault();
+            setMouseDragging(false);
+        }, onMouseLeave: event => {
+            event.preventDefault();
+        } }, !MSA && !msaFilehandle ? null : !MSA ? (React.createElement("div", { style: { position: 'absolute', left: '50%', top: '50%' } },
+        React.createElement(CircularProgress, null),
+        React.createElement(Typography, null, "Loading..."))) : (React.createElement(MSABlock, { model: model }))));
+});
+export default MSACanvas;
+//# sourceMappingURL=MSACanvas.js.map

package/dist/components/MSACanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MSACanvas.js","sourceRoot":"","sources":["../../src/components/MSACanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAChF,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,cAAc,MAAM,iBAAiB,CAAA;AAI5C,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAA;AAE3E,OAAO,KAAK,IAAI,MAAM,SAAS,CAAA;AAE/B,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEnD,SAAS,SAAS,CAAC,KAAU;IAC3B,MAAM,IAAI,GAAG,WAAW,CACtB,CAAC,CAAC,EAAE;QACF,CAAC,CAAC,KAAK,EAAE,CAAA;QACT,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACxB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;QACvD,CAAC,CAAC,OAAO,EAAE,CAAA;IACb,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAA;IAED,OAAO,oBAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,GAAI,CAAA;AACjC,CAAC;AAED,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,EAAE,KAAK,EAA2B,EAAE,EAAE;IAC/D,MAAM,EACJ,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,SAAS,EACT,WAAW,EACX,eAAe,EACf,QAAQ,EACR,OAAO,GACR,GAAG,KAAK,CAAA;IACT,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IAExB,MAAM,cAAc,GAAG,OAAO,CAC5B,GAAG,EAAE,CAAC,aAAa,CAAC,WAAW,EAAE,KAAK,CAAC,EACvC,CAAC,WAAW,EAAE,KAAK,CAAC,CACrB,CAAA;IACD,OAAO,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,CAAC,CAAA;IAExB,OAAO,CACL,oBAAC,KAAK,IAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,IACvC,SAAS,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QAC7B,MAAM;QACJ,YAAY;QACZ,CAAC,EAAE,CAAC;QACJ,YAAY;QACZ,IAAI,EAAE,EAAE,IAAI,EAAE,GACf,GAAG,IAAI,CAAA;QAER,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC/C,MAAM,KAAK,GACT,eAAe,KAAK,0BAA0B;gBAC5C,CAAC,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;gBAC/C,CAAC,CAAC,eAAe,KAAK,0BAA0B;oBAChD,CAAC,CAAC,uBAAuB,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;oBACtD,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAA;YACvC,IAAI,OAAO,EAAE,CAAC;gBACZ,MAAM,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAA;gBACtB,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,IAAI,EAAE,CAAC,CAAA;gBAC9C,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,CAAC,GAAG,GAAG,GAAG,CAAC,EAChB,KAAK,EAAE,GAAG,EACV,CAAC,EAAE,CAAC,GAAG,OAAO,EACd,CAAC,EAAE,CAAC,GAAG,SAAS,EAChB,KAAK,EAAE,QAAQ,EACf,MAAM,EAAE,SAAS,GACjB,CACH,CAAA;YACH,CAAC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CACI,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,EAAE,KAAK,EAA2B,EAAE,EAAE;IAChE,MAAM,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;IACpC,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACxC,QAAQ;IACR,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAC/B,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IACxB,MAAM,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IACxB,iCAAiC;IACjC,MAAM,KAAK,GAAG,MAAM,CAAS,CAAC,CAAC,CAAA;IAC/B,MAAM,KAAK,GAAG,MAAM,CAAS,CAAC,CAAC,CAAA;IAC/B,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAA;QACxB,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAM;QACR,CAAC;QACD,SAAS,OAAO,CAAC,SAAqB;YACpC,MAAM,KAAK,GAAG,cAAc,CAAC,SAAS,CAAC,CAAA;YACvC,MAAM,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,CAAA;YAC9B,MAAM,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,CAAA;YAE9B,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;gBACvB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAA;gBACxB,qBAAqB,CAAC,GAAG,EAAE;oBACzB,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;oBAChC,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;oBAChC,MAAM,CAAC,OAAO,GAAG,CAAC,CAAA;oBAClB,MAAM,CAAC,OAAO,GAAG,CAAC,CAAA;oBAClB,SAAS,CAAC,OAAO,GAAG,KAAK,CAAA;gBAC3B,CAAC,CAAC,CAAA;YACJ,CAAC;YACD,SAAS,CAAC,cAAc,EAAE,CAAA;QAC5B,CAAC;QACD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QACvC,OAAO,GAAG,EAAE;YACV,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;QAC5C,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;QAEtB,SAAS,eAAe,CAAC,KAAiB;YACxC,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAA;YAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAA;YAC3B,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC,OAAO,CAAA;YACvC,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC,OAAO,CAAA;YACvC,IAAI,SAAS,IAAI,SAAS,EAAE,CAAC;gBAC3B,uEAAuE;gBACvE,8EAA8E;gBAC9E,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;oBACvB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAA;oBACxB,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE;wBAChC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;wBAC1B,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;wBAC1B,SAAS,CAAC,OAAO,GAAG,KAAK,CAAA;wBACzB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAA;wBAC7B,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAA;oBAC/B,CAAC,CAAC,CAAA;gBACJ,CAAC;YACH,CAAC;QACH,CAAC;QAED,SAAS,aAAa;YACpB,KAAK,CAAC,OAAO,GAAG,CAAC,CAAA;YACjB,IAAI,aAAa,EAAE,CAAC;gBAClB,gBAAgB,CAAC,KAAK,CAAC,CAAA;YACzB,CAAC;QACH,CAAC;QAED,IAAI,aAAa,EAAE,CAAC;YAClB,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,EAAE,IAAI,CAAC,CAAA;YAC3D,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,EAAE,IAAI,CAAC,CAAA;YACvD,OAAO,GAAG,GAAG,EAAE;gBACb,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,EAAE,IAAI,CAAC,CAAA;gBAC9D,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,EAAE,IAAI,CAAC,CAAA;YAC5D,CAAC,CAAA;QACH,CAAC;QACD,OAAO,OAAO,CAAA;IAChB,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAA;IAE1B,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,KAAK,CAAC,EAAE;YACnB,2DAA2D;YAC3D,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAA;YAC1C,IAAI,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;gBAC/C,OAAM;YACR,CAAC;YAED,qCAAqC;YACrC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACvB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAA;gBAC7B,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAA;gBAC7B,gBAAgB,CAAC,IAAI,CAAC,CAAA;YACxB,CAAC;QACH,CAAC,EACD,SAAS,EAAE,KAAK,CAAC,EAAE;YACjB,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,gBAAgB,CAAC,KAAK,CAAC,CAAA;QACzB,CAAC,EACD,YAAY,EAAE,KAAK,CAAC,EAAE;YACpB,KAAK,CAAC,cAAc,EAAE,CAAA;QACxB,CAAC,IAEA,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CACtC,6BAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE;QAC3D,oBAAC,gBAAgB,OAAG;QACpB,oBAAC,UAAU,qBAAwB,CAC/B,CACP,CAAC,CAAC,CAAC,CACF,oBAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,GAAI,CAC3B,CACG,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,SAAS,CAAA"}

package/dist/components/MSAPanel/Loading.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function Loading(): React.JSX.Element;

package/dist/components/MSAPanel/Loading.js

@@ -0,0 +1,12 @@
+import { CircularProgress, Typography } from '@mui/material';
+import React from 'react';
+export default function Loading() {
+    return (React.createElement("div", { style: {
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+        } },
+        React.createElement(CircularProgress, null),
+        React.createElement(Typography, null, "Loading...")));
+}
+//# sourceMappingURL=Loading.js.map

package/dist/components/MSAPanel/Loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.js","sourceRoot":"","sources":["../../../src/components/MSAPanel/Loading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC5D,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,CACL,6BACE,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,KAAK;YACX,GAAG,EAAE,KAAK;SACX;QAED,oBAAC,gBAAgB,OAAG;QACpB,oBAAC,UAAU,qBAAwB,CAC/B,CACP,CAAA;AACH,CAAC"}

package/dist/components/MSAPanel/MSABlock.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MsaViewModel } from '../../model';
+declare const MSABlock: ({ model, offsetX, offsetY, }: {
+    model: MsaViewModel;
+    offsetX: number;
+    offsetY: number;
+}) => React.JSX.Element;
+export default MSABlock;

package/dist/components/MSAPanel/MSABlock.js

@@ -0,0 +1,62 @@
+import React, { useEffect, useRef, useMemo } from 'react';
+import { useTheme } from '@mui/material';
+import { autorun } from 'mobx';
+import { observer } from 'mobx-react';
+// locals
+import { renderMSABlock } from './renderMSABlock';
+import { colorContrast } from '../../util';
+const MSABlock = observer(function ({ model, offsetX, offsetY, }) {
+    const { colWidth, rowHeight, scrollY, scrollX, colorScheme, blockSize, mouseClickCol, mouseClickRow, highResScaleFactor, } = model;
+    const theme = useTheme();
+    const contrastScheme = useMemo(() => colorContrast(colorScheme, theme), [colorScheme, theme]);
+    const ref = useRef(null);
+    useEffect(() => {
+        const ctx = ref.current?.getContext('2d');
+        return ctx
+            ? autorun(() => {
+                renderMSABlock({
+                    ctx,
+                    theme,
+                    offsetX,
+                    offsetY,
+                    contrastScheme,
+                    model,
+                });
+            })
+            : undefined;
+    }, [model, offsetX, offsetY, theme, contrastScheme]);
+    return (React.createElement("canvas", { ref: ref, onMouseMove: event => {
+            if (!ref.current) {
+                return;
+            }
+            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 y = Math.floor(mouseY / rowHeight);
+            model.setMousePos(x, y);
+        }, onClick: event => {
+            if (!ref.current) {
+                return;
+            }
+            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 y = Math.floor(mouseY / rowHeight);
+            if (x === mouseClickCol && y === mouseClickRow) {
+                model.setMouseClickPos(undefined, undefined);
+            }
+            else {
+                model.setMouseClickPos(x, y);
+            }
+        }, onMouseLeave: () => model.setMousePos(), width: blockSize * highResScaleFactor, height: blockSize * highResScaleFactor, style: {
+            position: 'absolute',
+            top: scrollY + offsetY,
+            left: scrollX + offsetX,
+            width: blockSize,
+            height: blockSize,
+        } }));
+});
+export default MSABlock;
+//# sourceMappingURL=MSABlock.js.map

package/dist/components/MSAPanel/MSABlock.js.map

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

package/dist/components/MSAPanel/MSACanvas.d.ts

@@ -0,0 +1,7 @@
+import 'pixi.js/text-bitmap';
+import React from 'react';
+import { MsaViewModel } from '../../model';
+declare const MSACanvas: ({ model, }: {
+    model: MsaViewModel;
+}) => React.JSX.Element;
+export default MSACanvas;

package/dist/components/MSAPanel/MSACanvas.js

@@ -0,0 +1,69 @@
+import 'pixi.js/text-bitmap';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { observer } from 'mobx-react';
+import { ErrorMessage } from '@jbrowse/core/ui';
+import { useTheme } from '@mui/material';
+import { Application } from 'pixi.js';
+import { renderMSABlock } from './renderMSABlock';
+import { colorContrast } from '../../util';
+// Helper Component to ensure assets are loaded for docusaurus live examples
+const MSACanvas = observer(function MSACanvas2({ model, }) {
+    const { colorScheme, msaAreaWidth, height } = model;
+    const ref = useRef(null);
+    const [error, setError] = useState();
+    const theme = useTheme();
+    const contrastScheme = useMemo(() => colorContrast(colorScheme, theme), [colorScheme, theme]);
+    useEffect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        ;
+        (async () => {
+            try {
+                if (!ref.current) {
+                    return;
+                }
+                const app = new Application();
+                await app.init({
+                    width: msaAreaWidth,
+                    height,
+                    canvas: ref.current,
+                    resizeTo: ref.current,
+                });
+                const letters = [];
+                // for (const letter of 'ABCDEFGHIJKLMNOPQRSTUVWXYZ') {
+                //   const x = new BitmapText({
+                //     text: letter,
+                //     x: msaAreaWidth * Math.random(),
+                //     y: height * Math.random(),
+                //     style: {
+                //       fontFamily: 'Arial',
+                //       fontSize: 20,
+                //     },
+                //   })
+                //   letters.push(x)
+                //   app.stage.addChild(x)
+                // }
+                // Add a ticker callback to move the sprite back and forth
+                // app.ticker.add(ticker => {
+                //   for (const elt of letters) {
+                //     elt.updateTransform({
+                //       x: elt.x + (Math.random() - 0.5) * 1,
+                //       y: elt.y + (Math.random() - 0.5) * 1,
+                //     })
+                //   }
+                // })
+                renderMSABlock({ app, contrastScheme, theme, model });
+            }
+            catch (e) {
+                setError(e);
+                console.error(e);
+            }
+        })();
+    }, [height, model, theme, contrastScheme, msaAreaWidth]);
+    const e = error;
+    return e ? (React.createElement(ErrorMessage, { error: e })) : (React.createElement("canvas", { onWheel: event => {
+            model.setScrollX(model.scrollX - event.deltaX);
+            model.setScrollY(model.scrollY - event.deltaY);
+        }, width: msaAreaWidth, height: height, ref: ref }));
+});
+export default MSACanvas;
+//# sourceMappingURL=MSACanvas.js.map