jbrowse-plugin-graphgenomeviewer 1.0.0

package/README.md

@@ -0,0 +1,36 @@
+# jbrowse-plugin-graphgenomeviewer
+
+WIP for displaying graph genome as a view in JBrowse 2
+
+## Screenshot
+
+![](img/1.png)
+
+## Concept
+
+The code adds:
+
+- a simple file selector for the user to open .gfa files to display alognside
+  the genome browser (these are meant to be locus-specific smallish GFA, not
+  full assembly graphs)
+- alternatively, can configure a "GFA server" which will use the `vg chunk`
+  command to extract the region into a web based bandage-like graph genome
+  viewer https://github.com/cmdcolin/graphgenomeviewer
+
+## Thanks
+
+To the StableGenomics team for their PAG workshop helping explain some vg
+toolkit commands and concepts https://github.com/StableGenomics/PangPAG
+
+## TODOs
+
+Shortlist of TODOs
+
+- Easier navigation between the linear genome view and graph genome panel
+- Ability to launch a synteny-style view from the graph
+- Ability to use decompose graph into VCF track
+- Ability to show paths/walks
+- Debug issue where vg chunk GFA output not loadable in bandage
+- Improve scalability
+- Bi-directional mouseover from genome to graph and back
+- Less chunk-y-ness from the vg chunk graph (?)

package/dist/GraphGenomeView/components/FeatureDialog.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function FeatureDialog({ data, onClose, }: {
+    data: Record<string, unknown>;
+    onClose: () => void;
+}): React.JSX.Element;

package/dist/GraphGenomeView/components/FeatureDialog.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+export default function FeatureDialog({ data, onClose, }) {
+    return (React.createElement(Dialog, { open: true, title: "Feature details", onClose: onClose },
+        React.createElement("div", null, "Attributes"),
+        Object.entries(data)
+            .filter(entry => !['source', 'target', 'linkNum', 'tags'].includes(entry[0]))
+            .map(([key, value]) => (React.createElement("div", { key: `${key}_${value}`, style: { display: 'flex', maxHeight: 150, margin: 3 } },
+            React.createElement("div", { style: { backgroundColor: '#dda', minWidth: 100 } }, key),
+            React.createElement("div", { style: { wordBreak: 'break-word', overflow: 'auto' } }, String(value))))),
+        React.createElement("hr", null),
+        data.tags && Object.keys(data.tags).length > 0 ? (React.createElement(React.Fragment, null,
+            React.createElement("div", null, "Tags"),
+            Object.entries(data.tags).map(([key, value]) => (React.createElement("div", { key: `${key}_${value}`, style: { display: 'flex', maxHeight: 150, margin: 3 } },
+                React.createElement("div", { style: { backgroundColor: '#dda', minWidth: 100 } }, key),
+                React.createElement("div", { style: { wordBreak: 'break-word', overflow: 'auto' } }, String(value))))))) : null));
+}
+//# sourceMappingURL=FeatureDialog.js.map

package/dist/GraphGenomeView/components/FeatureDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureDialog.js","sourceRoot":"","sources":["../../../src/GraphGenomeView/components/FeatureDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAEzC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAI,EACJ,OAAO,GAIR;IACC,OAAO,CACL,oBAAC,MAAM,IAAC,IAAI,QAAC,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,OAAO;QACnD,8CAAqB;QACpB,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;aAClB,MAAM,CACL,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACrE;aACA,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CACrB,6BACE,GAAG,EAAE,GAAG,GAAG,IAAI,KAAK,EAAE,EACtB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;YAErD,6BAAK,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,IAAG,GAAG,CAAO;YACnE,6BAAK,KAAK,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE,IACtD,MAAM,CAAC,KAAK,CAAC,CACV,CACF,CACP,CAAC;QACJ,+BAAM;QACL,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAChD;YACE,wCAAe;YACd,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAC/C,6BACE,GAAG,EAAE,GAAG,GAAG,IAAI,KAAK,EAAE,EACtB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;gBAErD,6BAAK,KAAK,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAE,IACnD,GAAG,CACA;gBACN,6BAAK,KAAK,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE,IACtD,MAAM,CAAC,KAAK,CAAC,CACV,CACF,CACP,CAAC,CACD,CACJ,CAAC,CAAC,CAAC,IAAI,CACD,CACV,CAAA;AACH,CAAC"}

package/dist/GraphGenomeView/components/GraphGenomeView.d.ts

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

package/dist/GraphGenomeView/components/GraphGenomeView.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ErrorMessage } from '@jbrowse/core/ui';
+import { observer } from 'mobx-react';
+import GraphPanel from './GraphPanel';
+import Header from './Header';
+const GraphGenomeView = observer(function ({ model, }) {
+    const { error } = model;
+    return (React.createElement("div", { style: {
+            padding: 10,
+        } },
+        React.createElement(Header, { model: model }),
+        React.createElement("div", null,
+            error ? React.createElement(ErrorMessage, { error: error }) : null,
+            React.createElement(GraphPanel, { model: model }))));
+});
+export default GraphGenomeView;
+//# sourceMappingURL=GraphGenomeView.js.map

package/dist/GraphGenomeView/components/GraphGenomeView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphGenomeView.js","sourceRoot":"","sources":["../../../src/GraphGenomeView/components/GraphGenomeView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,MAAM,MAAM,UAAU,CAAA;AAI7B,MAAM,eAAe,GAAG,QAAQ,CAAC,UAAU,EACzC,KAAK,GAGN;IACC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IACvB,OAAO,CACL,6BACE,KAAK,EAAE;YACL,OAAO,EAAE,EAAE;SACZ;QAED,oBAAC,MAAM,IAAC,KAAK,EAAE,KAAK,GAAI;QACxB;YACG,KAAK,CAAC,CAAC,CAAC,oBAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI;YAC9C,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,GAAI,CACxB,CACF,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,eAAe,CAAA"}

package/dist/GraphGenomeView/components/GraphPanel.d.ts

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

package/dist/GraphGenomeView/components/GraphPanel.js

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import { Graph } from 'graphgenomeviewer';
+import { observer } from 'mobx-react';
+import FeatureDialog from './FeatureDialog';
+const GraphPanel = observer(function ({ model, }) {
+    const { graph } = model;
+    const [featureData, setFeatureData] = useState();
+    return graph ? (React.createElement(React.Fragment, null,
+        featureData ? (React.createElement(FeatureDialog, { data: featureData, onClose: () => {
+                setFeatureData(undefined);
+            } })) : null,
+        React.createElement(Graph, { graph: graph, onFeatureClick: data => {
+                setFeatureData(data);
+            } }))) : null;
+});
+export default GraphPanel;
+//# sourceMappingURL=GraphPanel.js.map

package/dist/GraphGenomeView/components/GraphPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphPanel.js","sourceRoot":"","sources":["../../../src/GraphGenomeView/components/GraphPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAI3C,MAAM,UAAU,GAAG,QAAQ,CAAC,UAAU,EACpC,KAAK,GAGN;IACC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IACvB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,EAA2B,CAAA;IACzE,OAAO,KAAK,CAAC,CAAC,CAAC,CACb;QACG,WAAW,CAAC,CAAC,CAAC,CACb,oBAAC,aAAa,IACZ,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE,GAAG,EAAE;gBACZ,cAAc,CAAC,SAAS,CAAC,CAAA;YAC3B,CAAC,GACD,CACH,CAAC,CAAC,CAAC,IAAI;QACR,oBAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,IAAI,CAAC,EAAE;gBACrB,cAAc,CAAC,IAAI,CAAC,CAAA;YACtB,CAAC,GACD,CACD,CACJ,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAC,CAAA;AAEF,eAAe,UAAU,CAAA"}

package/dist/GraphGenomeView/components/Header.d.ts

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

package/dist/GraphGenomeView/components/Header.js

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import { FileSelector } from '@jbrowse/core/ui';
+import { getSession } from '@jbrowse/core/util';
+import { openLocation } from '@jbrowse/core/util/io';
+import { Button, IconButton, TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+import { Settings } from '@mui/icons-material';
+import SettingsDialog from './SettingsDialog';
+const Header = observer(function ({ model }) {
+    const { mode } = model;
+    const [val, setVal] = useState('GRCh38#chr21:1000-2000');
+    const [loc, setLoc] = useState();
+    useEffect(() => {
+        if (!loc) {
+            return;
+        }
+        if ('uri' in loc && loc.uri) {
+            model.setGfaUrl(loc.uri);
+        }
+        else {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            ;
+            (async () => {
+                try {
+                    model.setError(undefined);
+                    const data = await openLocation(loc).readFile('utf8');
+                    model.setResultData(data);
+                }
+                catch (e) {
+                    console.error(e);
+                    model.setError(e);
+                }
+            })();
+        }
+    });
+    return (React.createElement("div", { style: { display: 'flex' } },
+        mode === 'files' ? (React.createElement("div", { style: { maxWidth: 500 } },
+            React.createElement(FileSelector, { name: "GFA path", inline: true, location: loc, setLocation: loc => {
+                    setLoc(loc);
+                } }))) : (React.createElement("div", null,
+            React.createElement(TextField, { type: "text", variant: "outlined", margin: "normal", size: "small", value: val, style: { minWidth: 500 }, onChange: event => {
+                    setVal(event.target.value);
+                } }),
+            React.createElement(Button, { variant: "contained", type: "submit" }, "Submit"))),
+        React.createElement("div", { style: { flexGrow: 1 } }),
+        React.createElement("div", null,
+            React.createElement(IconButton, { onClick: () => {
+                    getSession(model).queueDialog(handleClose => [
+                        SettingsDialog,
+                        {
+                            handleClose,
+                            model,
+                        },
+                    ]);
+                } },
+                React.createElement(Settings, null)))));
+});
+export default Header;
+//# sourceMappingURL=Header.js.map

package/dist/GraphGenomeView/components/Header.js.map

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

package/dist/GraphGenomeView/components/SettingsDialog.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { GraphGenomeViewModel } from '../model';
+declare const SettingsDialog: ({ model, handleClose, }: {
+    model: GraphGenomeViewModel;
+    handleClose: () => void;
+}) => React.JSX.Element;
+export default SettingsDialog;

package/dist/GraphGenomeView/components/SettingsDialog.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { Button, DialogActions, DialogContent, FormControl, FormControlLabel, Radio, RadioGroup, } from '@mui/material';
+import { observer } from 'mobx-react';
+const SettingsDialog = observer(function ({ model, handleClose, }) {
+    const { mode } = model;
+    return (React.createElement(Dialog, { open: true, maxWidth: "xl", title: "Settings", onClose: handleClose },
+        React.createElement(DialogContent, { style: { minWidth: 800 } },
+            React.createElement(FormControl, { component: "fieldset" },
+                React.createElement(RadioGroup, { value: mode, onChange: event => {
+                        model.setMode(event.target.value);
+                    } },
+                    React.createElement(FormControlLabel, { value: "files", control: React.createElement(Radio, null), label: "Use GFA files" }),
+                    React.createElement(FormControlLabel, { value: "server", control: React.createElement(Radio, null), label: "Use GFA server" })))),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { variant: "contained", onClick: () => {
+                    handleClose();
+                } }, "Submit"),
+            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
+                    handleClose();
+                } }, "Cancel"))));
+});
+export default SettingsDialog;
+//# sourceMappingURL=SettingsDialog.js.map

package/dist/GraphGenomeView/components/SettingsDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsDialog.js","sourceRoot":"","sources":["../../../src/GraphGenomeView/components/SettingsDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EACL,MAAM,EACN,aAAa,EACb,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,KAAK,EACL,UAAU,GACX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,MAAM,cAAc,GAAG,QAAQ,CAAC,UAAU,EACxC,KAAK,EACL,WAAW,GAIZ;IACC,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IACtB,OAAO,CACL,oBAAC,MAAM,IAAC,IAAI,QAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,WAAW;QAC9D,oBAAC,aAAa,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;YACrC,oBAAC,WAAW,IAAC,SAAS,EAAC,UAAU;gBAC/B,oBAAC,UAAU,IACT,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,KAAK,CAAC,EAAE;wBAChB,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;oBACnC,CAAC;oBAED,oBAAC,gBAAgB,IACf,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,oBAAC,KAAK,OAAG,EAClB,KAAK,EAAC,eAAe,GACrB;oBACF,oBAAC,gBAAgB,IACf,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,oBAAC,KAAK,OAAG,EAClB,KAAK,EAAC,gBAAgB,GACtB,CACS,CACD,CACA;QAChB,oBAAC,aAAa;YACZ,oBAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE;oBACZ,WAAW,EAAE,CAAA;gBACf,CAAC,aAGM;YACT,oBAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,GAAG,EAAE;oBACZ,WAAW,EAAE,CAAA;gBACf,CAAC,aAGM,CACK,CACT,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,cAAc,CAAA"}

package/dist/GraphGenomeView/index.d.ts

@@ -0,0 +1,2 @@
+import PluginManager from '@jbrowse/core/PluginManager';
+export default function ProteinViewF(pluginManager: PluginManager): void;

package/dist/GraphGenomeView/index.js

@@ -0,0 +1,15 @@
+import { lazy } from 'react';
+import { ViewType } from '@jbrowse/core/pluggableElementTypes';
+import stateModelF from './model';
+const ReactComponent = lazy(() => import('./components/GraphGenomeView'));
+export default function ProteinViewF(pluginManager) {
+    pluginManager.addViewType(() => {
+        return new ViewType({
+            name: 'GraphGenomeView',
+            displayName: 'Graph genome view',
+            stateModel: stateModelF(),
+            ReactComponent,
+        });
+    });
+}
+//# sourceMappingURL=index.js.map

package/dist/GraphGenomeView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/GraphGenomeView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAG5B,OAAO,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAA;AAE9D,OAAO,WAAW,MAAM,SAAS,CAAA;AAEjC,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,8BAA8B,CAAC,CAAC,CAAA;AAEzE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,aAA4B;IAC/D,aAAa,CAAC,WAAW,CAAC,GAAG,EAAE;QAC7B,OAAO,IAAI,QAAQ,CAAC;YAClB,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,mBAAmB;YAChC,UAAU,EAAE,WAAW,EAAE;YACzB,cAAc;SACf,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC"}

package/dist/GraphGenomeView/model.d.ts

@@ -0,0 +1,80 @@
+import type { Instance } from 'mobx-state-tree';
+export default function stateModelFactory(): import("mobx-state-tree").IModelType<{
+    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+    minimized: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+} & {
+    type: import("mobx-state-tree").IType<string | undefined, string, string>;
+    genomicRegionLocString: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+    gfaUrl: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+    mode: import("mobx-state-tree").IType<string | undefined, string, string>;
+}, {
+    width: number;
+} & {
+    menuItems(): import("@jbrowse/core/ui").MenuItem[];
+} & {
+    setDisplayName(name: string): void;
+    setWidth(newWidth: number): void;
+    setMinimized(flag: boolean): void;
+} & {
+    /**
+     * #volatile
+     */
+    resultData: string | undefined;
+    /**
+     * #volatile
+     */
+    error: unknown;
+} & {
+    /**
+     * #getter
+     */
+    readonly graph: {
+        nodes: {
+            id: string;
+            length: number;
+            sequence: string;
+            tags: Record<string, string | number>;
+        }[];
+        links: {
+            source: string;
+            target: string;
+            strand1?: string;
+            strand2?: string;
+            cigar: string;
+            tags: Record<string, string>;
+        }[];
+        paths: {
+            name: string;
+            path: string;
+            rest: string[];
+        }[];
+        header: Record<string, string | number>[];
+        id: string;
+    } | undefined;
+} & {
+    /**
+     * #action
+     */
+    setMode(arg: string): void;
+    /**
+     * #action
+     */
+    setError(arg: unknown): void;
+    /**
+     * #action
+     */
+    setResultData(arg: string): void;
+    /**
+     * #action
+     */
+    setGenomicRegionLocString(arg: string): void;
+    /**
+     * #action
+     */
+    setGfaUrl(url: string): void;
+} & {
+    afterAttach(): void;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+export type GraphGenomeViewStateModel = ReturnType<typeof stateModelFactory>;
+export type GraphGenomeViewModel = Instance<GraphGenomeViewStateModel>;

package/dist/GraphGenomeView/model.js

@@ -0,0 +1,96 @@
+import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes';
+import { parseGFA } from 'graphgenomeviewer';
+import { autorun } from 'mobx';
+import { addDisposer, types } from 'mobx-state-tree';
+import { myfetchtext } from './util';
+export default function stateModelFactory() {
+    return types.compose('GraphGenomeView', BaseViewModel, types
+        .model({
+        /**
+         * #property
+         */
+        type: 'GraphGenomeView',
+        /**
+         * #property
+         */
+        genomicRegionLocString: types.maybe(types.string),
+        /**
+         * #property
+         */
+        gfaUrl: types.maybe(types.string),
+        /**
+         * #property
+         */
+        mode: 'files',
+    })
+        .volatile(() => ({
+        /**
+         * #volatile
+         */
+        resultData: undefined,
+        /**
+         * #volatile
+         */
+        error: undefined,
+    }))
+        .views(self => ({
+        /**
+         * #getter
+         */
+        get graph() {
+            return self.resultData ? parseGFA(self.resultData) : undefined;
+        },
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         */
+        setMode(arg) {
+            self.mode = arg;
+        },
+        /**
+         * #action
+         */
+        setError(arg) {
+            self.error = arg;
+        },
+        /**
+         * #action
+         */
+        setResultData(arg) {
+            self.resultData = arg;
+        },
+        /**
+         * #action
+         */
+        setGenomicRegionLocString(arg) {
+            self.genomicRegionLocString = arg;
+        },
+        /**
+         * #action
+         */
+        setGfaUrl(url) {
+            self.gfaUrl = url;
+        },
+    }))
+        .actions(self => ({
+        afterAttach() {
+            addDisposer(self, autorun(async () => {
+                if (!self.gfaUrl) {
+                    return;
+                }
+                try {
+                    self.setError(undefined);
+                    const url = self.gfaUrl;
+                    const data = await myfetchtext(url);
+                    self.setResultData(data);
+                }
+                catch (e) {
+                    self.setError(e);
+                    console.error(e);
+                }
+            }));
+        },
+    })));
+}
+//# sourceMappingURL=model.js.map

package/dist/GraphGenomeView/model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model.js","sourceRoot":"","sources":["../../src/GraphGenomeView/model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,qCAAqC,CAAA;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AAIpC,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACvC,OAAO,KAAK,CAAC,OAAO,CAClB,iBAAiB,EACjB,aAAa,EACb,KAAK;SACF,KAAK,CAAC;QACL;;WAEG;QACH,IAAI,EAAE,iBAAiB;QAEvB;;WAEG;QACH,sBAAsB,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;QAEjD;;WAEG;QACH,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC;QACjC;;WAEG;QACH,IAAI,EAAE,OAAO;KACd,CAAC;SACD,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QACf;;WAEG;QACH,UAAU,EAAE,SAA+B;QAC3C;;WAEG;QACH,KAAK,EAAE,SAAoB;KAC5B,CAAC,CAAC;SACF,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACd;;WAEG;QACH,IAAI,KAAK;YACP,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;QAChE,CAAC;KACF,CAAC,CAAC;SACF,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAChB;;WAEG;QACH,OAAO,CAAC,GAAW;YACjB,IAAI,CAAC,IAAI,GAAG,GAAG,CAAA;QACjB,CAAC;QACD;;WAEG;QACH,QAAQ,CAAC,GAAY;YACnB,IAAI,CAAC,KAAK,GAAG,GAAG,CAAA;QAClB,CAAC;QACD;;WAEG;QACH,aAAa,CAAC,GAAW;YACvB,IAAI,CAAC,UAAU,GAAG,GAAG,CAAA;QACvB,CAAC;QACD;;WAEG;QACH,yBAAyB,CAAC,GAAW;YACnC,IAAI,CAAC,sBAAsB,GAAG,GAAG,CAAA;QACnC,CAAC;QACD;;WAEG;QACH,SAAS,CAAC,GAAW;YACnB,IAAI,CAAC,MAAM,GAAG,GAAG,CAAA;QACnB,CAAC;KACF,CAAC,CAAC;SACF,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAChB,WAAW;YACT,WAAW,CACT,IAAI,EACJ,OAAO,CAAC,KAAK,IAAI,EAAE;gBACjB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;oBACjB,OAAM;gBACR,CAAC;gBACD,IAAI,CAAC;oBACH,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;oBACxB,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAA;oBACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC,GAAG,CAAC,CAAA;oBACnC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;gBAC1B,CAAC;gBAAC,OAAO,CAAC,EAAE,CAAC;oBACX,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;oBAChB,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;gBAClB,CAAC;YACH,CAAC,CAAC,CACH,CAAA;QACH,CAAC;KACF,CAAC,CAAC,CACN,CAAA;AACH,CAAC"}

package/dist/GraphGenomeView/util.d.ts

@@ -0,0 +1 @@
+export declare function myfetchtext(url: string): Promise<string>;

package/dist/GraphGenomeView/util.js

@@ -0,0 +1,8 @@
+export async function myfetchtext(url) {
+    const res = await fetch(url);
+    if (!res.ok) {
+        throw new Error(`HTTP ${res.status} fetching ${url}`);
+    }
+    return res.text();
+}
+//# sourceMappingURL=util.js.map

package/dist/GraphGenomeView/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../src/GraphGenomeView/util.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,KAAK,UAAU,WAAW,CAAC,GAAW;IAC3C,MAAM,GAAG,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAA;IAC5B,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CAAC,QAAQ,GAAG,CAAC,MAAM,aAAa,GAAG,EAAE,CAAC,CAAA;IACvD,CAAC;IACD,OAAO,GAAG,CAAC,IAAI,EAAE,CAAA;AACnB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import Plugin from '@jbrowse/core/Plugin';
+import PluginManager from '@jbrowse/core/PluginManager';
+export default class GraphGenomeViewer extends Plugin {
+    name: string;
+    version: any;
+    install(pluginManager: PluginManager): void;
+    configure(pluginManager: PluginManager): void;
+}

package/dist/index.js

@@ -0,0 +1,24 @@
+import Plugin from '@jbrowse/core/Plugin';
+import { isAbstractMenuManager } from '@jbrowse/core/util';
+import HubIcon from '@mui/icons-material/Hub';
+import { version } from '../package.json';
+import GraphGenomeViewF from './GraphGenomeView';
+export default class GraphGenomeViewer extends Plugin {
+    name = 'GraphGenomeViewer';
+    version = version;
+    install(pluginManager) {
+        GraphGenomeViewF(pluginManager);
+    }
+    configure(pluginManager) {
+        if (isAbstractMenuManager(pluginManager.rootModel)) {
+            pluginManager.rootModel.appendToSubMenu(['Add'], {
+                label: 'Graph genome viewer',
+                icon: HubIcon,
+                onClick: (session) => {
+                    session.addView('GraphGenomeView', {});
+                },
+            });
+        }
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,OAAO,EAAwB,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAChF,OAAO,OAAO,MAAM,yBAAyB,CAAA;AAE7C,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AACzC,OAAO,gBAAgB,MAAM,mBAAmB,CAAA;AAEhD,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,MAAM;IACnD,IAAI,GAAG,mBAAmB,CAAA;IAC1B,OAAO,GAAG,OAAO,CAAA;IAEjB,OAAO,CAAC,aAA4B;QAClC,gBAAgB,CAAC,aAAa,CAAC,CAAA;IACjC,CAAC;IAED,SAAS,CAAC,aAA4B;QACpC,IAAI,qBAAqB,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE,CAAC;YACnD,aAAa,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,EAAE;gBAC/C,KAAK,EAAE,qBAAqB;gBAC5B,IAAI,EAAE,OAAO;gBACb,OAAO,EAAE,CAAC,OAA6B,EAAE,EAAE;oBACzC,OAAO,CAAC,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAA;gBACxC,CAAC;aACF,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;CACF"}