From 2927ff6ddcf3eb7709cdb4d96a22b3522a1dcf57 Mon Sep 17 00:00:00 2001 From: Alexander Serdyukov Date: Mon, 18 May 2026 20:39:03 +0400 Subject: [PATCH 01/46] O/E per scaffold testing --- .../upper_ribbon/FileWizardModal.vue | 22 ++++++++++++++----- .../components/upper_ribbon/HeaderRibbon.vue | 2 +- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/app/ui/components/upper_ribbon/FileWizardModal.vue b/src/app/ui/components/upper_ribbon/FileWizardModal.vue index 01c7cc1..5a12dd0 100644 --- a/src/app/ui/components/upper_ribbon/FileWizardModal.vue +++ b/src/app/ui/components/upper_ribbon/FileWizardModal.vue @@ -203,6 +203,10 @@ +
+ Expected and O/E are computed independently inside each scaffold. If the opened assembly has no + scaffolds yet, each contig is treated as its own scaffold for expected-value estimation. +
@@ -732,6 +736,13 @@ const findPresetIdByName = (name: string): string => availablePresets.value[0]?.id ?? ""; +const usesExpectedPreset = computed( + () => + primaryPreset.value?.preset.options.signalDisplayMode !== "OBSERVED" || + (requiresSecondarySource.value && + secondaryPreset.value?.preset.options.signalDisplayMode !== "OBSERVED") +); + const canRunWizard = computed(() => wizardBlockingIssues.value.length === 0); const wizardBlockingIssues = computed(() => { const issues: string[] = []; @@ -762,11 +773,7 @@ const wizardBlockingIssues = computed(() => { "Bundled/external hictk toolchain is required for .hic conversion but is currently unavailable." ); } - const usesExpectedPreset = - primaryPreset.value?.preset.options.signalDisplayMode !== "OBSERVED" || - (requiresSecondarySource.value && - secondaryPreset.value?.preset.options.signalDisplayMode !== "OBSERVED"); - if (viewMode.value !== "single" && usesExpectedPreset) { + if (viewMode.value !== "single" && usesExpectedPreset.value) { issues.push( "Expected and O/E presets are currently supported only in single-map mode. Use Observed presets for overlay and upper/lower rendering." ); @@ -810,6 +817,11 @@ const wizardNotes = computed(() => { "Both AGPs are selected. This is supported for comparison, but the resulting two-source view may become intentionally unaligned after assembly edits." ); } + if (usesExpectedPreset.value) { + notes.push( + "Expected and O/E are computed inside each scaffold. If the assembly has no scaffolds yet, each contig is treated as its own scaffold." + ); + } return Array.from(new Set(notes)); }); diff --git a/src/app/ui/components/upper_ribbon/HeaderRibbon.vue b/src/app/ui/components/upper_ribbon/HeaderRibbon.vue index ca8abb6..42fbc76 100644 --- a/src/app/ui/components/upper_ribbon/HeaderRibbon.vue +++ b/src/app/ui/components/upper_ribbon/HeaderRibbon.vue @@ -110,7 +110,7 @@ - - - +
+
diff --git a/src/app/ui/components/upper_ribbon/CoolerConverter.vue b/src/app/ui/components/upper_ribbon/CoolerConverter.vue index 8f041d1..21e8504 100644 --- a/src/app/ui/components/upper_ribbon/CoolerConverter.vue +++ b/src/app/ui/components/upper_ribbon/CoolerConverter.vue @@ -121,6 +121,16 @@

Output: {{ deriveOutputFilename(selectedCoolerFilename) }}

+
+ .hic assembly layout: + .hic files do not reliably encode the contig/scaffold layout used by + Juicebox Assembly Tool. Keep the matching .assembly + or AGP file next to the dataset; load an AGP after conversion + when scaffolding coordinates are required. +

{{ singleBlockedMessage }}

diff --git a/src/app/ui/components/upper_ribbon/FileWizardModal.vue b/src/app/ui/components/upper_ribbon/FileWizardModal.vue index 5a12dd0..12c94ee 100644 --- a/src/app/ui/components/upper_ribbon/FileWizardModal.vue +++ b/src/app/ui/components/upper_ribbon/FileWizardModal.vue @@ -812,6 +812,14 @@ const wizardNotes = computed(() => { "Secondary AGP input is best treated as comparative metadata. Use the primary AGP as the authoritative assembly when scaffolding operations are expected." ); } + const selectedHicSources = [primarySource, secondarySource] + .filter((source, index) => index === 0 || requiresSecondarySource.value) + .filter((source) => source.filename.toLowerCase().endsWith(".hic")); + if (selectedHicSources.length > 0) { + notes.push( + ".hic sources do not reliably carry Juicebox/JBAT scaffold layout. Select the matching AGP after conversion; if the project only has a .assembly file, convert it to AGP before scaffolding-sensitive work." + ); + } if (primaryAgp.value && secondaryAgp.value) { notes.push( "Both AGPs are selected. This is supported for comparison, but the resulting two-source view may become intentionally unaligned after assembly edits." diff --git a/src/app/ui/components/upper_ribbon/NavigationBar.vue b/src/app/ui/components/upper_ribbon/NavigationBar.vue index c05d9fc..f8f00a5 100644 --- a/src/app/ui/components/upper_ribbon/NavigationBar.vue +++ b/src/app/ui/components/upper_ribbon/NavigationBar.vue @@ -36,6 +36,11 @@ >File
    +
  • + Wizard... +
  • Open...Save
    • --> -
  • - Wizard... -
  • Close { const darkBackground = styleStore.mapBackgroundColor.L <= 55; - const top = buildColorExpressionFromVisualizationOptions("PRIMARY", { + const bottom = buildColorExpressionFromVisualizationOptions("PRIMARY", { preLogBase: -1, postLogBase: -1, applyCoolerWeights: true, @@ -556,7 +556,7 @@ const buildDotplotOverlayPreset = (): { minSignal: 0, maxSignal: 0.003, }); - const bottom = buildColorExpressionFromVisualizationOptions("SECONDARY", { + const top = buildColorExpressionFromVisualizationOptions("SECONDARY", { preLogBase: -1, postLogBase: -1, applyCoolerWeights: false, From ccd8c6681fb12fa9167c16a66d8a8cbf61356d45 Mon Sep 17 00:00:00 2001 From: Alexander Serdyukov Date: Sun, 24 May 2026 02:24:16 +0400 Subject: [PATCH 15/46] 1D tracks range and axes fixes, preprocessing before open, hover overlay. Wizard Finish glitch fixed. Primary/secondary source selection for visualization options controls. Exported maps are saved to the directory or asked user. Ruler labels upgrades. --- src-tauri/build.rs | 5 +- src-tauri/capabilities/localhost-webui.json | 4 +- src-tauri/src/main.rs | 43 ++++- src/app/core/controls/RulerControl.ts | 58 +++++-- src/app/core/mapmanagers/ContactMapManager.ts | 65 +++++-- .../core/mapmanagers/LinearTrackManager.ts | 131 ++++++++++++--- .../core/mapmanagers/VisualizationManager.ts | 159 +++++++++++++++++- src/app/core/net/api/RequestManager.ts | 6 + src/app/core/net/api/request.ts | 3 + src/app/core/net/api/response.ts | 5 +- src/app/core/net/dto/requestDTO.ts | 3 + src/app/core/net/dto/responseDTO.ts | 5 +- .../visualization/renderPipelineWizard.ts | 20 ++- src/app/stores/matrixViewStore.ts | 8 + .../components/sidebar/SavedVisualOptions.vue | 27 ++- .../sidebar/SavedVisualOptionsElement.vue | 20 ++- .../components/tracks/HorizontalIGVTrack.vue | 36 +++- .../ui/components/tracks/VerticalIGVTrack.vue | 36 +++- .../upper_ribbon/FileWizardModal.vue | 17 +- .../upper_ribbon/NormalizationSelector.vue | 83 ++++++++- .../components/upper_ribbon/TrackManager.vue | 72 ++++++++ src/electron/main/main.ts | 25 ++- src/electron/preload/preload.ts | 2 + 23 files changed, 727 insertions(+), 106 deletions(-) diff --git a/src-tauri/build.rs b/src-tauri/build.rs index 431a48f..50e3143 100644 --- a/src-tauri/build.rs +++ b/src-tauri/build.rs @@ -1,7 +1,10 @@ fn main() { tauri_build::try_build( tauri_build::Attributes::new() - .app_manifest(tauri_build::AppManifest::new().commands(&["quit_app"])), + .app_manifest(tauri_build::AppManifest::new().commands(&[ + "quit_app", + "save_export", + ])), ) .expect("failed to build HiCT Tauri browser metadata"); } diff --git a/src-tauri/capabilities/localhost-webui.json b/src-tauri/capabilities/localhost-webui.json index 744997b..27b0741 100644 --- a/src-tauri/capabilities/localhost-webui.json +++ b/src-tauri/capabilities/localhost-webui.json @@ -1,7 +1,7 @@ { "$schema": "../gen/schemas/desktop-schema.json", "identifier": "localhost-webui", - "description": "Allow the local HiCT WebUI served by HiCT_JVM to call the small Tauri wrapper quit command.", + "description": "Allow the local HiCT WebUI served by HiCT_JVM to call the small Tauri wrapper commands.", "windows": ["main"], "remote": { "urls": [ @@ -9,5 +9,5 @@ "http://127.0.0.1:*" ] }, - "permissions": ["allow-quit-app"] + "permissions": ["allow-quit-app", "allow-save-export"] } diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index 847cea1..f52294b 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -1,6 +1,6 @@ #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] -use std::{env, net::IpAddr, process}; +use std::{env, fs, net::IpAddr, path::PathBuf, process}; use tauri::{WebviewUrl, WebviewWindowBuilder}; use url::Url; @@ -11,6 +11,45 @@ fn quit_app(app: tauri::AppHandle) { app.exit(0); } +#[tauri::command] +fn save_export(filename: String, bytes: Vec) -> Result { + let safe_filename = sanitize_export_filename(&filename); + let export_dir = export_directory()?; + fs::create_dir_all(&export_dir) + .map_err(|error| format!("failed to create export directory {export_dir:?}: {error}"))?; + let output_path = export_dir.join(safe_filename); + fs::write(&output_path, bytes) + .map_err(|error| format!("failed to write export {output_path:?}: {error}"))?; + Ok(output_path.to_string_lossy().to_string()) +} + +fn export_directory() -> Result { + let base = env::var("HICT_EXPORT_DIR") + .ok() + .or_else(|| env::var("HICT_DATA_DIR").ok()) + .map(PathBuf::from) + .or_else(|| env::current_dir().ok()) + .ok_or_else(|| "failed to resolve export directory".to_string())?; + Ok(base.join("hict-export")) +} + +fn sanitize_export_filename(filename: &str) -> String { + let candidate = filename + .trim() + .chars() + .map(|character| match character { + '/' | '\\' | ':' | '*' | '?' | '"' | '<' | '>' | '|' => '_', + _ if character.is_control() => '_', + _ => character, + }) + .collect::(); + if candidate.is_empty() { + "hict-export.bin".to_string() + } else { + candidate + } +} + fn requested_url() -> String { env::args() .skip(1) @@ -68,7 +107,7 @@ fn main() { }; tauri::Builder::default() - .invoke_handler(tauri::generate_handler![quit_app]) + .invoke_handler(tauri::generate_handler![quit_app, save_export]) .setup(move |app| { WebviewWindowBuilder::new(app, "main", WebviewUrl::External(webui_url.clone())) .title("HiCT") diff --git a/src/app/core/controls/RulerControl.ts b/src/app/core/controls/RulerControl.ts index d9e7b91..b26b20a 100644 --- a/src/app/core/controls/RulerControl.ts +++ b/src/app/core/controls/RulerControl.ts @@ -318,8 +318,8 @@ class RulerControl extends Control { const FONT_STRING = `bold ${FONT_SIZE_PX}px serif`; const LAST_TICK_MARGIN = Math.round(tickInterval / 2); let tickIndex = 0; - let previousAbsoluteLabel: string | null = null; - let previousAbsoluteBp: number | null = null; + let previousAnchorLabel: string | null = null; + let previousAnchorBp: number | null = null; for ( let coord: [number, number] = [start[0], start[1]]; coord[0] < end[0] - LAST_TICK_MARGIN || @@ -342,11 +342,11 @@ class RulerControl extends Control { FONT_SIZE_PX, FONT_STRING, tickIndex, - previousAbsoluteLabel, - previousAbsoluteBp + previousAnchorLabel, + previousAnchorBp ); - previousAbsoluteLabel = tickState.absoluteLabel; - previousAbsoluteBp = tickState.absoluteBp; + previousAnchorLabel = tickState.anchorLabel; + previousAnchorBp = tickState.anchorBp; tickIndex++; } this.drawTickAtPxOffset( @@ -364,8 +364,8 @@ class RulerControl extends Control { FONT_SIZE_PX, FONT_STRING, tickIndex, - previousAbsoluteLabel, - previousAbsoluteBp + previousAnchorLabel, + previousAnchorBp ); } // Actually, if false, allows drawing smaller grid, currently disabled @@ -466,9 +466,9 @@ class RulerControl extends Control { FONT_SIZE_PX: number, FONT_STRING: string, tickIndex: number, - previousAbsoluteLabel: string | null, - previousAbsoluteBp: number | null - ): { absoluteLabel: string; absoluteBp: number } { + previousAnchorLabel: string | null, + previousAnchorBp: number | null + ): { anchorLabel: string; anchorBp: number } { coord = coord.map(Math.round) as [number, number]; const dPx = (() => { @@ -563,14 +563,22 @@ class RulerControl extends Control { })(); const fillBackground = this.opt_options.direction === "horizontal"; + const isLastTick = Math.abs(coord[0] - end[0]) <= 1 && Math.abs(coord[1] - end[1]) <= 1; const absoluteLabel = this.formatBpLabel(preBP, 0); + const absoluteAnchorBp = this.labelAnchorBp(preBP); const useDeltaLabel = + !isLastTick && tickIndex > 0 && - previousAbsoluteLabel !== null && - previousAbsoluteBp !== null && - previousAbsoluteLabel === absoluteLabel && - preBP > previousAbsoluteBp; - const label = useDeltaLabel ? this.formatBpLabel(preBP, 1) : absoluteLabel; + previousAnchorLabel !== null && + previousAnchorBp !== null && + preBP > previousAnchorBp; + const label = useDeltaLabel + ? `+${this.formatBpLabel(preBP - previousAnchorBp, 0)}` + : absoluteLabel; + const nextAnchorLabel = useDeltaLabel ? previousAnchorLabel : absoluteLabel; + const nextAnchorBp = useDeltaLabel + ? previousAnchorBp ?? absoluteAnchorBp + : absoluteAnchorBp; const fontSize = useDeltaLabel ? Math.max(9, FONT_SIZE_PX - 2) : Math.max(11, FONT_SIZE_PX + 2); @@ -594,8 +602,8 @@ class RulerControl extends Control { fillBackground ); return { - absoluteLabel, - absoluteBp: preBP, + anchorLabel: nextAnchorLabel, + anchorBp: nextAnchorBp, }; } @@ -613,6 +621,20 @@ class RulerControl extends Control { return `${scaled.toFixed(digits).replace(/\.0+$/, "")}${suffix}`; } + private labelAnchorBp(bp: number): number { + const value = Math.max(0, Math.round(bp)); + if (value >= 1_000_000_000) { + return Math.floor(value / 1_000_000_000) * 1_000_000_000; + } + if (value >= 1_000_000) { + return Math.floor(value / 1_000_000) * 1_000_000; + } + if (value >= 1_000) { + return Math.floor(value / 1_000) * 1_000; + } + return value; + } + protected drawRotatedText( text: string, x: number, diff --git a/src/app/core/mapmanagers/ContactMapManager.ts b/src/app/core/mapmanagers/ContactMapManager.ts index 215e815..4150ebc 100644 --- a/src/app/core/mapmanagers/ContactMapManager.ts +++ b/src/app/core/mapmanagers/ContactMapManager.ts @@ -948,11 +948,7 @@ class ContactMapManager { ``; } const blob = new Blob([svg], { type: "image/svg+xml" }); - const a = document.createElement("a"); - a.download = `${this.options.filename}.svg`; - a.href = URL.createObjectURL(blob); - a.click(); - URL.revokeObjectURL(a.href); + await this.saveExportBlob(blob, `${this.options.filename}.svg`); } public async exportCurrentMapPng( @@ -973,18 +969,15 @@ class ContactMapManager { if (options?.includeWorkspaceComposite === true) { progressCallback?.(1); } - await new Promise((resolve) => { + await new Promise((resolve, reject) => { canvas.toBlob((blob) => { if (!blob) { resolve(); return; } - const a = document.createElement("a"); - a.download = `${this.options.filename}.png`; - a.href = URL.createObjectURL(blob); - a.click(); - URL.revokeObjectURL(a.href); - resolve(); + this.saveExportBlob(blob, `${this.options.filename}.png`) + .then(resolve) + .catch(reject); }, "image/png"); }); } @@ -1016,7 +1009,53 @@ class ContactMapManager { format: [canvas.width, canvas.height], }); pdf.addImage(dataUrl, "PNG", 0, 0, canvas.width, canvas.height); - pdf.save(`${this.options.filename}.pdf`); + const blob = pdf.output("blob"); + await this.saveExportBlob(blob, `${this.options.filename}.pdf`); + } + + private async saveExportBlob(blob: Blob, filename: string): Promise { + const sanitizedFilename = ContactMapManager.sanitizeDownloadFilename(filename); + const desktopBridge = (window as unknown as { + hictDesktop?: { + saveExport?: (payload: { + filename: string; + bytes: number[]; + }) => Promise | unknown; + }; + }).hictDesktop; + if (typeof desktopBridge?.saveExport === "function") { + const bytes = Array.from(new Uint8Array(await blob.arrayBuffer())); + await Promise.resolve( + desktopBridge.saveExport({ filename: sanitizedFilename, bytes }) + ); + return; + } + + const tauriBridge = (window as unknown as { + __TAURI__?: { + core?: { + invoke?: (command: string, args?: Record) => Promise; + }; + invoke?: (command: string, args?: Record) => Promise; + }; + }).__TAURI__; + const invoke = tauriBridge?.core?.invoke ?? tauriBridge?.invoke; + if (typeof invoke === "function") { + const bytes = Array.from(new Uint8Array(await blob.arrayBuffer())); + await invoke("save_export", { filename: sanitizedFilename, bytes }); + return; + } + + const a = document.createElement("a"); + a.download = sanitizedFilename; + a.href = URL.createObjectURL(blob); + a.click(); + URL.revokeObjectURL(a.href); + } + + private static sanitizeDownloadFilename(filename: string): string { + const safe = filename.replace(/[\\/:*?"<>|\u0000-\u001f]/g, "_").trim(); + return safe.length > 0 ? safe : "hict-export.bin"; } private exportTracksSvg(bpResolution: number): string { diff --git a/src/app/core/mapmanagers/LinearTrackManager.ts b/src/app/core/mapmanagers/LinearTrackManager.ts index e12b932..53468c8 100644 --- a/src/app/core/mapmanagers/LinearTrackManager.ts +++ b/src/app/core/mapmanagers/LinearTrackManager.ts @@ -274,6 +274,9 @@ class LinearTrackManager { renderMode?: string; aggregationMode?: string; logScale?: boolean; + rangeAuto?: boolean; + rangeMin?: number; + rangeMax?: number; } ): Promise { await this.mapManager.networkManager.requestManager.updateTrack( @@ -437,6 +440,15 @@ class LinearTrackManager { axisOffsetPx: number, crossOffsetPx: number ): FeatureHoverInfo | null { + const hit = this.getTrackHoverAt(orientation, axisOffsetPx, crossOffsetPx); + return hit?.kind === "feature" ? hit : null; + } + + public getTrackHoverAt( + orientation: Orientation, + axisOffsetPx: number, + crossOffsetPx: number + ): TrackHoverInfo | null { const snapshot = this.lastRenderedSnapshot[orientation]; if (!snapshot || snapshot.tracks.length === 0) { return null; @@ -453,14 +465,12 @@ class LinearTrackManager { return null; } const track = snapshot.tracks[laneIndex]; - if ((track.renderStyle ?? "SIGNAL").toUpperCase() !== "FEATURE") { - return null; - } const laneStart = laneIndex * laneSize; const laneEnd = laneStart + laneSize; if (crossOffsetPx < laneStart || crossOffsetPx > laneEnd) { return null; } + const renderStyle = (track.renderStyle ?? "SIGNAL").toUpperCase(); for (const bin of track.bins) { const interval = this.resolveBinIntervalPx(bin, snapshot.viewport.bpResolution); if (!interval.visible) { @@ -477,9 +487,22 @@ class LinearTrackManager { if (axisOffsetPx < start || axisOffsetPx > end) { continue; } + if (renderStyle !== "FEATURE") { + return { + kind: "signal", + trackId: track.trackId, + trackName: track.name, + trackType: track.type, + startBp: Math.min(bin.startBp, bin.endBp), + endBp: Math.max(bin.startBp, bin.endBp), + value: Number.isFinite(bin.value) ? bin.value : 0, + count: bin.count, + }; + } const label = (bin.label ?? "").trim(); const featureType = (bin.featureType ?? "").trim(); return { + kind: "feature", trackId: track.trackId, trackName: track.name, label: label.length > 0 ? label : null, @@ -927,11 +950,16 @@ class LinearTrackManager { const useLogScale = renderStyle === "SIGNAL" && !!trackSummary?.logScale; const logBase = this.getTrackLogBase(track.trackId); - const maxValue = + const signalRange = renderStyle === "SIGNAL" - ? this.getVisibleSignalMax(track.bins, viewport, bpResolution) - : Math.max(track.maxValue, 0); - const scaleTransform = this.buildScaleTransform(maxValue, useLogScale, logBase); + ? this.resolveSignalRange(trackSummary, track.bins, viewport, bpResolution) + : { min: 0, max: Math.max(track.maxValue, 0) }; + const scaleTransform = this.buildScaleTransform( + signalRange.min, + signalRange.max, + useLogScale, + logBase + ); const binsToRender = renderStyle === "FEATURE" ? this.sortFeatureBinsForDraw(track.bins) @@ -1717,6 +1745,27 @@ class LinearTrackManager { return maxValue; } + private resolveSignalRange( + trackSummary: TrackSummaryResponse | undefined, + bins: TrackBinResponse[], + viewport: ViewportGeometry, + bpResolution: number + ): { min: number; max: number } { + if ( + trackSummary && + trackSummary.rangeAuto === false && + Number.isFinite(trackSummary.rangeMin) && + Number.isFinite(trackSummary.rangeMax) && + trackSummary.rangeMax > trackSummary.rangeMin + ) { + return { min: trackSummary.rangeMin, max: trackSummary.rangeMax }; + } + return { + min: 0, + max: this.getVisibleSignalMax(bins, viewport, bpResolution), + }; + } + private resolveBinIntervalPx( bin: TrackBinResponse, bpResolution: number @@ -1755,13 +1804,16 @@ class LinearTrackManager { } private formatScaleValue(value: number): string { - if (!Number.isFinite(value) || value <= 0) { + if (!Number.isFinite(value)) { + return "n/a"; + } + if (value === 0) { return "0"; } - if (value >= 1000 || value < 0.01) { + if (Math.abs(value) >= 1000 || Math.abs(value) < 0.01) { return value.toExponential(2); } - if (value >= 10) { + if (Math.abs(value) >= 10) { return value.toFixed(1); } return value.toFixed(3); @@ -1776,39 +1828,48 @@ class LinearTrackManager { } private buildScaleTransform( + minValue: number, maxValue: number, logScale: boolean, logBase: number ): SignalScaleTransform { + const safeMin = Number.isFinite(minValue) ? minValue : 0; const safeMax = - Number.isFinite(maxValue) && maxValue > 0 ? maxValue : 1; + Number.isFinite(maxValue) && maxValue > safeMin ? maxValue : safeMin + 1; + const span = Math.max(Number.EPSILON, safeMax - safeMin); if (!logScale) { return { logScale: false, + minValue: safeMin, maxValue: safeMax, logBase: 10, - display: (value: number) => (Number.isFinite(value) ? Math.max(0, value) : 0), + display: (value: number) => (Number.isFinite(value) ? value : safeMin), normalize: (value: number) => - Math.max(0, Math.min(1, (Number.isFinite(value) ? value : 0) / safeMax)), + Math.max( + 0, + Math.min(1, ((Number.isFinite(value) ? value : safeMin) - safeMin) / span) + ), }; } const safeBase = Number.isFinite(logBase) && logBase > 1 ? logBase : 10; const logDenominator = Math.log(safeBase); - const toLog = (value: number): number => Math.log1p(Math.max(0, value)) / logDenominator; + const toLog = (value: number): number => + Math.log1p(Math.max(0, value - safeMin)) / logDenominator; const maxLog = toLog(safeMax); const safeMaxLog = Number.isFinite(maxLog) && maxLog > 0 ? maxLog : 1; return { logScale: true, + minValue: safeMin, maxValue: safeMax, logBase: safeBase, display: (value: number) => { - if (!Number.isFinite(value) || value <= 0) { - return 0; + if (!Number.isFinite(value)) { + return safeMin; } - return toLog(value); + return value; }, normalize: (value: number) => { - if (!Number.isFinite(value) || value <= 0) { + if (!Number.isFinite(value) || value <= safeMin) { return 0; } return Math.max(0, Math.min(1, toLog(value) / safeMaxLog)); @@ -2020,14 +2081,15 @@ class LinearTrackManager { pixelSpan: number ): number[] { const maxTickCount = Math.max(2, Math.min(7, Math.floor(pixelSpan / 16))); - const maxValue = Math.max(scale.maxValue, 0); - if (!Number.isFinite(maxValue) || maxValue <= 0) { - return [0]; + const minValue = Number.isFinite(scale.minValue) ? scale.minValue : 0; + const maxValue = Number.isFinite(scale.maxValue) ? scale.maxValue : minValue + 1; + if (!Number.isFinite(maxValue) || maxValue <= minValue) { + return [minValue]; } if (!scale.logScale) { - const step = this.niceStep(maxValue / Math.max(1, maxTickCount - 1)); - const ticks: number[] = [0]; - for (let value = step; value < maxValue; value += step) { + const step = this.niceStep((maxValue - minValue) / Math.max(1, maxTickCount - 1)); + const ticks: number[] = [minValue]; + for (let value = minValue + step; value < maxValue; value += step) { ticks.push(value); } ticks.push(maxValue); @@ -2035,11 +2097,11 @@ class LinearTrackManager { } const safeBase = Number.isFinite(scale.logBase) && scale.logBase > 1 ? scale.logBase : 10; - const maxLog = Math.log1p(maxValue) / Math.log(safeBase); + const maxLog = Math.log1p(maxValue - minValue) / Math.log(safeBase); const stepLog = maxLog / Math.max(1, maxTickCount - 1); - const ticks: number[] = []; + const ticks: number[] = [minValue]; for (let i = 0; i < maxTickCount; i++) { - ticks.push(Math.max(0, Math.pow(safeBase, i * stepLog) - 1)); + ticks.push(minValue + Math.max(0, Math.pow(safeBase, i * stepLog) - 1)); } ticks.push(maxValue); return this.uniqueSortedTicks(ticks); @@ -2398,6 +2460,7 @@ type TrackQueryCache = { type SignalScaleTransform = { logScale: boolean; + minValue: number; maxValue: number; logBase: number; display: (value: number) => number; @@ -2417,6 +2480,7 @@ type FeatureSearchEntry = { }; type FeatureHoverInfo = { + kind: "feature"; trackId: string; trackName: string; label: string | null; @@ -2427,6 +2491,19 @@ type FeatureHoverInfo = { value: number; }; +type SignalHoverInfo = { + kind: "signal"; + trackId: string; + trackName: string; + trackType: string; + startBp: number; + endBp: number; + value: number; + count: number; +}; + +type TrackHoverInfo = FeatureHoverInfo | SignalHoverInfo; + type SelectedTrackFeature = { trackId: string; label: string; diff --git a/src/app/core/mapmanagers/VisualizationManager.ts b/src/app/core/mapmanagers/VisualizationManager.ts index 9d89eee..1e6d765 100644 --- a/src/app/core/mapmanagers/VisualizationManager.ts +++ b/src/app/core/mapmanagers/VisualizationManager.ts @@ -29,6 +29,10 @@ import VisualizationOptions from "../visualization/VisualizationOptions"; import SimpleLinearGradient from "../visualization/colormap/SimpleLinearGradient"; import type { EventsKey } from "ol/events"; import { unByKey } from "ol/Observable"; +import { + buildColorExpression, + type SourceName, +} from "../visualization/renderPipelineWizard"; type ViewportPixelBounds = { bpResolution: number; @@ -38,8 +42,6 @@ type ViewportPixelBounds = { endColPx: number; }; -type SourceName = "PRIMARY" | "SECONDARY"; - type PipelineSignalProfile = { source: SourceName; preLogBase: number | null; @@ -237,6 +239,69 @@ const collectColormapTargets = ( }); }; +const cloneRecord = (value: T): T => + JSON.parse(JSON.stringify(value)) as T; + +const isTransparentMinimumColor = (color: unknown): boolean => + typeof color === "string" && + /^#[0-9a-f]{8}$/i.test(color.trim()) && + color.trim().slice(7).toLowerCase() === "00"; + +const preserveMinimumAlpha = ( + nextColor: unknown, + previousColor: unknown +): unknown => { + if ( + typeof nextColor !== "string" || + !/^#[0-9a-f]{8}$/i.test(nextColor.trim()) || + !isTransparentMinimumColor(previousColor) + ) { + return nextColor; + } + return `${nextColor.trim().slice(0, 7)}00`; +}; + +const replaceColormapNode = ( + target: ColormapTarget, + replacement: Record +): void => { + const previousStartColor = target.node.startColor; + target.node.type = "colormap"; + target.node.mode = replacement.mode ?? "LINEAR"; + target.node.input = cloneRecord(replacement.input); + target.node.startColor = preserveMinimumAlpha( + replacement.startColor, + previousStartColor + ); + target.node.endColor = replacement.endColor; + target.node.minSignal = replacement.minSignal; + target.node.maxSignal = replacement.maxSignal; +}; + +const swapPixelBlendLayers = (expression: unknown): boolean => { + if (!isRecord(expression)) { + return false; + } + let changed = false; + if (String(expression.type ?? "").trim().toLowerCase() === "pixel_blend") { + const top = expression.top; + expression.top = expression.bottom; + expression.bottom = top; + const topOpacity = expression.topOpacity; + expression.topOpacity = expression.bottomOpacity; + expression.bottomOpacity = topOpacity; + changed = true; + } + ["input", "left", "right", "top", "bottom", "c1", "c2", "c3", "alpha"].forEach( + (key) => { + if (key in expression && swapPixelBlendLayers(expression[key])) { + changed = true; + } + } + ); + return changed; +}; + const transformSignalsForProfile = ( values: Float32Array, profile: PipelineSignalProfile, @@ -314,6 +379,28 @@ class VisualizationManager { return isRecord(config) && Boolean(config.enabled ?? false) ? config : null; } + private updateRenderPipelineSource( + config: Record, + source: SourceName, + options: VisualizationOptions + ): boolean { + const targets: ColormapTarget[] = []; + collectColormapTargets(config.upperExpression, targets); + collectColormapTargets(config.lowerExpression, targets); + const replacement = buildColorExpression(source, options) as unknown as Record< + string, + unknown + >; + let changed = false; + for (const target of targets) { + if (target.profile.source === source) { + replaceColormapNode(target, replacement); + changed = true; + } + } + return changed; + } + private resolveResolutionScalingCoefficients(): { quadratic: number; linear: number; @@ -507,7 +594,8 @@ class VisualizationManager { } private async syncPipelineAutoThresholdToViewport( - config?: Record + config?: Record, + sourceFilter?: SourceName ): Promise { const options = this.visualizationOptionsStore.asVisualizationOptions(); if (!options.autoThresholdEnabled) { @@ -525,7 +613,10 @@ class VisualizationManager { const targets: ColormapTarget[] = []; collectColormapTargets(activeConfig.upperExpression, targets); collectColormapTargets(activeConfig.lowerExpression, targets); - if (targets.length === 0) { + const filteredTargets = sourceFilter + ? targets.filter((target) => target.profile.source === sourceFilter) + : targets; + if (filteredTargets.length === 0) { return false; } @@ -533,7 +624,7 @@ class VisualizationManager { const thresholdCache = new Map(); let changed = false; - for (const target of targets) { + for (const target of filteredTargets) { const cacheKey = JSON.stringify(target.profile); let nextUpperBound = thresholdCache.get(cacheKey); if (nextUpperBound === undefined) { @@ -632,10 +723,64 @@ class VisualizationManager { return result; } - public async refreshAutoThresholdAndReload(): Promise { + public async applyVisualizationSettingsForSourceAndReload( + source: SourceName + ): Promise { + const pipelineConfig = await this.getActiveRenderPipelineConfig(); + if (!pipelineConfig) { + return this.applyVisualizationSettingsAndReload(); + } + + const options = this.visualizationOptionsStore.asVisualizationOptions(); + const updated = await this.sendVisualizationOptionsToServer({ + skipAutoThresholdRefresh: true, + preserveCustomPipeline: true, + }); + const changed = this.updateRenderPipelineSource(pipelineConfig, source, options); + if (!changed) { + await this.mapManager.reloadTilesFromBackend(); + return updated; + } + + await this.mapManager.networkManager.requestManager.setRenderPipelineConfig( + pipelineConfig + ); + if (options.autoThresholdEnabled) { + await this.syncPipelineAutoThresholdToViewport(pipelineConfig, source).catch( + () => false + ); + } + await this.mapManager.reloadTilesFromBackend(); + return updated; + } + + public async swapRenderPipelineLayersAndReload(): Promise { + const pipelineConfig = await this.getActiveRenderPipelineConfig(); + if (!pipelineConfig) { + return false; + } + let changed = false; + changed = swapPixelBlendLayers(pipelineConfig.upperExpression) || changed; + changed = swapPixelBlendLayers(pipelineConfig.lowerExpression) || changed; + if (!changed) { + const upperExpression = pipelineConfig.upperExpression; + pipelineConfig.upperExpression = pipelineConfig.lowerExpression; + pipelineConfig.lowerExpression = upperExpression; + changed = true; + } + await this.mapManager.networkManager.requestManager.setRenderPipelineConfig( + pipelineConfig + ); + await this.mapManager.reloadTilesFromBackend(); + return changed; + } + + public async refreshAutoThresholdAndReload( + source?: SourceName + ): Promise { const pipelineConfig = await this.getActiveRenderPipelineConfig(); if (pipelineConfig) { - await this.syncPipelineAutoThresholdToViewport(pipelineConfig); + await this.syncPipelineAutoThresholdToViewport(pipelineConfig, source); return null; } const nextUpperBound = await this.syncAutoThresholdToViewport(); diff --git a/src/app/core/net/api/RequestManager.ts b/src/app/core/net/api/RequestManager.ts index 1883ed1..74f37b9 100644 --- a/src/app/core/net/api/RequestManager.ts +++ b/src/app/core/net/api/RequestManager.ts @@ -494,6 +494,9 @@ class RequestManager { renderMode?: string; aggregationMode?: string; logScale?: boolean; + rangeAuto?: boolean; + rangeMin?: number; + rangeMax?: number; } ): Promise { return this.sendRequest( @@ -505,6 +508,9 @@ class RequestManager { renderMode: options.renderMode, aggregationMode: options.aggregationMode, logScale: options.logScale, + rangeAuto: options.rangeAuto, + rangeMin: options.rangeMin, + rangeMax: options.rangeMax, }) ) .then((response) => response.data) diff --git a/src/app/core/net/api/request.ts b/src/app/core/net/api/request.ts index c8f0d08..a18349a 100644 --- a/src/app/core/net/api/request.ts +++ b/src/app/core/net/api/request.ts @@ -485,6 +485,9 @@ class UpdateTrackRequest implements HiCTAPIRequest { readonly renderMode?: string; readonly aggregationMode?: string; readonly logScale?: boolean; + readonly rangeAuto?: boolean; + readonly rangeMin?: number; + readonly rangeMax?: number; } ) {} } diff --git a/src/app/core/net/api/response.ts b/src/app/core/net/api/response.ts index 892494e..8913a43 100644 --- a/src/app/core/net/api/response.ts +++ b/src/app/core/net/api/response.ts @@ -110,7 +110,10 @@ class TrackSummaryResponse { public readonly renderStyle: string, public readonly renderMode: string, public readonly aggregationMode: string, - public readonly logScale: boolean + public readonly logScale: boolean, + public readonly rangeAuto: boolean, + public readonly rangeMin: number, + public readonly rangeMax: number ) {} } diff --git a/src/app/core/net/dto/requestDTO.ts b/src/app/core/net/dto/requestDTO.ts index ca47642..6329eb2 100644 --- a/src/app/core/net/dto/requestDTO.ts +++ b/src/app/core/net/dto/requestDTO.ts @@ -720,6 +720,9 @@ class UpdateTrackRequestDTO extends HiCTAPIRequestDTO { renderMode: this.entity.options.renderMode, aggregationMode: this.entity.options.aggregationMode, logScale: this.entity.options.logScale, + rangeAuto: this.entity.options.rangeAuto, + rangeMin: this.entity.options.rangeMin, + rangeMax: this.entity.options.rangeMax, }; } } diff --git a/src/app/core/net/dto/responseDTO.ts b/src/app/core/net/dto/responseDTO.ts index b8e743e..600cc19 100644 --- a/src/app/core/net/dto/responseDTO.ts +++ b/src/app/core/net/dto/responseDTO.ts @@ -173,7 +173,10 @@ class TrackSummaryResponseDTO extends InboundDTO { (this.json["renderStyle"] as string) ?? "SIGNAL", (this.json["renderMode"] as string) ?? "COVERAGE", (this.json["aggregationMode"] as string) ?? "MAX", - (this.json["logScale"] as boolean) ?? false + (this.json["logScale"] as boolean) ?? false, + (this.json["rangeAuto"] as boolean) ?? true, + Number(this.json["rangeMin"] ?? 0), + Number(this.json["rangeMax"] ?? 1) ); } } diff --git a/src/app/core/visualization/renderPipelineWizard.ts b/src/app/core/visualization/renderPipelineWizard.ts index 7d6e285..3eccbd0 100644 --- a/src/app/core/visualization/renderPipelineWizard.ts +++ b/src/app/core/visualization/renderPipelineWizard.ts @@ -34,7 +34,7 @@ export type WizardBlendMode = | "DARKEN" | "XOR"; -type SourceName = "PRIMARY" | "SECONDARY"; +export type SourceName = "PRIMARY" | "SECONDARY"; type TrackAxis = "ROW" | "COL"; type PipelineExpression = @@ -161,7 +161,7 @@ const buildSignalExpression = ( return expression; }; -const buildColorExpression = ( +export const buildColorExpression = ( source: SourceName, options: VisualizationOptions ): PipelineExpression => { @@ -191,6 +191,18 @@ const buildColorExpression = ( }; }; +const withTransparentMinimumColor = ( + expression: PipelineExpression +): PipelineExpression => { + if (expression.type !== "colormap") { + return expression; + } + return { + ...expression, + startColor: `${expression.startColor.slice(0, 7)}00`, + }; +}; + export const buildWizardRenderPipelineConfig = (options: { viewMode: WizardViewMode; primaryOptions: VisualizationOptions; @@ -214,8 +226,8 @@ export const buildWizardRenderPipelineConfig = (options: { const overlay: PipelineExpression = { type: "pixel_blend", mode: options.blendMode ?? "OVER", - top: secondary, - bottom: primary, + top: withTransparentMinimumColor(primary), + bottom: withTransparentMinimumColor(secondary), topOpacity: typeof options.topOpacity === "number" ? options.topOpacity : 0.5, bottomOpacity: diff --git a/src/app/stores/matrixViewStore.ts b/src/app/stores/matrixViewStore.ts index 029daef..edf353f 100644 --- a/src/app/stores/matrixViewStore.ts +++ b/src/app/stores/matrixViewStore.ts @@ -8,6 +8,7 @@ export const useMatrixViewStore = defineStore("matrixViewStore", () => { const presentationMode = ref("single"); const horizontalFastaSource = ref("PRIMARY"); const verticalFastaSource = ref("PRIMARY"); + const activeVisualizationSource = ref("PRIMARY"); function setPresentationMode(mode: MatrixPresentationMode) { presentationMode.value = mode; @@ -21,18 +22,25 @@ export const useMatrixViewStore = defineStore("matrixViewStore", () => { verticalFastaSource.value = vertical; } + function setActiveVisualizationSource(source: MatrixSourceName) { + activeVisualizationSource.value = source; + } + function reset() { presentationMode.value = "single"; horizontalFastaSource.value = "PRIMARY"; verticalFastaSource.value = "PRIMARY"; + activeVisualizationSource.value = "PRIMARY"; } return { presentationMode, horizontalFastaSource, verticalFastaSource, + activeVisualizationSource, setPresentationMode, setSelectionFastaSources, + setActiveVisualizationSource, reset, }; }); diff --git a/src/app/ui/components/sidebar/SavedVisualOptions.vue b/src/app/ui/components/sidebar/SavedVisualOptions.vue index c5335fd..9c55f22 100644 --- a/src/app/ui/components/sidebar/SavedVisualOptions.vue +++ b/src/app/ui/components/sidebar/SavedVisualOptions.vue @@ -21,6 +21,27 @@ @@ -78,6 +90,11 @@ const featureTooltipVisible = ref(false); const featureTooltipTitle = ref(""); const featureTooltipRange = ref(""); const featureTooltipSecondary = ref(""); +const featureTooltipAttributes = ref>([]); const featureTooltipStyle = ref>({ left: "0px", top: "0px", @@ -161,7 +178,7 @@ const onMouseMoveFeature = (event: MouseEvent): void => { hit.kind === "feature" ? hit.label ?? hit.featureType ?? hit.trackName : hit.trackName; - featureTooltipRange.value = `${hit.startBp.toLocaleString()}-${hit.endBp.toLocaleString()} bp`; + featureTooltipRange.value = formatHoverRange(hit); const secondaryParts: string[] = []; if (hit.kind === "feature") { if (hit.featureType) { @@ -171,12 +188,14 @@ const onMouseMoveFeature = (event: MouseEvent): void => { secondaryParts.push(`strand ${hit.strand}`); } secondaryParts.push(hit.trackName); + featureTooltipAttributes.value = formatFeatureAttributes(hit.attributes); } else { secondaryParts.push(`value ${formatTrackValue(hit.value)}`); if (hit.count > 1) { secondaryParts.push(`${hit.count.toLocaleString()} bins/items`); } secondaryParts.push(hit.trackType); + featureTooltipAttributes.value = []; } featureTooltipSecondary.value = secondaryParts.join(" | "); featureTooltipVisible.value = true; @@ -192,6 +211,40 @@ const formatTrackValue = (value: number): string => { return value.toLocaleString(undefined, { maximumFractionDigits: 4 }); }; +const formatFeatureAttributes = ( + attributes: Record +): Array<{ key: string; value: string; swatch?: string }> => + Object.entries(attributes) + .filter(([key, value]) => key.trim().length > 0 && value.trim().length > 0) + .slice(0, 12) + .map(([key, value]) => ({ + key, + value, + swatch: key.toLowerCase() === "itemrgb" ? bedRgbToCss(value) : undefined, + })); + +const bedRgbToCss = (value: string): string | undefined => { + const channels = value.split(",").map((part) => Number(part.trim())); + if ( + channels.length !== 3 || + channels.some((channel) => !Number.isInteger(channel) || channel < 0 || channel > 255) + ) { + return undefined; + } + return `rgb(${channels[0]}, ${channels[1]}, ${channels[2]})`; +}; + +const formatHoverRange = (hit: { + startBp: number; + endBp: number; + startPx: number; + endPx: number; +}): string => { + const bpRange = `${hit.startBp.toLocaleString()}-${hit.endBp.toLocaleString()} bp`; + const binRange = `bins ${hit.startPx.toLocaleString()}-${hit.endPx.toLocaleString()}`; + return `${bpRange} | ${binRange}`; +}; + const onMouseLeaveFeature = (): void => { hideFeatureTooltip(); }; @@ -387,4 +440,13 @@ onBeforeUnmount(() => { .feature-meta { opacity: 0.95; } + +.feature-color-swatch { + display: inline-block; + width: 0.75em; + height: 0.75em; + margin-right: 0.35em; + border: 1px solid rgba(255, 255, 255, 0.65); + vertical-align: -0.05em; +} diff --git a/src/app/ui/components/tracks/VerticalIGVTrack.vue b/src/app/ui/components/tracks/VerticalIGVTrack.vue index 64879ff..26c2195 100644 --- a/src/app/ui/components/tracks/VerticalIGVTrack.vue +++ b/src/app/ui/components/tracks/VerticalIGVTrack.vue @@ -50,6 +50,18 @@
    {{ featureTooltipSecondary }}
    +
    + + {{ attribute.key }}: {{ attribute.value }} +
@@ -78,6 +90,11 @@ const featureTooltipVisible = ref(false); const featureTooltipTitle = ref(""); const featureTooltipRange = ref(""); const featureTooltipSecondary = ref(""); +const featureTooltipAttributes = ref>([]); const featureTooltipStyle = ref>({ left: "0px", top: "0px", @@ -161,7 +178,7 @@ const onMouseMoveFeature = (event: MouseEvent): void => { hit.kind === "feature" ? hit.label ?? hit.featureType ?? hit.trackName : hit.trackName; - featureTooltipRange.value = `${hit.startBp.toLocaleString()}-${hit.endBp.toLocaleString()} bp`; + featureTooltipRange.value = formatHoverRange(hit); const secondaryParts: string[] = []; if (hit.kind === "feature") { if (hit.featureType) { @@ -171,12 +188,14 @@ const onMouseMoveFeature = (event: MouseEvent): void => { secondaryParts.push(`strand ${hit.strand}`); } secondaryParts.push(hit.trackName); + featureTooltipAttributes.value = formatFeatureAttributes(hit.attributes); } else { secondaryParts.push(`value ${formatTrackValue(hit.value)}`); if (hit.count > 1) { secondaryParts.push(`${hit.count.toLocaleString()} bins/items`); } secondaryParts.push(hit.trackType); + featureTooltipAttributes.value = []; } featureTooltipSecondary.value = secondaryParts.join(" | "); featureTooltipVisible.value = true; @@ -192,6 +211,40 @@ const formatTrackValue = (value: number): string => { return value.toLocaleString(undefined, { maximumFractionDigits: 4 }); }; +const formatFeatureAttributes = ( + attributes: Record +): Array<{ key: string; value: string; swatch?: string }> => + Object.entries(attributes) + .filter(([key, value]) => key.trim().length > 0 && value.trim().length > 0) + .slice(0, 12) + .map(([key, value]) => ({ + key, + value, + swatch: key.toLowerCase() === "itemrgb" ? bedRgbToCss(value) : undefined, + })); + +const bedRgbToCss = (value: string): string | undefined => { + const channels = value.split(",").map((part) => Number(part.trim())); + if ( + channels.length !== 3 || + channels.some((channel) => !Number.isInteger(channel) || channel < 0 || channel > 255) + ) { + return undefined; + } + return `rgb(${channels[0]}, ${channels[1]}, ${channels[2]})`; +}; + +const formatHoverRange = (hit: { + startBp: number; + endBp: number; + startPx: number; + endPx: number; +}): string => { + const bpRange = `${hit.startBp.toLocaleString()}-${hit.endBp.toLocaleString()} bp`; + const binRange = `bins ${hit.startPx.toLocaleString()}-${hit.endPx.toLocaleString()}`; + return `${bpRange} | ${binRange}`; +}; + const onMouseLeaveFeature = (): void => { hideFeatureTooltip(); }; @@ -390,4 +443,13 @@ onBeforeUnmount(() => { .feature-meta { opacity: 0.95; } + +.feature-color-swatch { + display: inline-block; + width: 0.75em; + height: 0.75em; + margin-right: 0.35em; + border: 1px solid rgba(255, 255, 255, 0.65); + vertical-align: -0.05em; +} diff --git a/src/app/ui/components/upper_ribbon/FileWizardModal.vue b/src/app/ui/components/upper_ribbon/FileWizardModal.vue index ad256a6..9f439bf 100644 --- a/src/app/ui/components/upper_ribbon/FileWizardModal.vue +++ b/src/app/ui/components/upper_ribbon/FileWizardModal.vue @@ -1157,6 +1157,7 @@ const waitForTrackPrecompute = async (): Promise const applyWizardPresentationState = (): void => { matrixViewStore.setPresentationMode(viewMode.value); + matrixViewStore.setLayersSwapped(false); if (viewMode.value === "split") { matrixViewStore.setSelectionFastaSources("PRIMARY", "SECONDARY"); } else { diff --git a/src/app/ui/components/upper_ribbon/NormalizationSelector.vue b/src/app/ui/components/upper_ribbon/NormalizationSelector.vue index 38ef26f..cc87c34 100644 --- a/src/app/ui/components/upper_ribbon/NormalizationSelector.vue +++ b/src/app/ui/components/upper_ribbon/NormalizationSelector.vue @@ -35,33 +35,38 @@
- -
-
- - - -
- - Rectangles use current selection. Markers and rectangles stay aligned after scaffolding operations. -
@@ -563,6 +573,14 @@ const onTrackBackgroundColorChanged = (value: string): void => { }; const trackBackgroundHex = computed(() => rgbaLikeToHex(trackBackgroundColor.value)); +const primaryCoolerWeightsTrackIds = computed(() => + tracks.value + .filter((track) => track.sourceFile === "__internal__/cooler_weights") + .map((track) => track.trackId) +); +const primaryCoolerWeightsVisible = computed( + () => primaryCoolerWeightsTrackIds.value.length > 0 +); const TRACK_SUFFIXES = [ ".bed", @@ -676,15 +694,22 @@ const onAddTrack = async () => { } }; -const onAddCoolerWeights = async () => { +const onTogglePrimaryCoolerWeights = async (visible: boolean) => { if (!props.mapManager) { return; } try { - await props.mapManager.linearTrackManager.openCoolerWeightsTrack( - trackDisplayName.value.trim() || undefined - ); - trackDisplayName.value = ""; + if (visible) { + if (primaryCoolerWeightsTrackIds.value.length === 0) { + await props.mapManager.linearTrackManager.openCoolerWeightsTrack( + "Cooler weights" + ); + } + } else { + for (const trackId of primaryCoolerWeightsTrackIds.value) { + await props.mapManager.linearTrackManager.removeTrack(trackId); + } + } await refreshTracks(); await refreshPrecomputeStatus(); } catch (err) { @@ -998,18 +1023,6 @@ const onChangeLogBase = (trackId: string, value: number): void => { props.mapManager.linearTrackManager.setTrackLogBase(trackId, value); }; -const addMarkerAtCenter = () => { - props.mapManager?.getLayersManager().addAnnotationMarkerAtCenter(); -}; - -const addRectangleFromSelection = () => { - props.mapManager?.getLayersManager().addAnnotationRectangleFromSelection(); -}; - -const clearAnnotations = () => { - props.mapManager?.getLayersManager().clearAnnotations(); -}; - const onStartPrecomputeAll = async () => { if (!props.mapManager) { return; From a93e609a78404b2f81e9316b4d39a7dc05b431d0 Mon Sep 17 00:00:00 2001 From: Alexander Serdyukov Date: Sun, 24 May 2026 05:23:58 +0400 Subject: [PATCH 18/46] Compact sidebar UI, fix export PDF/PNG/SVG issues, updates to ruler --- src/app/core/controls/RulerControl.ts | 465 +++++++----------- src/app/core/mapmanagers/ContactMapManager.ts | 66 ++- .../components/sidebar/SavedVisualOptions.vue | 84 +--- .../sidebar/SavedVisualOptionsElement.vue | 14 +- src/app/ui/components/sidebar/SideBar.vue | 99 +++- .../sidebar/VisualziationSettingsEditor.vue | 356 ++++++++------ 6 files changed, 571 insertions(+), 513 deletions(-) diff --git a/src/app/core/controls/RulerControl.ts b/src/app/core/controls/RulerControl.ts index fa46899..45eb658 100644 --- a/src/app/core/controls/RulerControl.ts +++ b/src/app/core/controls/RulerControl.ts @@ -28,14 +28,13 @@ import { LayerResolutionDescriptor, } from "../mapmanagers/HiCViewAndLayersManager"; import ContigDimensionHolder from "../mapmanagers/ContigDimensionHolder"; -import { transform, transformExtent } from "ol/proj"; +import { transform } from "ol/proj"; import { storeToRefs } from "pinia"; import { useStyleStore } from "@/app/stores/styleStore"; import { useVisualizationOptionsStore } from "@/app/stores/visualizationOptionsStore"; import { Ref } from "vue"; import Colormap from "../visualization/colormap/Colormap"; import { ColorTranslator } from "colortranslator"; -import SimpleLinearGradient from "../visualization/colormap/SimpleLinearGradient"; interface Options extends ControlOptions { // position: "top" | "bottom" | "left" | "right"; @@ -45,6 +44,15 @@ interface Options extends ControlOptions { const DEFAULT_CANVAS_SIZE = 200; +interface RulerTick { + screen: number; + mapPx: number; + bp: number; + label: string; + major: boolean; + boundary?: "start" | "end"; +} + class RulerControl extends Control { protected readonly canvas: HTMLCanvasElement; protected readonly mapManager: ContactMapManager; @@ -160,8 +168,6 @@ class RulerControl extends Control { const activeHiCLayer = this.viewAndLayersManager.getActiveHiCDataLayer(); const extent = mapView.calculateExtent(map.getSize()); - const mapProjection = mapView.getProjection(); - const targetProjection = activeHiCLayer.getSource()?.getProjection(); if (!targetProjection) { @@ -176,12 +182,6 @@ class RulerControl extends Control { } const pixelMapSize = ps[ps.length - 1]; - const extentInTargetProjection = transformExtent( - extent, - mapProjection, - targetProjection - ); - const pixelResolution = mapView.getResolution() ?? 1; const layerPixelResolution = Number.isFinite( @@ -327,121 +327,22 @@ class RulerControl extends Control { // context.strokeStyle = "black"; // context.stroke(); - const axisSpanPx = Math.max( - 1, - Math.round((end[0] - start[0]) * deltaDir[0] + (end[1] - start[1]) * deltaDir[1]) - ); - const desiredTickCount = Math.max(2, Math.min(12, Math.floor(axisSpanPx / 90))); - const tickInterval = Math.max(24, Math.round(axisSpanPx / desiredTickCount)); - - { - const TICK_SEMI_HEIGHT = - Math.min(this.canvas.width, this.canvas.height) / 5; - const FONT_SIZE_PX = Math.floor( - Math.min(this.canvas.width, this.canvas.height) / 5 - ); - const FONT_STRING = `bold ${FONT_SIZE_PX}px serif`; - const LAST_TICK_MARGIN = Math.round(tickInterval / 2); - let tickIndex = 0; - let previousAnchorLabel: string | null = null; - let previousAnchorBp: number | null = null; - for ( - let coord: [number, number] = [start[0], start[1]]; - coord[0] < end[0] - LAST_TICK_MARGIN || - coord[1] < end[1] - LAST_TICK_MARGIN; - coord[0] += deltaDir[0] * tickInterval, - coord[1] += deltaDir[1] * tickInterval - ) { - const tickState = this.drawTickAtPxOffset( - context, - resolutionDescriptor, - coord, - start, - end, - deltaDir, - tickInterval, - mapBoxPixelCoordinates, - visibleMapBoxExtentPixel, - fraction1, - TICK_SEMI_HEIGHT, - FONT_SIZE_PX, - FONT_STRING, - tickIndex, - previousAnchorLabel, - previousAnchorBp - ); - previousAnchorLabel = tickState.anchorLabel; - previousAnchorBp = tickState.anchorBp; - tickIndex++; - } - this.drawTickAtPxOffset( - context, - resolutionDescriptor, - end, - start, - end, - deltaDir, - tickInterval, - mapBoxPixelCoordinates, - visibleMapBoxExtentPixel, - fraction1, - TICK_SEMI_HEIGHT, - FONT_SIZE_PX, - FONT_STRING, - tickIndex, - previousAnchorLabel, - previousAnchorBp - ); - } - // Actually, if false, allows drawing smaller grid, currently disabled - if (tickInterval < 0) { - const TICK_SEMI_HEIGHT = - Math.min(this.canvas.width, this.canvas.height) / 10; - const FONT_SIZE_PX = Math.floor( - Math.min(this.canvas.width, this.canvas.height) / 10 - ); - const FONT_STRING = `bold ${FONT_SIZE_PX}px serif`; - - const LAST_TICK_MARGIN = Math.round(tickInterval / 2); - for ( - let coord: [number, number] = [ - start[0] + (tickInterval / 2) * deltaDir[0], - start[1] + (tickInterval / 2) * deltaDir[1], - ]; - coord[0] < end[0] - LAST_TICK_MARGIN || - coord[1] < end[1] - LAST_TICK_MARGIN; - coord[0] += deltaDir[0] * tickInterval, - coord[1] += deltaDir[1] * tickInterval - ) { - // console.log( - // "start", - // start, - // "end", - // end, - // "deltaDir", - // deltaDir, - // "coord", - // coord - // ); - this.drawTickAtPxOffset( - context, - resolutionDescriptor, - coord, - start, - end, - deltaDir, - tickInterval, - mapBoxPixelCoordinates, - visibleMapBoxExtentPixel, - fraction1, - TICK_SEMI_HEIGHT, - FONT_SIZE_PX, - FONT_STRING, - 0, - null, - null - ); - } + const axisStart = this.direction === "horizontal" ? start[0] : start[1]; + const axisEnd = this.direction === "horizontal" ? end[0] : end[1]; + const mapStartScreen = + this.direction === "horizontal" + ? mapBoxPixelCoordinates.left + : mapBoxPixelCoordinates.top; + const ticks = this.buildVisibleRulerTicks({ + axisStart, + axisEnd, + mapStartScreen, + fraction: fraction1, + pixelMapSize, + resolutionDescriptor, + }); + for (const tick of ticks) { + this.drawRulerTick(context, tick, start, deltaDir); } } @@ -582,170 +483,165 @@ class RulerControl extends Control { return Math.round(value).toLocaleString(); } - protected drawTickAtPxOffset( - context: CanvasRenderingContext2D, - resolutionDescriptor: LayerResolutionDescriptor, - coord: [number, number], - start: [number, number], - end: [number, number], - deltaDir: [number, number], - tickInterval: number, - mapBoxPixelCoordinates: { - left: number; - right: number; - top: number; - bottom: number; - }, - visibleMapBoxExtentPixel: { - left: number; - right: number; - top: number; - bottom: number; - }, - fraction1: number, - TICK_SEMI_HEIGHT: number, - FONT_SIZE_PX: number, - FONT_STRING: string, - tickIndex: number, - previousAnchorLabel: string | null, - previousAnchorBp: number | null - ): { anchorLabel: string; anchorBp: number } { - coord = coord.map(Math.round) as [number, number]; - - const dPx = (() => { - switch (this.opt_options.direction) { - case "vertical": - return ( - Math.round( - coord[1] - start[1] - Math.min(0, mapBoxPixelCoordinates.top) - ) * fraction1 - ); - case "horizontal": - return ( - Math.round( - coord[0] - start[0] - Math.min(0, mapBoxPixelCoordinates.left) - ) * fraction1 - ); - } - })(); + private buildVisibleRulerTicks(options: { + axisStart: number; + axisEnd: number; + mapStartScreen: number; + fraction: number; + pixelMapSize: number; + resolutionDescriptor: LayerResolutionDescriptor; + }): RulerTick[] { + const axisStart = Math.round(Math.min(options.axisStart, options.axisEnd)); + const axisEnd = Math.round(Math.max(options.axisStart, options.axisEnd)); + const axisSpan = axisEnd - axisStart; + if (axisSpan <= 0) { + return []; + } - const preBP = (() => { - if (dPx == 0) { - return 0; - } else if (coord == end) { - return this.contigDimensionHolder.getStartBpOfPx( - dPx - 1, - resolutionDescriptor.bpResolution - ); - } else { - return this.contigDimensionHolder.getStartBpOfPx( - dPx, - resolutionDescriptor.bpResolution - ); + const spacing = 100; + const screens: number[] = [axisStart]; + for (let screen = axisStart + spacing; screen < axisEnd - 42; screen += spacing) { + screens.push(Math.round(screen)); + } + if (axisEnd - screens[screens.length - 1] >= 34) { + screens.push(axisEnd); + } else { + screens[screens.length - 1] = axisEnd; + } + + const mapPxValues = screens.map((screen) => + this.screenPositionToMapPx( + screen, + options.mapStartScreen, + options.fraction, + options.pixelMapSize + ) + ); + const bpValues = mapPxValues.map((mapPx) => + this.contigDimensionHolder.getStartBpOfPx( + mapPx, + options.resolutionDescriptor.bpResolution + ) + ); + const maxBp = Math.max(...bpValues, 0); + const labelUnit = this.absoluteLabelUnit(maxBp); + let currentAnchor = this.roundDownToUnit(bpValues[0] ?? 0, labelUnit); + return screens.map((screen, index) => { + const bp = bpValues[index] ?? 0; + const mapPx = mapPxValues[index] ?? 0; + const anchor = this.roundDownToUnit(bp, labelUnit); + const boundary = + index === 0 ? "start" : index === screens.length - 1 ? "end" : undefined; + const major = boundary !== undefined || anchor !== currentAnchor; + if (major) { + currentAnchor = anchor; } - })(); + const delta = Math.max(0, Math.round(bp - currentAnchor)); + return { + screen, + mapPx, + bp, + major, + boundary, + label: + major || delta <= 0 + ? this.formatBpLabel(anchor, 0) + : `+${this.formatBpLabel(delta, 0)}`, + }; + }); + } - // console.log( - // this.opt_options.direction, - // "coord", - // coord, - // "dPx", - // dPx, - // "dBp", - // dBp, - // "pre", - // preBP, - // "post", - // postBP - // ); + private screenPositionToMapPx( + screenPosition: number, + mapStartScreen: number, + fraction: number, + pixelMapSize: number + ): number { + const raw = Math.round((screenPosition - mapStartScreen) * fraction); + return Math.max(0, Math.min(Math.max(0, pixelMapSize - 1), raw)); + } + + private drawRulerTick( + context: CanvasRenderingContext2D, + tick: RulerTick, + start: [number, number], + deltaDir: [number, number] + ): void { + const majorTickLength = Math.max( + 8, + Math.min(16, Math.min(this.canvas.width, this.canvas.height) * 0.24) + ); + const minorTickLength = Math.max(5, majorTickLength * 0.62); + const tickLength = tick.major ? majorTickLength : minorTickLength; + const coord: [number, number] = + this.direction === "horizontal" + ? [tick.screen, start[1]] + : [start[0], tick.screen]; const { mainStroke, outlineStroke } = this.getRulerStrokeColors(); context.strokeStyle = outlineStroke; - context.lineWidth = 6; + context.lineWidth = tick.major ? 5 : 4; context.beginPath(); - context.moveTo( - coord[0] - TICK_SEMI_HEIGHT * deltaDir[1], - coord[1] - TICK_SEMI_HEIGHT * deltaDir[0] - ); + context.moveTo(coord[0], coord[1]); context.lineTo( - coord[0] + TICK_SEMI_HEIGHT * deltaDir[1], - coord[1] + TICK_SEMI_HEIGHT * deltaDir[0] + coord[0] - tickLength * deltaDir[1], + coord[1] - tickLength * deltaDir[0] ); context.stroke(); context.strokeStyle = mainStroke; - context.lineWidth = 3; + context.lineWidth = tick.major ? 2.5 : 1.8; context.beginPath(); - context.moveTo( - coord[0] - TICK_SEMI_HEIGHT * deltaDir[1], - coord[1] - TICK_SEMI_HEIGHT * deltaDir[0] - ); + context.moveTo(coord[0], coord[1]); context.lineTo( - coord[0] + TICK_SEMI_HEIGHT * deltaDir[1], - coord[1] + TICK_SEMI_HEIGHT * deltaDir[0] + coord[0] - tickLength * deltaDir[1], + coord[1] - tickLength * deltaDir[0] ); context.stroke(); - const angleDeg = (() => { - switch (this.opt_options.direction) { - case "vertical": - return 0; - case "horizontal": - return -45; - } - })(); - - const textAlign = (() => { - switch (this.opt_options.direction) { - case "vertical": - return "right"; - case "horizontal": - return "left"; - } - })(); + const fontSize = tick.major ? 11 : 9; + const font = `${tick.major ? "bold" : "normal"} ${fontSize}px sans-serif`; + if (this.direction === "horizontal") { + const textX = this.clamp( + tick.boundary === "start" + ? tick.screen + 2 + : tick.boundary === "end" + ? tick.screen - 2 + : tick.screen, + 4, + this.canvas.width - 4 + ); + const textAlign: CanvasTextAlign = + tick.boundary === "start" + ? "left" + : tick.boundary === "end" + ? "right" + : "center"; + this.drawRotatedText( + tick.label, + textX, + Math.max(9, coord[1] - tickLength - 3), + context, + tick.boundary ? 0 : -35, + font, + textAlign, + true, + false + ); + return; + } - const fillBackground = this.opt_options.direction === "horizontal"; - const isLastTick = Math.abs(coord[0] - end[0]) <= 1 && Math.abs(coord[1] - end[1]) <= 1; - const absoluteLabel = this.formatBpLabel(preBP, 0); - const absoluteAnchorBp = this.labelAnchorBp(preBP); - const useDeltaLabel = - !isLastTick && - tickIndex > 0 && - previousAnchorLabel !== null && - previousAnchorBp !== null && - preBP > previousAnchorBp; - const label = useDeltaLabel - ? `+${this.formatBpLabel(preBP - previousAnchorBp, 0)}` - : absoluteLabel; - const nextAnchorLabel = useDeltaLabel ? previousAnchorLabel : absoluteLabel; - const nextAnchorBp = useDeltaLabel - ? previousAnchorBp ?? absoluteAnchorBp - : absoluteAnchorBp; - const fontSize = useDeltaLabel - ? Math.max(9, FONT_SIZE_PX - 2) - : Math.max(11, FONT_SIZE_PX + 2); + const textY = this.clamp(tick.screen + fontSize / 2, fontSize + 1, this.canvas.height - 3); this.drawRotatedText( - label, - Math.round( - coord[0] + - (FONT_SIZE_PX / 3) * deltaDir[0] - - (TICK_SEMI_HEIGHT + 5) * deltaDir[1] - ), - Math.round( - coord[1] + - (FONT_SIZE_PX / 3) * deltaDir[1] - - (TICK_SEMI_HEIGHT + 5) * deltaDir[0] - ), + tick.label, + Math.max(2, coord[0] - tickLength - 4), + textY, context, - angleDeg, - `${useDeltaLabel ? "normal" : "bold"} ${fontSize}px sans-serif`, - textAlign, - false, - fillBackground + 0, + font, + "right", + true, + false ); - return { - anchorLabel: nextAnchorLabel, - anchorBp: nextAnchorBp, - }; } private formatBpLabel(bp: number, precision: number): string { @@ -762,18 +658,26 @@ class RulerControl extends Control { return `${scaled.toFixed(digits).replace(/\.0+$/, "")}${suffix}`; } - private labelAnchorBp(bp: number): number { - const value = Math.max(0, Math.round(bp)); - if (value >= 1_000_000_000) { - return Math.floor(value / 1_000_000_000) * 1_000_000_000; + private absoluteLabelUnit(maxBp: number): number { + if (maxBp >= 1_000_000_000) { + return 1_000_000_000; } - if (value >= 1_000_000) { - return Math.floor(value / 1_000_000) * 1_000_000; + if (maxBp >= 1_000_000) { + return 1_000_000; } - if (value >= 1_000) { - return Math.floor(value / 1_000) * 1_000; + if (maxBp >= 1_000) { + return 1_000; } - return value; + return 1; + } + + private roundDownToUnit(bp: number, unit: number): number { + const safeUnit = Math.max(1, Math.round(unit)); + return Math.floor(Math.max(0, Math.round(bp)) / safeUnit) * safeUnit; + } + + private clamp(value: number, min: number, max: number): number { + return Math.max(min, Math.min(max, value)); } protected drawRotatedText( @@ -808,10 +712,13 @@ class RulerControl extends Control { this.setFillStrokeContrastColors(context); - context.fillText(text, 0, 0); if (stroke) { + const fontSizeMatch = font.match(/(\d+(?:\.\d+)?)px/); + const fontSize = fontSizeMatch ? Number.parseFloat(fontSizeMatch[1]) : 10; + context.lineWidth = Math.max(2, fontSize / 5); context.strokeText(text, 0, 0); } + context.fillText(text, 0, 0); context.restore(); } diff --git a/src/app/core/mapmanagers/ContactMapManager.ts b/src/app/core/mapmanagers/ContactMapManager.ts index f64b684..8b0e1cb 100644 --- a/src/app/core/mapmanagers/ContactMapManager.ts +++ b/src/app/core/mapmanagers/ContactMapManager.ts @@ -405,8 +405,16 @@ class ContactMapManager { const y = tile.row * tileSize; const tileWidth = Math.min(tileSize, width - x); const tileHeight = Math.min(tileSize, height - y); + const imageHref = + tileWidth < tileSize || tileHeight < tileSize + ? await this.cropTileImageDataUrl( + String(data.image), + tileWidth, + tileHeight + ) + : String(data.image); svgImages.push( - `` + `` ); } completed += 1; @@ -473,18 +481,60 @@ class ContactMapManager { const blob = new Blob([svg], { type: "image/svg+xml" }); const url = URL.createObjectURL(blob); try { - const image = new Image(); - await new Promise((resolve, reject) => { - image.onload = () => resolve(); - image.onerror = (error) => reject(error); - image.src = url; - }); - return image; + return await this.loadImageUrl(url); } finally { URL.revokeObjectURL(url); } } + private async loadImageUrl(url: string): Promise { + const image = new Image(); + await new Promise((resolve, reject) => { + image.onload = () => resolve(); + image.onerror = (error) => reject(error); + image.src = url; + }); + return image; + } + + private async cropTileImageDataUrl( + dataUrl: string, + targetWidth: number, + targetHeight: number + ): Promise { + const width = Math.max(1, Math.round(targetWidth)); + const height = Math.max(1, Math.round(targetHeight)); + const image = await this.loadImageUrl(dataUrl); + const naturalWidth = image.naturalWidth || image.width; + const naturalHeight = image.naturalHeight || image.height; + if (naturalWidth === width && naturalHeight === height) { + return dataUrl; + } + + const canvas = document.createElement("canvas"); + canvas.width = width; + canvas.height = height; + const context = canvas.getContext("2d"); + if (!context) { + return dataUrl; + } + context.clearRect(0, 0, width, height); + const sourceWidth = Math.min(width, Math.max(1, naturalWidth)); + const sourceHeight = Math.min(height, Math.max(1, naturalHeight)); + context.drawImage( + image, + 0, + 0, + sourceWidth, + sourceHeight, + 0, + 0, + sourceWidth, + sourceHeight + ); + return canvas.toDataURL("image/png"); + } + private drawOutlinedCanvasText( context: CanvasRenderingContext2D, text: string, diff --git a/src/app/ui/components/sidebar/SavedVisualOptions.vue b/src/app/ui/components/sidebar/SavedVisualOptions.vue index a2be41a..1ef9f43 100644 --- a/src/app/ui/components/sidebar/SavedVisualOptions.vue +++ b/src/app/ui/components/sidebar/SavedVisualOptions.vue @@ -20,48 +20,15 @@ --> @@ -219,6 +256,7 @@ import { StartDotplotJobsRequest } from "@/app/core/net/api/request"; import type { ConversionJobResponse, ConversionToolchainStatusResponse } from "@/app/core/net/api/response"; import FileSelectionTable from "@/app/ui/components/common/FileSelectionTable.vue"; import type { FileSelectionTableEntry } from "@/app/ui/components/common/FileSelectionTableTypes"; +import UniversalFileSelector from "@/app/ui/components/upper_ribbon/UniversalFileSelector.vue"; const emit = defineEmits<{ (e: "dismissed"): void; @@ -227,6 +265,7 @@ const emit = defineEmits<{ const props = defineProps<{ networkManager: NetworkManager; initialFastaFilename?: string; + initialReferenceMapFilename?: string; }>(); const step: Ref<"select" | "settings" | "progress"> = ref("select"); @@ -243,6 +282,7 @@ let refreshTimer: number | null = null; const binSize = ref(1000); const resolutions = ref(""); const referenceMapFilename = ref(""); +const referenceMapSelectorOpen = ref(false); const assemblyAgpFilename = ref(""); const minimizerK = ref(17); const minimizerWindow = ref(5); @@ -260,13 +300,24 @@ const overwrite = ref(false); const fastaEntries = computed(() => fastaFiles.value.map((path) => ({ path })) ); -const referenceMapFiles = computed(() => - allFiles.value.filter((path) => path.toLowerCase().endsWith(".hict.hdf5")) -); const agpFiles = computed(() => allFiles.value.filter((path) => path.toLowerCase().endsWith(".agp")) ); const selectedFastaPaths = computed(() => Array.from(selection.value)); +const dotplotOffsetWarnings = computed(() => { + const warnings: string[] = []; + if (!referenceMapFilename.value) { + warnings.push( + "Without a reference .hict.hdf5 map, generated zoom resolutions are inferred and may not align exactly with an already opened map." + ); + } + if (!assemblyAgpFilename.value) { + warnings.push( + "Without AGP, the dotplot uses FASTA order as-is; overlay offsets are possible when the target map is already scaffolded or reordered." + ); + } + return warnings; +}); const hasActiveJobs = computed(() => jobs.value.some((job) => job.status === "queued" || job.status === "running") ); @@ -324,6 +375,15 @@ function onSelectionUpdated(files: string[]): void { selection.value = new Set(files); } +function isHictMapFilename(name: string): boolean { + return name.toLowerCase().endsWith(".hict.hdf5"); +} + +function onReferenceMapSelected(filename: string): void { + referenceMapFilename.value = filename; + referenceMapSelectorOpen.value = false; +} + function selectAll(): void { selection.value = new Set(fastaFiles.value); } @@ -475,6 +535,16 @@ function syncAutoRefresh(): void { watch(() => [step.value, hasActiveJobs.value] as const, syncAutoRefresh); +watch( + () => props.initialReferenceMapFilename, + (filename) => { + if (!referenceMapFilename.value && filename && isHictMapFilename(filename)) { + referenceMapFilename.value = filename; + } + }, + { immediate: true } +); + onMounted(async () => { try { toolchainStatus.value = await props.networkManager.requestManager.getConversionToolchainStatus(); diff --git a/src/app/ui/components/upper_ribbon/NavigationBar.vue b/src/app/ui/components/upper_ribbon/NavigationBar.vue index 1eff5d4..c3fdb5d 100644 --- a/src/app/ui/components/upper_ribbon/NavigationBar.vue +++ b/src/app/ui/components/upper_ribbon/NavigationBar.vue @@ -385,6 +385,7 @@ v-if="generatingDotplots" :network-manager="networkManager" :initial-fasta-filename="lastLinkedFastaFilename" + :initial-reference-map-filename="currentPrimaryHictFilename" @dismissed="onGenerateDotplotDismissed" /> { + const filename = props.mapManager?.getOptions().filename ?? ""; + return filename.toLowerCase().endsWith(".hict.hdf5") ? filename : ""; +}); + const nativeProcessingStatusClass = computed(() => ({ "text-success": nativeProcessingStatus.value?.enabled, "text-warning": diff --git a/src/app/ui/components/upper_ribbon/UniversalFileSelector.vue b/src/app/ui/components/upper_ribbon/UniversalFileSelector.vue index 8b16a66..dde6166 100644 --- a/src/app/ui/components/upper_ribbon/UniversalFileSelector.vue +++ b/src/app/ui/components/upper_ribbon/UniversalFileSelector.vue @@ -21,11 +21,11 @@