Skip to content

Commit

Permalink
Add no-fill-with-emphasis mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmdcolin
cmdcolin committed Jul 22, 2022
1 parent 559ffdd commit 50dc97e
Show file tree
Hide file tree
Showing 9 changed files with 127 additions and 44 deletions.
8 changes: 2 additions & 6 deletions plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,17 +64,13 @@ const LinearGenomeView = observer(({ model }: { model: LGV }) => {
{model.seqDialogDisplayed ? (
<SequenceDialog
model={model}
handleClose={() => {
model.setSequenceDialogOpen(false)
}}
handleClose={() => model.setSequenceDialogOpen(false)}
/>
) : null}
{model.isSearchDialogDisplayed ? (
<SearchResultsDialog
model={model}
handleClose={() => {
model.setSearchResults(undefined, undefined)
}}
handleClose={() => model.setSearchResults(undefined, undefined)}
/>
) : null}
{!hideHeader ? (
Expand Down
54 changes: 42 additions & 12 deletions plugins/wiggle/src/LinearWiggleDisplay/models/model.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ const stateModelFactory = (
selectedRendering: types.optional(types.string, ''),
resolution: types.optional(types.number, 1),
fill: types.maybe(types.boolean),
minSize: types.maybe(types.number),
color: types.maybe(types.string),
posColor: types.maybe(types.string),
negColor: types.maybe(types.string),
Expand Down Expand Up @@ -123,8 +124,17 @@ const stateModelFactory = (
self.resolution = res
},

setFill(fill: boolean) {
self.fill = fill
setFill(fill: number) {
if (fill === 0) {
self.fill = true
self.minSize = 0
} else if (fill === 1) {
self.fill = false
self.minSize = 0
} else if (fill === 2) {
self.fill = false
self.minSize = 2
}
},

toggleLogScale() {
Expand Down Expand Up @@ -213,12 +223,13 @@ const stateModelFactory = (

const {
color,
posColor,
displayCrossHatches,
fill,
minSize,
negColor,
posColor,
summaryScoreMode,
scaleType,
displayCrossHatches,
fill,
} = self

return self.rendererType.configSchema.create(
Expand All @@ -230,9 +241,10 @@ const stateModelFactory = (
? { displayCrossHatches }
: {}),
...(summaryScoreMode !== undefined ? { summaryScoreMode } : {}),
...(color !== undefined ? { color: color } : {}),
...(negColor !== undefined ? { negColor: negColor } : {}),
...(posColor !== undefined ? { posColor: posColor } : {}),
...(color !== undefined ? { color } : {}),
...(negColor !== undefined ? { negColor } : {}),
...(posColor !== undefined ? { posColor } : {}),
...(minSize !== undefined ? { minSize } : {}),
},
getEnv(self),
)
Expand Down Expand Up @@ -351,6 +363,16 @@ const stateModelFactory = (
get hasGlobalStats() {
return self.adapterCapabilities.includes('hasGlobalStats')
},

get fillSetting() {
if (self.filled) {
return 0
} else if (!self.filled && self.minSize === 0) {
return 1
} else {
return 2
}
},
}
})
.views(self => {
Expand Down Expand Up @@ -379,18 +401,26 @@ const stateModelFactory = (
label: 'Summary score mode',
subMenu: ['min', 'max', 'avg', 'whiskers'].map(elt => ({
label: elt,
type: 'radio',
checked: self.summaryScoreModeSetting === elt,
onClick: () => self.setSummaryScoreMode(elt),
})),
},
]
: []),

...(self.canHaveFill
? [
{
label: self.filled
? 'Turn off histogram fill'
: 'Turn on histogram fill',
onClick: () => self.setFill(!self.filled),
label: 'Fill mode',
subMenu: ['filled', 'no fill', 'no fill w/ emphasis'].map(
(elt, idx) => ({
label: elt,
type: 'radio',
checked: self.fillSetting === idx,
onClick: () => self.setFill(idx),
}),
),
},
]
: []),
Expand Down
4 changes: 3 additions & 1 deletion plugins/wiggle/src/MultiLineRenderer/configSchema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@ import ConfigSchema from '../configSchema'
const configSchema = ConfigurationSchema(
'MultiLineRenderer',
{
filled: {
displayCrossHatches: {
type: 'boolean',
description: 'choose to draw cross hatches (sideways lines)',
defaultValue: false,
},

summaryScoreMode: {
type: 'stringEnum',
model: types.enumeration('Score type', ['max', 'min', 'avg', 'whiskers']),
Expand Down
63 changes: 45 additions & 18 deletions plugins/wiggle/src/MultiLinearWiggleDisplay/models/model.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ const stateModelFactory = (
selectedRendering: types.optional(types.string, ''),
resolution: types.optional(types.number, 1),
fill: types.maybe(types.boolean),
minSize: types.maybe(types.number),
height: 200,
color: types.maybe(types.string),
posColor: types.maybe(types.string),
Expand Down Expand Up @@ -161,8 +162,17 @@ const stateModelFactory = (
self.resolution = res
},

setFill(fill: boolean) {
self.fill = fill
setFill(fill: number) {
if (fill === 0) {
self.fill = true
self.minSize = 0
} else if (fill === 1) {
self.fill = false
self.minSize = 0
} else if (fill === 2) {
self.fill = false
self.minSize = 2
}
},

toggleLogScale() {
Expand Down Expand Up @@ -252,12 +262,13 @@ const stateModelFactory = (

const {
color,
posColor,
displayCrossHatches,
fill,
minSize,
negColor,
posColor,
summaryScoreMode,
scaleType,
displayCrossHatches,
fill,
} = self

return self.rendererType.configSchema.create(
Expand All @@ -269,9 +280,10 @@ const stateModelFactory = (
? { displayCrossHatches }
: {}),
...(summaryScoreMode !== undefined ? { summaryScoreMode } : {}),
...(color !== undefined ? { color: color } : {}),
...(negColor !== undefined ? { negColor: negColor } : {}),
...(posColor !== undefined ? { posColor: posColor } : {}),
...(color !== undefined ? { color } : {}),
...(negColor !== undefined ? { negColor } : {}),
...(posColor !== undefined ? { posColor } : {}),
...(minSize !== undefined ? { minSize } : {}),
},
getEnv(self),
)
Expand Down Expand Up @@ -503,6 +515,16 @@ const stateModelFactory = (
get hasGlobalStats() {
return self.adapterCapabilities.includes('hasGlobalStats')
},

get fillSetting() {
if (self.filled) {
return 0
} else if (!self.filled && self.minSize === 0) {
return 1
} else {
return 2
}
},
}
})
.views(self => {
Expand All @@ -529,22 +551,27 @@ const stateModelFactory = (
},
{
label: 'Summary score mode',
subMenu: ['min', 'max', 'avg', 'whiskers'].map(elt => {
return {
label: elt,
onClick: () => self.setSummaryScoreMode(elt),
}
}),
subMenu: ['min', 'max', 'avg', 'whiskers'].map(elt => ({
label: elt,
type: 'radio',
checked: self.summaryScoreModeSetting === elt,
onClick: () => self.setSummaryScoreMode(elt),
})),
},
]
: []),
...(self.canHaveFill
? [
{
label: self.filled
? 'Turn off histogram fill'
: 'Turn on histogram fill',
onClick: () => self.setFill(!self.filled),
label: 'Fill mode',
subMenu: ['filled', 'no fill', 'no fill w/ emphasis'].map(
(elt, idx) => ({
label: elt,
type: 'radio',
checked: self.fillSetting === idx,
onClick: () => self.setFill(idx),
}),
),
},
]
: []),
Expand Down
7 changes: 4 additions & 3 deletions plugins/wiggle/src/MultiRowLineRenderer/configSchema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ import { ConfigurationSchema } from '@jbrowse/core/configuration'
import ConfigSchema from '../configSchema'

const configSchema = ConfigurationSchema(
'MultiRowXYPlotRenderer',
'MultiRowLineRenderer',
{
filled: {
displayCrossHatches: {
type: 'boolean',
defaultValue: true,
description: 'choose to draw cross hatches (sideways lines)',
defaultValue: false,
},
summaryScoreMode: {
type: 'stringEnum',
Expand Down
9 changes: 9 additions & 0 deletions plugins/wiggle/src/MultiRowXYPlotRenderer/configSchema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,22 @@ const configSchema = ConfigurationSchema(
type: 'boolean',
defaultValue: true,
},
displayCrossHatches: {
type: 'boolean',
description: 'choose to draw cross hatches (sideways lines)',
defaultValue: false,
},
summaryScoreMode: {
type: 'stringEnum',
model: types.enumeration('Score type', ['max', 'min', 'avg', 'whiskers']),
description:
'choose whether to use max/min/average or whiskers which combines all three into the same rendering',
defaultValue: 'whiskers',
},
minSize: {
type: 'number',
defaultValue: 0,
},
},
{ baseConfiguration: ConfigSchema, explicitlyTyped: true },
)
Expand Down
9 changes: 9 additions & 0 deletions plugins/wiggle/src/MultiXYPlotRenderer/configSchema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,22 @@ const configSchema = ConfigurationSchema(
type: 'boolean',
defaultValue: true,
},
displayCrossHatches: {
type: 'boolean',
description: 'choose to draw cross hatches (sideways lines)',
defaultValue: false,
},
summaryScoreMode: {
type: 'stringEnum',
model: types.enumeration('Score type', ['max', 'min', 'avg', 'whiskers']),
description:
'choose whether to use max/min/average or whiskers which combines all three into the same rendering',
defaultValue: 'avg',
},
minSize: {
type: 'number',
defaultValue: 0,
},
},
{ baseConfiguration: ConfigSchema, explicitlyTyped: true },
)
Expand Down
4 changes: 4 additions & 0 deletions plugins/wiggle/src/XYPlotRenderer/configSchema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ const configSchema = ConfigurationSchema(
'choose whether to use max/min/average or whiskers which combines all three into the same rendering',
defaultValue: 'whiskers',
},
minSize: {
type: 'number',
defaultValue: 0,
},
},
{ baseConfiguration: ConfigSchema, explicitlyTyped: true },
)
Expand Down
13 changes: 9 additions & 4 deletions plugins/wiggle/src/drawxy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,14 +72,15 @@ export function drawXY(
const clipColor = readConfObject(config, 'clipColor')
const summaryScoreMode = readConfObject(config, 'summaryScoreMode')
const pivotValue = readConfObject(config, 'bicolorPivotValue')
const minSize = readConfObject(config, 'minSize')

const scale = getScale({ ...scaleOpts, range: [0, height] })
const originY = getOrigin(scaleOpts.scaleType)
const [niceMin, niceMax] = scale.domain()

const toY = (n: number) => clamp(height - (scale(n) || 0), 0, height) + offset
const toOrigin = (n: number) => toY(originY) - toY(n)
const getHeight = (n: number) => (filled ? toOrigin(n) : 1)
const getHeight = (n: number) => (filled ? toOrigin(n) : Math.max(minSize, 1))
let hasClipping = false

let prevLeftPx = 0
Expand Down Expand Up @@ -107,6 +108,8 @@ export function drawXY(
lastCol = c
}
}
lastMix = undefined
lastCol = undefined
for (const feature of features.values()) {
const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx)
const score = feature.get('score')
Expand All @@ -122,7 +125,7 @@ export function drawXY(
.mix(Color(colorCallback(feature, min)))
.toString())
: c
const w = rightPx - leftPx + fudgeFactor
const w = Math.max(rightPx - leftPx + fudgeFactor, minSize)
// create reduced features, avoiding multiple features per px
if (Math.floor(leftPx) !== Math.floor(prevLeftPx)) {
reducedFeatures.push(feature)
Expand All @@ -132,13 +135,15 @@ export function drawXY(
fillRectCtx(leftPx, toY(score), w, getHeight(score), ctx, effectiveC)
lastCol = c
}
lastMix = undefined
lastCol = undefined
for (const feature of features.values()) {
const [leftPx, rightPx] = featureSpanPx(feature, region, bpPerPx)

if (feature.get('summary')) {
const min = feature.get('minScore')
const c = colorCallback(feature, min)
const w = rightPx - leftPx + fudgeFactor
const w = Math.max(rightPx - leftPx + fudgeFactor, minSize)
const effectiveC = crossingOrigin
? c
: c === lastCol
Expand All @@ -163,7 +168,7 @@ export function drawXY(
const c = colorCallback(feature, score)

hasClipping = hasClipping || score < niceMin || score > niceMax
const w = rightPx - leftPx + fudgeFactor
const w = Math.max(rightPx - leftPx + fudgeFactor, minSize)

if (summaryScoreMode === 'max') {
const s = feature.get('summary') ? feature.get('maxScore') : score
Expand Down

0 comments on commit 50dc97e

Please sign in to comment.