@jbrowse/core 2.0.0 → 2.1.2

package/ui/theme.js

@@ -1,253 +1,205 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createJBrowseDefaultOverrides = createJBrowseDefaultOverrides;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createJBrowseTheme = exports.jbrowseBaseTheme = exports.createJBrowseDefaultOverrides = exports.createJBrowseDefaultProps = exports.jbrowseDefaultPalette = void 0;
+const colors_1 = require("@mui/material/colors");
+const styles_1 = require("@mui/material/styles");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const midnight = '#0D233F';
+const grape = '#721E63';
+const forest = '#135560';
+const mandarin = '#FFB11D';
+const refTheme = (0, styles_1.createTheme)();
+exports.jbrowseDefaultPalette = {
+    // type: 'dark',
+    primary: { main: midnight },
+    secondary: { main: grape },
+    tertiary: refTheme.palette.augmentColor({ color: { main: forest } }),
+    quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
+    stopCodon: '#e22',
+    startCodon: '#3e3',
+    bases: {
+        A: refTheme.palette.augmentColor({ color: colors_1.green }),
+        C: refTheme.palette.augmentColor({ color: colors_1.blue }),
+        G: refTheme.palette.augmentColor({ color: colors_1.amber }),
+        T: refTheme.palette.augmentColor({ color: colors_1.red }),
+    },
+};
+function createJBrowseDefaultProps( /* palette: PaletteOptions = {} */) {
+    return {
+        components: {
+            MuiButton: {
+                defaultProps: {
+                    size: 'small',
+                },
+            },
+            MuiAccordion: {
+                defaultProps: {
+                    disableGutters: true,
+                    TransitionProps: { timeout: 150 },
+                },
+            },
+            MuiFilledInput: {
+                defaultProps: {
+                    margin: 'dense',
+                },
+            },
+            MuiFormControl: {
+                defaultProps: {
+                    margin: 'dense',
+                    size: 'small',
+                },
+            },
+            MuiFormHelperText: {
+                defaultProps: {
+                    margin: 'dense',
+                },
+            },
+            MuiIconButton: {
+                defaultProps: {
+                    size: 'small',
+                },
+            },
+            MuiInputBase: {
+                defaultProps: {
+                    margin: 'dense',
+                },
+            },
+            MuiAutocomplete: {
+                defaultProps: {
+                    size: 'small',
+                },
+            },
+            MuiInputLabel: {
+                defaultProps: {
+                    margin: 'dense',
+                },
+            },
+            MuiToolbar: {
+                defaultProps: {
+                    variant: 'dense',
+                },
+            },
+            MuiListItem: {
+                defaultProps: {
+                    dense: true,
+                },
+            },
+            MuiOutlinedInput: {
+                defaultProps: {
+                    margin: 'dense',
+                },
+            },
+            MuiFab: {
+                defaultProps: {
+                    size: 'small',
+                },
+            },
+            MuiTable: {
+                defaultProps: {
+                    size: 'small',
+                },
+            },
+            MuiMenuList: {
+                defaultProps: {
+                    dense: true,
+                },
+            },
+            MuiMenuItem: {
+                defaultProps: {
+                    dense: true,
+                },
+            },
+            MuiTextField: {
+                defaultProps: {
+                    margin: 'dense',
+                    variant: 'standard',
+                },
+            },
+        },
+    };
+}
 exports.createJBrowseDefaultProps = createJBrowseDefaultProps;
-exports.createJBrowseTheme = createJBrowseTheme;
-exports.jbrowseDefaultPalette = exports.jbrowseBaseTheme = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _colors = require("@mui/material/colors");
-
-var _styles = require("@mui/material/styles");
-
-var _deepmerge = _interopRequireDefault(require("deepmerge"));
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var midnight = '#0D233F';
-var grape = '#721E63';
-var forest = '#135560';
-var mandarin = '#FFB11D';
-var refTheme = (0, _styles.createTheme)();
-var jbrowseDefaultPalette = {
-  // type: 'dark',
-  primary: {
-    main: midnight
-  },
-  secondary: {
-    main: grape
-  },
-  tertiary: refTheme.palette.augmentColor({
-    color: {
-      main: forest
-    }
-  }),
-  quaternary: refTheme.palette.augmentColor({
-    color: {
-      main: mandarin
-    }
-  }),
-  stopCodon: '#e22',
-  startCodon: '#3e3',
-  bases: {
-    A: refTheme.palette.augmentColor({
-      color: _colors.green
-    }),
-    C: refTheme.palette.augmentColor({
-      color: _colors.blue
-    }),
-    G: refTheme.palette.augmentColor({
-      color: _colors.amber
-    }),
-    T: refTheme.palette.augmentColor({
-      color: _colors.red
-    })
-  }
+function createJBrowseDefaultOverrides(palette = {}) {
+    const generatedPalette = (0, deepmerge_1.default)(exports.jbrowseDefaultPalette, palette);
+    return {
+        components: {
+            MuiIconButton: {
+                styleOverrides: {
+                    colorSecondary: {
+                        color: generatedPalette.tertiary.main,
+                    },
+                },
+            },
+            MuiButton: {
+                styleOverrides: {
+                    textSecondary: {
+                        color: generatedPalette.tertiary.main,
+                    },
+                },
+            },
+            MuiFab: {
+                styleOverrides: {
+                    secondary: {
+                        backgroundColor: generatedPalette.quaternary.main,
+                    },
+                },
+            },
+            MuiLink: {
+                styleOverrides: {
+                    root: {
+                        color: generatedPalette.tertiary.main,
+                    },
+                },
+            },
+            MuiAccordionSummary: {
+                styleOverrides: {
+                    root: {
+                        backgroundColor: generatedPalette.tertiary.main,
+                    },
+                    content: {
+                        color: generatedPalette.tertiary.contrastText,
+                    },
+                },
+            },
+        },
+    };
+}
+exports.createJBrowseDefaultOverrides = createJBrowseDefaultOverrides;
+exports.jbrowseBaseTheme = {
+    palette: exports.jbrowseDefaultPalette,
+    typography: { fontSize: 12 },
+    spacing: 4,
+    ...(0, deepmerge_1.default)(createJBrowseDefaultProps(), createJBrowseDefaultOverrides()),
 };
-exports.jbrowseDefaultPalette = jbrowseDefaultPalette;
-
-function
-  /* palette: PaletteOptions = {} */
-createJBrowseDefaultProps() {
-  return {
-    components: {
-      MuiButton: {
-        defaultProps: {
-          size: 'small'
-        }
-      },
-      MuiAccordion: {
-        defaultProps: {
-          disableGutters: true,
-          TransitionProps: {
-            timeout: 150
-          }
-        }
-      },
-      MuiFilledInput: {
-        defaultProps: {
-          margin: 'dense'
-        }
-      },
-      MuiFormControl: {
-        defaultProps: {
-          margin: 'dense',
-          size: 'small'
-        }
-      },
-      MuiFormHelperText: {
-        defaultProps: {
-          margin: 'dense'
-        }
-      },
-      MuiIconButton: {
-        defaultProps: {
-          size: 'small'
-        }
-      },
-      MuiInputBase: {
-        defaultProps: {
-          margin: 'dense'
-        }
-      },
-      MuiAutocomplete: {
-        defaultProps: {
-          size: 'small'
-        }
-      },
-      MuiInputLabel: {
-        defaultProps: {
-          margin: 'dense'
-        }
-      },
-      MuiToolbar: {
-        defaultProps: {
-          variant: 'dense'
-        }
-      },
-      MuiListItem: {
-        defaultProps: {
-          dense: true
-        }
-      },
-      MuiOutlinedInput: {
-        defaultProps: {
-          margin: 'dense'
-        }
-      },
-      MuiFab: {
-        defaultProps: {
-          size: 'small'
-        }
-      },
-      MuiTable: {
-        defaultProps: {
-          size: 'small'
-        }
-      },
-      MuiMenuList: {
-        defaultProps: {
-          dense: true
-        }
-      },
-      MuiMenuItem: {
-        defaultProps: {
-          dense: true
-        }
-      },
-      MuiTextField: {
-        defaultProps: {
-          margin: 'dense',
-          variant: 'standard'
-        }
-      }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function createJBrowseTheme(theme) {
+    var _a, _b, _c, _d;
+    if ((_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.tertiary) {
+        theme = (0, deepmerge_1.default)(theme, {
+            palette: {
+                tertiary: refTheme.palette.augmentColor(((_b = theme.palette.tertiary) === null || _b === void 0 ? void 0 : _b.color)
+                    ? theme.palette.tertiary
+                    : {
+                        color: theme.palette.tertiary,
+                    }),
+            },
+        });
     }
-  };
-}
-
-function createJBrowseDefaultOverrides() {
-  var palette = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var generatedPalette = (0, _deepmerge.default)(jbrowseDefaultPalette, palette);
-  return {
-    components: {
-      MuiIconButton: {
-        styleOverrides: {
-          colorSecondary: {
-            color: generatedPalette.tertiary.main
-          }
-        }
-      },
-      MuiButton: {
-        styleOverrides: {
-          textSecondary: {
-            color: generatedPalette.tertiary.main
-          }
-        }
-      },
-      MuiFab: {
-        styleOverrides: {
-          secondary: {
-            backgroundColor: generatedPalette.quaternary.main
-          }
-        }
-      },
-      MuiLink: {
-        styleOverrides: {
-          root: {
-            color: generatedPalette.tertiary.main
-          }
-        }
-      },
-      MuiAccordionSummary: {
-        styleOverrides: {
-          root: {
-            backgroundColor: generatedPalette.tertiary.main
-          },
-          content: {
-            color: generatedPalette.tertiary.contrastText
-          }
-        }
-      }
+    if ((_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.quaternary) {
+        theme = (0, deepmerge_1.default)(theme, {
+            palette: {
+                quaternary: refTheme.palette.augmentColor(((_d = theme.palette.quaternary) === null || _d === void 0 ? void 0 : _d.color)
+                    ? theme.palette.quaternary
+                    : {
+                        color: theme.palette.quaternary,
+                    }),
+            },
+        });
     }
-  };
+    // @ts-ignore
+    return (0, styles_1.createTheme)((0, deepmerge_1.default)(exports.jbrowseBaseTheme, theme || {}));
 }
-
-var jbrowseBaseTheme = _objectSpread({
-  palette: jbrowseDefaultPalette,
-  typography: {
-    fontSize: 12
-  },
-  spacing: 4
-}, (0, _deepmerge.default)(createJBrowseDefaultProps(), createJBrowseDefaultOverrides())); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-
-exports.jbrowseBaseTheme = jbrowseBaseTheme;
-
-function createJBrowseTheme(theme) {
-  var _theme, _theme$palette, _theme2, _theme2$palette;
-
-  if ((_theme = theme) !== null && _theme !== void 0 && (_theme$palette = _theme.palette) !== null && _theme$palette !== void 0 && _theme$palette.tertiary) {
-    var _theme$palette$tertia;
-
-    theme = (0, _deepmerge.default)(theme, {
-      palette: {
-        tertiary: refTheme.palette.augmentColor((_theme$palette$tertia = theme.palette.tertiary) !== null && _theme$palette$tertia !== void 0 && _theme$palette$tertia.color ? theme.palette.tertiary : {
-          color: theme.palette.tertiary
-        })
-      }
-    });
-  }
-
-  if ((_theme2 = theme) !== null && _theme2 !== void 0 && (_theme2$palette = _theme2.palette) !== null && _theme2$palette !== void 0 && _theme2$palette.quaternary) {
-    var _theme$palette$quater;
-
-    theme = (0, _deepmerge.default)(theme, {
-      palette: {
-        quaternary: refTheme.palette.augmentColor((_theme$palette$quater = theme.palette.quaternary) !== null && _theme$palette$quater !== void 0 && _theme$palette$quater.color ? theme.palette.quaternary : {
-          color: theme.palette.quaternary
-        })
-      }
-    });
-  } // @ts-ignore
-
-
-  return (0, _styles.createTheme)((0, _deepmerge.default)(jbrowseBaseTheme, theme || {}));
-}
+exports.createJBrowseTheme = createJBrowseTheme;

package/util/Base1DUtils.d.ts

@@ -0,0 +1,32 @@
+import { ViewSnap } from './index';
+export interface BpOffset {
+    refName?: string;
+    index: number;
+    offset: number;
+    start?: number;
+    end?: number;
+}
+export declare function moveTo(self: ViewSnap & {
+    zoomTo: (arg: number) => number;
+    scrollTo: (arg: number) => void;
+}, start?: BpOffset, end?: BpOffset): void;
+export declare function pxToBp(self: ViewSnap, px: number): {
+    coord: number;
+    index: number;
+    refName: string;
+    oob: boolean;
+    assemblyName: string;
+    offset: number;
+    start: number;
+    end: number;
+    reversed: boolean;
+};
+export declare function bpToPx({ refName, coord, regionNumber, self, }: {
+    refName: string;
+    coord: number;
+    regionNumber?: number;
+    self: ViewSnap;
+}): {
+    index: number;
+    offsetPx: number;
+} | undefined;

package/util/Base1DUtils.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.bpToPx = exports.pxToBp = exports.moveTo = void 0;
+const mobx_state_tree_1 = require("mobx-state-tree");
+function lengthBetween(self, start, end) {
+    let bpSoFar = 0;
+    const { displayedRegions } = self;
+    if (start.index === end.index) {
+        bpSoFar += end.offset - start.offset;
+    }
+    else {
+        const s = displayedRegions[start.index];
+        bpSoFar += s.end - s.start - start.offset;
+        if (end.index - start.index >= 2) {
+            for (let i = start.index + 1; i < end.index; i++) {
+                const region = displayedRegions[i];
+                const len = region.end - region.start;
+                bpSoFar += len;
+            }
+        }
+        bpSoFar += end.offset;
+    }
+    return bpSoFar;
+}
+function moveTo(self, start, end) {
+    if (!start || !end) {
+        return;
+    }
+    const { width, interRegionPaddingWidth } = self;
+    const len = lengthBetween(self, start, end);
+    const numBlocks = end.index - start.index;
+    const targetBpPerPx = len / (width - interRegionPaddingWidth * numBlocks);
+    const newBpPerPx = self.zoomTo(targetBpPerPx);
+    // If our target bpPerPx was smaller than the allowed minBpPerPx, adjust
+    // the scroll so the requested range is in the middle of the screen
+    let extraBp = 0;
+    if (targetBpPerPx < newBpPerPx) {
+        extraBp = ((newBpPerPx - targetBpPerPx) * self.width) / 2;
+    }
+    let bpToStart = -extraBp;
+    for (let i = 0; i < self.displayedRegions.length; i += 1) {
+        const region = self.displayedRegions[i];
+        if (start.index === i) {
+            bpToStart += start.offset;
+            break;
+        }
+        else {
+            bpToStart += region.end - region.start;
+        }
+    }
+    self.scrollTo(Math.round(bpToStart / self.bpPerPx));
+}
+exports.moveTo = moveTo;
+// manual return type since getSnapshot hard to infer here
+function pxToBp(self, px) {
+    var _a;
+    let bpSoFar = 0;
+    const { bpPerPx, offsetPx, displayedRegions, interRegionPaddingWidth, staticBlocks, } = self;
+    const blocks = staticBlocks.contentBlocks;
+    const bp = (offsetPx + px) * bpPerPx;
+    if (bp < 0) {
+        const region = displayedRegions[0];
+        const snap = (0, mobx_state_tree_1.getSnapshot)(region);
+        // @ts-ignore
+        return {
+            // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
+            ...snap,
+            oob: true,
+            coord: region.reversed
+                ? Math.floor(region.end - bp) + 1
+                : Math.floor(region.start + bp) + 1,
+            offset: bp,
+            index: 0,
+        };
+    }
+    const interRegionPaddingBp = interRegionPaddingWidth * bpPerPx;
+    let currBlock = 0;
+    for (let i = 0; i < displayedRegions.length; i++) {
+        const region = displayedRegions[i];
+        const len = region.end - region.start;
+        const offset = bp - bpSoFar;
+        if (len + bpSoFar > bp && bpSoFar <= bp) {
+            const snap = (0, mobx_state_tree_1.getSnapshot)(region);
+            // @ts-ignore
+            return {
+                // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
+                ...snap,
+                oob: false,
+                offset,
+                coord: region.reversed
+                    ? Math.floor(region.end - offset) + 1
+                    : Math.floor(region.start + offset) + 1,
+                index: i,
+            };
+        }
+        // add the interRegionPaddingWidth if the boundary is in the screen e.g. in
+        // a static block
+        if (((_a = blocks[currBlock]) === null || _a === void 0 ? void 0 : _a.regionNumber) === i) {
+            bpSoFar += len + interRegionPaddingBp;
+            currBlock++;
+        }
+        else {
+            bpSoFar += len;
+        }
+    }
+    if (bp >= bpSoFar) {
+        const region = displayedRegions[displayedRegions.length - 1];
+        const len = region.end - region.start;
+        const offset = bp - bpSoFar + len;
+        const snap = (0, mobx_state_tree_1.getSnapshot)(region);
+        // @ts-ignore
+        return {
+            // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
+            ...snap,
+            oob: true,
+            offset,
+            coord: region.reversed
+                ? Math.floor(region.end - offset) + 1
+                : Math.floor(region.start + offset) + 1,
+            index: displayedRegions.length - 1,
+        };
+    }
+    return {
+        coord: 0,
+        index: 0,
+        refName: '',
+        oob: true,
+        assemblyName: '',
+        offset: 0,
+        start: 0,
+        end: 0,
+        reversed: false,
+    };
+}
+exports.pxToBp = pxToBp;
+function bpToPx({ refName, coord, regionNumber, self, }) {
+    var _a;
+    let bpSoFar = 0;
+    const { interRegionPaddingWidth, bpPerPx, displayedRegions, staticBlocks } = self;
+    const blocks = staticBlocks.contentBlocks;
+    const interRegionPaddingBp = interRegionPaddingWidth * bpPerPx;
+    let currBlock = 0;
+    let i = 0;
+    for (; i < displayedRegions.length; i++) {
+        const region = displayedRegions[i];
+        const len = region.end - region.start;
+        if (refName === region.refName &&
+            coord >= region.start &&
+            coord <= region.end) {
+            if (regionNumber ? regionNumber === i : true) {
+                bpSoFar += region.reversed ? region.end - coord : coord - region.start;
+                break;
+            }
+        }
+        // add the interRegionPaddingWidth if the boundary is in the screen e.g. in
+        // a static block
+        if (((_a = blocks[currBlock]) === null || _a === void 0 ? void 0 : _a.regionNumber) === i) {
+            bpSoFar += len + interRegionPaddingBp;
+            currBlock++;
+        }
+        else {
+            bpSoFar += len;
+        }
+    }
+    const found = displayedRegions[i];
+    if (found) {
+        return {
+            index: i,
+            offsetPx: Math.round(bpSoFar / bpPerPx),
+        };
+    }
+    return undefined;
+}
+exports.bpToPx = bpToPx;