@jbrowse/plugin-variants 3.1.0 → 3.2.0

package/dist/shared/MultiVariantBaseModel.d.ts

@@ -255,6 +255,15 @@ export default function MultiVariantBaseModelF(configSchema: AnyConfigurationSch
     setSampleInfo(arg: Record<string, SampleInfo>): void;
 } & {
     readonly preSources: Source[] | undefined;
+    readonly sourcesWithoutLayout: {
+        label: string;
+        id: string;
+        baseUri?: string;
+        name: string;
+        color?: string;
+        group?: string;
+        HP?: number;
+    }[] | undefined;
     readonly sources: {
         label: string;
         id: string;
@@ -330,10 +339,20 @@ export default function MultiVariantBaseModelF(configSchema: AnyConfigurationSch
         type?: undefined;
         checked?: undefined;
         onClick?: undefined;
+    } | {
+        label: string;
+        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
+        onClick: () => void;
+        type?: undefined;
+        checked?: undefined;
+        subMenu?: undefined;
     })[];
 } & {
     readonly canDisplayLabels: boolean;
     readonly totalHeight: number;
+    readonly featuresReady: boolean;
 } & {
     renderProps(): any;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/dist/shared/MultiVariantBaseModel.js

@@ -42,15 +42,17 @@ const configuration_1 = require("@jbrowse/core/configuration");
 const util_1 = require("@jbrowse/core/util");
 const stopToken_1 = require("@jbrowse/core/util/stopToken");
 const plugin_linear_genome_view_1 = require("@jbrowse/plugin-linear-genome-view");
+const Category_1 = __importDefault(require("@mui/icons-material/Category"));
 const FilterList_1 = __importDefault(require("@mui/icons-material/FilterList"));
 const Height_1 = __importDefault(require("@mui/icons-material/Height"));
 const Splitscreen_1 = __importDefault(require("@mui/icons-material/Splitscreen"));
 const Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
 const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 const mobx_state_tree_1 = require("mobx-state-tree");
+const getSources_1 = require("./getSources");
 const SetColorDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SetColorDialog'))));
 const MAFFilterDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/MAFFilterDialog'))));
-const ClusterDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ClusterDialog'))));
+const ClusterDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/ClusterDialog/ClusterDialog'))));
 const SetRowHeightDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SetRowHeightDialog'))));
 function MultiVariantBaseModelF(configSchema) {
     return mobx_state_tree_1.types
@@ -125,40 +127,26 @@ function MultiVariantBaseModelF(configSchema) {
         get preSources() {
             return self.layout.length ? self.layout : self.sourcesVolatile;
         },
+        get sourcesWithoutLayout() {
+            return self.sourcesVolatile
+                ? (0, getSources_1.getSources)({
+                    sources: self.sourcesVolatile,
+                    renderingMode: self.renderingMode,
+                    sampleInfo: self.sampleInfo,
+                })
+                : undefined;
+        },
         get sources() {
-            var _a, _b;
-            if (this.preSources) {
-                const rows = [];
-                const sources = Object.fromEntries(((_a = self.sourcesVolatile) === null || _a === void 0 ? void 0 : _a.map(s => [s.name, s])) || []);
-                for (const row of this.preSources) {
-                    if (self.renderingMode === 'phased') {
-                        const info = (_b = self.sampleInfo) === null || _b === void 0 ? void 0 : _b[row.name];
-                        if (info === null || info === void 0 ? void 0 : info.isPhased) {
-                            const ploidy = info.maxPloidy;
-                            for (let i = 0; i < ploidy; i++) {
-                                const id = `${row.name} HP${i}`;
-                                rows.push({
-                                    ...sources[row.name],
-                                    ...row,
-                                    label: id,
-                                    HP: i,
-                                    id: id,
-                                });
-                            }
-                        }
-                    }
-                    else {
-                        rows.push({
-                            ...sources[row.name],
-                            ...row,
-                            label: row.name,
-                            id: row.name,
-                        });
-                    }
-                }
-                return rows;
-            }
-            return undefined;
+            const sourcesWithLayout = self.layout.length
+                ? self.layout
+                : self.sourcesVolatile;
+            return sourcesWithLayout
+                ? (0, getSources_1.getSources)({
+                    sources: sourcesWithLayout,
+                    renderingMode: self.renderingMode,
+                    sampleInfo: self.sampleInfo,
+                })
+                : undefined;
         },
     }))
         .views(self => {
@@ -261,6 +249,7 @@ function MultiVariantBaseModelF(configSchema) {
                     },
                     {
                         label: 'Cluster by genotype',
+                        icon: Category_1.default,
                         onClick: () => {
                             (0, util_1.getSession)(self).queueDialog(handleClose => [
                                 ClusterDialog,
@@ -295,13 +284,16 @@ function MultiVariantBaseModelF(configSchema) {
             var _a;
             return self.rowHeight * (((_a = self.sources) === null || _a === void 0 ? void 0 : _a.length) || 1);
         },
+        get featuresReady() {
+            return !!self.featuresVolatile;
+        },
     }))
         .views(self => ({
         renderProps() {
             const superProps = self.adapterProps();
             return {
                 ...superProps,
-                notReady: superProps.notReady || !self.sources || !self.featuresVolatile,
+                notReady: superProps.notReady || !self.sources || !self.featuresReady,
                 height: self.height,
                 totalHeight: self.totalHeight,
                 renderingMode: self.renderingMode,

package/dist/shared/components/ClusterDialog/ClusterDialog.d.ts

@@ -0,0 +1,6 @@
+import type { ReducedModel } from './types';
+declare const ClusterDialog: ({ model, handleClose, }: {
+    model: ReducedModel;
+    handleClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ClusterDialog;

package/dist/shared/components/ClusterDialog/ClusterDialog.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const ClusterDialogAuto_1 = __importDefault(require("./ClusterDialogAuto"));
+const ClusterDialogManual_1 = __importDefault(require("./ClusterDialogManual"));
+function Header({ activeMode, setActiveMode, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { style: { marginBottom: 30 }, children: "This procedure will cluster the visible genotype data using hierarchical clustering" }), (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { children: Object.entries({
+                    auto: ((0, jsx_runtime_1.jsx)("div", { children: "Run in-app clustering (slow for large data, built in JS clustering)" })),
+                    manual: ((0, jsx_runtime_1.jsx)("div", { children: "Download R script to run clustering (faster for large data, uses hclust, may be more accurate)" })),
+                }).map(([key, val]) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: activeMode === key, onChange: () => {
+                            setActiveMode(key);
+                        } }), label: val }, key))) })] }));
+}
+const ClusterDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, }) {
+    const [activeMode, setActiveMode] = (0, react_1.useState)('auto');
+    return ((0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: true, title: "Cluster by genotype", onClose: (_, reason) => {
+            if (reason !== 'backdropClick') {
+                handleClose();
+            }
+        }, children: activeMode === 'auto' ? ((0, jsx_runtime_1.jsx)(ClusterDialogAuto_1.default, { model: model, handleClose: handleClose, children: (0, jsx_runtime_1.jsx)(Header, { activeMode: activeMode, setActiveMode: setActiveMode }) })) : ((0, jsx_runtime_1.jsx)(ClusterDialogManual_1.default, { model: model, handleClose: handleClose, children: (0, jsx_runtime_1.jsx)(Header, { activeMode: activeMode, setActiveMode: setActiveMode }) })) }));
+});
+exports.default = ClusterDialog;

package/dist/shared/components/ClusterDialog/ClusterDialogAuto.d.ts

@@ -0,0 +1,7 @@
+import type { ReducedModel } from './types';
+declare const ClusterDialogAuto: ({ model, children, handleClose, }: {
+    model: ReducedModel;
+    children: React.ReactNode;
+    handleClose: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ClusterDialogAuto;

package/dist/shared/components/ClusterDialog/ClusterDialogAuto.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
+const stopToken_1 = require("@jbrowse/core/util/stopToken");
+const tracks_1 = require("@jbrowse/core/util/tracks");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const ClusterDialogAuto = (0, mobx_react_1.observer)(function ({ model, children, handleClose, }) {
+    const [progress, setProgress] = (0, react_1.useState)('');
+    const [error, setError] = (0, react_1.useState)();
+    const [stopToken, setStopToken] = (0, react_1.useState)('');
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [children, (0, jsx_runtime_1.jsxs)("div", { children: [progress ? ((0, jsx_runtime_1.jsxs)("div", { style: { padding: 50 }, children: [(0, jsx_runtime_1.jsxs)("span", { style: { width: 400 }, children: ["Progress: ", progress] }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
+                                            (0, stopToken_1.stopStopToken)(stopToken);
+                                        }, children: "Stop" })] })) : null, error ? (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error }) : null] })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: async () => {
+                            try {
+                                setError(undefined);
+                                const view = (0, util_1.getContainingView)(model);
+                                if (!view.initialized) {
+                                    return;
+                                }
+                                const { rpcManager } = (0, util_1.getSession)(model);
+                                const { sourcesWithoutLayout, minorAlleleFrequencyFilter, adapterConfig, } = model;
+                                if (sourcesWithoutLayout) {
+                                    const sessionId = (0, tracks_1.getRpcSessionId)(model);
+                                    const stopToken = (0, stopToken_1.createStopToken)();
+                                    setStopToken(stopToken);
+                                    const ret = (await rpcManager.call(sessionId, 'MultiVariantClusterGenotypeMatrix', {
+                                        regions: view.dynamicBlocks.contentBlocks,
+                                        sources: sourcesWithoutLayout,
+                                        minorAlleleFrequencyFilter,
+                                        sessionId,
+                                        adapterConfig,
+                                        stopToken,
+                                        statusCallback: (arg) => {
+                                            setProgress(arg);
+                                        },
+                                    }));
+                                    model.setLayout(ret.order.map(idx => {
+                                        const ret = sourcesWithoutLayout[idx];
+                                        if (!ret) {
+                                            throw new Error(`out of bounds at ${idx}`);
+                                        }
+                                        return ret;
+                                    }));
+                                }
+                                handleClose();
+                            }
+                            catch (e) {
+                                if (!(0, util_1.isAbortException)(e) && (0, mobx_state_tree_1.isAlive)(model)) {
+                                    console.error(e);
+                                    setError(e);
+                                }
+                            }
+                            finally {
+                                setProgress('');
+                                setStopToken('');
+                            }
+                        }, children: "Run clustering" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                            if (stopToken) {
+                                (0, stopToken_1.stopStopToken)(stopToken);
+                            }
+                        }, children: "Cancel" })] })] }));
+});
+exports.default = ClusterDialogAuto;

package/dist/shared/components/ClusterDialog/ClusterDialogManual.d.ts

@@ -0,0 +1,7 @@
+import type { ReducedModel } from './types';
+declare const ClusterDialogManuals: ({ model, handleClose, children, }: {
+    model: ReducedModel;
+    handleClose: () => void;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ClusterDialogManuals;

package/dist/shared/components/ClusterDialog/ClusterDialogManual.js

@@ -0,0 +1,144 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
+const tracks_1 = require("@jbrowse/core/util/tracks");
+const material_1 = require("@mui/material");
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+const file_saver_1 = require("file-saver");
+const mobx_react_1 = require("mobx-react");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    textAreaFont: {
+        fontFamily: 'Courier New',
+    },
+    mgap: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing(4),
+    },
+}));
+const ClusterDialogManuals = (0, mobx_react_1.observer)(function ({ model, handleClose, children, }) {
+    const { classes } = useStyles();
+    const [paste, setPaste] = (0, react_1.useState)('');
+    const [ret, setRet] = (0, react_1.useState)();
+    const [error, setError] = (0, react_1.useState)();
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [showAdvanced, setShowAdvanced] = (0, react_1.useState)(false);
+    const [clusterMethod, setClusterMethod] = (0, util_1.useLocalStorage)('cluster-clusterMethod', 'single');
+    (0, react_1.useEffect)(() => {
+        ;
+        (async () => {
+            try {
+                setError(undefined);
+                setRet(undefined);
+                setLoading(true);
+                const view = (0, util_1.getContainingView)(model);
+                if (!view.initialized) {
+                    return;
+                }
+                const { rpcManager } = (0, util_1.getSession)(model);
+                const { sourcesWithoutLayout, minorAlleleFrequencyFilter, adapterConfig, } = model;
+                const sessionId = (0, tracks_1.getRpcSessionId)(model);
+                const ret = (await rpcManager.call(sessionId, 'MultiVariantGetGenotypeMatrix', {
+                    regions: view.dynamicBlocks.contentBlocks,
+                    sources: sourcesWithoutLayout,
+                    minorAlleleFrequencyFilter,
+                    sessionId,
+                    adapterConfig,
+                }));
+                setRet(ret);
+            }
+            catch (e) {
+                if (!(0, util_1.isAbortException)(e) && (0, mobx_state_tree_1.isAlive)(model)) {
+                    console.error(e);
+                    setError(e);
+                }
+            }
+            finally {
+                setLoading(false);
+            }
+        })();
+    }, [model]);
+    const results = ret
+        ? `inputMatrix<-matrix(c(${Object.values(ret)
+            .map(val => val.join(','))
+            .join(',\n')}
+),nrow=${Object.values(ret).length},byrow=TRUE)
+rownames(inputMatrix)<-c(${Object.keys(ret)
+            .map(key => `'${key}'`)
+            .join(',')})
+resultClusters<-hclust(dist(inputMatrix), method='${clusterMethod}')
+cat(resultClusters$order,sep='\\n')`
+        : undefined;
+    const resultsTsv = ret
+        ? Object.entries(ret)
+            .map(([key, val]) => [key, ...val].join('\t'))
+            .join('\n')
+        : undefined;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [children, (0, jsx_runtime_1.jsxs)(material_1.Paper, { style: { padding: 16 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: 'flex',
+                                    gap: '8px',
+                                    flexWrap: 'wrap',
+                                    marginBottom: '16px',
+                                }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                            (0, file_saver_1.saveAs)(new Blob([results || ''], {
+                                                type: 'text/plain;charset=utf-8',
+                                            }), 'cluster.R');
+                                        }, children: "Download Rscript" }), ' ', "or", ' ', (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                            (0, copy_to_clipboard_1.default)(results || '');
+                                        }, children: "Copy Rscript to clipboard" }), ' ', "or", ' ', (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                            (0, file_saver_1.saveAs)(new Blob([resultsTsv || ''], {
+                                                type: 'text/plain;charset=utf-8',
+                                            }), 'genotypes.tsv');
+                                        }, children: "Download TSV" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                                                    setShowAdvanced(!showAdvanced);
+                                                }, children: showAdvanced
+                                                    ? 'Hide advanced options'
+                                                    : 'Show advanced options' }), showAdvanced ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: "Advanced options" }), (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { children: Object.entries({
+                                                            single: 'Single',
+                                                            complete: 'Complete',
+                                                        }).map(([key, val]) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Radio, { checked: clusterMethod === key, onChange: () => {
+                                                                    setClusterMethod(key);
+                                                                } }), label: val }, key))) })] })) : null] }), results ? ((0, jsx_runtime_1.jsx)("div", {})) : loading ? ((0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, { variant: "h6", title: "Generating genotype matrix" })) : error ? ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error })) : null] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, style: { marginTop: '16px' }, children: "Clustering Results:" }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, fullWidth: true, variant: "outlined", placeholder: "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,
+                                                },
+                                            },
+                                        } })] })] })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
+                            const { sourcesWithoutLayout } = model;
+                            if (sourcesWithoutLayout) {
+                                try {
+                                    model.setLayout(paste
+                                        .split('\n')
+                                        .map(t => t.trim())
+                                        .filter(f => !!f)
+                                        .map(r => +r)
+                                        .map(idx => {
+                                        const ret = sourcesWithoutLayout[idx - 1];
+                                        if (!ret) {
+                                            throw new Error(`out of bounds at ${idx}`);
+                                        }
+                                        return ret;
+                                    }));
+                                }
+                                catch (e) {
+                                    console.error(e);
+                                    (0, util_1.getSession)(model).notifyError(`${e}`, e);
+                                }
+                            }
+                            handleClose();
+                        }, children: "Apply clustering" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                            handleClose();
+                        }, children: "Cancel" })] })] }));
+});
+exports.default = ClusterDialogManuals;

package/dist/shared/components/ClusterDialog/types.d.ts

@@ -0,0 +1,9 @@
+import type { Source } from '../../types';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+export interface ReducedModel {
+    sourcesWithoutLayout?: Source[];
+    minorAlleleFrequencyFilter?: number;
+    adapterConfig: AnyConfigurationModel;
+    setLayout: (arg: Source[]) => void;
+    clearLayout: () => void;
+}

package/dist/shared/components/ClusterDialog/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/shared/components/SourcesDataGrid.js

@@ -20,49 +20,56 @@ const useStyles = (0, mui_1.makeStyles)()({
 });
 function SourcesDataGrid({ rows, onChange, setSelected, }) {
     const { classes } = useStyles();
-    const { id: _id, name: _name, label: _label, color: _color, baseUri: _baseUri, HP: _HP, ...rest } = rows[0];
     const [currSort, setCurrSort] = (0, react_1.useState)({
         idx: 0,
         field: null,
     });
-    return ((0, jsx_runtime_1.jsx)("div", { style: { height: 400, width: '100%' }, children: (0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg => {
-                setSelected(arg);
-            }, rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
-                {
-                    field: 'color',
-                    headerName: 'Color',
-                    renderCell: params => {
-                        const { value, id } = params;
-                        return ((0, jsx_runtime_1.jsx)(ColorPicker_1.default, { color: value || 'blue', onChange: c => {
-                                const elt = rows.find(f => f.name === id);
-                                if (elt) {
-                                    elt.color = c;
-                                }
-                                onChange([...rows]);
-                            } }));
+    if (rows.length) {
+        const { id: _id, name: _name, label: _label, color: _color, baseUri: _baseUri, HP: _HP, ...rest } = rows[0];
+        return ((0, jsx_runtime_1.jsx)("div", { style: { height: 400, width: '100%' }, children: (0, jsx_runtime_1.jsx)(x_data_grid_1.DataGrid, { checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg => {
+                    setSelected(arg);
+                }, rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
+                    {
+                        field: 'color',
+                        headerName: 'Color',
+                        renderCell: params => {
+                            const { value, id } = params;
+                            return ((0, jsx_runtime_1.jsx)(ColorPicker_1.default, { color: value || 'blue', onChange: c => {
+                                    const elt = rows.find(f => f.name === id);
+                                    if (elt) {
+                                        elt.color = c;
+                                    }
+                                    onChange([...rows]);
+                                } }));
+                        },
                     },
-                },
-                {
-                    field: 'label',
-                    headerName: 'Name',
-                    width: (0, util_1.measureGridWidth)(rows.map(r => r.label)),
-                },
-                ...Object.keys(rest).map(val => ({
-                    field: val,
-                    renderCell: ({ value }) => ((0, jsx_runtime_1.jsx)("div", { className: classes.cell, children: (0, jsx_runtime_1.jsx)(ui_1.SanitizedHTML, { html: (0, util_1.getStr)(value) }) })),
-                    width: (0, util_1.measureGridWidth)(rows.map(r => `${r[val]}`)),
-                })),
-            ], sortModel: [], onSortModelChange: args => {
-                const sort = args[0];
-                const idx = (currSort.idx + 1) % 2;
-                const field = sort.field || currSort.field;
-                setCurrSort({ idx, field });
-                onChange(field
-                    ? [...rows].sort((a, b) => {
-                        const aa = (0, util_1.getStr)(a[field]);
-                        const bb = (0, util_1.getStr)(b[field]);
-                        return idx === 1 ? aa.localeCompare(bb) : bb.localeCompare(aa);
-                    })
-                    : rows);
-            } }) }));
+                    {
+                        field: 'label',
+                        headerName: 'Name',
+                        width: (0, util_1.measureGridWidth)(rows.map(r => r.label)),
+                    },
+                    ...Object.keys(rest).map(val => ({
+                        field: val,
+                        renderCell: ({ value }) => ((0, jsx_runtime_1.jsx)("div", { className: classes.cell, children: (0, jsx_runtime_1.jsx)(ui_1.SanitizedHTML, { html: (0, util_1.getStr)(value) }) })),
+                        width: (0, util_1.measureGridWidth)(rows.map(r => `${r[val]}`)),
+                    })),
+                ], sortModel: [], onSortModelChange: args => {
+                    const sort = args[0];
+                    const idx = (currSort.idx + 1) % 2;
+                    const field = sort.field || currSort.field;
+                    setCurrSort({ idx, field });
+                    onChange(field
+                        ? [...rows].sort((a, b) => {
+                            const aa = (0, util_1.getStr)(a[field]);
+                            const bb = (0, util_1.getStr)(b[field]);
+                            return idx === 1
+                                ? aa.localeCompare(bb)
+                                : bb.localeCompare(aa);
+                        })
+                        : rows);
+                } }) }));
+    }
+    else {
+        return (0, jsx_runtime_1.jsx)("div", { children: "No rows, check sample metadata configuration" });
+    }
 }

package/dist/shared/components/SourcesGridHeader.js

@@ -28,12 +28,12 @@ function SourcesGridHeader({ selected, onChange, rows, showTips, }) {
                     onChange((0, sourcesGridUtils_1.moveDown)([...rows], selected, rows.length));
                 }, disabled: !selected.length, children: [(0, jsx_runtime_1.jsx)(KeyboardDoubleArrowDown_1.default, {}), showTips ? 'Move selected items to bottom' : null] }), (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPopover, { anchorEl: anchorEl, color: widgetColor, onChange: c => {
                     setWidgetColor(c);
-                    selected.forEach(id => {
+                    for (const id of selected) {
                         const elt = rows.find(f => f.name === id);
                         if (elt) {
                             elt.color = c;
                         }
-                    });
+                    }
                     onChange([...rows]);
                 }, onClose: () => {
                     setAnchorEl(null);

package/dist/shared/getSources.d.ts

@@ -0,0 +1,15 @@
+import type { SampleInfo, Source } from './types';
+export declare function getSources({ sources, layout, renderingMode, sampleInfo, }: {
+    sources: Source[];
+    layout?: Source[];
+    renderingMode: string;
+    sampleInfo?: Record<string, SampleInfo>;
+}): {
+    label: string;
+    id: string;
+    baseUri?: string;
+    name: string;
+    color?: string;
+    group?: string;
+    HP?: number;
+}[];

package/dist/shared/getSources.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSources = getSources;
+function getSources({ sources, layout = sources, renderingMode, sampleInfo, }) {
+    const rows = [];
+    const sourceMap = Object.fromEntries(sources.map(s => [s.name, s]));
+    for (const row of layout) {
+        if (renderingMode === 'phased') {
+            const info = sampleInfo === null || sampleInfo === void 0 ? void 0 : sampleInfo[row.name];
+            if (info === null || info === void 0 ? void 0 : info.isPhased) {
+                const ploidy = info.maxPloidy;
+                for (let i = 0; i < ploidy; i++) {
+                    const id = `${row.name} HP${i}`;
+                    rows.push({
+                        ...sourceMap[row.name],
+                        ...row,
+                        label: id,
+                        HP: i,
+                        id: id,
+                    });
+                }
+            }
+        }
+        else {
+            rows.push({
+                ...sourceMap[row.name],
+                ...row,
+                label: row.name,
+                id: row.name,
+            });
+        }
+    }
+    return rows;
+}

package/esm/MultiLinearVariantDisplay/model.d.ts

@@ -259,6 +259,15 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     setSampleInfo(arg: Record<string, import("../shared/types").SampleInfo>): void;
 } & {
     readonly preSources: import("../shared/types").Source[] | undefined;
+    readonly sourcesWithoutLayout: {
+        label: string;
+        id: string;
+        baseUri?: string;
+        name: string;
+        color?: string;
+        group?: string;
+        HP?: number;
+    }[] | undefined;
     readonly sources: {
         label: string;
         id: string;
@@ -334,10 +343,20 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
         type?: undefined;
         checked?: undefined;
         onClick?: undefined;
+    } | {
+        label: string;
+        icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        };
+        onClick: () => void;
+        type?: undefined;
+        checked?: undefined;
+        subMenu?: undefined;
     })[];
 } & {
     readonly canDisplayLabels: boolean;
     readonly totalHeight: number;
+    readonly featuresReady: boolean;
 } & {
     renderProps(): any;
 } & {