jbrowse-plugin-graphgenomeviewer 1.0.0 → 1.0.1

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

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const SettingsDialog: ({ data, handleClose, }: {
+    data: string;
+    handleClose: (arg: boolean) => void;
+}) => React.JSX.Element;
+export default SettingsDialog;

package/dist/GraphGenomeView/components/AreYouSureDialog.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { Button, DialogActions, DialogContent, DialogContentText, } from '@mui/material';
+import { observer } from 'mobx-react';
+const SettingsDialog = observer(function ({ data, handleClose, }) {
+    return (React.createElement(Dialog, { open: true, maxWidth: "xl", title: "Large file warning", onClose: handleClose },
+        React.createElement(DialogContent, { style: { minWidth: 800 } },
+            React.createElement(DialogContentText, null,
+                "Are you sure you want to open file (detected size",
+                ' ',
+                data.length / 1_000_000,
+                "Mb?")),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { variant: "contained", onClick: () => {
+                    handleClose(true);
+                } }, "Submit"),
+            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
+                    handleClose(false);
+                } }, "Cancel"))));
+});
+export default SettingsDialog;
+//# sourceMappingURL=AreYouSureDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AreYouSureDialog.js","sourceRoot":"","sources":["../../../src/GraphGenomeView/components/AreYouSureDialog.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,iBAAiB,GAClB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,MAAM,cAAc,GAAG,QAAQ,CAAC,UAAU,EACxC,IAAI,EACJ,WAAW,GAIZ;IACC,OAAO,CACL,oBAAC,MAAM,IAAC,IAAI,QAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,WAAW;QACxE,oBAAC,aAAa,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;YACrC,oBAAC,iBAAiB;;gBACkC,GAAG;gBACpD,IAAI,CAAC,MAAM,GAAG,SAAS;sBACN,CACN;QAChB,oBAAC,aAAa;YACZ,oBAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE;oBACZ,WAAW,CAAC,IAAI,CAAC,CAAA;gBACnB,CAAC,aAGM;YACT,oBAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,GAAG,EAAE;oBACZ,WAAW,CAAC,KAAK,CAAC,CAAA;gBACpB,CAAC,aAGM,CACK,CACT,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,cAAc,CAAA"}

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

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

package/dist/GraphGenomeView/components/FeatureDialog.js

@@ -1,18 +1,14 @@
 import React from 'react';
+// @ts-expect-error
+import { Attributes } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
 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));
+import { getEnv } from '@jbrowse/core/util';
+import { DialogContent } from '@mui/material';
+export default function FeatureDialog({ data, model, onClose, }) {
+    const { pluginManager } = getEnv(model);
+    const { BaseAttributes } = pluginManager.jbrequire('@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail');
+    const omit = ['sequence', 'source', 'target'];
+    return (React.createElement(Dialog, { open: true, maxWidth: "xl", title: "Feature details", onClose: onClose },
+        React.createElement(DialogContent, { style: { minWidth: 800 } }, BaseAttributes ? (React.createElement(BaseAttributes, { feature: data, omit: omit })) : (React.createElement(Attributes, { attributes: data, omit: omit })))));
 }
 //# sourceMappingURL=FeatureDialog.js.map

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

@@ -1 +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"}
+{"version":3,"file":"FeatureDialog.js","sourceRoot":"","sources":["../../../src/GraphGenomeView/components/FeatureDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,mBAAmB;AACnB,OAAO,EAAE,UAAU,EAAE,MAAM,mDAAmD,CAAA;AAC9E,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAI7C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,IAAI,EACJ,KAAK,EACL,OAAO,GAKR;IACC,MAAM,EAAE,aAAa,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IACvC,MAAM,EAAE,cAAc,EAAE,GAAG,aAAa,CAAC,SAAS,CAChD,mDAAmD,CACpD,CAAA;IACD,MAAM,IAAI,GAAG,CAAC,UAAU,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAA;IAC7C,OAAO,CACL,oBAAC,MAAM,IAAC,IAAI,QAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,OAAO;QACjE,oBAAC,aAAa,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,IACpC,cAAc,CAAC,CAAC,CAAC,CAChB,oBAAC,cAAc,IAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAC9C,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,IAAC,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAC7C,CACa,CACT,CACV,CAAA;AACH,CAAC"}

package/dist/GraphGenomeView/components/GraphGenomeView.js

@@ -5,13 +5,14 @@ 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 }))));
+    return (React.createElement("div", null,
+        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

@@ -1 +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"}
+{"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;QACE,6BACE,KAAK,EAAE;gBACL,OAAO,EAAE,EAAE;aACZ;YAED,oBAAC,MAAM,IAAC,KAAK,EAAE,KAAK,GAAI;YACxB;gBACG,KAAK,CAAC,CAAC,CAAC,oBAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,IAAI;gBAC9C,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,GAAI,CACxB,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,eAAe,CAAA"}

package/dist/GraphGenomeView/components/GraphPanel.js

@@ -3,15 +3,19 @@ import { Graph } from 'graphgenomeviewer';
 import { observer } from 'mobx-react';
 import FeatureDialog from './FeatureDialog';
 const GraphPanel = observer(function ({ model, }) {
-    const { graph } = model;
+    const { graph, height, graphSettings, resultData, redrawCounter } = model;
+    const { chunkSize, colorScheme, linkSteps, linkThickness, sequenceThickness, drawPaths, drawLabels, drawNodeHandles, } = graphSettings;
     const [featureData, setFeatureData] = useState();
-    return graph ? (React.createElement(React.Fragment, null,
-        featureData ? (React.createElement(FeatureDialog, { data: featureData, onClose: () => {
+    return graph ? (React.createElement("div", null,
+        featureData ? (React.createElement(FeatureDialog, { data: featureData, model: model, onClose: () => {
                 setFeatureData(undefined);
             } })) : null,
-        React.createElement(Graph, { graph: graph, onFeatureClick: data => {
-                setFeatureData(data);
-            } }))) : null;
+        React.createElement("div", { ref: ref => {
+                model.setRef(ref);
+            } },
+            React.createElement(Graph, { key: `${resultData}-${redrawCounter}-${chunkSize}`, graph: graph, height: height, chunkSize: chunkSize, linkSteps: linkSteps, sequenceThickness: sequenceThickness, linkThickness: linkThickness, colorScheme: colorScheme, drawLabels: drawLabels, drawNodeHandles: drawNodeHandles, drawPaths: drawPaths, onFeatureClick: data => {
+                    setFeatureData(data);
+                } })))) : null;
 });
 export default GraphPanel;
 //# sourceMappingURL=GraphPanel.js.map

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

@@ -1 +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"}
+{"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,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;IACzE,MAAM,EACJ,SAAS,EACT,WAAW,EACX,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,eAAe,GAChB,GAAG,aAAa,CAAA;IACjB,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,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE;gBACZ,cAAc,CAAC,SAAS,CAAC,CAAA;YAC3B,CAAC,GACD,CACH,CAAC,CAAC,CAAC,IAAI;QAER,6BACE,GAAG,EAAE,GAAG,CAAC,EAAE;gBACT,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;YACnB,CAAC;YAED,oBAAC,KAAK,IACJ,GAAG,EAAE,GAAG,UAAU,IAAI,aAAa,IAAI,SAAS,EAAE,EAClD,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,iBAAiB,EAAE,iBAAiB,EACpC,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,IAAI,CAAC,EAAE;oBACrB,cAAc,CAAC,IAAI,CAAC,CAAA;gBACtB,CAAC,GACD,CACE,CACF,CACP,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAC,CAAA;AAEF,eAAe,UAAU,CAAA"}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+declare const GraphSettings: ({ tmpLinkSteps, setTmpLinkSteps, tmpChunkSize, setTmpChunkSize, tmpStrengthCenter, setTmpStrengthCenter, tmpSequenceThickness, setTmpSequenceThickness, tmpLinkThickness, setTmpLinkThickness, }: {
+    tmpLinkSteps: number;
+    setTmpLinkSteps: (val: number) => void;
+    tmpChunkSize: string;
+    setTmpChunkSize: (val: string) => void;
+    tmpStrengthCenter: number;
+    setTmpStrengthCenter: (val: number) => void;
+    tmpSequenceThickness: number;
+    setTmpSequenceThickness: (val: number) => void;
+    tmpLinkThickness: number;
+    setTmpLinkThickness: (val: number) => void;
+}) => React.JSX.Element;
+export default GraphSettings;

package/dist/GraphGenomeView/components/GraphSettings.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Paper, Slider, TextField, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+const GraphSettings = observer(function ({ tmpLinkSteps, setTmpLinkSteps, tmpChunkSize, setTmpChunkSize, tmpStrengthCenter, setTmpStrengthCenter, tmpSequenceThickness, setTmpSequenceThickness, tmpLinkThickness, setTmpLinkThickness, }) {
+    return (React.createElement("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 20,
+            marginTop: 20,
+        } },
+        React.createElement(Paper, { elevation: 6, style: { padding: 16 } },
+            React.createElement("div", null,
+                React.createElement(Typography, { variant: "h6" }, "Number of simulation steps for the links"),
+                React.createElement("br", null),
+                React.createElement("div", null, "Increases the rigidity of the simulation, higher numbers e.g. 10 makes things much less floppy")),
+            React.createElement("div", null,
+                React.createElement(Slider, { min: 1, max: 20, value: +tmpLinkSteps, onChange: (_event, val) => {
+                        setTmpLinkSteps(val);
+                    } }),
+                "Current value: ",
+                tmpLinkSteps)),
+        React.createElement(Paper, { elevation: 6, style: { padding: 16 } },
+            React.createElement("div", null,
+                React.createElement(Typography, { variant: "h6" }, "Sequence chunk size"),
+                React.createElement("br", null),
+                React.createElement("div", null, "If a contig is of length 5000, then chunk length 1000 would become 5 segments. Note: contigs smaller than the chunk length may be less proportionally sized (they do not get spaghettified)")),
+            React.createElement("div", null,
+                React.createElement(TextField, { value: tmpChunkSize, onChange: event => {
+                        setTmpChunkSize(event.target.value);
+                    } }))),
+        React.createElement(Paper, { elevation: 6, style: { padding: 16 } },
+            React.createElement("div", null,
+                React.createElement(Typography, { variant: "h6" }, "Strength (particle charge)"),
+                React.createElement("br", null),
+                React.createElement("div", null, "Akin to charged particle force, a large negative number increases the repulsive force")),
+            React.createElement("div", null,
+                React.createElement(Slider, { min: -100, max: -1, value: tmpStrengthCenter, onChange: (_event, val) => {
+                        setTmpStrengthCenter(val);
+                    } }),
+                "Current value: ",
+                tmpStrengthCenter)),
+        React.createElement(Paper, { elevation: 6, style: { padding: 16 } },
+            React.createElement("div", null,
+                React.createElement(Typography, { variant: "h6" }, "Sequence thickness (px)")),
+            React.createElement("div", null,
+                React.createElement(Slider, { min: 1, max: 20, value: tmpSequenceThickness, onChange: (_event, val) => {
+                        setTmpSequenceThickness(val);
+                    } }),
+                "Current value: ",
+                tmpSequenceThickness,
+                "px")),
+        React.createElement(Paper, { elevation: 6, style: { padding: 16 } },
+            React.createElement("div", null,
+                React.createElement(Typography, { variant: "h6" }, "Link thickness (px)")),
+            React.createElement("div", null,
+                React.createElement(Slider, { min: 1, max: 20, value: tmpLinkThickness, onChange: (_event, val) => {
+                        setTmpLinkThickness(val);
+                    } }),
+                "Current value: ",
+                tmpLinkThickness,
+                "px"))));
+});
+export default GraphSettings;
+//# sourceMappingURL=GraphSettings.js.map

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

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

package/dist/GraphGenomeView/components/Header.js

@@ -2,58 +2,58 @@ 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';
+import AreYouSureDialog from './AreYouSureDialog';
+import HeaderMenu from './HeaderMenu';
+import LocStringInput from './LocStringInput';
 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);
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        ;
+        (async () => {
+            try {
+                model.setError(undefined);
+                const data = await openLocation(loc).readFile('utf8');
+                if (data.length > 5_000_000) {
+                    getSession(globalThis).queueDialog(handleClose => [
+                        AreYouSureDialog,
+                        {
+                            handleClose: (arg) => {
+                                if (arg) {
+                                    if ('uri' in loc) {
+                                        model.setGfaUrl(loc.uri);
+                                    }
+                                    else {
+                                        model.setResultData(data);
+                                    }
+                                }
+                                handleClose();
+                            },
+                            data,
+                        },
+                    ]);
                 }
-                catch (e) {
-                    console.error(e);
-                    model.setError(e);
+                else {
+                    model.setResultData(data);
                 }
-            })();
-        }
+            }
+            catch (e) {
+                console.error(e);
+                model.setError(e);
+            }
+        })();
     });
-    return (React.createElement("div", { style: { display: 'flex' } },
+    return (React.createElement("div", { style: { display: 'flex', gap: 40 } },
+        React.createElement(HeaderMenu, { model: model }),
         mode === 'files' ? (React.createElement("div", { style: { maxWidth: 500 } },
-            React.createElement(FileSelector, { name: "GFA path", inline: true, location: loc, setLocation: loc => {
+            React.createElement(FileSelector, { name: "Open a GFA file", 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)))));
+                } }))) : (React.createElement(LocStringInput, { model: model }))));
 });
 export default Header;
 //# sourceMappingURL=Header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/GraphGenomeView/components/Header.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/GraphGenomeView/components/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAgB,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAI7C,MAAM,MAAM,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAAmC;IAC1E,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IACtB,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,EAAgB,CAAA;IAC9C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,OAAM;QACR,CAAC;QACD,mEAAmE;QACnE,CAAC;QAAA,CAAC,KAAK,IAAI,EAAE;YACX,IAAI,CAAC;gBACH,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;gBACzB,MAAM,IAAI,GAAG,MAAM,YAAY,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;gBACrD,IAAI,IAAI,CAAC,MAAM,GAAG,SAAS,EAAE,CAAC;oBAC5B,UAAU,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,CAAC;wBAChD,gBAAgB;wBAChB;4BACE,WAAW,EAAE,CAAC,GAAY,EAAE,EAAE;gCAC5B,IAAI,GAAG,EAAE,CAAC;oCACR,IAAI,KAAK,IAAI,GAAG,EAAE,CAAC;wCACjB,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;oCAC1B,CAAC;yCAAM,CAAC;wCACN,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;oCAC3B,CAAC;gCACH,CAAC;gCACD,WAAW,EAAE,CAAA;4BACf,CAAC;4BACD,IAAI;yBACL;qBACF,CAAC,CAAA;gBACJ,CAAC;qBAAM,CAAC;oBACN,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;gBAC3B,CAAC;YACH,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;gBAChB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;YACnB,CAAC;QACH,CAAC,CAAC,EAAE,CAAA;IACN,CAAC,CAAC,CAAA;IACF,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE;QACtC,oBAAC,UAAU,IAAC,KAAK,EAAE,KAAK,GAAI;QAE3B,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAClB,6BAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;YAC3B,oBAAC,YAAY,IACX,IAAI,EAAC,iBAAiB,EACtB,MAAM,QACN,QAAQ,EAAE,GAAG,EACb,WAAW,EAAE,GAAG,CAAC,EAAE;oBACjB,MAAM,CAAC,GAAG,CAAC,CAAA;gBACb,CAAC,GACD,CACE,CACP,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IAAC,KAAK,EAAE,KAAK,GAAI,CACjC,CACG,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

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

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

package/dist/GraphGenomeView/components/HeaderMenu.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+import { getSession } from '@jbrowse/core/util';
+import MenuIcon from '@mui/icons-material/Menu';
+import { observer } from 'mobx-react';
+import { Settings } from '@mui/icons-material';
+import SettingsDialog from './SettingsDialog';
+const HeaderMenu = observer(function ({ model, }) {
+    const { graphSettings } = model;
+    const { colorScheme, drawNodeHandles, drawPaths, drawLabels } = graphSettings;
+    return (React.createElement(CascadingMenuButton, { menuItems: [
+            {
+                label: 'Draw labels',
+                type: 'checkbox',
+                checked: drawLabels,
+                onClick: () => {
+                    graphSettings.setDrawLabels(!drawLabels);
+                },
+            },
+            {
+                label: 'Draw paths',
+                type: 'checkbox',
+                checked: drawPaths,
+                onClick: () => {
+                    graphSettings.setDrawPaths(!drawPaths);
+                },
+            },
+            {
+                label: 'Draw node handles',
+                type: 'checkbox',
+                checked: drawNodeHandles,
+                onClick: () => {
+                    graphSettings.setDrawNodeHandles(!drawNodeHandles);
+                },
+            },
+            {
+                label: 'Force redraw',
+                onClick: () => {
+                    model.redraw();
+                },
+            },
+            {
+                label: 'Color scheme',
+                subMenu: [
+                    'JustGrey',
+                    'Turbo',
+                    'Rainbow',
+                    'Spectral',
+                    'Viridis',
+                    'RdYlBu',
+                ].map(r => ({
+                    label: r,
+                    type: 'radio',
+                    checked: colorScheme === r,
+                    onClick: () => {
+                        graphSettings.setColorScheme(r);
+                    },
+                })),
+            },
+            {
+                label: 'Export SVG',
+                onClick: () => {
+                    model.exportSVG();
+                },
+            },
+            {
+                label: 'Settings',
+                icon: Settings,
+                onClick: () => {
+                    getSession(model).queueDialog(handleClose => [
+                        SettingsDialog,
+                        {
+                            handleClose,
+                            model,
+                        },
+                    ]);
+                },
+            },
+        ] },
+        React.createElement(MenuIcon, null)));
+});
+export default HeaderMenu;
+//# sourceMappingURL=HeaderMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderMenu.js","sourceRoot":"","sources":["../../../src/GraphGenomeView/components/HeaderMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,mBAAmB,MAAM,sCAAsC,CAAA;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAC/C,OAAO,QAAQ,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAA;AAE9C,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAI7C,MAAM,UAAU,GAAG,QAAQ,CAAC,UAAU,EACpC,KAAK,GAGN;IACC,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;IAC/B,MAAM,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,aAAa,CAAA;IAC7E,OAAO,CACL,oBAAC,mBAAmB,IAClB,SAAS,EAAE;YACT;gBACE,KAAK,EAAE,aAAa;gBACpB,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,UAAU;gBACnB,OAAO,EAAE,GAAG,EAAE;oBACZ,aAAa,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,CAAA;gBAC1C,CAAC;aACF;YACD;gBACE,KAAK,EAAE,YAAY;gBACnB,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,SAAS;gBAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,aAAa,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,CAAA;gBACxC,CAAC;aACF;YACD;gBACE,KAAK,EAAE,mBAAmB;gBAC1B,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,eAAe;gBACxB,OAAO,EAAE,GAAG,EAAE;oBACZ,aAAa,CAAC,kBAAkB,CAAC,CAAC,eAAe,CAAC,CAAA;gBACpD,CAAC;aACF;YACD;gBACE,KAAK,EAAE,cAAc;gBACrB,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,MAAM,EAAE,CAAA;gBAChB,CAAC;aACF;YACD;gBACE,KAAK,EAAE,cAAc;gBACrB,OAAO,EAAE;oBACP,UAAU;oBACV,OAAO;oBACP,SAAS;oBACT,UAAU;oBACV,SAAS;oBACT,QAAQ;iBACT,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;oBACV,KAAK,EAAE,CAAC;oBACR,IAAI,EAAE,OAAO;oBACb,OAAO,EAAE,WAAW,KAAK,CAAC;oBAC1B,OAAO,EAAE,GAAG,EAAE;wBACZ,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAA;oBACjC,CAAC;iBACF,CAAC,CAAC;aACJ;YACD;gBACE,KAAK,EAAE,YAAY;gBACnB,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,SAAS,EAAE,CAAA;gBACnB,CAAC;aACF;YACD;gBACE,KAAK,EAAE,UAAU;gBACjB,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,GAAG,EAAE;oBACZ,UAAU,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,CAAC;wBAC3C,cAAc;wBACd;4BACE,WAAW;4BACX,KAAK;yBACN;qBACF,CAAC,CAAA;gBACJ,CAAC;aACF;SACF;QAED,oBAAC,QAAQ,OAAG,CACQ,CACvB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,UAAU,CAAA"}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const HelpDialog: ({ handleClose, }: {
+    handleClose: () => void;
+}) => React.JSX.Element;
+export default HelpDialog;

package/dist/GraphGenomeView/components/HelpDialog.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { Button, DialogActions, DialogContent, DialogContentText, } from '@mui/material';
+import { observer } from 'mobx-react';
+const HelpDialog = observer(function ({ handleClose, }) {
+    return (React.createElement(Dialog, { open: true, maxWidth: "xl", title: "Help with loc string input", onClose: handleClose },
+        React.createElement(DialogContent, { style: { maxWidth: 500 } },
+            React.createElement(DialogContentText, null, "Enter a genomic region, including the PanSN prefix for the assembly e.g. GRCh38#chr21:1,000,000-1,000,500. This parameter will be passed as the \"--path\" argument to vg chunk")),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { variant: "contained", onClick: () => {
+                    handleClose();
+                } }, "Close"))));
+});
+export default HelpDialog;
+//# sourceMappingURL=HelpDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HelpDialog.js","sourceRoot":"","sources":["../../../src/GraphGenomeView/components/HelpDialog.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,iBAAiB,GAClB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,MAAM,UAAU,GAAG,QAAQ,CAAC,UAAU,EACpC,WAAW,GAGZ;IACC,OAAO,CACL,oBAAC,MAAM,IACL,IAAI,QACJ,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,WAAW;QAEpB,oBAAC,aAAa,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE;YACrC,oBAAC,iBAAiB,0LAIE,CACN;QAChB,oBAAC,aAAa;YACZ,oBAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE;oBACZ,WAAW,EAAE,CAAA;gBACf,CAAC,YAGM,CACK,CACT,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,UAAU,CAAA"}

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

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

package/dist/GraphGenomeView/components/LocStringInput.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { getSession } from '@jbrowse/core/util';
+import { Button, IconButton, TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+import { Help } from '@mui/icons-material';
+import HelpDialog from './HelpDialog';
+const LocStringInput = observer(function LocStringInput({ model, }) {
+    const { locstring } = model;
+    return (React.createElement("div", null,
+        React.createElement(TextField, { type: "text", variant: "outlined", placeholder: "GRCh38#chr21:1,000,000-1,000,500", value: locstring, style: { margin: 0, marginRight: 10, minWidth: 500 }, onChange: event => {
+                model.setGenomicRegionLocString(event.target.value);
+            } }),
+        React.createElement(Button, { variant: "contained", type: "submit" }, "Submit"),
+        React.createElement(IconButton, { onClick: () => {
+                getSession(model).queueDialog(handleClose => [
+                    HelpDialog,
+                    { handleClose },
+                ]);
+            } },
+            React.createElement(Help, null))));
+});
+export default LocStringInput;
+//# sourceMappingURL=LocStringInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LocStringInput.js","sourceRoot":"","sources":["../../../src/GraphGenomeView/components/LocStringInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAE1C,OAAO,UAAU,MAAM,cAAc,CAAA;AAIrC,MAAM,cAAc,GAAG,QAAQ,CAAC,SAAS,cAAc,CAAC,EACtD,KAAK,GAGN;IACC,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAC3B,OAAO,CACL;QACE,oBAAC,SAAS,IACR,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,UAAU,EAClB,WAAW,EAAC,kCAAkC,EAC9C,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EACpD,QAAQ,EAAE,KAAK,CAAC,EAAE;gBAChB,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YACrD,CAAC,GACD;QACF,oBAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,QAAQ,aAEhC;QACT,oBAAC,UAAU,IACT,OAAO,EAAE,GAAG,EAAE;gBACZ,UAAU,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,WAAW,CAAC,EAAE,CAAC;oBAC3C,UAAU;oBACV,EAAE,WAAW,EAAE;iBAChB,CAAC,CAAA;YACJ,CAAC;YAED,oBAAC,IAAI,OAAG,CACG,CACT,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AACF,eAAe,cAAc,CAAA"}

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

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

package/dist/GraphGenomeView/components/ServerSettings.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TextField, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+const ServerSettings = observer(function ({ model, }) {
+    const { serverRoot } = model;
+    return (React.createElement("div", null,
+        React.createElement("div", null, "Server settings:"),
+        React.createElement(TextField, { label: "Path to the simpleGfaServer e.g. http://localhost:9000/", style: { minWidth: 500 }, value: serverRoot, onChange: event => {
+                model.setServerRoot(event.target.value);
+            } }),
+        React.createElement("div", null,
+            React.createElement(Typography, { variant: "h6" }, "What is the GFA server?"),
+            React.createElement("div", null,
+                "It is a server that runs vg commands on pre-configured .vg graph files. It requires a server side setup to use, please see",
+                ' ',
+                React.createElement("a", { href: "https://github.com/cmdcolin/jbrowse-plugin-graphgenomeviewer/" }, "here"),
+                ' ',
+                "for details"),
+            React.createElement("div", null, "The alternative way to use this plugin is to run these vg commands yourself, and open the raw GFA files"))));
+});
+export default ServerSettings;
+//# sourceMappingURL=ServerSettings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ServerSettings.js","sourceRoot":"","sources":["../../../src/GraphGenomeView/components/ServerSettings.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,MAAM,cAAc,GAAG,QAAQ,CAAC,UAAU,EACxC,KAAK,GAGN;IACC,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IAC5B,OAAO,CACL;QACE,oDAA2B;QAC3B,oBAAC,SAAS,IACR,KAAK,EAAC,yDAAyD,EAC/D,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,EACxB,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,KAAK,CAAC,EAAE;gBAChB,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;YACzC,CAAC,GACD;QACF;YACE,oBAAC,UAAU,IAAC,OAAO,EAAC,IAAI,8BAAqC;YAC7D;;gBAE4D,GAAG;gBAC7D,2BAAG,IAAI,EAAC,+DAA+D,WAEnE;gBAAC,GAAG;8BAEJ;YACN,2IAGM,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,cAAc,CAAA"}

package/dist/GraphGenomeView/components/SettingsDialog.js

@@ -1,19 +1,40 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
-import { Button, DialogActions, DialogContent, FormControl, FormControlLabel, Radio, RadioGroup, } from '@mui/material';
+import { Button, DialogActions, DialogContent, FormControl, FormControlLabel, Radio, RadioGroup, Tab, Tabs, } from '@mui/material';
 import { observer } from 'mobx-react';
+import GraphSettings from './GraphSettings';
+import ServerSettings from './ServerSettings';
 const SettingsDialog = observer(function ({ model, handleClose, }) {
-    const { mode } = model;
+    const { mode, graphSettings } = model;
+    const [tabValue, setTabValue] = useState(0);
+    const { chunkSize, strengthCenter, linkThickness, linkSteps, sequenceThickness, } = graphSettings;
+    const [tmpChunkSize, setTmpChunkSize] = useState(`${chunkSize}`);
+    const [tmpLinkSteps, setTmpLinkSteps] = useState(linkSteps);
+    const [tmpStrengthCenter, setTmpStrengthCenter] = useState(strengthCenter);
+    const [tmpSequenceThickness, setTmpSequenceThickness] = useState(sequenceThickness);
+    const [tmpLinkThickness, setTmpLinkThickness] = useState(linkThickness);
     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(Tabs, { value: tabValue, onChange: (_event, newValue) => {
+                    setTabValue(newValue);
+                } },
+                React.createElement(Tab, { label: "Graph Settings" }),
+                React.createElement(Tab, { label: "Mode Settings" })),
+            tabValue === 1 ? (React.createElement(React.Fragment, null,
+                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" }))),
+                mode === 'server' ? React.createElement(ServerSettings, { model: model }) : null)) : (React.createElement(GraphSettings, { tmpLinkSteps: tmpLinkSteps, setTmpLinkSteps: setTmpLinkSteps, tmpChunkSize: tmpChunkSize, setTmpChunkSize: setTmpChunkSize, tmpStrengthCenter: tmpStrengthCenter, setTmpStrengthCenter: setTmpStrengthCenter, tmpSequenceThickness: tmpSequenceThickness, setTmpSequenceThickness: setTmpSequenceThickness, tmpLinkThickness: tmpLinkThickness, setTmpLinkThickness: setTmpLinkThickness }))),
         React.createElement(DialogActions, null,
             React.createElement(Button, { variant: "contained", onClick: () => {
+                    graphSettings.setChunkSize(+tmpChunkSize);
+                    graphSettings.setLinkSteps(+tmpLinkSteps);
+                    graphSettings.setStrengthCenter(+tmpStrengthCenter);
+                    graphSettings.setSequenceThickness(+tmpSequenceThickness);
+                    graphSettings.setLinkThickness(+tmpLinkThickness);
                     handleClose();
                 } }, "Submit"),
             React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {