')
+ object.text('Separate tracks')
+
+ function click(e) {
+
+ const configs = this.config.tracks.map(overlayConfig => {
+ const config = { ...overlayConfig }
+ config.isMergedTrack = undefined
+ config.order = this.order
+ return config
+ })
+
+ const _browser = this.browser
+
+ _browser.removeTrack(this)
+ _browser.loadTrackList(configs)
+ }
+
+ return { object, click }
+}
+
function groupAutoScaleMenuItem() {
const object = $('
')
@@ -130,18 +188,20 @@ function groupAutoScaleMenuItem() {
function click(e) {
- const trackViews = getMultiSelectedTrackViews(this.browser)
+ const colorPalette = colorPalettes['Dark2']
+ const randomIndex = Math.floor(Math.random() * colorPalette.length)
- const autoScaleGroupID = `auto-scale-group-${DOMUtils.guid()}`
+ const autoScaleGroupID = `auto-scale-group-${ DOMUtils.guid() }`
+ autoScaleGroupColorHash[ autoScaleGroupID ] = colorPalette[randomIndex]
- for (const trackView of trackViews) {
- trackView.track.autoscaleGroup = autoScaleGroupID
+ for (const { track } of this.browser.multiSelectedTrackViews) {
+ track.autoscaleGroup = autoScaleGroupID
}
this.browser.updateViews()
}
- return { object, click }
+ return { object, doAllMultiSelectedTracks:true, click }
}
@@ -161,6 +221,8 @@ function trackOverlayMenuItem() {
const wigConfigs = wigTracks.map(( track ) => {
const config = Object.assign({}, track.config)
config.color = track.color
+ config.autoscale = track.autoscale
+ config.autoscaleGroup = track.autoscaleGroup
return config
})
@@ -187,31 +249,8 @@ function trackOverlayMenuItem() {
}
- return { object, doTrackOverlay:true, click }
-
-}
-
-function trackSeparationMenuItem() {
-
- const object = $('
')
- object.text('Separate tracks')
-
- function click(e) {
-
- const configs = this.config.tracks.map(overlayConfig => {
- const config = { ...overlayConfig }
- config.isMergedTrack = undefined
- config.order = this.order
- return config
- })
-
- const _browser = this.browser
-
- _browser.removeTrack(this)
- _browser.loadTrackList(configs)
- }
+ return { object, doAllMultiSelectedTracks:true, click }
- return { object, click }
}
function visibilityWindowMenuItem() {
@@ -438,7 +477,7 @@ function getMultiSelectedTrackViews(browser) {
const candidates = browser.trackViews.filter(({ track }) => { return false === multiTrackSelectExclusionTypes.has(track.type) })
- let selected = candidates.filter(({ namespace, dragHandle }) => { return namespace === dragHandle.dataset.selected })
+ let selected = candidates.filter(trackView => true === trackView.track.isMultiSelection)
selected = 0 === selected.length ? undefined : selected
@@ -450,6 +489,6 @@ function isMultiSelectedTrackView(trackView) {
return selected && selected.length > 1 && new Set(selected).has(trackView)
}
-export { canShowColorPicker, multiTrackSelectExclusionTypes, getMultiSelectedTrackViews, isMultiSelectedTrackView }
+export { autoScaleGroupColorHash, canShowColorPicker, multiTrackSelectExclusionTypes, getMultiSelectedTrackViews, isMultiSelectedTrackView }
export default MenuUtils
diff --git a/js/ui/multiTrackSelectButton.js b/js/ui/multiTrackSelectButton.js
index 4a834e6d9..0bc3e07a8 100644
--- a/js/ui/multiTrackSelectButton.js
+++ b/js/ui/multiTrackSelectButton.js
@@ -55,11 +55,17 @@ function setMultiTrackSelectionState(trackView, axis, doEnableMultiSelection) {
container.style.display = 'grid'
} else {
+ trackView.track.isMultiSelection = false
+
+ // if (trackView.track.autoscaleGroup) {
+ // trackView.track.autoscaleGroup = undefined
+ // }
+
const trackSelectInput = container.querySelector('[name=track-select]')
trackSelectInput.checked = false
if (trackView.dragHandle) {
- setDragHandleSelectionState(trackView, trackView.dragHandle, trackSelectInput.checked)
+ setDragHandleSelectionState(trackView, trackView.dragHandle, false)
}
container.style.display = 'none'
@@ -71,12 +77,10 @@ function setMultiTrackSelectionState(trackView, axis, doEnableMultiSelection) {
function setDragHandleSelectionState(trackView, dragHandle, isSelected) {
if (isSelected) {
- dragHandle.dataset.selected = trackView.namespace
dragHandle.classList.remove('igv-track-drag-handle-color')
dragHandle.classList.remove('igv-track-drag-handle-hover-color')
dragHandle.classList.add('igv-track-drag-handle-selected-color')
} else {
- dragHandle.dataset.selected = 'no'
dragHandle.classList.remove('igv-track-drag-handle-hover-color')
dragHandle.classList.remove('igv-track-drag-handle-selected-color')
dragHandle.classList.add('igv-track-drag-handle-color')
diff --git a/js/util/colorPalletes.js b/js/util/colorPalletes.js
index 9731e893c..46c347e72 100644
--- a/js/util/colorPalletes.js
+++ b/js/util/colorPalletes.js
@@ -523,6 +523,7 @@ function rgbStringHeatMapLerp(_a, _b, interpolant) {
}
export {
+ colorPalettes,
appleCrayonRGB,
appleCrayonRGBA,
appleCrayonPalette,
diff --git a/js/util/paintAxis.js b/js/util/paintAxis.js
index 364fe9ab2..5a1a06b77 100644
--- a/js/util/paintAxis.js
+++ b/js/util/paintAxis.js
@@ -1,59 +1,47 @@
import IGVGraphics from "../igv-canvas.js"
-function paintAxis(ctx, pixelWidth, pixelHeight) {
-
- var x1,
- x2,
- y1,
- y2,
- a,
- b,
- reference,
- shim,
- font = {
- 'font': 'normal 10px Arial',
- 'textAlign': 'right',
- 'strokeStyle': "black"
- }
+const shim = .01
+const diagnosticColor = "rgb(251,128,114)"
+const colorStripWidth = 4
+const axesXOffset = colorStripWidth + 1
+function paintAxis(ctx, width, height, colorOrUndefined) {
if (undefined === this.dataRange || undefined === this.dataRange.max || undefined === this.dataRange.min) {
return
}
- let flipAxis = (undefined === this.flipAxis) ? false : this.flipAxis
-
- // IGVGraphics.fillRect(ctx, 0, 0, pixelWidth, pixelHeight, {'fillStyle': "rgb(255, 255, 255)"})
- IGVGraphics.fillRect(ctx, 0, 0, pixelWidth, pixelHeight, {'fillStyle': "rgba(255, 255, 255, 0)"})
+ IGVGraphics.fillRect(ctx, 0, 0, width, height, { fillStyle: 'white' })
+ if (colorOrUndefined) {
+ IGVGraphics.fillRect(ctx, width - colorStripWidth - 2, 0, colorStripWidth, height, { fillStyle: colorOrUndefined })
+ }
- reference = 0.95 * pixelWidth
- x1 = reference - 8
- x2 = reference
+ const flipAxis = (undefined === this.flipAxis) ? false : this.flipAxis
- //shim = 0.5 * 0.125;
- shim = .01
- y1 = y2 = shim * pixelHeight
+ const xTickStart = 0.95 * width - 8 - axesXOffset
+ const xTickEnd = 0.95 * width - axesXOffset
- a = {x: x2, y: y1}
+ const properties =
+ {
+ font: 'normal 10px Arial',
+ textAlign: 'right',
+ fillStyle: 'black',
+ strokeStyle: 'black',
+ }
// tick
- IGVGraphics.strokeLine(ctx, x1, y1, x2, y2, font)
- IGVGraphics.fillText(ctx, prettyPrint(flipAxis ? this.dataRange.min : this.dataRange.max), x1 + 4, y1 + 12, font)
-
- //shim = 0.25 * 0.125;
- y1 = y2 = (1.0 - shim) * pixelHeight
+ IGVGraphics.strokeLine(ctx, xTickStart, shim * height, xTickEnd, shim * height, properties)
+ IGVGraphics.fillText(ctx, prettyPrint(flipAxis ? this.dataRange.min : this.dataRange.max), xTickStart + 4, shim * height + 12, properties)
- b = {x: x2, y: y1}
+ const y = (1.0 - shim) * height
// tick
- IGVGraphics.strokeLine(ctx, x1, y1, x2, y2, font)
- IGVGraphics.fillText(ctx, prettyPrint(flipAxis ? this.dataRange.max : this.dataRange.min), x1 + 4, y1 - 4, font)
+ IGVGraphics.strokeLine(ctx, xTickStart, y, xTickEnd, y, properties)
+ IGVGraphics.fillText(ctx, prettyPrint(flipAxis ? this.dataRange.max : this.dataRange.min), xTickStart + 4, y - 4, properties)
- IGVGraphics.strokeLine(ctx, a.x, a.y, b.x, b.y, font)
+ // vertical axis
+ IGVGraphics.strokeLine(ctx, xTickEnd, shim * height, xTickEnd, y, properties)
function prettyPrint(number) {
- // if number >= 100, show whole number
- // if >= 1 show 1 significant digits
- // if < 1 show 2 significant digits
if (number === 0) {
return "0"
diff --git a/package.json b/package.json
index 175856d93..5c062541b 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
"circular-view": "github:igvteam/circular-view#v0.2.4",
"eslint": "^6.4.0",
"hdf5-indexed-reader": "github:jrobinso/hdf5-indexed-reader#v0.5.2",
- "igv-ui": "github:igvteam/igv-ui#v1.5.2",
+ "igv-ui": "github:igvteam/igv-ui#dat_slider_dialog",
"igv-utils": "github:igvteam/igv-utils#v1.4.8",
"mocha": "^10.2.0",
"rollup": "^2.66.0",