@jbrowse/core 1.7.11 → 2.1.0

package/ui/theme.js

@@ -1,233 +1,205 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createJBrowseDefaultOverrides = createJBrowseDefaultOverrides;
-exports.createJBrowseDefaultProps = createJBrowseDefaultProps;
-exports.createJBrowseTheme = createJBrowseTheme;
-exports.jbrowseDefaultPalette = exports.jbrowseBaseTheme = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _colors = require("@material-ui/core/colors");
-
-var _styles = require("@material-ui/core/styles");
-
-var _createPalette = require("@material-ui/core/styles/createPalette");
-
-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({
-    main: forest
-  }),
-  quaternary: refTheme.palette.augmentColor({
-    main: mandarin
-  }),
-  stopCodon: '#e22',
-  startCodon: '#3e3',
-  bases: {
-    A: refTheme.palette.augmentColor(_colors.green),
-    C: refTheme.palette.augmentColor(_colors.blue),
-    G: refTheme.palette.augmentColor(_colors.amber),
-    T: refTheme.palette.augmentColor(_colors.red)
-  }
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-exports.jbrowseDefaultPalette = jbrowseDefaultPalette;
-
-function
-  /* palette: PaletteOptions = {} */
-createJBrowseDefaultProps() {
-  return {
-    MuiButton: {
-      size: 'small'
-    },
-    MuiFilledInput: {
-      margin: 'dense'
-    },
-    MuiFormControl: {
-      margin: 'dense'
-    },
-    MuiFormHelperText: {
-      margin: 'dense'
-    },
-    MuiIconButton: {
-      size: 'small'
-    },
-    MuiInputBase: {
-      margin: 'dense'
-    },
-    MuiList: {
-      dense: true
-    },
-    MuiListItem: {
-      dense: true
+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 }),
     },
-    MuiOutlinedInput: {
-      margin: 'dense'
-    },
-    MuiFab: {
-      size: 'small'
-    },
-    MuiTable: {
-      size: 'small'
-    },
-    MuiTextField: {
-      margin: 'dense',
-      size: 'small'
-    },
-    MuiToolbar: {
-      variant: 'dense'
-    },
-    MuiSvgIcon: {
-      fontSize: 'small'
-    },
-    MuiToggleButtonGroup: {
-      size: 'small'
-    },
-    MuiCheckbox: {
-      size: 'small'
-    },
-    MuiLink: {
-      underline: 'always'
-    }
-  };
-}
-
-function createJBrowseDefaultOverrides() {
-  var palette = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var generatedPalette = (0, _deepmerge.default)(jbrowseDefaultPalette, palette);
-  return {
-    MuiIconButton: {
-      colorSecondary: {
-        color: generatedPalette.tertiary.main
-      }
-    },
-    MuiButton: {
-      textSecondary: {
-        color: generatedPalette.tertiary.main
-      }
-    },
-    MuiFab: {
-      secondary: {
-        backgroundColor: generatedPalette.quaternary.main
-      }
-    },
-    MuiLink: {
-      root: {
-        color: generatedPalette.tertiary.main
-      }
-    },
-    MuiAccordion: {
-      root: {
-        // avoid extra padding around accordion element
-        margin: 0,
-        '&$expanded': {
-          margin: 0
-        }
-      }
-    },
-    MuiAccordionSummary: {
-      root: {
-        // !important needed to combat the MuiButton being applied to
-        // accordions in mui4.12.2 having a background:'transparent' that
-        // otherwise overrides this other
-        backgroundColor: generatedPalette.tertiary.main + ' !important',
-        // width:100% added in 4.12.2 also
-        width: '100%',
-        '&$expanded': {
-          // overrides the subclass e.g. .MuiAccordionSummary-root-311.MuiAccordionSummary-expanded-312
-          minHeight: 0,
-          color: generatedPalette.tertiary.contrastText,
-          backgroundColor: generatedPalette.tertiary.main
+};
+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',
+                },
+            },
         },
-        minHeight: 0
-      },
-      content: {
-        '&$expanded': {
-          margin: '8px 8px'
+    };
+}
+exports.createJBrowseDefaultProps = createJBrowseDefaultProps;
+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,
+                    },
+                },
+            },
         },
-        margin: '8px 8px',
-        color: generatedPalette.tertiary.contrastText
-      }
-    },
-    // makes menus more compact
-    MuiMenuItem: {
-      root: {
-        paddingTop: 3,
-        paddingBottom: 3
-      }
-    },
-    // the below two are linked to make menus more compact
-    MuiListItemIcon: {
-      root: {
-        minWidth: 32
-      }
-    },
-    MuiListItemText: {
-      inset: {
-        paddingLeft: 32
-      }
-    }
-  };
+    };
 }
-
-var jbrowseBaseTheme = {
-  palette: jbrowseDefaultPalette,
-  typography: {
-    fontSize: 12
-  },
-  spacing: 4,
-  props: createJBrowseDefaultProps(),
-  overrides: createJBrowseDefaultOverrides()
+exports.createJBrowseDefaultOverrides = createJBrowseDefaultOverrides;
+exports.jbrowseBaseTheme = {
+    palette: exports.jbrowseDefaultPalette,
+    typography: { fontSize: 12 },
+    spacing: 4,
+    ...(0, deepmerge_1.default)(createJBrowseDefaultProps(), createJBrowseDefaultOverrides()),
 };
-exports.jbrowseBaseTheme = jbrowseBaseTheme;
-
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function createJBrowseTheme(theme) {
-  var _theme$palette, _theme$palette2;
-
-  if (!theme) {
-    return (0, _styles.createTheme)(jbrowseBaseTheme);
-  }
-
-  if ((_theme$palette = theme.palette) !== null && _theme$palette !== void 0 && _theme$palette.tertiary) {
-    theme = _objectSpread(_objectSpread({}, theme), {}, {
-      palette: _objectSpread(_objectSpread({}, theme.palette), {}, {
-        tertiary: refTheme.palette.augmentColor(theme.palette.tertiary)
-      })
-    });
-  }
-
-  if ((_theme$palette2 = theme.palette) !== null && _theme$palette2 !== void 0 && _theme$palette2.quaternary) {
-    theme = _objectSpread(_objectSpread({}, theme), {}, {
-      palette: _objectSpread(_objectSpread({}, theme.palette), {}, {
-        quaternary: refTheme.palette.augmentColor(theme.palette.quaternary)
-      })
-    });
-  }
-
-  theme = _objectSpread(_objectSpread({}, theme), {}, {
-    props: (0, _deepmerge.default)(createJBrowseDefaultProps(), theme.props || {}),
-    overrides: (0, _deepmerge.default)(createJBrowseDefaultOverrides(theme.palette), theme.overrides || {})
-  });
-  return (0, _styles.createTheme)((0, _deepmerge.default)(jbrowseBaseTheme, 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,
+                    }),
+            },
+        });
+    }
+    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 || {}));
+}
+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;