Skip to content

Commit

Permalink
Texture
Browse files Browse the repository at this point in the history
  • Loading branch information
@cmdcolin
cmdcolin committed Aug 5, 2024
1 parent 952dd8c commit ab0cc65
Show file tree
Hide file tree
Showing 10 changed files with 252 additions and 185 deletions.
4 changes: 3 additions & 1 deletion lib/src/colorSchemes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -353,7 +353,9 @@ export default transform(colorSchemes, ([key, val]) => [
export function getClustalXColor(
stats: Record<string, number>,
total: number,
model: { columns: Record<string, string> },
model: {
columns: Record<string, string>
},
row: string,
col: number,
) {
Expand Down
88 changes: 48 additions & 40 deletions lib/src/components/dialogs/UserProvidedDomainsDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ import {
Typography,
} from '@mui/material'
import { getSession } from '@jbrowse/core/util'
import { Dialog } from '@jbrowse/core/ui'

// locals
import type { MsaViewModel } from '../../model'
import { jsonfetch } from '../../fetchUtils'
import type { InterProScanResponse } from '../../launchInterProScan'
import { Dialog } from '@jbrowse/core/ui'

const UserProvidedDomainsDialog = observer(function ({
handleClose,
Expand All @@ -38,51 +38,59 @@ const UserProvidedDomainsDialog = observer(function ({
open
>
<DialogContent>
<div style={{ display: 'flex', margin: 30 }}>
<div>
<Typography>
Open a JSON file of InterProScan results that you run remotely on
EBI servers or locally
</Typography>

<FormControl component="fieldset">
<RadioGroup
value={choice}
onChange={event => setChoice(event.target.value)}
>
<FormControlLabel value="url" control={<Radio />} label="URL" />
<FormControlLabel value="file" control={<Radio />} label="File" />
</RadioGroup>
</FormControl>
{choice === 'url' ? (
<div>
<Typography>Open a InterProScan JSON file remote URL</Typography>
<TextField
label="URL"
value={interProURL}
onChange={event => setInterProURL(event.target.value)}
/>
</div>
) : null}
{choice === 'file' ? (
<div style={{ paddingTop: 20 }}>
<Typography>
Open a InterProScan JSON file file from your local drive
</Typography>
<Button variant="outlined" component="label">
Choose File
<input
type="file"
hidden
onChange={({ target }) => {
const file = target?.files?.[0]
if (file) {
setFile(file)
}
}}
<div style={{ display: 'flex', margin: 30 }}>
<FormControl component="fieldset">
<RadioGroup
value={choice}
onChange={event => setChoice(event.target.value)}
>
<FormControlLabel value="url" control={<Radio />} label="URL" />
<FormControlLabel
value="file"
control={<Radio />}
label="File"
/>
</RadioGroup>
</FormControl>
{choice === 'url' ? (
<div>
<Typography>
Open a InterProScan JSON file remote URL
</Typography>
<TextField
label="URL"
value={interProURL}
onChange={event => setInterProURL(event.target.value)}
/>
</Button>
</div>
) : null}
</div>
) : null}
{choice === 'file' ? (
<div style={{ paddingTop: 20 }}>
<Typography>
Open a InterProScan JSON file file from your local drive
</Typography>
<Button variant="outlined" component="label">
Choose File
<input
type="file"
hidden
onChange={({ target }) => {
const file = target?.files?.[0]
if (file) {
setFile(file)
}
}}
/>
</Button>
</div>
) : null}
</div>
</div>
</DialogContent>
<DialogActions>
Expand Down
3 changes: 2 additions & 1 deletion lib/src/components/msa/MSACanvas.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,8 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
const distanceY = currY - prevY.current
if (distanceX || distanceY) {
// use rAF to make it so multiple event handlers aren't fired per-frame
// see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
// see
// https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
if (!scheduled.current) {
scheduled.current = true
window.requestAnimationFrame(() => {
Expand Down
1 change: 0 additions & 1 deletion lib/src/components/msa/MSACanvasBlock.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ const MSACanvasBlock = observer(function ({
return
}
return autorun(() => {
ctx.resetTransform()
ctx.clearRect(0, 0, blockSize, blockSize)
const { actuallyShowDomains } = model
if (actuallyShowDomains) {
Expand Down
3 changes: 1 addition & 2 deletions lib/src/components/msa/renderBoxFeatureCanvasBlock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function renderBoxFeatureCanvasBlock({
highResScaleFactorOverride?: number
blockSizeYOverride?: number
}) {
const { hierarchy, blockSize, rowHeight, highResScaleFactor, showDomains } =
const { leaves, blockSize, rowHeight, highResScaleFactor, showDomains } =
model
if (showDomains) {
const k = highResScaleFactorOverride || highResScaleFactor
Expand All @@ -28,7 +28,6 @@ export function renderBoxFeatureCanvasBlock({
ctx.scale(k, k)
ctx.translate(-offsetX, rowHeight / 2 - offsetY)

const leaves = hierarchy.leaves()
const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight))
const yEnd = Math.max(0, Math.ceil((offsetY + by + rowHeight) / rowHeight))
const visibleLeaves = leaves.slice(yStart, yEnd)
Expand Down
27 changes: 15 additions & 12 deletions lib/src/components/msa/renderMSABlock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import type { Theme } from '@mui/material'
import type { MsaViewModel } from '../../model'
import { getClustalXColor, getPercentIdentityColor } from '../../colorSchemes'
import type { NodeWithIdsAndLength } from '../../util'
import { makeOffscreenFillTextCache } from '../../offscreenFillTextCache'
import { drawLetter } from '../../offscreenFillTextCache'

export function renderMSABlock({
model,
Expand All @@ -29,13 +29,13 @@ export function renderMSABlock({
blockSizeYOverride?: number
}) {
const {
hierarchy,
colWidth,
blockSize,
rowHeight,
fontSize,
highResScaleFactor,
actuallyShowDomains,
leaves,
} = model
const k = highResScaleFactorOverride || highResScaleFactor
const bx = blockSizeXOverride || blockSize
Expand All @@ -46,8 +46,6 @@ export function renderMSABlock({
ctx.textAlign = 'center'
ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)

const leaves = hierarchy.leaves()

const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight))
const yEnd = Math.max(0, Math.ceil((offsetY + by + rowHeight) / rowHeight))
const xStart = Math.max(0, Math.floor(offsetX / colWidth))
Expand Down Expand Up @@ -169,6 +167,7 @@ function drawText({
columns,
colWidth,
contrastLettering,
fontSize,
rowHeight,
offscreenFillTextCache,
} = model
Expand All @@ -181,25 +180,29 @@ function drawText({
const str = columns[name]?.slice(xStart, xEnd)
for (let i = 0; i < str?.length; i++) {
const letter = str[i]
const color = colorScheme[letter.toUpperCase()]
const contrast = contrastLettering
? contrastScheme[letter.toUpperCase()] || 'black'
: 'black'
const up = letter.toUpperCase()
const x = i * colWidth + offsetX - (offsetX % colWidth)

const color = colorScheme[up]
const contrast = contrastLettering
? contrastScheme[up] || 'black'
: 'black'
// note: -rowHeight/4 matches +rowHeight/4 in tree
ctx.fillStyle = actuallyShowDomains
const ret = actuallyShowDomains
? 'black'
: bgColor
? contrast
: color || 'black'

ctx.drawImage(
offscreenFillTextCache[letter],
drawLetter(
offscreenFillTextCache,
ctx,
letter,
x + colWidth / 4,
y - rowHeight + rowHeight / 4,
fontSize,
ret,
)
// ctx.fillText(letter, x + colWidth / 2, y - rowHeight / 4)
}
}
}
Expand Down
9 changes: 3 additions & 6 deletions lib/src/components/tree/renderTreeCanvas.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@ export function renderTreeLabels({
treeAreaWidthMinusMargin,
marginLeft,
noTree,
leaves,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
rowHeight: _rowHeight, // this is needed for redrawing after zoom change
} = model
Expand All @@ -156,7 +157,7 @@ export function renderTreeLabels({
} else {
ctx.textAlign = 'start'
}
for (const node of hierarchy.leaves()) {
for (const node of leaves) {
const {
data: { name, id },
// @ts-expect-error
Expand Down Expand Up @@ -259,11 +260,7 @@ export function renderTreeCanvas({
// just need to use nref to indicate a redraw in an autorun when canvas ref
// is updated and in order to convince bundlers like not to delete unused
// usage with propertyReadSideEffects
const k =
nref < 0
? Number.NEGATIVE_INFINITY
: highResScaleFactorOverride || highResScaleFactor
ctx.scale(k, k)
const k = nref < 0 ? Number.NEGATIVE_INFINITY : 1

Check warning on line 263 in lib/src/components/tree/renderTreeCanvas.ts

View workflow job for this annotation

GitHub Actions / Test and typecheck on node 20.x and ubuntu-latest 

'k' is assigned a value but never used
ctx.clearRect(0, 0, treeWidth + padding, by)
ctx.translate(marginLeft, -offsetY)

Expand Down
22 changes: 17 additions & 5 deletions lib/src/model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ function stateModelFactory() {
* #volatile
* size of blocks of content to be drawn, px
*/
blockSize: 1000,
blockSize: 500,

/**
* #volatile
Expand Down Expand Up @@ -615,11 +615,18 @@ function stateModelFactory() {
}
return reparseTree(ret)
},

/**
* #getter
*/
get leaves() {
return this.hierarchy.leaves()
},
/**
* #getter
*/
get rowNames(): string[] {
return this.hierarchy.leaves().map(n => n.data.name)
return this.leaves.map(n => n.data.name)
},
/**
* #getter
Expand Down Expand Up @@ -727,7 +734,6 @@ function stateModelFactory() {
get colStats() {
const r = [] as Record<string, number>[]
const columns = this.columns2d
trace()
for (const column of columns) {
for (let j = 0; j < column.length; j++) {
const l = r[j] || {}
Expand Down Expand Up @@ -847,13 +853,13 @@ function stateModelFactory() {
* #getter
*/
get showMsaLetters() {
return self.drawMsaLetters && self.rowHeight >= 5
return self.drawMsaLetters && self.rowHeight >= 6 && self.colWidth >= 5
},
/**
* #getter
*/
get showTreeText() {
return self.drawLabels && self.rowHeight >= 5
return self.drawLabels && self.rowHeight >= 6
},
}))
.actions(self => ({
Expand Down Expand Up @@ -1123,6 +1129,9 @@ function stateModelFactory() {
}
return types
},
/**
* #getter
*/
get tidyAnnotations() {
const ret = []
const { interProAnnotations } = self
Expand Down Expand Up @@ -1346,6 +1355,9 @@ function stateModelFactory() {
// xref solution https://github.com/mobxjs/mobx/issues/266#issuecomment-222007278
// xref problem https://github.com/GMOD/react-msaview/issues/75
self.colStats
self.colStatsSums
self.offscreenFillTextCache
self.columns
}),
)

Expand Down
Loading

0 comments on commit ab0cc65

Please sign in to comment.