@jbrowse/core 1.7.9 → 2.0.0

package/ui/theme.js

@@ -12,11 +12,9 @@ exports.jbrowseDefaultPalette = exports.jbrowseBaseTheme = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _colors = require("@material-ui/core/colors");
+var _colors = require("@mui/material/colors");
 
-var _styles = require("@material-ui/core/styles");
-
-var _createPalette = require("@material-ui/core/styles/createPalette");
+var _styles = require("@mui/material/styles");
 
 var _deepmerge = _interopRequireDefault(require("deepmerge"));
 
@@ -38,18 +36,30 @@ var jbrowseDefaultPalette = {
     main: grape
   },
   tertiary: refTheme.palette.augmentColor({
-    main: forest
+    color: {
+      main: forest
+    }
   }),
   quaternary: refTheme.palette.augmentColor({
-    main: mandarin
+    color: {
+      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)
+    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
+    })
   }
 };
 exports.jbrowseDefaultPalette = jbrowseDefaultPalette;
@@ -58,57 +68,97 @@ 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
-    },
-    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'
+    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'
+        }
+      }
     }
   };
 }
@@ -117,117 +167,87 @@ 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
+    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
+          }
         }
-      }
-    },
-    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
-        },
-        minHeight: 0
-      },
-      content: {
-        '&$expanded': {
-          margin: '8px 8px'
-        },
-        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 = {
+var jbrowseBaseTheme = _objectSpread({
   palette: jbrowseDefaultPalette,
   typography: {
     fontSize: 12
   },
-  spacing: 4,
-  props: createJBrowseDefaultProps(),
-  overrides: createJBrowseDefaultOverrides()
-};
+  spacing: 4
+}, (0, _deepmerge.default)(createJBrowseDefaultProps(), createJBrowseDefaultOverrides())); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
 exports.jbrowseBaseTheme = jbrowseBaseTheme;
 
 function createJBrowseTheme(theme) {
-  var _theme$palette, _theme$palette2;
+  var _theme, _theme$palette, _theme2, _theme2$palette;
 
-  if (!theme) {
-    return (0, _styles.createTheme)(jbrowseBaseTheme);
-  }
+  if ((_theme = theme) !== null && _theme !== void 0 && (_theme$palette = _theme.palette) !== null && _theme$palette !== void 0 && _theme$palette.tertiary) {
+    var _theme$palette$tertia;
 
-  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)
-      })
+    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 ((_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)
-      })
+  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
+
 
-  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));
+  return (0, _styles.createTheme)((0, _deepmerge.default)(jbrowseBaseTheme, theme || {}));
 }

package/ui/theme.test.js

@@ -4,11 +4,17 @@ var _theme = require("./theme");
 
 describe('theme utils', function () {
   it('can create a default theme', function () {
-    var theme = (0, _theme.createJBrowseTheme)();
-    expect(theme.palette.primary.main).toEqual('#0D233F');
-    expect(theme.palette.secondary.main).toEqual('#721E63');
-    expect(theme.palette.tertiary.main).toEqual('#135560');
-    expect(theme.palette.quaternary.main).toEqual('#FFB11D');
+    var theme = (0, _theme.createJBrowseTheme)(); // @ts-ignore
+
+    var _theme$palette = theme.palette,
+        primary = _theme$palette.primary,
+        secondary = _theme$palette.secondary,
+        tertiary = _theme$palette.tertiary,
+        quaternary = _theme$palette.quaternary;
+    expect(primary.main).toEqual('#0D233F');
+    expect(secondary.main).toEqual('#721E63');
+    expect(tertiary.main).toEqual('#135560');
+    expect(quaternary.main).toEqual('#FFB11D');
   });
   it('allows overriding primary and secondary colors', function () {
     var theme = (0, _theme.createJBrowseTheme)({
@@ -28,84 +34,59 @@ describe('theme utils', function () {
     var theme = (0, _theme.createJBrowseTheme)({
       palette: {
         tertiary: {
-          main: '#888'
+          color: {
+            500: '#888'
+          }
         },
         quaternary: {
-          main: 'hsl(0,0,54)'
+          color: {
+            main: 'hsl(0,0,54)'
+          }
         }
       }
-    });
-    expect(theme.palette.tertiary.main).toEqual('#888');
-    expect(theme.palette.tertiary.light).toBeTruthy();
-    expect(theme.palette.quaternary.main).toEqual('hsl(0,0,54)');
-    expect(theme.palette.quaternary.dark).toBeTruthy();
+    }); // @ts-ignore
+
+    var _theme$palette2 = theme.palette,
+        tertiary = _theme$palette2.tertiary,
+        quaternary = _theme$palette2.quaternary;
+    expect(tertiary.main).toEqual('#888');
+    expect(tertiary.light).toBeTruthy();
+    expect(quaternary.main).toEqual('hsl(0,0,54)');
+    expect(quaternary.dark).toBeTruthy();
   });
   it('allows customizing spacing', function () {
     var defaultTheme = (0, _theme.createJBrowseTheme)();
-    expect(defaultTheme.spacing(1)).toBe(4);
+    expect(defaultTheme.spacing(1)).toBe('4px');
     var biggerSpacingTheme = (0, _theme.createJBrowseTheme)({
       spacing: 16
     });
-    expect(biggerSpacingTheme.spacing(1)).toBe(16);
-  });
-  it('allows adding a custom override', function () {
-    var _theme$overrides;
-
-    var muiPaperStyle = {
-      root: {
-        backgroundColor: 'green'
-      }
-    };
-    var theme = (0, _theme.createJBrowseTheme)({
-      overrides: {
-        MuiPaper: muiPaperStyle
-      }
-    });
-    expect((_theme$overrides = theme.overrides) === null || _theme$overrides === void 0 ? void 0 : _theme$overrides.MuiPaper).toEqual(muiPaperStyle);
-    expect(Object.keys(theme.overrides || {}).length).toBe(10);
-  });
-  it('allows modifying a default override', function () {
-    var _theme$overrides2;
-
-    var muiButtonStyle = {
-      textSecondary: {
-        color: 'orange'
-      }
-    };
-    var theme = (0, _theme.createJBrowseTheme)({
-      overrides: {
-        MuiButton: muiButtonStyle
-      }
-    });
-    expect((_theme$overrides2 = theme.overrides) === null || _theme$overrides2 === void 0 ? void 0 : _theme$overrides2.MuiButton).toEqual(muiButtonStyle);
-    expect(Object.keys(theme.overrides || {}).length).toBe(9);
-  });
-  it('allows adding a custom prop', function () {
-    var _theme$props;
-
-    var muiPaperProps = {
-      variant: 'outlined'
-    };
-    var theme = (0, _theme.createJBrowseTheme)({
-      props: {
-        MuiPaper: muiPaperProps
-      }
-    });
-    expect((_theme$props = theme.props) === null || _theme$props === void 0 ? void 0 : _theme$props.MuiPaper).toEqual(muiPaperProps);
-    expect(Object.keys(theme.props || {}).length).toBe(18);
-  });
-  it('allows modifying a prop override', function () {
-    var _theme$props2;
-
-    var muiButtonProps = {
-      size: 'medium'
-    };
-    var theme = (0, _theme.createJBrowseTheme)({
-      props: {
-        MuiButton: muiButtonProps
-      }
-    });
-    expect((_theme$props2 = theme.props) === null || _theme$props2 === void 0 ? void 0 : _theme$props2.MuiButton).toEqual(muiButtonProps);
-    expect(Object.keys(theme.props || {}).length).toBe(17);
-  });
+    expect(biggerSpacingTheme.spacing(1)).toBe('16px');
+  }); // it('allows adding a custom override', () => {
+  //   const muiPaperStyle = { root: { backgroundColor: 'green' } }
+  //   const theme = createJBrowseTheme({
+  //     overrides: { MuiPaper: muiPaperStyle },
+  //   })
+  //   expect(theme.overrides?.MuiPaper).toEqual(muiPaperStyle)
+  //   expect(Object.keys(theme.overrides || {}).length).toBe(10)
+  // })
+  // it('allows modifying a default override', () => {
+  //   const muiButtonStyle = { textSecondary: { color: 'orange' } }
+  //   const theme = createJBrowseTheme({
+  //     overrides: { MuiButton: muiButtonStyle },
+  //   })
+  //   expect(theme.overrides?.MuiButton).toEqual(muiButtonStyle)
+  //   expect(Object.keys(theme.overrides || {}).length).toBe(9)
+  // })
+  // it('allows adding a custom prop', () => {
+  //   const muiPaperProps = { variant: 'outlined' as const }
+  //   const theme = createJBrowseTheme({ props: { MuiPaper: muiPaperProps } })
+  //   expect(theme.props?.MuiPaper).toEqual(muiPaperProps)
+  //   expect(Object.keys(theme.props || {}).length).toBe(18)
+  // })
+  // it('allows modifying a prop override', () => {
+  //   const muiButtonProps = { size: 'medium' as const }
+  //   const theme = createJBrowseTheme({ props: { MuiButton: muiButtonProps } })
+  //   expect(theme.props?.MuiButton).toEqual(muiButtonProps)
+  //   expect(Object.keys(theme.props || {}).length).toBe(17)
+  // })
 });

package/util/Base1DViewModel.d.ts

@@ -62,13 +62,6 @@ declare const Base1DView: import("mobx-state-tree").IModelType<{
     readonly dynamicBlocks: import("./blockTypes").BlockSet;
     readonly staticBlocks: import("./blockTypes").BlockSet;
     readonly currBp: number;
-    /**
-     * calculates the Px at which coord is found.
-     *
-     * @param refName - string, refName of region
-     * @param coord - number, bp to be translated to Px
-     * @param regionNumber - number, index of displayedRegion in displayedRegions array
-     */
     bpToPx({ refName, coord, regionNumber, }: {
         refName: string;
         coord: number;
@@ -90,7 +83,7 @@ declare const Base1DView: import("mobx-state-tree").IModelType<{
     zoomIn(): void;
     zoomTo(newBpPerPx: number, offset?: number): void;
     scrollTo(offsetPx: number): number;
-    centerAt(bp: number, refName: string, regionIndex: number): void;
+    centerAt(coord: number, refName: string, regionNumber: number): void;
     scroll(distance: number): number;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export declare type Base1DViewStateModel = typeof Base1DView;

package/util/Base1DViewModel.js

@@ -93,7 +93,8 @@ var Base1DView = _mobxStateTree.types.model('Base1DView', {
       if (bp < 0) {
         var region = self.displayedRegions[0];
         var offset = bp;
-        return _objectSpread(_objectSpread({}, (0, _mobxStateTree.getSnapshot)(region)), {}, {
+        var snap = (0, _mobxStateTree.getSnapshot)(region);
+        return _objectSpread(_objectSpread({}, snap), {}, {
           oob: true,
           coord: region.reversed ? Math.floor(region.end - offset) + 1 : Math.floor(region.start + offset) + 1,
           offset: offset,
@@ -111,7 +112,9 @@ var Base1DView = _mobxStateTree.types.model('Base1DView', {
         var _offset = bp - bpSoFar;
 
         if (len + bpSoFar > bp && bpSoFar <= bp) {
-          return _objectSpread(_objectSpread({}, (0, _mobxStateTree.getSnapshot)(_region)), {}, {
+          var _snap = (0, _mobxStateTree.getSnapshot)(_region);
+
+          return _objectSpread(_objectSpread({}, _snap), {}, {
             oob: false,
             offset: _offset,
             coord: _region.reversed ? Math.floor(_region.end - _offset) + 1 : Math.floor(_region.start + _offset) + 1,
@@ -135,7 +138,9 @@ var Base1DView = _mobxStateTree.types.model('Base1DView', {
 
         var _offset2 = bp - bpSoFar + _len;
 
-        return _objectSpread(_objectSpread({}, (0, _mobxStateTree.getSnapshot)(_region2)), {}, {
+        var _snap2 = (0, _mobxStateTree.getSnapshot)(_region2);
+
+        return _objectSpread(_objectSpread({}, _snap2), {}, {
           oob: true,
           offset: _offset2,
           coord: _region2.reversed ? Math.floor(_region2.end - _offset2) + 1 : Math.floor(_region2.start + _offset2) + 1,
@@ -173,13 +178,6 @@ var Base1DView = _mobxStateTree.types.model('Base1DView', {
       }, 0);
     },
 
-    /**
-     * calculates the Px at which coord is found.
-     *
-     * @param refName - string, refName of region
-     * @param coord - number, bp to be translated to Px
-     * @param regionNumber - number, index of displayedRegion in displayedRegions array
-     */
     bpToPx: function bpToPx(_ref) {
       var _viewBpToPx;
 
@@ -305,11 +303,11 @@ var Base1DView = _mobxStateTree.types.model('Base1DView', {
       self.offsetPx = newOffsetPx;
       return newOffsetPx;
     },
-    centerAt: function centerAt(bp, refName, regionIndex) {
+    centerAt: function centerAt(coord, refName, regionNumber) {
       var centerPx = self.bpToPx({
         refName: refName,
-        coord: bp,
-        regionNumber: regionIndex
+        coord: coord,
+        regionNumber: regionNumber
       });
 
       if (centerPx) {

package/util/color/index.js

@@ -19,7 +19,7 @@ Object.defineProperty(exports, "namedColorToHex", {
   }
 });
 
-var _colorManipulator = require("@material-ui/core/styles/colorManipulator");
+var _styles = require("@mui/material/styles");
 
 var _cssColorsLevel = require("./cssColorsLevel4");
 
@@ -51,7 +51,7 @@ function contrastingTextColor(color) {
 
 function getLuminance(color) {
   var convertedColor = (0, _cssColorsLevel.namedColorToHex)(color);
-  return (0, _colorManipulator.getLuminance)(convertedColor || color);
+  return (0, _styles.getLuminance)(convertedColor || color);
 }
 /**
  * Darken or lighten a color, depending on its luminance.
@@ -68,7 +68,7 @@ function getLuminance(color) {
 function emphasize(color) {
   var coefficient = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.15;
   var convertedColor = (0, _cssColorsLevel.namedColorToHex)(color);
-  return (0, _colorManipulator.emphasize)(convertedColor || color, coefficient);
+  return (0, _styles.emphasize)(convertedColor || color, coefficient);
 }
 
 function makeContrasting(foreground) {
@@ -77,14 +77,14 @@ function makeContrasting(foreground) {
   var convertedForeground = (0, _cssColorsLevel.namedColorToHex)(foreground) || foreground;
   var convertedBackground = (0, _cssColorsLevel.namedColorToHex)(background) || background;
   var backgroundLuminance = getLuminance(convertedBackground);
-  var contrastRatio = (0, _colorManipulator.getContrastRatio)(convertedForeground, convertedBackground);
+  var contrastRatio = (0, _styles.getContrastRatio)(convertedForeground, convertedBackground);
   var originalColor = convertedForeground;
   var coefficient = 0.05;
 
   while (contrastRatio < minContrastRatio) {
-    convertedForeground = backgroundLuminance > 0.5 ? (0, _colorManipulator.darken)(originalColor, coefficient) : (0, _colorManipulator.lighten)(originalColor, coefficient);
+    convertedForeground = backgroundLuminance > 0.5 ? (0, _styles.darken)(originalColor, coefficient) : (0, _styles.lighten)(originalColor, coefficient);
     coefficient += 0.05;
-    contrastRatio = (0, _colorManipulator.getContrastRatio)(convertedForeground, convertedBackground);
+    contrastRatio = (0, _styles.getContrastRatio)(convertedForeground, convertedBackground);
   }
 
   return convertedForeground;