Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmdcolin
cmdcolin committed Mar 7, 2024
1 parent 664a280 commit 711a397
Show file tree
Hide file tree
Showing 10 changed files with 685 additions and 785 deletions.
167 changes: 87 additions & 80 deletions packages/core/ui/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,15 @@ declare module '@mui/material/styles/createPalette' {
Palette['primary'] | undefined,
Palette['primary'] | undefined,
]
framesCDS: [
null,
Palette['primary'] | undefined,
Palette['primary'] | undefined,
Palette['primary'] | undefined,
Palette['primary'] | undefined,
Palette['primary'] | undefined,
Palette['primary'] | undefined,
]
}
interface PaletteOptions {
tertiary?: PaletteOptions['primary']
Expand All @@ -39,14 +48,23 @@ declare module '@mui/material/styles/createPalette' {
G?: PaletteOptions['primary']
T?: PaletteOptions['primary']
}
frames?: [
framesCDS: [
null,
PaletteOptions['primary'],
PaletteOptions['primary'],
PaletteOptions['primary'],
PaletteOptions['primary'],
PaletteOptions['primary'],
PaletteOptions['primary'],
Palette['primary'] | undefined,
Palette['primary'] | undefined,
Palette['primary'] | undefined,
Palette['primary'] | undefined,
Palette['primary'] | undefined,
Palette['primary'] | undefined,
]
frames: [
null,
Palette['primary'] | undefined,
Palette['primary'] | undefined,
Palette['primary'] | undefined,
Palette['primary'] | undefined,
Palette['primary'] | undefined,
Palette['primary'] | undefined,
]
}
}
Expand All @@ -65,8 +83,33 @@ const midnight = '#0D233F'
const grape = '#721E63'
const forest = '#135560'
const mandarin = '#FFB11D'

const refTheme = createTheme()
const bases = {
A: refTheme.palette.augmentColor({ color: green }),
C: refTheme.palette.augmentColor({ color: blue }),
G: refTheme.palette.augmentColor({ color: orange }),
T: refTheme.palette.augmentColor({ color: red }),
}
const framesCDS = [
null,
refTheme.palette.augmentColor({ color: { main: '#FF8080' } }),
refTheme.palette.augmentColor({ color: { main: '#80FF80' } }),
refTheme.palette.augmentColor({ color: { main: '#8080FF' } }),
refTheme.palette.augmentColor({ color: { main: '#8080FF' } }),
refTheme.palette.augmentColor({ color: { main: '#80FF80' } }),
refTheme.palette.augmentColor({ color: { main: '#FF8080' } }),
] as Frames
const frames = [
null,
refTheme.palette.augmentColor({ color: { main: '#8f8f8f' } }),
refTheme.palette.augmentColor({ color: { main: '#adadad' } }),
refTheme.palette.augmentColor({ color: { main: '#d8d8d8' } }),
refTheme.palette.augmentColor({ color: { main: '#d8d8d8' } }),
refTheme.palette.augmentColor({ color: { main: '#adadad' } }),
refTheme.palette.augmentColor({ color: { main: '#8f8f8f' } }),
] as Frames
const stopCodon = '#e22'
const startCodon = '#3e3'

function stockTheme() {
return {
Expand All @@ -76,23 +119,11 @@ function stockTheme() {
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: green }),
C: refTheme.palette.augmentColor({ color: blue }),
G: refTheme.palette.augmentColor({ color: orange }),
T: refTheme.palette.augmentColor({ color: red }),
},
frames: [
null,
refTheme.palette.augmentColor({ color: { main: '#FF8080' } }),
refTheme.palette.augmentColor({ color: { main: '#80FF80' } }),
refTheme.palette.augmentColor({ color: { main: '#8080FF' } }),
refTheme.palette.augmentColor({ color: { main: '#8080FF' } }),
refTheme.palette.augmentColor({ color: { main: '#80FF80' } }),
refTheme.palette.augmentColor({ color: { main: '#FF8080' } }),
] as Frames,
stopCodon,
startCodon,
bases,
frames,
framesCDS,
},
components: {
MuiLink: {
Expand Down Expand Up @@ -133,23 +164,11 @@ function getDarkStockTheme() {
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: green }),
C: refTheme.palette.augmentColor({ color: blue }),
G: refTheme.palette.augmentColor({ color: orange }),
T: refTheme.palette.augmentColor({ color: red }),
},
frames: [
null,
refTheme.palette.augmentColor({ color: { main: '#FF8080' } }),
refTheme.palette.augmentColor({ color: { main: '#80FF80' } }),
refTheme.palette.augmentColor({ color: { main: '#8080FF' } }),
refTheme.palette.augmentColor({ color: { main: '#8080FF' } }),
refTheme.palette.augmentColor({ color: { main: '#80FF80' } }),
refTheme.palette.augmentColor({ color: { main: '#FF8080' } }),
] as Frames,
stopCodon,
startCodon,
bases,
frames,
framesCDS,
},
components: {
MuiAppBar: {
Expand All @@ -176,23 +195,11 @@ function getDarkMinimalTheme() {
secondary: { main: grey[800] },
tertiary: refTheme.palette.augmentColor({ color: { main: grey[900] } }),
quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
stopCodon: '#e22',
startCodon: '#3e3',
bases: {
A: refTheme.palette.augmentColor({ color: green }),
C: refTheme.palette.augmentColor({ color: blue }),
G: refTheme.palette.augmentColor({ color: orange }),
T: refTheme.palette.augmentColor({ color: red }),
},
frames: [
null,
refTheme.palette.augmentColor({ color: { main: '#FF8080' } }),
refTheme.palette.augmentColor({ color: { main: '#80FF80' } }),
refTheme.palette.augmentColor({ color: { main: '#8080FF' } }),
refTheme.palette.augmentColor({ color: { main: '#8080FF' } }),
refTheme.palette.augmentColor({ color: { main: '#80FF80' } }),
refTheme.palette.augmentColor({ color: { main: '#FF8080' } }),
] as Frames,
stopCodon,
startCodon,
bases,
frames,
framesCDS,
},
}
}
Expand All @@ -205,23 +212,11 @@ function getMinimalTheme() {
secondary: { main: grey[800] },
tertiary: refTheme.palette.augmentColor({ color: { main: grey[900] } }),
quaternary: refTheme.palette.augmentColor({ color: { main: mandarin } }),
stopCodon: '#e22',
startCodon: '#3e3',
bases: {
A: refTheme.palette.augmentColor({ color: green }),
C: refTheme.palette.augmentColor({ color: blue }),
G: refTheme.palette.augmentColor({ color: orange }),
T: refTheme.palette.augmentColor({ color: red }),
},
frames: [
null,
refTheme.palette.augmentColor({ color: { main: '#FF8080' } }),
refTheme.palette.augmentColor({ color: { main: '#80FF80' } }),
refTheme.palette.augmentColor({ color: { main: '#8080FF' } }),
refTheme.palette.augmentColor({ color: { main: '#8080FF' } }),
refTheme.palette.augmentColor({ color: { main: '#80FF80' } }),
refTheme.palette.augmentColor({ color: { main: '#FF8080' } }),
] as Frames,
stopCodon,
startCodon,
bases,
frames,
framesCDS,
},
}
}
Expand Down Expand Up @@ -494,7 +489,9 @@ function augmentTheme(theme: ThemeOptions = {}) {
tertiary: refTheme.palette.augmentColor(
'color' in theme.palette.tertiary
? (theme.palette.tertiary as PaletteAugmentColorOptions)
: { color: theme.palette.tertiary },
: {
color: theme.palette.tertiary,
},
),
},
})
Expand All @@ -506,7 +503,9 @@ function augmentTheme(theme: ThemeOptions = {}) {
quaternary: refTheme.palette.augmentColor(
'color' in theme.palette.quaternary
? (theme.palette.quaternary as PaletteAugmentColorOptions)
: { color: theme.palette.quaternary },
: {
color: theme.palette.quaternary,
},
),
},
})
Expand All @@ -521,14 +520,22 @@ function augmentThemePlus(theme: ThemeOptions = {}) {
if (!theme?.palette?.quaternary) {
theme = deepmerge(theme, {
palette: {
quaternary: refTheme.palette.augmentColor({ color: { main: '#aaa' } }),
quaternary: refTheme.palette.augmentColor({
color: {
main: '#aaa',
},
}),
},
})
}
if (!theme?.palette?.tertiary) {
theme = deepmerge(theme, {
palette: {
tertiary: refTheme.palette.augmentColor({ color: { main: '#aaa' } }),
tertiary: refTheme.palette.augmentColor({
color: {
main: '#aaa',
},
}),
},
})
}
Expand Down
7 changes: 3 additions & 4 deletions packages/core/util/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -944,10 +944,9 @@ export function getFrame(
strand: 1 | -1,
phase: 0 | 1 | 2,
): Frame {
if (strand === 1) {
return (((start + phase) % 3) + 1) as 1 | 2 | 3
}
return (-1 * ((end - phase) % 3) - 1) as -1 | -2 | -3
return strand === 1
? ((((start + phase) % 3) + 1) as 1 | 2 | 3)
: ((-1 * ((end - phase) % 3) - 1) as -1 | -2 | -3)
}

export const defaultStarts = ['ATG']
Expand Down
25 changes: 20 additions & 5 deletions plugins/linear-genome-view/src/LinearGenomeView/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
isSessionModelWithWidgets,
isSessionWithAddTracks,
localStorageGetItem,
localStorageSetItem,
measureText,
springAnimate,
sum,
Expand Down Expand Up @@ -50,6 +51,7 @@ import FolderOpenIcon from '@mui/icons-material/FolderOpen'
import PhotoCameraIcon from '@mui/icons-material/PhotoCamera'
import ZoomInIcon from '@mui/icons-material/ZoomIn'
import MenuOpenIcon from '@mui/icons-material/MenuOpen'
import PaletteIcon from '@mui/icons-material/Palette'

import MiniControls from './components/MiniControls'
import Header from './components/Header'
Expand Down Expand Up @@ -550,6 +552,12 @@ export function stateModelFactory(pluginManager: PluginManager) {
},
}))
.actions(self => ({
/**
* #action
*/
setColorByCDS(flag: boolean) {
self.colorByCDS = flag
},
/**
* #action
*/
Expand Down Expand Up @@ -1107,6 +1115,13 @@ export function stateModelFactory(pluginManager: PluginManager) {
icon: SyncAltIcon,
onClick: self.horizontallyFlip,
},
{
label: 'Color by CDS',
type: 'checkbox',
checked: self.colorByCDS,
icon: PaletteIcon,
onClick: () => self.setColorByCDS(!self.colorByCDS),
},
{
label: 'Show...',
icon: VisibilityIcon,
Expand All @@ -1127,6 +1142,7 @@ export function stateModelFactory(pluginManager: PluginManager) {
checked: !self.hideHeader,
onClick: () => self.setHideHeader(!self.hideHeader),
},

{
label: 'Show header overview',
type: 'checkbox',
Expand Down Expand Up @@ -1293,11 +1309,10 @@ export function stateModelFactory(pluginManager: PluginManager) {
self,
autorun(() => {
const s = (s: unknown) => JSON.stringify(s)
const { showCytobandsSetting, showCenterLine } = self
if (typeof localStorage !== 'undefined') {
localStorage.setItem('lgv-showCytobands', s(showCytobandsSetting))
localStorage.setItem('lgv-showCenterLine', s(showCenterLine))
}
const { showCytobandsSetting, showCenterLine, colorByCDS } = self
localStorageSetItem('lgv-showCytobands', s(showCytobandsSetting))
localStorageSetItem('lgv-showCenterLine', s(showCenterLine))
localStorageSetItem('lgv-colorByCDS', s(colorByCDS))
}),
)
},
Expand Down
30 changes: 6 additions & 24 deletions plugins/sequence/src/DivSequenceRenderer/components/DivSequenceRendering.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,16 @@
import React from 'react'
import { render } from '@testing-library/react'
import SimpleFeature from '@jbrowse/core/util/simpleFeature'
import { SimpleFeature } from '@jbrowse/core/util'
import DivSequenceRendering from './DivSequenceRendering'
import DivRenderingConfigSchema from '../configSchema'

// This just keeps our testing logs clean by not displaying `console.error`s
// from errors we intentionally throw in our tests. Hopefully React will
// someday provide a way for error boundaries to prevent error logging so we
// won't have to do this: https://github.com/facebook/react/issues/15069
const originalError = console.error
beforeAll(() => {
console.error = (...args) => {
if (
args[0].includes('feature one did not contain a valid `seq` attribute') ||
args[0].includes(
'The above error occurred in the <SequenceDivs> component',
)
) {
return
}
originalError.call(console, ...args)
}
})

afterAll(() => {
console.error = originalError
})

test('renders with one, zoomed way out', () => {
const { container } = render(
<DivSequenceRendering
regions={[
{ assemblyName: 'volvox', refName: 'zonk', start: 0, end: 1000 },
]}
colorByCDS={false}
features={
new Map([
[
Expand Down Expand Up @@ -62,6 +40,7 @@ test('renders with one feature with no seq, zoomed in, should throw', () => {
regions={[
{ assemblyName: 'volvox', refName: 'zonk', start: 0, end: 1000 },
]}
colorByCDS={false}
features={
new Map([
['one', new SimpleFeature({ uniqueId: 'one', start: 1, end: 3 })],
Expand All @@ -83,6 +62,7 @@ test('renders with one feature with an incorrect seq, zoomed in, should throw',
regions={[
{ assemblyName: 'volvox', refName: 'zonk', start: 0, end: 1000 },
]}
colorByCDS={false}
features={
new Map([
[
Expand Down Expand Up @@ -112,6 +92,7 @@ test('renders with one feature with a correct seq, zoomed in, should render nice
regions={[
{ assemblyName: 'volvox', refName: 'zonk', start: 0, end: 1000 },
]}
colorByCDS={false}
features={
new Map([
[
Expand Down Expand Up @@ -147,6 +128,7 @@ test('renders with one feature reversed with a correct seq, zoomed in, should re
reversed: true,
},
]}
colorByCDS={false}
features={
new Map([
[
Expand Down
Loading

0 comments on commit 711a397

Please sign in to comment.