@jbrowse/core 1.7.10 → 2.0.1

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/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;