Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "emphasis" mode for no fill/scatterplot mode in XYPlot type renderings #3106

Merged
merged 4 commits into from
Jul 22, 2022
Merged

Add "emphasis" mode for no fill/scatterplot mode in XYPlot type renderings #3106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
559ffdd
Avoid occasionally flaky by replacing alignments with bigbed in basic…
cmdcolin Jul 22, 2022
a5ac24a
Add no-fill-with-emphasis mode with default minSize:1
cmdcolin Jul 22, 2022
ccbaf61
Slimmer displayCrossHatches
cmdcolin Jul 22, 2022
1e24174
Add solid bg for text area in legend
cmdcolin Jul 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeView.tsx
View file
Open in desktop
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
Open in desktop
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 = 1
} 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 === 1) {
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
Open in desktop
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
36 changes: 23 additions & 13 deletions plugins/wiggle/src/MultiLinearWiggleDisplay/components/WiggleDisplayComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,31 +101,41 @@ const ColorLegend = observer(
const {
needsCustomLegend,
needsScalebar,
needsFullHeightScalebar,
rowHeightTooSmallForScalebar,
renderColorBoxes,
sources,
} = model
const svgFontSize = Math.min(rowHeight, 12)
const canDisplayLabel = rowHeight > 11

const colorBoxWidth = renderColorBoxes ? 15 : 0
const legendWidth = labelWidth + colorBoxWidth + 5
const extraOffset = needsScalebar && !rowHeightTooSmallForScalebar ? 50 : 0
return sources ? (
<>
{
/* 0.25 for hanging letters like g */
needsFullHeightScalebar ? (
<RectBg
y={0}
x={extraOffset}
width={legendWidth}
height={(sources.length + 0.25) * rowHeight}
/>
) : null
}
{sources.map((source, idx) => {
// put the subtrack labels to the right of the scalebar
const extraOffset =
needsScalebar && !rowHeightTooSmallForScalebar ? 50 : 0
const colorBoxWidth = renderColorBoxes ? 15 : 0
const legendWidth = labelWidth + colorBoxWidth + 5
const boxHeight = Math.min(20, rowHeight)

return (
<React.Fragment key={source.name + '-' + idx}>
<RectBg
y={idx * rowHeight + 1}
x={extraOffset}
width={legendWidth}
height={boxHeight}
/>
{!needsFullHeightScalebar ? (
<RectBg
y={idx * rowHeight + 1}
x={extraOffset}
width={legendWidth}
height={boxHeight}
/>
) : null}
{source.color ? (
<RectBg
y={idx * rowHeight + 1}
Expand Down
63 changes: 45 additions & 18 deletions plugins/wiggle/src/MultiLinearWiggleDisplay/models/model.tsx
View file
Open in desktop
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 = 1
} 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 === 1) {
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading