@jbrowse/plugin-variants 2.17.0 → 2.18.0

package/esm/VcfTabixAdapter/VcfTabixAdapter.js

@@ -1,9 +1,8 @@
-import { BaseFeatureDataAdapter, } from '@jbrowse/core/data_adapters/BaseAdapter';
-import { openLocation } from '@jbrowse/core/util/io';
-import { ObservableCreate } from '@jbrowse/core/util/rxjs';
 import { TabixIndexedFile } from '@gmod/tabix';
 import VcfParser from '@gmod/vcf';
-// local
+import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter';
+import { openLocation } from '@jbrowse/core/util/io';
+import { ObservableCreate } from '@jbrowse/core/util/rxjs';
 import VcfFeature from '../VcfFeature';
 export default class VcfTabixAdapter extends BaseFeatureDataAdapter {
     async configurePre() {
@@ -61,7 +60,13 @@ export default class VcfTabixAdapter extends BaseFeatureDataAdapter {
                 ...opts,
             });
             observer.complete();
-        }, opts.signal);
+        }, opts.stopToken);
+    }
+    async getSources() {
+        const { parser } = await this.configure();
+        return parser.samples.map(name => ({
+            name,
+        }));
     }
-    freeResources( /* { region } */) { }
+    freeResources() { }
 }

package/esm/VcfTabixAdapter/configSchema.d.ts

@@ -1,7 +1,4 @@
 declare const VcfTabixAdapter: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-    /**
-     * #slot
-     */
     vcfGzLocation: {
         type: string;
         defaultValue: {
@@ -10,17 +7,11 @@ declare const VcfTabixAdapter: import("@jbrowse/core/configuration/configuration
         };
     };
     index: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
-        /**
-         * #slot index.indexType
-         */
         indexType: {
             model: import("mobx-state-tree").ISimpleType<string>;
             type: string;
             defaultValue: string;
         };
-        /**
-         * #slot index.location
-         */
         location: {
             type: string;
             defaultValue: {

package/esm/VcfTabixAdapter/configSchema.js

@@ -1,29 +1,17 @@
-import { types } from 'mobx-state-tree';
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
-/**
- * #config VcfTabixAdapter
- */
-function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
+import { types } from 'mobx-state-tree';
+function x() { }
 const VcfTabixAdapter = ConfigurationSchema('VcfTabixAdapter', {
-    /**
-     * #slot
-     */
     vcfGzLocation: {
         type: 'fileLocation',
         defaultValue: { uri: '/path/to/my.vcf.gz', locationType: 'UriLocation' },
     },
     index: ConfigurationSchema('VcfIndex', {
-        /**
-         * #slot index.indexType
-         */
         indexType: {
             model: types.enumeration('IndexType', ['TBI', 'CSI']),
             type: 'stringEnum',
             defaultValue: 'TBI',
         },
-        /**
-         * #slot index.location
-         */
         location: {
             type: 'fileLocation',
             defaultValue: {

package/esm/VcfTabixAdapter/index.d.ts

@@ -1,3 +1,3 @@
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export { default as configSchema } from './configSchema';
 export default function VcfTabixAdapterF(pluginManager: PluginManager): void;

package/esm/configSchema.d.ts

@@ -0,0 +1,34 @@
+declare const WiggleRenderer: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+    color: {
+        type: string;
+        description: string;
+        defaultValue: string;
+    };
+    posColor: {
+        type: string;
+        description: string;
+        defaultValue: string;
+    };
+    negColor: {
+        type: string;
+        description: string;
+        defaultValue: string;
+    };
+    clipColor: {
+        type: string;
+        description: string;
+        defaultValue: string;
+    };
+    bicolorPivot: {
+        type: string;
+        model: import("mobx-state-tree").ISimpleType<string>;
+        description: string;
+        defaultValue: string;
+    };
+    bicolorPivotValue: {
+        type: string;
+        defaultValue: number;
+        description: string;
+    };
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+export default WiggleRenderer;

package/esm/configSchema.js

@@ -0,0 +1,42 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+import { types } from 'mobx-state-tree';
+function x() { }
+const WiggleRenderer = ConfigurationSchema('WiggleRenderer', {
+    color: {
+        type: 'color',
+        description: 'the color of track, overrides posColor and negColor',
+        defaultValue: '#f0f',
+    },
+    posColor: {
+        type: 'color',
+        description: 'the color to use when the score is positive',
+        defaultValue: 'blue',
+    },
+    negColor: {
+        type: 'color',
+        description: 'the color to use when the score is negative',
+        defaultValue: 'red',
+    },
+    clipColor: {
+        type: 'color',
+        description: 'the color of the clipping marker',
+        defaultValue: 'red',
+    },
+    bicolorPivot: {
+        type: 'stringEnum',
+        model: types.enumeration('Scale type', [
+            'numeric',
+            'mean',
+            'z_score',
+            'none',
+        ]),
+        description: 'type of bicolor pivot',
+        defaultValue: 'numeric',
+    },
+    bicolorPivotValue: {
+        type: 'number',
+        defaultValue: 0,
+        description: 'value to use for bicolor pivot',
+    },
+}, { explicitlyTyped: true });
+export default WiggleRenderer;

package/esm/extensionPoints.d.ts

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

package/esm/extensionPoints.js

@@ -1,4 +1,4 @@
-import { makeIndex, makeIndexType, getFileName, } from '@jbrowse/core/util/tracks';
+import { getFileName, makeIndex, makeIndexType, } from '@jbrowse/core/util/tracks';
 export default function ExtensionPointsF(pluginManager) {
     pluginManager.addToExtensionPoint('Core-guessAdapterForLocation', (adapterGuesser) => {
         return (file, index, adapterHint) => {

package/esm/getMultiVariantFeaturesAutorun.d.ts

@@ -0,0 +1,19 @@
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { Feature } from '@jbrowse/core/util';
+export interface Source {
+    name: string;
+    color?: string;
+    group?: string;
+    [key: string]: string | undefined;
+}
+export declare function getMultiVariantFeaturesAutorun(self: {
+    configuration: AnyConfigurationModel;
+    adapterConfig: AnyConfigurationModel;
+    sources?: Source[];
+    mafFilter: number;
+    statsReadyAndRegionNotTooLarge: boolean;
+    adapterProps: () => Record<string, unknown>;
+    setError: (error: unknown) => void;
+    setFeatures: (f: Feature[]) => void;
+    setMessage: (str: string) => void;
+}): void;

package/esm/getMultiVariantFeaturesAutorun.js

@@ -0,0 +1,37 @@
+import { SimpleFeature, getContainingView, getSession, } from '@jbrowse/core/util';
+import { isAbortException } from '@jbrowse/core/util/aborting';
+import { getRpcSessionId } from '@jbrowse/core/util/tracks';
+import { autorun } from 'mobx';
+import { addDisposer, isAlive } from 'mobx-state-tree';
+export function getMultiVariantFeaturesAutorun(self) {
+    addDisposer(self, autorun(async () => {
+        try {
+            const view = getContainingView(self);
+            if (!view.initialized || !self.statsReadyAndRegionNotTooLarge) {
+                return;
+            }
+            const { rpcManager } = getSession(self);
+            const { sources, mafFilter, adapterConfig } = self;
+            if (!sources) {
+                return;
+            }
+            const sessionId = getRpcSessionId(self);
+            const features = (await rpcManager.call(sessionId, 'MultiVariantGetSimplifiedFeatures', {
+                regions: view.dynamicBlocks.contentBlocks,
+                sources,
+                mafFilter,
+                sessionId,
+                adapterConfig,
+            }));
+            if (isAlive(self)) {
+                self.setFeatures(features.map(f => new SimpleFeature(f)));
+            }
+        }
+        catch (e) {
+            if (!isAbortException(e) && isAlive(self)) {
+                console.error(e);
+                getSession(self).notifyError(`${e}`, e);
+            }
+        }
+    }, { delay: 1000 }));
+}

package/esm/getMultiVariantSourcesAutorun.d.ts

@@ -0,0 +1,16 @@
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+export interface Source {
+    name: string;
+    color?: string;
+    group?: string;
+    [key: string]: string | undefined;
+}
+export declare function getMultiVariantSourcesAutorun(self: {
+    configuration: AnyConfigurationModel;
+    adapterConfig: AnyConfigurationModel;
+    adapterProps: () => Record<string, unknown>;
+    setSourcesLoading: (aborter: string) => void;
+    setError: (error: unknown) => void;
+    setMessage: (str: string) => void;
+    setSources: (sources: Source[]) => void;
+}): void;

package/esm/getMultiVariantSourcesAutorun.js

@@ -0,0 +1,34 @@
+import { getContainingView, getSession } from '@jbrowse/core/util';
+import { isAbortException } from '@jbrowse/core/util/aborting';
+import { createStopToken } from '@jbrowse/core/util/stopToken';
+import { getRpcSessionId } from '@jbrowse/core/util/tracks';
+import { autorun } from 'mobx';
+import { addDisposer, isAlive } from 'mobx-state-tree';
+export function getMultiVariantSourcesAutorun(self) {
+    addDisposer(self, autorun(async () => {
+        try {
+            const view = getContainingView(self);
+            if (!view.initialized) {
+                return;
+            }
+            const { rpcManager } = getSession(self);
+            const { adapterConfig } = self;
+            const token = createStopToken();
+            self.setSourcesLoading(token);
+            const sessionId = getRpcSessionId(self);
+            const sources = (await rpcManager.call(sessionId, 'MultiVariantGetSources', {
+                sessionId,
+                adapterConfig,
+            }));
+            if (isAlive(self)) {
+                self.setSources(sources);
+            }
+        }
+        catch (e) {
+            if (!isAbortException(e) && isAlive(self)) {
+                console.error(e);
+                getSession(self).notifyError(`${e}`, e);
+            }
+        }
+    }, { delay: 1000 }));
+}

package/esm/index.d.ts

@@ -1,5 +1,5 @@
 import Plugin from '@jbrowse/core/Plugin';
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default class VariantsPlugin extends Plugin {
     name: string;
     install(pluginManager: PluginManager): void;

package/esm/index.js

@@ -1,12 +1,19 @@
-import VcfAdapterF from './VcfAdapter';
-import VcfTabixAdapterF from './VcfTabixAdapter';
-import ExtensionPointsF from './extensionPoints';
-import VariantTrackF from './VariantTrack';
 import Plugin from '@jbrowse/core/Plugin';
 import ChordVariantDisplayF from './ChordVariantDisplay';
 import LinearVariantDisplayF from './LinearVariantDisplay';
+import MultiLinearVariantDisplayF from './MultiLinearVariantDisplay';
+import LinearVariantMatrixDisplayF from './MultiLinearVariantMatrixDisplay';
+import LinearVariantMatrixRendererF from './MultiLinearVariantMatrixRenderer';
+import MultiVariantRendererF from './MultiLinearVariantRenderer';
 import StructuralVariantChordRendererF from './StructuralVariantChordRenderer';
 import VariantFeatureWidgetF from './VariantFeatureWidget';
+import { MultiVariantGetGenotypeMatrix } from './VariantRPC/MultiVariantGetGenotypeMatrix';
+import { MultiVariantGetSimplifiedFeatures } from './VariantRPC/MultiVariantGetSimplifiedFeatures';
+import { MultiVariantGetSources } from './VariantRPC/MultiVariantGetSources';
+import VariantTrackF from './VariantTrack';
+import VcfAdapterF from './VcfAdapter';
+import VcfTabixAdapterF from './VcfTabixAdapter';
+import ExtensionPointsF from './extensionPoints';
 export default class VariantsPlugin extends Plugin {
     constructor() {
         super(...arguments);
@@ -19,8 +26,15 @@ export default class VariantsPlugin extends Plugin {
         VariantTrackF(pluginManager);
         ExtensionPointsF(pluginManager);
         LinearVariantDisplayF(pluginManager);
+        LinearVariantMatrixDisplayF(pluginManager);
+        MultiLinearVariantDisplayF(pluginManager);
+        MultiVariantRendererF(pluginManager);
+        LinearVariantMatrixRendererF(pluginManager);
         StructuralVariantChordRendererF(pluginManager);
         ChordVariantDisplayF(pluginManager);
+        pluginManager.addRpcMethod(() => new MultiVariantGetSources(pluginManager));
+        pluginManager.addRpcMethod(() => new MultiVariantGetGenotypeMatrix(pluginManager));
+        pluginManager.addRpcMethod(() => new MultiVariantGetSimplifiedFeatures(pluginManager));
     }
 }
 export { default as VcfFeature } from './VcfFeature';

package/esm/shared/BulkEditPanel.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type Source } from '../util';
+export default function BulkEditPanel({ setCurrLayout, currLayout, }: {
+    currLayout: Source[];
+    setCurrLayout: (arg: Source[]) => void;
+}): React.JSX.Element;

package/esm/shared/BulkEditPanel.js

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { ErrorMessage } from '@jbrowse/core/ui';
+import { Button, TextField, Typography } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()({
+    textAreaFont: {
+        fontFamily: 'Courier New',
+    },
+});
+export default function BulkEditPanel({ setCurrLayout, currLayout, }) {
+    const { classes } = useStyles();
+    const [val, setVal] = useState('');
+    const [error, setError] = useState();
+    return (React.createElement("div", null,
+        React.createElement(Typography, null, "Paste CSV or TSV. If a header column is present. First line is a header. If a column called \"name\" is present, it uses that to connect to IDs in the table, otherwise it uses the first column no."),
+        React.createElement(TextField, { variant: "outlined", multiline: true, minRows: 5, placeholder: 'name,population\nHG00098,GBR\nHG00101,GBR\nHG00459,CHS\n...', maxRows: 10, fullWidth: true, value: val, onChange: event => {
+                setVal(event.target.value);
+            }, slotProps: {
+                input: {
+                    classes: {
+                        input: classes.textAreaFont,
+                    },
+                },
+            } }),
+        React.createElement(Button, { variant: "contained", onClick: () => {
+                const lines = val
+                    .split('\n')
+                    .map(f => f.trim())
+                    .filter(f => !!f);
+                const fields = lines[0].split(/[,\t]/gm);
+                if (fields.includes('name')) {
+                    setError('');
+                    const oldLayout = currLayout.map(record => [record.name, record]);
+                    const newData = Object.fromEntries(lines.slice(1).map(line => {
+                        const cols = line.split(/[,\t]/gm);
+                        const newRecord = Object.fromEntries(cols.map((col, idx) => [fields[idx], col]));
+                        return [
+                            newRecord.name,
+                            { ...newRecord, ...oldLayout[newRecord.name] },
+                        ];
+                    }));
+                    setCurrLayout(currLayout.map(record => ({
+                        ...record,
+                        ...newData[record.name],
+                    })));
+                }
+                else {
+                    setError(new Error('No "name" column found on line 1'));
+                }
+            } }, "Update rows"),
+        React.createElement(Button, { variant: "contained", onClick: () => {
+                const lines = val
+                    .split('\n')
+                    .map(f => f.trim())
+                    .filter(f => !!f);
+                const fields = lines[0].split(/[,\t]/gm);
+                if (fields.includes('name')) {
+                    setError('');
+                    const oldLayout = currLayout.map(record => [record.name, record]);
+                    const newData = Object.fromEntries(lines.slice(1).map(line => {
+                        const cols = line.split(/[,\t]/gm);
+                        const newRecord = Object.fromEntries(cols.map((col, idx) => [fields[idx], col]));
+                        return [
+                            newRecord.name,
+                            { ...newRecord, ...oldLayout[newRecord.name] },
+                        ];
+                    }));
+                    setCurrLayout(currLayout.map(record => ({
+                        ...newData[record.name],
+                    })));
+                }
+                else {
+                    setError(new Error('No "name" column found on line 1'));
+                }
+            } }, "Replace rows"),
+        error ? React.createElement(ErrorMessage, { error: error }) : null));
+}

package/esm/shared/ClusterDialog.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { Source } from '../util';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+export default function HierarchicalCluster({ model, handleClose, }: {
+    model: {
+        sources?: Source[];
+        mafFilter?: number;
+        adapterConfig: AnyConfigurationModel;
+        setLayout: (arg: Source[]) => void;
+    };
+    handleClose: () => void;
+}): React.JSX.Element;

package/esm/shared/ClusterDialog.js

@@ -0,0 +1,121 @@
+import React, { useEffect, useState } from 'react';
+import { Dialog, ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
+import { getContainingView, getSession, isAbortException, } from '@jbrowse/core/util';
+import { getRpcSessionId } from '@jbrowse/core/util/tracks';
+import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
+import copy from 'copy-to-clipboard';
+import { saveAs } from 'file-saver';
+import { isAlive } from 'mobx-state-tree';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()(theme => ({
+    textAreaFont: {
+        fontFamily: 'Courier New',
+    },
+    mgap: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing(4),
+    },
+}));
+export default function HierarchicalCluster({ model, handleClose, }) {
+    const { classes } = useStyles();
+    const [results, setResults] = useState();
+    const [error, setError] = useState();
+    const [paste, setPaste] = useState('');
+    useEffect(() => {
+        ;
+        (async () => {
+            try {
+                setError(undefined);
+                const view = getContainingView(model);
+                if (!view.initialized) {
+                    return;
+                }
+                const { rpcManager } = getSession(model);
+                const { sources, mafFilter, adapterConfig } = model;
+                const sessionId = getRpcSessionId(model);
+                const ret = (await rpcManager.call(sessionId, 'MultiVariantGetGenotypeMatrix', {
+                    regions: view.dynamicBlocks.contentBlocks,
+                    sources,
+                    mafFilter,
+                    sessionId,
+                    adapterConfig,
+                }));
+                const entries = Object.values(ret);
+                const keys = Object.keys(ret);
+                const text = `try(library(fastcluster), silent=TRUE)
+inputMatrix<-matrix(c(${entries.map(val => val.genotypes.join(',')).join(',\n')}
+),nrow=${entries.length},byrow=TRUE)
+rownames(inputMatrix)<-c(${keys.map(key => `'${key}'`).join(',')})
+resultClusters<-hclust(dist(inputMatrix), method='single')
+cat(resultClusters$order,sep='\\n')`;
+                setResults(text);
+            }
+            catch (e) {
+                if (!isAbortException(e) && isAlive(model)) {
+                    console.error(e);
+                    setError(e);
+                }
+            }
+        })();
+    }, [model]);
+    return (React.createElement(Dialog, { open: true, title: "Cluster by genotype", onClose: handleClose },
+        React.createElement(DialogContent, null,
+            React.createElement("div", { className: classes.mgap },
+                React.createElement(Typography, null, "This page will produce an R script that will perform hierarchical clustering on the visible genotype data using `hclust`."),
+                React.createElement(Typography, null, "You can then paste the results in this form to specify the row ordering."),
+                results ? (React.createElement("div", null,
+                    React.createElement("div", null,
+                        "Step 1:",
+                        ' ',
+                        React.createElement(Button, { variant: "contained", onClick: () => {
+                                saveAs(new Blob([results || ''], {
+                                    type: 'text/plain;charset=utf-8',
+                                }), 'cluster.R');
+                            } }, "Download Rscript"),
+                        ' ',
+                        "or",
+                        ' ',
+                        React.createElement(Button, { variant: "contained", onClick: () => {
+                                copy(results || '');
+                            } }, "Copy Rscript to clipboard"),
+                        React.createElement("div", null,
+                            React.createElement(TextField, { multiline: true, fullWidth: true, variant: "outlined", placeholder: "Step 2. Paste results from Rscript here (sequence of numbers, one per line, specifying the new ordering)", rows: 10, value: paste, onChange: event => {
+                                    setPaste(event.target.value);
+                                }, slotProps: {
+                                    input: {
+                                        classes: {
+                                            input: classes.textAreaFont,
+                                        },
+                                    },
+                                } }))))) : (React.createElement(LoadingEllipses, { variant: "h6", title: "Generating genotype matrix" })),
+                error ? React.createElement(ErrorMessage, { error: error }) : null)),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { disabled: !results, variant: "contained", onClick: () => {
+                    const { sources } = model;
+                    if (sources) {
+                        try {
+                            model.setLayout(paste
+                                .split('\n')
+                                .map(t => t.trim())
+                                .filter(f => !!f)
+                                .map(r => +r)
+                                .map(idx => {
+                                const ret = sources[idx - 1];
+                                if (!ret) {
+                                    throw new Error(`out of bounds at ${idx}`);
+                                }
+                                return ret;
+                            }));
+                        }
+                        catch (e) {
+                            console.error(e);
+                            setError(e);
+                        }
+                    }
+                    handleClose();
+                } }, "Apply clustering"),
+            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
+                    handleClose();
+                } }, "Cancel"))));
+}

package/esm/shared/ColorLegend.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { Source } from '../util';
+declare const ColorLegend: ({ model, labelWidth, }: {
+    model: {
+        canDisplayLabels: boolean;
+        rowHeight: number;
+        sources?: Source[];
+    };
+    labelWidth: number;
+}) => React.JSX.Element | null;
+export default ColorLegend;

package/esm/shared/ColorLegend.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { clamp } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+import RectBg from './RectBg';
+const ColorLegend = observer(function ({ model, labelWidth, }) {
+    const { canDisplayLabels, rowHeight, sources } = model;
+    const svgFontSize = clamp(rowHeight, 8, 12);
+    const colorBoxWidth = 15;
+    const legendWidth = labelWidth + colorBoxWidth + 5;
+    return sources ? (React.createElement(React.Fragment, null,
+        canDisplayLabels ? (React.createElement(RectBg, { y: 0, x: 0, width: legendWidth, height: (sources.length + 0.25) * rowHeight })) : null,
+        sources.map((source, idx) => {
+            const { color, name } = source;
+            return (React.createElement(React.Fragment, { key: `${name}-${idx}` },
+                color ? (React.createElement(RectBg, { y: idx * rowHeight + 1, x: 0, width: colorBoxWidth + 0.5, height: rowHeight + 0.5, color: color })) : null,
+                canDisplayLabels ? (React.createElement("text", { y: idx * rowHeight + svgFontSize, x: colorBoxWidth + 2, fontSize: svgFontSize }, name)) : null));
+        }))) : null;
+});
+export default ColorLegend;

package/esm/shared/DraggableDialog.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { DialogProps } from '@mui/material';
+declare const DraggableDialog: (props: DialogProps & {
+    title: string;
+}) => React.JSX.Element;
+export default DraggableDialog;

package/esm/shared/DraggableDialog.js

@@ -0,0 +1,34 @@
+import React, { useRef } from 'react';
+import CloseIcon from '@mui/icons-material/Close';
+import { Dialog, DialogTitle, Divider, IconButton, Paper, ScopedCssBaseline, } from '@mui/material';
+import { observer } from 'mobx-react';
+import Draggable from 'react-draggable';
+import { makeStyles } from 'tss-react/mui';
+const useStyles = makeStyles()(theme => ({
+    closeButton: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(1),
+        color: theme.palette.grey[500],
+    },
+}));
+function PaperComponent(props) {
+    const ref = useRef(null);
+    return (React.createElement(Draggable, { nodeRef: ref, cancel: '[class*="MuiDialogContent-root"]', onStart: arg => { var _a, _b; return (_b = (_a = arg.target) === null || _a === void 0 ? void 0 : _a.className) === null || _b === void 0 ? void 0 : _b.includes('MuiDialogTitle'); } },
+        React.createElement(Paper, { ref: ref, ...props })));
+}
+const DraggableDialog = observer(function DraggableDialog(props) {
+    const { classes } = useStyles();
+    const { title, children, onClose } = props;
+    return (React.createElement(Dialog, { ...props, PaperComponent: PaperComponent },
+        React.createElement(ScopedCssBaseline, null,
+            React.createElement(DialogTitle, { style: { cursor: 'move' } },
+                title,
+                onClose ? (React.createElement(IconButton, { className: classes.closeButton, onClick: () => {
+                        onClose();
+                    } },
+                    React.createElement(CloseIcon, null))) : null),
+            React.createElement(Divider, null),
+            children)));
+});
+export default DraggableDialog;

package/esm/shared/LegendBar.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { Source } from '../util';
+interface ReducedModel {
+    scrollTop: number;
+    totalHeight: number;
+    rowHeight: number;
+    lineZoneHeight?: number;
+    sources?: Source[];
+    canDisplayLabels: boolean;
+    height: number;
+    id: string;
+}
+export declare const LegendBar: (props: {
+    model: ReducedModel;
+    orientation?: string;
+    exportSVG?: boolean;
+}) => React.JSX.Element | null;
+export default LegendBar;