From 5765e3182254ec272bbd5105b728087327917f09 Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Fri, 20 Feb 2026 03:51:19 +0400
Subject: [PATCH 01/27] Fixed typing issues in visual options component

---
 package-lock.json                             |   1 +
 .../components/sidebar/SavedVisualOptions.vue | 250 ++++++++++--------
 2 files changed, 137 insertions(+), 114 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 44d6006..1e4785e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "name": "hict",
       "version": "0.1.1",
+      "license": "MIT",
       "dependencies": {
         "@popperjs/core": "^2.11.6",
         "@thednp/color-picker": "^2.0.0-alpha9",
diff --git a/src/app/ui/components/sidebar/SavedVisualOptions.vue b/src/app/ui/components/sidebar/SavedVisualOptions.vue
index 089fd69..032cd41 100644
--- a/src/app/ui/components/sidebar/SavedVisualOptions.vue
+++ b/src/app/ui/components/sidebar/SavedVisualOptions.vue
@@ -75,7 +75,7 @@
 
 <script setup lang="ts">
 import { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
-import { Ref, ref } from "vue";
+import { Ref, ref, shallowRef, triggerRef, onMounted } from "vue";
 import SavedVisualOptionsElement from "./SavedVisualOptionsElement.vue";
 import VisualizationOptions from "@/app/core/visualization/VisualizationOptions";
 import { useVisualizationOptionsStore } from "@/app/stores/visualizationOptionsStore";
@@ -84,11 +84,12 @@ import { toast } from "vue-sonner";
 import { useStyleStore } from "@/app/stores/styleStore";
 import { ColorTranslator } from "colortranslator";
 import { onMounted } from "vue";
+import defaultOptions from "@/app/core/visualization/colormap/default_options.json";
 const visualizationOptionsStore = useVisualizationOptionsStore();
 const { preLogBase, applyCoolerWeights, postLogBase, colormap } = storeToRefs(
   visualizationOptionsStore
 );
-import defaultOptions from "@/app/core/visualization/colormap/default_options.json";
+
 
 onMounted(() => {
   importJSONResults(defaultOptions);
@@ -101,8 +102,8 @@ const props = defineProps<{
   mapManager?: ContactMapManager;
 }>();
 
-const savedOptions: Ref<
-  Map<
+const savedOptions = shallowRef(
+  new Map<
     number,
     {
       option_id: number;
@@ -110,52 +111,71 @@ const savedOptions: Ref<
       options: VisualizationOptions;
       backgroundColor: ColorTranslator;
     }
-  >
-> = ref(new Map());
+  >()
+);
+
+function bumpSavedOptions() {
+  triggerRef(savedOptions);
+}
+
+function nextOptionId(): number {
+  let maxId = -1;
+  savedOptions.value.forEach((v) => {
+    if (v.option_id > maxId) maxId = v.option_id;
+  });
+  return maxId + 1;
+}
+
+function colorToString(c: ColorTranslator): string {
+  return c.toString();
+}
 
 const importFileBtn: Ref<HTMLInputElement | null> = ref(null);
 
 const optionsCount = ref(0);
 
 function saveOptions() {
-  if (props.mapManager) {
-    savedOptions.value.set(optionsCount.value, {
-      option_id: optionsCount.value,
-      name: `Preset ${optionsCount.value}`,
-      options: visualizationOptionsStore.asVisualizationOptions(),
-      backgroundColor: mapBackgroundColor.value as ColorTranslator,
-    });
-    optionsCount.value += 1;
-  }
+  if (!props.mapManager) return;
+
+  const id = nextOptionId();
+  savedOptions.value.set(id, {
+    option_id: id,
+    name: `Preset ${id}`,
+    options: visualizationOptionsStore.asVisualizationOptions(),
+    backgroundColor: mapBackgroundColor.value as ColorTranslator,
+  });
+  bumpSavedOptions();
 }
 
 function removeOption(option_id: number) {
   savedOptions.value.delete(option_id);
+  bumpSavedOptions();
 }
 
 function renameOption(option_id: number, name: string) {
   const opt = savedOptions.value.get(option_id);
-  if (opt) {
-    const newOpt = {
-      option_id: opt.option_id,
-      options: opt.options,
-      name: name,
-      backgroundColor: opt.backgroundColor,
-    };
-    savedOptions.value.set(option_id, newOpt);
-    console.log("newOpt:", newOpt, " saved options: ", savedOptions.value);
-  }
+  if (!opt) return;
+
+  savedOptions.value.set(option_id, { ...opt, name });
+  bumpSavedOptions();
 }
 
 function exportOptions() {
   const values: {
     option_id: number;
     options: VisualizationOptions;
-    backgroundColor: ColorTranslator;
+    backgroundColor: string; // <-- stable
     name: string;
   }[] = [];
 
-  savedOptions.value.forEach((v) => values.push(v));
+  savedOptions.value.forEach((v) =>
+    values.push({
+      option_id: v.option_id,
+      options: v.options,
+      name: v.name,
+      backgroundColor: colorToString(v.backgroundColor),
+    })
+  );
 
   const data = JSON.stringify({
     exportType: "visualizationOptions",
@@ -164,100 +184,103 @@ function exportOptions() {
       savedVisualizationPresets: values,
     },
   });
-  const blob = new Blob([data], { type: "text/plain" });
-  const e = document.createEvent("MouseEvents"),
-    a = document.createElement("a");
+
+  const blob = new Blob([data], { type: "application/json" });
+
+  const a = document.createElement("a");
   a.download =
     "visualizationOptionsPresets." +
     props.mapManager?.getOptions().filename +
     ".hict.json";
-  a.href = window.URL.createObjectURL(blob);
-  a.dataset.downloadurl = ["text/json", a.download, a.href].join(":");
-  e.initEvent(
-    "click",
-    true,
-    false,
-    // @ts-expect-error Taken from JS
-    window,
-    0,
-    0,
-    0,
-    0,
-    0,
-    false,
-    false,
-    false,
-    false,
-    0,
-    null
-  );
-  a.dispatchEvent(e);
+  a.href = URL.createObjectURL(blob);
+  a.click();
+  URL.revokeObjectURL(a.href);
+}
+
+type UnknownRecord = Record<string, unknown>;
+
+function isRecord(v: unknown): v is UnknownRecord {
+  return typeof v === "object" && v !== null;
+}
+
+function getDataField(v: unknown): UnknownRecord | undefined {
+  if (!isRecord(v)) return undefined;
+  const d = (v as UnknownRecord).data;
+  return isRecord(d) ? d : undefined;
+}
+
+function isArray(v: unknown): v is unknown[] {
+  return Array.isArray(v);
 }
 
-function importJSONResults(jsonPreResult: Record<string, unknown>) {
+function importJSONResults(jsonPreResult: unknown) {
+  const data = getDataField(jsonPreResult);
+
+  // If no valid "data" block, nothing to import
+  if (!data) {
+    toast.error("Cannot import visualization options: invalid JSON format");
+    return;
+  }
+
   // Compatibility with old saved visualization presets:
-  if (
-    jsonPreResult.data.savedVisualizationPresets &&
-    jsonPreResult.data.savedVisualizationPresets.length > 0
-  ) {
-    jsonPreResult.data.savedVisualizationPresets.forEach(
-      (sl: Record<string, unknown>) => {
-        if (sl.backgroundColor) {
-          sl.backgroundColor = new ColorTranslator(
-            sl.backgroundColor as string
-          );
+  const savedVisualizationPresets = data.savedVisualizationPresets;
+  if (isArray(savedVisualizationPresets) && savedVisualizationPresets.length > 0) {
+    savedVisualizationPresets.forEach((sl) => {
+      if (!isRecord(sl)) return;
+
+      if (typeof sl.backgroundColor === "string") {
+        sl.backgroundColor = new ColorTranslator(sl.backgroundColor);
+      }
+
+      const opt = sl.options;
+      if (isRecord(opt) && isRecord(opt.colormap)) {
+        const cm = opt.colormap;
+
+        if (typeof cm.startColorRGBAString === "string") {
+          cm.startColorRGBA = new ColorTranslator(cm.startColorRGBAString as string);
         }
-        if (sl.options) {
-          const opt = sl.options as {
-            colormap?: Record<string, unknown>;
-          };
-          if (opt.colormap) {
-            opt.colormap.startColorRGBA = new ColorTranslator(
-              opt.colormap.startColorRGBAString as string
-            );
-            opt.colormap.endColorRGBA = new ColorTranslator(
-              opt.colormap.endColorRGBAString as string
-            );
-          }
+        if (typeof cm.endColorRGBAString === "string") {
+          cm.endColorRGBA = new ColorTranslator(cm.endColorRGBAString as string);
         }
       }
-    );
+    });
   }
-  if (
-    jsonPreResult.data.savedLocations &&
-    jsonPreResult.data.savedLocations.length > 0
-  ) {
-    jsonPreResult.data.savedLocations.forEach((sl: Record<string, unknown>) => {
-      if (sl.backgroundColor) {
-        sl.backgroundColor = new ColorTranslator(sl.backgroundColor as string);
+
+  const savedLocations = data.savedLocations;
+  if (isArray(savedLocations) && savedLocations.length > 0) {
+    savedLocations.forEach((sl) => {
+      if (!isRecord(sl)) return;
+
+      if (typeof sl.backgroundColor === "string") {
+        sl.backgroundColor = new ColorTranslator(sl.backgroundColor);
       }
-      if (sl.options) {
-        const opt = sl.options as {
-          colormap?: Record<string, unknown>;
-        };
-        if (opt.colormap) {
-          opt.colormap.startColorRGBA = new ColorTranslator(
-            opt.colormap.startColorRGBAString as string
-          );
-          opt.colormap.endColorRGBA = new ColorTranslator(
-            opt.colormap.endColorRGBAString as string
-          );
+
+      const opt = sl.options;
+      if (isRecord(opt) && isRecord(opt.colormap)) {
+        const cm = opt.colormap;
+
+        if (typeof cm.startColorRGBAString === "string") {
+          cm.startColorRGBA = new ColorTranslator(cm.startColorRGBAString as string);
+        }
+        if (typeof cm.endColorRGBAString === "string") {
+          cm.endColorRGBA = new ColorTranslator(cm.endColorRGBAString as string);
         }
       }
     });
   }
 
+  // Now parse into your expected (new) format safely
   const jsonResult = jsonPreResult as {
     exportType: "visualizationOptions";
     data: {
       filename: string;
-      savedLocations: {
+      savedLocations?: {
         option_id: number;
         options: VisualizationOptions;
         backgroundColor?: string | ColorTranslator;
         name?: string;
       }[];
-      savedVisualizationPresets: {
+      savedVisualizationPresets?: {
         option_id: number;
         options: VisualizationOptions;
         backgroundColor?: string | ColorTranslator;
@@ -265,36 +288,35 @@ function importJSONResults(jsonPreResult: Record<string, unknown>) {
       }[];
     };
   };
-  // console.log(jsonResult);
-  // if (props.mapManager?.getOptions().filename !== jsonResult.data.filename) {
-  //   toast.message("Warning! You are importing presets saved for another file");
-  // }
-  (
-    jsonResult.data.savedVisualizationPresets ?? jsonResult.data.savedLocations
-  ).forEach((option) => {
-    const newId = 1 + optionsCount.value;
+
+  const arr =
+    jsonResult.data.savedVisualizationPresets ??
+    jsonResult.data.savedLocations ??
+    [];
+
+  arr.forEach((option) => {
+    const newId = nextOptionId();
+
     let backgroundColor: ColorTranslator = new ColorTranslator(
       "rgba(255,255,255,255)",
       { legacyCSS: true }
     );
-    if (option.backgroundColor) {
-      const b = option.backgroundColor;
-      if (b) {
-        if (b instanceof ColorTranslator) {
-          backgroundColor = option.backgroundColor as ColorTranslator;
-        } else {
-          backgroundColor = new ColorTranslator(option.backgroundColor);
-        }
-      }
+
+    const b = option.backgroundColor;
+    if (b instanceof ColorTranslator) {
+      backgroundColor = b;
+    } else if (typeof b === "string") {
+      backgroundColor = new ColorTranslator(b);
     }
+
     const newOption = {
       option_id: newId,
       options: option.options,
-      backgroundColor: backgroundColor,
+      backgroundColor,
       name: option.name ?? `Imported preset ${newId}`,
     };
     savedOptions.value.set(newOption.option_id, newOption);
-    optionsCount.value += 1;
+    bumpSavedOptions();
   });
 }
 

From eebf6d5ea8a614a01686703d1a7f9484cee0a978 Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Fri, 20 Feb 2026 03:53:39 +0400
Subject: [PATCH 02/27] Typo fixed

---
 src/app/ui/components/sidebar/SavedVisualOptions.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/ui/components/sidebar/SavedVisualOptions.vue b/src/app/ui/components/sidebar/SavedVisualOptions.vue
index 032cd41..bcfe7ba 100644
--- a/src/app/ui/components/sidebar/SavedVisualOptions.vue
+++ b/src/app/ui/components/sidebar/SavedVisualOptions.vue
@@ -83,7 +83,6 @@ import { storeToRefs } from "pinia";
 import { toast } from "vue-sonner";
 import { useStyleStore } from "@/app/stores/styleStore";
 import { ColorTranslator } from "colortranslator";
-import { onMounted } from "vue";
 import defaultOptions from "@/app/core/visualization/colormap/default_options.json";
 const visualizationOptionsStore = useVisualizationOptionsStore();
 const { preLogBase, applyCoolerWeights, postLogBase, colormap } = storeToRefs(

From 0c1b30a53ebca06cb94dad084b938614646e2de1 Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Sat, 21 Feb 2026 06:13:28 +0400
Subject: [PATCH 03/27] Port layers visibility sync

---
 src/app/core/VersionedXYZSource.ts            |  2 +
 .../mapmanagers/HiCViewAndLayersManager.ts    | 64 +++++++++++++++----
 2 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/app/core/VersionedXYZSource.ts b/src/app/core/VersionedXYZSource.ts
index ec8eb99..ac697e8 100644
--- a/src/app/core/VersionedXYZSource.ts
+++ b/src/app/core/VersionedXYZSource.ts
@@ -32,6 +32,7 @@ class VersionedXYZContactMapSource extends XYZ {
   constructor(
     protected readonly layersManager: HiCViewAndLayersManager,
     protected readonly zoomLevel: number,
+    protected readonly bpResolution: number,
     readonly xyzOptions?: XYZOptions
   ) {
     super(xyzOptions);
@@ -104,6 +105,7 @@ class VersionedXYZContactMapSource extends XYZ {
         `${unref(this.layersManager.mapManager.networkManager.host)}` +
         `/get_tile?version=${this.sourceVersion}` +
         `&level=${1 + this.zoomLevel}` +
+        `&bpResolution=${this.bpResolution}` +
         `&row=${row}` +
         `&col=${col}` +
         `&tile_size=${unref(this.layersManager.tileSize)}`
diff --git a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
index e271152..fae91da 100644
--- a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
+++ b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
@@ -370,6 +370,7 @@ class HiCViewAndLayersManager {
     const resolutionDescriptor =
       this.viewResolutionToResolutionDescriptor(viewResolution);
     this.currentViewState.resolutionDesciptor = resolutionDescriptor;
+    this.syncLayerVisibilityForCurrentResolution();
   }
 
   public onTileSizeChanged(tileSize: number): void {
@@ -502,23 +503,28 @@ class HiCViewAndLayersManager {
           this.mapManager.getOptions().tileSize,
         ],
       });
-      const layerSource = new VersionedXYZContactMapSource(this, i, {
-        projection: this.pixelProjection,
-        tileGrid: layerTileGrid,
-        interpolate: false,
-        cacheSize: 0,
-      });
+      const layerSource = new VersionedXYZContactMapSource(
+        this,
+        i,
+        layerResolution,
+        {
+          projection: this.pixelProjection,
+          tileGrid: layerTileGrid,
+          interpolate: false,
+          cacheSize: 0,
+        }
+      );
       layerSource.do_reload();
       // Define layer:
       const layer = new TileLayer({
         source: layerSource,
         // cacheSize: 0,
-        minResolution:
-          this.layerResolutionBorders.get(layerResolution)
-            ?.minResolutionInclusive,
-        maxResolution:
-          this.layerResolutionBorders.get(layerResolution)
-            ?.maxResolutionExclusive,
+        minResolution: this.toFiniteResolutionBound(
+          this.layerResolutionBorders.get(layerResolution)?.minResolutionInclusive
+        ),
+        maxResolution: this.toFiniteResolutionBound(
+          this.layerResolutionBorders.get(layerResolution)?.maxResolutionExclusive
+        ),
         zIndex: this.layersZIndices.HIC_MAP_LAYER_Z_INDEX,
       });
       layer.set("bpResolution", layerResolution);
@@ -972,6 +978,40 @@ class HiCViewAndLayersManager {
     this.reloadTracks();
     this.mapManager.map.changed();
   }
+
+  private toFiniteResolutionBound(bound: number | undefined): number | undefined {
+    return Number.isFinite(bound) ? bound : undefined;
+  }
+
+  private syncLayerVisibilityForCurrentResolution(): void {
+    const activeResolution = this.currentViewState.resolutionDesciptor.bpResolution;
+    if (!Number.isFinite(activeResolution)) {
+      return;
+    }
+
+    for (const layer of this.layersHolder.hicDataLayers) {
+      const layerResolution = Number(layer.get("bpResolution"));
+      layer.setVisible(layerResolution === activeResolution);
+    }
+
+    for (const layer of this.layersHolder.contigBordersLayers) {
+      const layerResolution = Number(layer.get("bpResolution"));
+      layer.setVisible(layerResolution === activeResolution);
+    }
+
+    for (const layer of this.layersHolder.scaffoldBordersLayers) {
+      const layerResolution = Number(layer.get("bpResolution"));
+      layer.setVisible(layerResolution === activeResolution);
+    }
+
+    for (const layer of this.layersHolder.contigTranslocationArrowsLayers) {
+      const layerResolution = Number(layer.get("bpResolution"));
+      layer.setVisible(
+        layerResolution === activeResolution &&
+          this.currentViewState.activeTool === ActiveTool.TRANSLOCATION
+      );
+    }
+  }
 }
 
 export {

From 5eded19e1f216f4cce1f57df33ad7b8f2f881583 Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Sat, 21 Feb 2026 06:37:47 +0400
Subject: [PATCH 04/27] Improve resolution borders at zoom

---
 .../mapmanagers/HiCViewAndLayersManager.ts    | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
index fae91da..eb55520 100644
--- a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
+++ b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
@@ -204,28 +204,38 @@ class HiCViewAndLayersManager {
       this.imageSizeScaled.push(
         this.imageSizes[i] * this.pixelResolutionSet[i]
       );
+      this.resolutionTuples.push({
+        bpResolution: this.resolutions[i],
+        pixelResolution: this.pixelResolutionSet[i],
+        layerResolutionBorders: {
+          minResolutionInclusive: Number.NaN,
+          maxResolutionExclusive: Number.NaN,
+        },
+        imageSizeIndex: i,
+      });
+    }
 
+    this.resolutionTuples.sort(
+      (a, b) => a.pixelResolution - b.pixelResolution
+    );
+    for (let i = 0; i < this.resolutionTuples.length; ++i) {
       const layerResolutionBorders: LayerResolutionBorders = {
         minResolutionInclusive:
-          i === this.resolutions.length - 1
+          i === 0
             ? Number.NEGATIVE_INFINITY
-            : this.pixelResolutionSet[i],
+            : this.resolutionTuples[i].pixelResolution,
         maxResolutionExclusive:
-          i === 0 ? Number.POSITIVE_INFINITY : this.pixelResolutionSet[i - 1],
+          i === this.resolutionTuples.length - 1
+            ? Number.POSITIVE_INFINITY
+            : this.resolutionTuples[i + 1].pixelResolution,
       };
-
+      this.resolutionTuples[i].layerResolutionBorders = layerResolutionBorders;
       this.layerResolutionBorders.set(
-        this.resolutions[i],
+        this.resolutionTuples[i].bpResolution,
         layerResolutionBorders
       );
-
-      this.resolutionTuples.push({
-        bpResolution: this.resolutions[i],
-        pixelResolution: this.pixelResolutionSet[i],
-        layerResolutionBorders: layerResolutionBorders,
-        imageSizeIndex: i,
-      });
     }
+
     this.resolutionTuples.sort(
       (a, b) =>
         a.layerResolutionBorders.minResolutionInclusive -

From 6971319ea30ffad7fe9f44b88b541b62d3d0ddde Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Sat, 21 Feb 2026 06:45:12 +0400
Subject: [PATCH 05/27] Add guards

---
 .../core/mapmanagers/ContigDimensionHolder.ts | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/app/core/mapmanagers/ContigDimensionHolder.ts b/src/app/core/mapmanagers/ContigDimensionHolder.ts
index 2e41990..ccc2b00 100644
--- a/src/app/core/mapmanagers/ContigDimensionHolder.ts
+++ b/src/app/core/mapmanagers/ContigDimensionHolder.ts
@@ -50,8 +50,10 @@ export default class ContigDimensionHolder {
       .forEach((id, ord) => (this.contigIdToOrd[id] = ord));
 
     this.resolutions.length = 0;
-    for (const resolution of contigDescriptors[0].contigLengthBins.keys()) {
-      this.resolutions.push(resolution);
+    if (contigDescriptors.length > 0) {
+      for (const resolution of contigDescriptors[0].contigLengthBins.keys()) {
+        this.resolutions.push(resolution);
+      }
     }
 
     this.contig_count = this.contigDescriptors.length;
@@ -193,10 +195,14 @@ export default class ContigDimensionHolder {
   ): number {
     const resolution_prefix_sum = this.prefix_sum_px.get(resolution);
     if (resolution_prefix_sum) {
+      const maxValue = resolution_prefix_sum[resolution_prefix_sum.length - 1] - 1;
+      if (maxValue < 0) {
+        return 0;
+      }
       return CommonUtils.clamp(
         coordinate,
         0,
-        resolution_prefix_sum[resolution_prefix_sum.length - 1] - 1
+        maxValue
       );
     } else {
       throw new Error("Missing resolution: " + resolution);
@@ -248,12 +254,15 @@ export default class ContigDimensionHolder {
   // search(3)
 
   public getContigOrderByPx(px: number, resolution: number): number {
+    if (this.contig_count <= 0) {
+      return 0;
+    }
     const prefix_sum_px = this.prefix_sum_px.get(resolution);
     if (!prefix_sum_px) {
       throw new Error("Unknown resolution for prefix_sum_px: " + resolution);
     }
     const contig_ord_containing_px = bounds.le(prefix_sum_px, px);
-    return contig_ord_containing_px;
+    return CommonUtils.clamp(contig_ord_containing_px, 0, this.contig_count - 1);
   }
 
   protected getStartBpOfBin_internal(
@@ -321,10 +330,15 @@ export default class ContigDimensionHolder {
   }
 
   public getStartBpOfPx(px: number, resolution: number): number {
+    if (this.contig_count <= 0) {
+      return 0;
+    }
     const prefixSumPx = this.prefix_sum_px.get(resolution);
-    const clampedPx: number = prefixSumPx
-      ? CommonUtils.clamp(px, 0, prefixSumPx[this.contig_count] - 1)
-      : px;
+    const maxPx = prefixSumPx ? prefixSumPx[this.contig_count] - 1 : -1;
+    if (maxPx < 0) {
+      return 0;
+    }
+    const clampedPx: number = CommonUtils.clamp(px, 0, maxPx);
     const start_bp = this.getStartBpOfPx_internal(clampedPx, resolution);
     return CommonUtils.clamp(
       start_bp,

From 2b07878eeaeb6a16c0b4cb1718608fb3f06ad34a Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Sat, 21 Feb 2026 06:51:08 +0400
Subject: [PATCH 06/27] Try debugging bottom layer

---
 src/app/core/controls/RulerControl.ts            | 16 ++++++++++++++--
 .../core/mapmanagers/HiCViewAndLayersManager.ts  | 13 +++++++++----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/app/core/controls/RulerControl.ts b/src/app/core/controls/RulerControl.ts
index d3ca401..fdef81e 100644
--- a/src/app/core/controls/RulerControl.ts
+++ b/src/app/core/controls/RulerControl.ts
@@ -168,9 +168,13 @@ class RulerControl extends Control {
 
     const pixelResolution = mapView.getResolution() ?? 1;
 
+    const layerPixelResolution = Number.isFinite(
+      resolutionDescriptor.pixelResolution
+    )
+      ? resolutionDescriptor.pixelResolution
+      : 1;
     const fraction1 =
-      pixelResolution /
-      resolutionDescriptor.layerResolutionBorders.minResolutionInclusive;
+      layerPixelResolution > 0 ? pixelResolution / layerPixelResolution : 1;
 
     const fixed_coordinates = transform(
       extent,
@@ -206,6 +210,14 @@ class RulerControl extends Control {
         )
       ),
     };
+    if (
+      !Number.isFinite(visibleMapBoxExtentPixel.left) ||
+      !Number.isFinite(visibleMapBoxExtentPixel.right) ||
+      !Number.isFinite(visibleMapBoxExtentPixel.top) ||
+      !Number.isFinite(visibleMapBoxExtentPixel.bottom)
+    ) {
+      return;
+    }
 
     // console.log(
     //   //   "Got extent",
diff --git a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
index eb55520..586d612 100644
--- a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
+++ b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
@@ -221,9 +221,7 @@ class HiCViewAndLayersManager {
     for (let i = 0; i < this.resolutionTuples.length; ++i) {
       const layerResolutionBorders: LayerResolutionBorders = {
         minResolutionInclusive:
-          i === 0
-            ? Number.NEGATIVE_INFINITY
-            : this.resolutionTuples[i].pixelResolution,
+          i === 0 ? 0 : this.resolutionTuples[i].pixelResolution,
         maxResolutionExclusive:
           i === this.resolutionTuples.length - 1
             ? Number.POSITIVE_INFINITY
@@ -566,6 +564,9 @@ class HiCViewAndLayersManager {
   public viewResolutionToResolutionDescriptor(
     viewResolution: number
   ): LayerResolutionDescriptor {
+    if (this.resolutionTuples.length === 0) {
+      throw new Error("No resolutions available");
+    }
     const testElement: LayerResolutionDescriptor = {
       bpResolution: Number.NaN,
       pixelResolution: Number.NaN,
@@ -575,13 +576,17 @@ class HiCViewAndLayersManager {
       },
       imageSizeIndex: Number.NaN,
     };
-    const descriptorIndex: number = bounds.le(
+    const descriptorIndexRaw: number = bounds.le(
       this.resolutionTuples,
       testElement,
       (d1, d2) =>
         d1.layerResolutionBorders.minResolutionInclusive -
         d2.layerResolutionBorders.minResolutionInclusive
     );
+    const descriptorIndex = Math.max(
+      0,
+      Math.min(descriptorIndexRaw, this.resolutionTuples.length - 1)
+    );
     const descriptor = this.resolutionTuples[descriptorIndex];
     return descriptor;
   }

From b202ee4be51aef3b865a27eb00ef28f8275eb7c2 Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Sat, 21 Feb 2026 06:54:41 +0400
Subject: [PATCH 07/27] Bottom layer should be visible from negative infinity
 resolution

---
 src/app/core/mapmanagers/HiCViewAndLayersManager.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
index 586d612..ccf300d 100644
--- a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
+++ b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
@@ -221,7 +221,9 @@ class HiCViewAndLayersManager {
     for (let i = 0; i < this.resolutionTuples.length; ++i) {
       const layerResolutionBorders: LayerResolutionBorders = {
         minResolutionInclusive:
-          i === 0 ? 0 : this.resolutionTuples[i].pixelResolution,
+          i === 0
+            ? Number.NEGATIVE_INFINITY
+            : this.resolutionTuples[i].pixelResolution,
         maxResolutionExclusive:
           i === this.resolutionTuples.length - 1
             ? Number.POSITIVE_INFINITY

From 12c33913036e4f1b04a0d5cf6229dd59d9800de9 Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Sat, 21 Feb 2026 07:12:36 +0400
Subject: [PATCH 08/27] Try fixing zoom logic

---
 src/ContigMouseWheelZoom.js        | 78 ++++++++++++++++++------------
 src/app/core/VersionedXYZSource.ts |  6 ++-
 2 files changed, 51 insertions(+), 33 deletions(-)

diff --git a/src/ContigMouseWheelZoom.js b/src/ContigMouseWheelZoom.js
index c83dde1..da0597a 100644
--- a/src/ContigMouseWheelZoom.js
+++ b/src/ContigMouseWheelZoom.js
@@ -75,6 +75,15 @@ export default class ContigMouseWheelZoom extends MouseWheelZoom {
     // .filter((l) => l instanceof TileLayer)
     // .sort((l1, l2) => l1.zIndex - l2.zIndex)[0];
 
+    if (this.useAnchor_) {
+      this.lastMouseCoord = mapBrowserEvent.coordinate;
+      this.lastMousePixel = mapBrowserEvent.pixel;
+      this.lastCenterPixel = [
+        Math.round(map.getSize()[0] / 2),
+        Math.round(map.getSize()[1] / 2),
+      ];
+    }
+
     if (hovered_layer) {
       const layer_projection = hovered_layer.getSource().getProjection();
       const pixelResolution = hovered_layer.get("pixelResolution");
@@ -102,13 +111,9 @@ export default class ContigMouseWheelZoom extends MouseWheelZoom {
 
       if (this.useAnchor_) {
         this.lastMouseBps = coord_bp;
-        this.lastMouseCoord = mapBrowserEvent.coordinate;
-        this.lastMousePixel = mapBrowserEvent.pixel;
-        this.lastCenterPixel = [
-          Math.round(map.getSize()[0] / 2),
-          Math.round(map.getSize()[1] / 2),
-        ];
       }
+    } else {
+      this.lastMouseBps = null;
     }
 
     // Delta normalisation inspired by
@@ -199,38 +204,25 @@ export default class ContigMouseWheelZoom extends MouseWheelZoom {
       return;
     }
 
+    const newZoom = view.getConstrainedZoom(currentZoom + delta);
+    const newResolution = view.getResolutionForZoom(newZoom);
+    if (newResolution === undefined) {
+      return;
+    }
+
+    const old_level_index = this.getClosestResolutionIndex(view.getResolution());
+    const new_level_index = this.getClosestResolutionIndex(newResolution);
+
     if (
       this.lastMouseBps &&
       this.lastCenterPixel &&
       this.lastMousePixel &&
       this.lastMouseCoord &&
-      !isNaN(this.lastMouseCoord[0])
+      !isNaN(this.lastMouseCoord[0]) &&
+      new_level_index !== old_level_index
     ) {
-      const newZoom = view.getConstrainedZoom(currentZoom + delta);
-      const newResolution = view.getResolutionForZoom(newZoom);
-      const oldResolutionPreOrder = binarySearch(
-        this.pixelResolutionSet,
-        view.getResolution(),
-        (a, b) => b - a
-      );
-      const old_level_index =
-        oldResolutionPreOrder >= 0
-          ? oldResolutionPreOrder
-          : -(oldResolutionPreOrder + 1);
-
-      const newResolutionPreOrder = binarySearch(
-        this.pixelResolutionSet,
-        newResolution,
-        (a, b) => b - a
-      );
-      const newResolutionOrder =
-        newResolutionPreOrder >= 0
-          ? newResolutionPreOrder
-          : -(newResolutionPreOrder + 1);
-      const new_level_index = newResolutionOrder;
-
-      if (new_level_index !== old_level_index) {
-        const newResolutionSeq = this.resolutions[newResolutionOrder];
+      const newResolutionSeq = this.resolutions[new_level_index];
+      if (newResolutionSeq !== undefined) {
         const finish_bin_1 = this.dimension_holder.getBinContainingBp(
           this.lastMouseBps[0],
           newResolutionSeq
@@ -263,6 +255,12 @@ export default class ContigMouseWheelZoom extends MouseWheelZoom {
           anchor: this.lastMouseCoord,
         });
       }
+    } else {
+      view.animate({
+        duration: this.duration_,
+        resolution: newResolution,
+        anchor: this.lastMouseCoord,
+      });
     }
 
     this.mode_ = undefined;
@@ -272,4 +270,20 @@ export default class ContigMouseWheelZoom extends MouseWheelZoom {
     // this.lastMousePixel = null;
     // this.lastCenterPixel = null;
   }
+
+  getClosestResolutionIndex(resolution) {
+    if (!this.pixelResolutionSet.length) {
+      return 0;
+    }
+    let bestIdx = 0;
+    let bestDist = Math.abs(this.pixelResolutionSet[0] - resolution);
+    for (let i = 1; i < this.pixelResolutionSet.length; ++i) {
+      const dist = Math.abs(this.pixelResolutionSet[i] - resolution);
+      if (dist < bestDist) {
+        bestIdx = i;
+        bestDist = dist;
+      }
+    }
+    return bestIdx;
+  }
 }
diff --git a/src/app/core/VersionedXYZSource.ts b/src/app/core/VersionedXYZSource.ts
index ac697e8..3765807 100644
--- a/src/app/core/VersionedXYZSource.ts
+++ b/src/app/core/VersionedXYZSource.ts
@@ -101,8 +101,12 @@ class VersionedXYZContactMapSource extends XYZ {
     return (coord_zxy: number[]) => {
       const col = coord_zxy[1];
       const row = coord_zxy[2];
+      const host = `${unref(this.layersManager.mapManager.networkManager.host)}`.replace(
+        /\/+$/,
+        ""
+      );
       return (
-        `${unref(this.layersManager.mapManager.networkManager.host)}` +
+        `${host}` +
         `/get_tile?version=${this.sourceVersion}` +
         `&level=${1 + this.zoomLevel}` +
         `&bpResolution=${this.bpResolution}` +

From 85dfe8f83fb5bf6d5e3b7ff4e2bd9e9dde489576 Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Mon, 23 Feb 2026 00:46:23 +0400
Subject: [PATCH 09/27] Improve saving visual options and add SVG export
 feature

---
 .../core/mapmanagers/CommonEventManager.ts    | 16 +++
 src/app/core/mapmanagers/ContactMapManager.ts | 85 ++++++++++++++++
 .../mapmanagers/HiCViewAndLayersManager.ts    | 86 ++++++++++++++++
 src/app/core/tracks/Track2DSymmetric.ts       | 13 ++-
 src/app/core/tracks/TrackStylePreset.ts       | 13 +++
 .../ui/components/sidebar/LayerComponent.vue  | 97 +++++++++++++++++--
 .../components/sidebar/SavedVisualOptions.vue |  9 ++
 .../sidebar/SavedVisualOptionsElement.vue     |  5 +
 src/app/ui/components/sidebar/SideBar.vue     | 49 ++++++++--
 .../components/upper_ribbon/HeaderRibbon.vue  |  1 +
 .../upper_ribbon/NormalizationSelector.vue    | 16 ++-
 11 files changed, 373 insertions(+), 17 deletions(-)
 create mode 100644 src/app/core/tracks/TrackStylePreset.ts

diff --git a/src/app/core/mapmanagers/CommonEventManager.ts b/src/app/core/mapmanagers/CommonEventManager.ts
index fe14faf..b4e4968 100644
--- a/src/app/core/mapmanagers/CommonEventManager.ts
+++ b/src/app/core/mapmanagers/CommonEventManager.ts
@@ -83,6 +83,22 @@ class CommonEventManager {
     this.mapManager.viewAndLayersManager.onScanffoldBorderStyleChanged(style);
   }
 
+  public onContigBorderWidthChanged(width: number): void {
+    this.mapManager.viewAndLayersManager.onContigBorderWidthChanged(width);
+  }
+
+  public onScaffoldBorderWidthChanged(width: number): void {
+    this.mapManager.viewAndLayersManager.onScaffoldBorderWidthChanged(width);
+  }
+
+  public onContigFillColorChanged(fillColor: string): void {
+    this.mapManager.viewAndLayersManager.onContigFillColorChanged(fillColor);
+  }
+
+  public onScaffoldFillColorChanged(fillColor: string): void {
+    this.mapManager.viewAndLayersManager.onScaffoldFillColorChanged(fillColor);
+  }
+
   // public onNormalizationChanged(
   //   normalizationSettings: NormalizationSettings
   // ): void {
diff --git a/src/app/core/mapmanagers/ContactMapManager.ts b/src/app/core/mapmanagers/ContactMapManager.ts
index 4feab47..fed35fd 100644
--- a/src/app/core/mapmanagers/ContactMapManager.ts
+++ b/src/app/core/mapmanagers/ContactMapManager.ts
@@ -34,6 +34,7 @@ import { CommonEventManager } from "./CommonEventManager";
 import { CurrentSignalRangeResponse } from "../net/api/response";
 import { VisualizationManager } from "./VisualizationManager";
 import { Ref } from "vue";
+import { VersionedXYZContactMapSource } from "../VersionedXYZSource";
 
 class ContactMapManager {
   public readonly map: Map;
@@ -178,6 +179,90 @@ class ContactMapManager {
     this.viewAndLayersManager.reloadTiles();
   }
 
+  public async exportCurrentMapSvg(): Promise<void> {
+    const descriptor =
+      this.viewAndLayersManager.currentViewState.resolutionDesciptor;
+    const imageSize =
+      this.viewAndLayersManager.imageSizes[descriptor.imageSizeIndex];
+    const tileSize = this.options.tileSize;
+
+    const layer =
+      this.viewAndLayersManager.layersHolder.bpResolutionToHiCDataLayer.get(
+        descriptor.bpResolution
+      );
+    if (!layer) {
+      throw new Error(
+        `Cannot export SVG: no data layer for resolution ${descriptor.bpResolution}`
+      );
+    }
+    const source = layer.getSource();
+    if (!(source instanceof VersionedXYZContactMapSource)) {
+      throw new Error("Cannot export SVG: unexpected data source type");
+    }
+
+    const tileUrlFn = source.getTileUrlFunction();
+    const projection = this.map.getView().getProjection();
+    const pixelRatio = window.devicePixelRatio ?? 1;
+    const tilesPerSide = Math.ceil(imageSize / tileSize);
+    const tiles: { col: number; row: number; url: string }[] = [];
+    for (let row = 0; row < tilesPerSide; row++) {
+      for (let col = 0; col < tilesPerSide; col++) {
+        const url = tileUrlFn([0, col, row], pixelRatio, projection);
+        if (url) {
+          tiles.push({ col, row, url });
+        }
+      }
+    }
+
+    const width = imageSize;
+    const height = imageSize;
+    const svgImages: string[] = [];
+    let nextIndex = 0;
+    const concurrency = 8;
+    const worker = async () => {
+      while (true) {
+        const idx = nextIndex++;
+        if (idx >= tiles.length) {
+          return;
+        }
+        const tile = tiles[idx];
+        try {
+          const response = await fetch(tile.url);
+          const data = await response.json();
+          if (data && data.image) {
+            const x = tile.col * tileSize;
+            const y = tile.row * tileSize;
+            const tileWidth = Math.min(tileSize, width - x);
+            const tileHeight = Math.min(tileSize, height - y);
+            svgImages.push(
+              `<image x=\"${x}\" y=\"${y}\" width=\"${tileWidth}\" height=\"${tileHeight}\" href=\"${data.image}\" />`
+            );
+          }
+        } catch (e) {
+          console.error("Failed to export tile", tile, e);
+        }
+      }
+    };
+
+    await Promise.all(Array.from({ length: concurrency }, () => worker()));
+
+    let svg =
+      `<?xml version=\"1.0\" encoding=\"UTF-8\"?>` +
+      `<svg xmlns=\"http://www.w3.org/2000/svg\" ` +
+      `xmlns:xlink=\"http://www.w3.org/1999/xlink\" ` +
+      `width=\"${width}\" height=\"${height}\" viewBox=\"0 0 ${width} ${height}\">`;
+
+    svg += svgImages.join("");
+    svg += `</svg>`;
+
+    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);
+  }
+
   public dispose() {
     this.map.setTarget(undefined);
   }
diff --git a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
index ccf300d..d579bbb 100644
--- a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
+++ b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
@@ -32,6 +32,8 @@ import VectorSource from "ol/source/Vector";
 import Stroke from "ol/style/Stroke";
 import Style from "ol/style/Style";
 import TileGrid from "ol/tilegrid/TileGrid";
+import { asString, type Color } from "ol/color";
+import type { ColorLike } from "ol/colorlike";
 import { type Ref, ref } from "vue";
 import ContigMouseWheelZoom from "@/ContigMouseWheelZoom";
 import BinMousePosition from "@/BinMousePosition";
@@ -46,6 +48,10 @@ import {
   Track2DSymmetric,
   BorderStyle,
 } from "../tracks/Track2DSymmetric";
+import type {
+  TrackStylePreset,
+  TrackStylePresetBundle,
+} from "../tracks/TrackStylePreset";
 import Fill from "ol/style/Fill";
 import { pointerMove, shiftKeyOnly, singleClick } from "ol/events/condition";
 import type { ContigDescriptor } from "../domain/ContigDescriptor";
@@ -424,6 +430,20 @@ class HiCViewAndLayersManager {
     this.reloadTracks();
   }
 
+  public onContigBorderWidthChanged(width: number): void {
+    this.track2DHolder.contigBordersTrack.options.width = Math.max(1, width);
+    this.track2DHolder.contigBordersTrack.style =
+      this.track2DHolder.contigBordersTrack.generateStyleFunction()();
+    this.reloadTracks();
+  }
+
+  public onContigFillColorChanged(fillColor: string): void {
+    this.track2DHolder.contigBordersTrack.options.fillColor = fillColor;
+    this.track2DHolder.contigBordersTrack.style =
+      this.track2DHolder.contigBordersTrack.generateStyleFunction()();
+    this.reloadTracks();
+  }
+
   public onScanffoldBorderStyleChanged(style: BorderStyle): void {
     this.track2DHolder.scaffoldBordersTrack.setStyleType(style);
 
@@ -433,6 +453,72 @@ class HiCViewAndLayersManager {
     this.reloadTracks();
   }
 
+  public onScaffoldBorderWidthChanged(width: number): void {
+    this.track2DHolder.scaffoldBordersTrack.options.width = Math.max(1, width);
+    this.track2DHolder.scaffoldBordersTrack.style =
+      this.track2DHolder.scaffoldBordersTrack.generateStyleFunction()();
+    this.reloadTracks();
+  }
+
+  public onScaffoldFillColorChanged(fillColor: string): void {
+    this.track2DHolder.scaffoldBordersTrack.options.fillColor = fillColor;
+    this.track2DHolder.scaffoldBordersTrack.style =
+      this.track2DHolder.scaffoldBordersTrack.generateStyleFunction()();
+    this.reloadTracks();
+  }
+
+  public getTrackStylePreset(): TrackStylePresetBundle {
+    return {
+      contigs: this.getSingleTrackStylePreset(
+        this.track2DHolder.contigBordersTrack
+      ),
+      scaffolds: this.getSingleTrackStylePreset(
+        this.track2DHolder.scaffoldBordersTrack
+      ),
+    };
+  }
+
+  public applyTrackStylePreset(preset: TrackStylePresetBundle): void {
+    this.applySingleTrackStylePreset(
+      this.track2DHolder.contigBordersTrack,
+      preset.contigs
+    );
+    this.applySingleTrackStylePreset(
+      this.track2DHolder.scaffoldBordersTrack,
+      preset.scaffolds
+    );
+    this.reloadTracks();
+  }
+
+  private getSingleTrackStylePreset(track: Track2DSymmetric): TrackStylePreset {
+    const borderColor = this.colorLikeToString(track.options.borderColor);
+    const fillColor = this.colorLikeToString(track.options.fillColor);
+    return {
+      borderColor,
+      fillColor,
+      width: track.options.width,
+      borderStyle: track.getStyleType(),
+    };
+  }
+
+  private applySingleTrackStylePreset(
+    track: Track2DSymmetric,
+    preset: TrackStylePreset
+  ): void {
+    track.options.borderColor = preset.borderColor;
+    track.options.fillColor = preset.fillColor;
+    track.options.width = Math.max(1, preset.width);
+    track.setStyleType(preset.borderStyle);
+    track.style = track.generateStyleFunction()();
+  }
+
+  private colorLikeToString(color: Color | ColorLike): string {
+    if (typeof color === "string") {
+      return color;
+    }
+    return asString(color as Color);
+  }
+
   public getView(): View {
     return this.view;
   }
diff --git a/src/app/core/tracks/Track2DSymmetric.ts b/src/app/core/tracks/Track2DSymmetric.ts
index 200995b..fabfbce 100644
--- a/src/app/core/tracks/Track2DSymmetric.ts
+++ b/src/app/core/tracks/Track2DSymmetric.ts
@@ -87,6 +87,14 @@ abstract class Track2DSymmetric extends Track2D {
     return this.style;
   }
 
+  public getStyleType(): BorderStyle {
+    return BorderStyle.FULL;
+  }
+
+  public setStyleType(_style: BorderStyle): void {
+    // Default: non-ring tracks ignore border style changes.
+  }
+
   public generateStyleFunction(): () => Style {
     const style = new Style({
       stroke: new Stroke({
@@ -158,9 +166,12 @@ class BasePairsTrack2DSymmetric extends Track2DSymmetric {
 
 abstract class WithRing extends Track2DSymmetric {
   protected borderStyle: BorderStyle = BorderStyle.FULL;
-  public setStyleType(style: BorderStyle): void {
+  public override setStyleType(style: BorderStyle): void {
     this.borderStyle = style;
   }
+  public override getStyleType(): BorderStyle {
+    return this.borderStyle;
+  }
   protected drawPolygon(
     topLeft: Array<number>,
     topRight: Array<number>,
diff --git a/src/app/core/tracks/TrackStylePreset.ts b/src/app/core/tracks/TrackStylePreset.ts
new file mode 100644
index 0000000..40e38b5
--- /dev/null
+++ b/src/app/core/tracks/TrackStylePreset.ts
@@ -0,0 +1,13 @@
+import { BorderStyle } from "@/app/core/tracks/Track2DSymmetric";
+
+export type TrackStylePreset = {
+  borderColor: string;
+  fillColor: string;
+  width: number;
+  borderStyle: BorderStyle;
+};
+
+export type TrackStylePresetBundle = {
+  contigs: TrackStylePreset;
+  scaffolds: TrackStylePreset;
+};
diff --git a/src/app/ui/components/sidebar/LayerComponent.vue b/src/app/ui/components/sidebar/LayerComponent.vue
index 71d7dd1..1a5cf36 100644
--- a/src/app/ui/components/sidebar/LayerComponent.vue
+++ b/src/app/ui/components/sidebar/LayerComponent.vue
@@ -43,7 +43,49 @@
         <i v-if="bordersStyle === 1" class="bi bi-arrow-down-left"></i>
         <i v-if="bordersStyle === 2" class="bi bi-arrow-up-right"></i>
       </div>
-      <i class="bi bi-pencil edit-btn" @click="editLayer"></i>
+      <div
+        v-if="enableStyleEditor"
+        class="dropdown dropdown-sm"
+        data-bs-auto-close="false"
+      >
+        <i
+          class="bi bi-pencil edit-btn dropdown-toggle"
+          data-bs-toggle="dropdown"
+          aria-expanded="false"
+          @click="openStyleEditor"
+        ></i>
+        <div class="dropdown-menu p-3 track-style-menu">
+          <div class="mb-2">
+            <label class="form-label" for="track-border-width"
+              >Border width</label
+            >
+            <input
+              id="track-border-width"
+              class="form-control form-control-sm"
+              type="number"
+              min="1"
+              step="1"
+              v-model.number="borderWidth"
+            />
+          </div>
+          <div class="mb-2">
+            <label class="form-label">Fill color</label>
+            <ColorPickerRectangle
+              :position="['top', 'left']"
+              :getDefaultColor="getDefaultFillColor"
+              @onColorChanged="(c: ColorTranslator) => (fillColor = c)"
+            ></ColorPickerRectangle>
+          </div>
+          <div class="d-flex gap-2">
+            <button class="btn btn-sm btn-success" @click="applyStyle">
+              Apply
+            </button>
+            <button class="btn btn-sm btn-outline-secondary" @click="resetStyle">
+              Reset
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -53,15 +95,14 @@ import { type Ref, ref } from "vue";
 import { BorderStyle } from "@/app/core/tracks/Track2DSymmetric";
 import ColorPickerRectangle from "./ColorPickerRectangle.vue";
 import Style from "ol/style/Style";
-import { Color } from "ol/color";
-import { toast } from "vue-sonner";
 import { ColorTranslator } from "colortranslator";
-import { ColorLike } from "ol/colorlike";
+import type { ColorLike } from "ol/colorlike";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const props = defineProps<{
   layerName: string;
   getDefaultColor?: () => Style | undefined;
+  enableStyleEditor?: boolean;
 }>();
 
 function getBaseColor(): ColorTranslator {
@@ -86,9 +127,19 @@ const emit = defineEmits<{
     layerName: string,
     borderStyle: BorderStyle
   ): void;
+  (
+    e: "onStyleChanged",
+    layerName: string,
+    borderWidth: number,
+    fillColor: ColorTranslator
+  ): void;
 }>();
 
 const currentColor = ref(new ColorTranslator("#ffaaff", { legacyCSS: true }));
+const borderWidth: Ref<number> = ref(2);
+const fillColor: Ref<ColorTranslator> = ref(
+  new ColorTranslator("rgba(0,0,0,0.0)", { legacyCSS: true })
+) as Ref<ColorTranslator>;
 
 const bordersStyle: Ref<number> = ref(0);
 const visible: Ref<boolean> = ref(true);
@@ -112,8 +163,42 @@ function updateBorderStyle() {
   emit("onBorderStyleChanged", props.layerName as string, bordersStyle.value);
   // (Object.values(BorderStyle) as Array<BorderStyle>)[bordersStyle.value]
 }
-function editLayer() {
-  toast.error("Editing layer is not implemented for " + props.layerName);
+
+function getDefaultFillColor(): ColorTranslator {
+  if (props.getDefaultColor) {
+    const olColorString = props
+      .getDefaultColor()
+      ?.getFill()
+      ?.getColor() as ColorLike as string;
+    if (olColorString) {
+      return new ColorTranslator(olColorString, { legacyCSS: true });
+    }
+  }
+  return new ColorTranslator("rgba(0,0,0,0.0)", { legacyCSS: true });
+}
+
+function openStyleEditor() {
+  if (!props.getDefaultColor) return;
+  const style = props.getDefaultColor();
+  const strokeWidth = style?.getStroke()?.getWidth();
+  if (strokeWidth) {
+    borderWidth.value = strokeWidth;
+  }
+  fillColor.value = getDefaultFillColor();
+}
+
+function applyStyle() {
+  emit(
+    "onStyleChanged",
+    props.layerName as string,
+    borderWidth.value,
+    fillColor.value
+  );
+}
+
+function resetStyle() {
+  openStyleEditor();
+  applyStyle();
 }
 </script>
 
diff --git a/src/app/ui/components/sidebar/SavedVisualOptions.vue b/src/app/ui/components/sidebar/SavedVisualOptions.vue
index bcfe7ba..07f04b1 100644
--- a/src/app/ui/components/sidebar/SavedVisualOptions.vue
+++ b/src/app/ui/components/sidebar/SavedVisualOptions.vue
@@ -65,6 +65,7 @@
         :option_id="opt.option_id"
         :visualization-options="opt.options"
         :background-color="opt.backgroundColor"
+        :track-styles="opt.trackStyles"
         :name="opt.name"
         @remove="removeOption"
         @rename="renameOption"
@@ -78,6 +79,7 @@ import { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
 import { Ref, ref, shallowRef, triggerRef, onMounted } from "vue";
 import SavedVisualOptionsElement from "./SavedVisualOptionsElement.vue";
 import VisualizationOptions from "@/app/core/visualization/VisualizationOptions";
+import type { TrackStylePresetBundle } from "@/app/core/tracks/TrackStylePreset";
 import { useVisualizationOptionsStore } from "@/app/stores/visualizationOptionsStore";
 import { storeToRefs } from "pinia";
 import { toast } from "vue-sonner";
@@ -109,6 +111,7 @@ const savedOptions = shallowRef(
       name: string;
       options: VisualizationOptions;
       backgroundColor: ColorTranslator;
+      trackStyles?: TrackStylePresetBundle;
     }
   >()
 );
@@ -142,6 +145,7 @@ function saveOptions() {
     name: `Preset ${id}`,
     options: visualizationOptionsStore.asVisualizationOptions(),
     backgroundColor: mapBackgroundColor.value as ColorTranslator,
+    trackStyles: props.mapManager.getLayersManager().getTrackStylePreset(),
   });
   bumpSavedOptions();
 }
@@ -165,6 +169,7 @@ function exportOptions() {
     options: VisualizationOptions;
     backgroundColor: string; // <-- stable
     name: string;
+    trackStyles?: TrackStylePresetBundle;
   }[] = [];
 
   savedOptions.value.forEach((v) =>
@@ -173,6 +178,7 @@ function exportOptions() {
       options: v.options,
       name: v.name,
       backgroundColor: colorToString(v.backgroundColor),
+      trackStyles: v.trackStyles,
     })
   );
 
@@ -278,12 +284,14 @@ function importJSONResults(jsonPreResult: unknown) {
         options: VisualizationOptions;
         backgroundColor?: string | ColorTranslator;
         name?: string;
+        trackStyles?: TrackStylePresetBundle;
       }[];
       savedVisualizationPresets?: {
         option_id: number;
         options: VisualizationOptions;
         backgroundColor?: string | ColorTranslator;
         name?: string;
+        trackStyles?: TrackStylePresetBundle;
       }[];
     };
   };
@@ -312,6 +320,7 @@ function importJSONResults(jsonPreResult: unknown) {
       option_id: newId,
       options: option.options,
       backgroundColor,
+      trackStyles: option.trackStyles,
       name: option.name ?? `Imported preset ${newId}`,
     };
     savedOptions.value.set(newOption.option_id, newOption);
diff --git a/src/app/ui/components/sidebar/SavedVisualOptionsElement.vue b/src/app/ui/components/sidebar/SavedVisualOptionsElement.vue
index c710b88..585bb16 100644
--- a/src/app/ui/components/sidebar/SavedVisualOptionsElement.vue
+++ b/src/app/ui/components/sidebar/SavedVisualOptionsElement.vue
@@ -67,6 +67,7 @@
 <script setup lang="ts">
 import { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
 import VisualizationOptions from "@/app/core/visualization/VisualizationOptions";
+import type { TrackStylePresetBundle } from "@/app/core/tracks/TrackStylePreset";
 import { ref } from "vue";
 import { useVisualizationOptionsStore } from "@/app/stores/visualizationOptionsStore";
 import { storeToRefs } from "pinia";
@@ -87,6 +88,7 @@ const props = defineProps<{
   name: string;
   visualizationOptions: VisualizationOptions;
   backgroundColor: ColorTranslator;
+  trackStyles?: TrackStylePresetBundle;
 }>();
 
 const emits = defineEmits<{
@@ -110,6 +112,9 @@ function setOptionsPreset() {
       props.visualizationOptions
     );
     stylesStore.setMapBackground(props.backgroundColor);
+    if (props.trackStyles) {
+      props.mapManager.getLayersManager().applyTrackStylePreset(props.trackStyles);
+    }
     props.mapManager?.visualizationManager
       .sendVisualizationOptionsToServer()
       .then(() => props.mapManager?.reloadTiles());
diff --git a/src/app/ui/components/sidebar/SideBar.vue b/src/app/ui/components/sidebar/SideBar.vue
index ce554fd..a860e25 100644
--- a/src/app/ui/components/sidebar/SideBar.vue
+++ b/src/app/ui/components/sidebar/SideBar.vue
@@ -36,8 +36,10 @@
           v-bind:key="layer.name"
           v-bind:layer-name="layer.name"
           :getDefaultColor="layer.getStyle"
+          :enableStyleEditor="layer.enableStyleEditor"
           @onColorChanged="onColorChanged"
           @onBorderStyleChanged="onBorderStyleChanged"
+          @onStyleChanged="onStyleChanged"
         >
         </LayerComponent>
       </div>
@@ -117,20 +119,29 @@ class LayerDescriptor {
   constructor(
     public name: string,
     public getStyle?: () => Style | undefined,
-    public layer_manager?: unknown
+    public layer_manager?: unknown,
+    public enableStyleEditor: boolean = false
   ) {}
 }
 
 const layers: Ref<LayerDescriptor[]> = ref([
-  new LayerDescriptor("Contigs", () =>
-    props.mapManager
-      ?.getLayersManager()
-      .track2DHolder.contigBordersTrack.getStyle()
+  new LayerDescriptor(
+    "Contigs",
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.contigBordersTrack.getStyle(),
+    undefined,
+    true
   ),
-  new LayerDescriptor("Scaffolds", () =>
-    props.mapManager
-      ?.getLayersManager()
-      .track2DHolder.scaffoldBordersTrack.getStyle()
+  new LayerDescriptor(
+    "Scaffolds",
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.scaffoldBordersTrack.getStyle(),
+    undefined,
+    true
   ),
   new LayerDescriptor("Gridlines"),
   new LayerDescriptor("Background", () => backgroundColorStyle.value),
@@ -172,6 +183,26 @@ function onBorderStyleChanged(layerName: string, style: BorderStyle) {
   }
 }
 
+function onStyleChanged(
+  layerName: string,
+  borderWidth: number,
+  fillColor: ColorTranslator
+) {
+  switch (layerName) {
+    case "Contigs":
+      getEventManager()?.onContigBorderWidthChanged(borderWidth);
+      getEventManager()?.onContigFillColorChanged(fillColor.RGBA);
+      break;
+    case "Scaffolds":
+      getEventManager()?.onScaffoldBorderWidthChanged(borderWidth);
+      getEventManager()?.onScaffoldFillColorChanged(fillColor.RGBA);
+      break;
+    default:
+      toast.error(`Method for ${layerName} is undefined`);
+      console.error(`Method for ${layerName} is undefined`);
+  }
+}
+
 function getEventManager(): CommonEventManager | undefined {
   return props.mapManager != undefined
     ? new CommonEventManager(props.mapManager)
diff --git a/src/app/ui/components/upper_ribbon/HeaderRibbon.vue b/src/app/ui/components/upper_ribbon/HeaderRibbon.vue
index 23c226f..5ca58fa 100644
--- a/src/app/ui/components/upper_ribbon/HeaderRibbon.vue
+++ b/src/app/ui/components/upper_ribbon/HeaderRibbon.vue
@@ -102,6 +102,7 @@
         id="export-png-button"
         class="btn-sm btn-outline-primary"
         type="button"
+        @click="props.mapManager?.exportCurrentMapSvg()"
       >
         <i class="bi bi-box-arrow-up"></i>
       </button>
diff --git a/src/app/ui/components/upper_ribbon/NormalizationSelector.vue b/src/app/ui/components/upper_ribbon/NormalizationSelector.vue
index 03949e6..62cba49 100644
--- a/src/app/ui/components/upper_ribbon/NormalizationSelector.vue
+++ b/src/app/ui/components/upper_ribbon/NormalizationSelector.vue
@@ -177,7 +177,7 @@
 
 <script setup lang="ts">
 import { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
-import { Ref, ref } from "vue";
+import { Ref, ref, watch } from "vue";
 import { useVisualizationOptionsStore } from "@/app/stores/visualizationOptionsStore";
 import { storeToRefs } from "pinia";
 import { toast } from "vue-sonner";
@@ -216,6 +216,20 @@ function resetAttributes(): void {
   applySettings();
 }
 
+watch(
+  () => preLogBase.value,
+  (value) => {
+    applyPreLog.value = value > 0;
+  }
+);
+
+watch(
+  () => postLogBase.value,
+  (value) => {
+    applyPostLog.value = value > 0;
+  }
+);
+
 function applySettings(): void {
   // props.mapManager?.eventManager.onNormalizationChanged({
   //   applyCoolerWeights: applyCoolerWeights.value,

From d3840bd050a5e78821e05716eb8948407979fb03 Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Mon, 23 Feb 2026 02:00:15 +0400
Subject: [PATCH 10/27] Added progress slider for SVG export

---
 src/app/core/mapmanagers/ContactMapManager.ts | 13 +++++-
 src/app/core/net/api/RequestManager.ts        | 12 ++++++
 src/app/stores/errorToastStore.ts             | 12 ++++++
 .../components/upper_ribbon/HeaderRibbon.vue  | 25 +++++++++++-
 .../components/upper_ribbon/NavigationBar.vue | 39 +++++++++++++++++-
 .../upper_ribbon/UniversalFileSelector.vue    | 17 +-------
 src/main.ts                                   | 40 +++++++++++++++++++
 7 files changed, 137 insertions(+), 21 deletions(-)
 create mode 100644 src/app/stores/errorToastStore.ts

diff --git a/src/app/core/mapmanagers/ContactMapManager.ts b/src/app/core/mapmanagers/ContactMapManager.ts
index fed35fd..e83e622 100644
--- a/src/app/core/mapmanagers/ContactMapManager.ts
+++ b/src/app/core/mapmanagers/ContactMapManager.ts
@@ -179,7 +179,9 @@ class ContactMapManager {
     this.viewAndLayersManager.reloadTiles();
   }
 
-  public async exportCurrentMapSvg(): Promise<void> {
+  public async exportCurrentMapSvg(
+    progressCallback?: (progress: number) => void
+  ): Promise<void> {
     const descriptor =
       this.viewAndLayersManager.currentViewState.resolutionDesciptor;
     const imageSize =
@@ -217,6 +219,7 @@ class ContactMapManager {
     const width = imageSize;
     const height = imageSize;
     const svgImages: string[] = [];
+    let completed = 0;
     let nextIndex = 0;
     const concurrency = 8;
     const worker = async () => {
@@ -238,8 +241,16 @@ class ContactMapManager {
               `<image x=\"${x}\" y=\"${y}\" width=\"${tileWidth}\" height=\"${tileHeight}\" href=\"${data.image}\" />`
             );
           }
+          completed += 1;
+          if (progressCallback) {
+            progressCallback(completed / Math.max(tiles.length, 1));
+          }
         } catch (e) {
           console.error("Failed to export tile", tile, e);
+          completed += 1;
+          if (progressCallback) {
+            progressCallback(completed / Math.max(tiles.length, 1));
+          }
         }
       }
     };
diff --git a/src/app/core/net/api/RequestManager.ts b/src/app/core/net/api/RequestManager.ts
index 4dd9d23..6341e91 100644
--- a/src/app/core/net/api/RequestManager.ts
+++ b/src/app/core/net/api/RequestManager.ts
@@ -68,6 +68,7 @@ import {
   CurrentSignalRangeResponse,
 } from "./response";
 import { toast } from "vue-sonner";
+import { useErrorToastStore } from "@/app/stores/errorToastStore";
 import VisualizationOptions from "../../visualization/VisualizationOptions";
 
 class RequestManager {
@@ -104,6 +105,17 @@ class RequestManager {
           }
         }
         return req;
+      })
+      .catch((err) => {
+        const errorToastStore = useErrorToastStore();
+        if (errorToastStore.requestErrorToastsEnabled) {
+          const message =
+            err?.response?.data?.error ??
+            err?.message ??
+            "Request failed";
+          toast.error(message);
+        }
+        throw err;
       });
   }
 
diff --git a/src/app/stores/errorToastStore.ts b/src/app/stores/errorToastStore.ts
new file mode 100644
index 0000000..c91ce87
--- /dev/null
+++ b/src/app/stores/errorToastStore.ts
@@ -0,0 +1,12 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useErrorToastStore = defineStore("errorToast", () => {
+  const requestErrorToastsEnabled = ref(true);
+  const webuiErrorToastsEnabled = ref(true);
+
+  return {
+    requestErrorToastsEnabled,
+    webuiErrorToastsEnabled,
+  };
+});
diff --git a/src/app/ui/components/upper_ribbon/HeaderRibbon.vue b/src/app/ui/components/upper_ribbon/HeaderRibbon.vue
index 5ca58fa..afa8f52 100644
--- a/src/app/ui/components/upper_ribbon/HeaderRibbon.vue
+++ b/src/app/ui/components/upper_ribbon/HeaderRibbon.vue
@@ -102,9 +102,15 @@
         id="export-png-button"
         class="btn-sm btn-outline-primary"
         type="button"
-        @click="props.mapManager?.exportCurrentMapSvg()"
+        :disabled="exportingSvg"
+        @click="exportSvg"
+        title="Export full map as SVG"
       >
-        <i class="bi bi-box-arrow-up"></i>
+        <span v-if="!exportingSvg"><i class="bi bi-box-arrow-up"></i></span>
+        <span v-else>
+          <span class="spinner-border spinner-border-sm me-2"></span>
+          {{ Math.round(svgProgress * 100) }}%
+        </span>
       </button>
     </div>
   </div>
@@ -121,6 +127,21 @@ const props = defineProps<{
 
 const rowContigId: Ref<number | null> = ref(null);
 const columnContigId: Ref<number | null> = ref(null);
+const exportingSvg = ref(false);
+const svgProgress = ref(0);
+
+async function exportSvg() {
+  if (!props.mapManager || exportingSvg.value) return;
+  exportingSvg.value = true;
+  svgProgress.value = 0;
+  try {
+    await props.mapManager.exportCurrentMapSvg((progress) => {
+      svgProgress.value = progress;
+    });
+  } finally {
+    exportingSvg.value = false;
+  }
+}
 
 function checkOptionsAndSnapToContigIntersection() {
   // alert("Row " + rowContigId.value + " Column " + columnContigId.value);
diff --git a/src/app/ui/components/upper_ribbon/NavigationBar.vue b/src/app/ui/components/upper_ribbon/NavigationBar.vue
index fc7fb53..55e0353 100644
--- a/src/app/ui/components/upper_ribbon/NavigationBar.vue
+++ b/src/app/ui/components/upper_ribbon/NavigationBar.vue
@@ -123,8 +123,38 @@
             </ul>
           </li>
           <!-- Dev -->
-          <li class="nav-item">
-            <a aria-current="page" class="nav-link active" href="#">Dev</a>
+          <li class="nav-item dropdown">
+            <a
+              aria-current="page"
+              class="nav-link active dropdown-toggle"
+              data-bs-toggle="dropdown"
+              href="#"
+              >Dev</a
+            >
+            <ul class="dropdown-menu p-3">
+              <li class="form-check">
+                <input
+                  id="toggle-request-errors"
+                  class="form-check-input"
+                  type="checkbox"
+                  v-model="requestErrorToastsEnabled"
+                />
+                <label class="form-check-label" for="toggle-request-errors">
+                  Show request error toasts
+                </label>
+              </li>
+              <li class="form-check mt-2">
+                <input
+                  id="toggle-webui-errors"
+                  class="form-check-input"
+                  type="checkbox"
+                  v-model="webuiErrorToastsEnabled"
+                />
+                <label class="form-check-label" for="toggle-webui-errors">
+                  Show WebUI error toasts
+                </label>
+              </li>
+            </ul>
           </li>
           <!-- Connection settings -->
           <li class="nav-item dropdown">
@@ -220,6 +250,8 @@ import { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
 import CoolerConverter from "./CoolerConverter.vue";
 import UniversalFileSelector from "@/app/ui/components/upper_ribbon/UniversalFileSelector.vue";
 import { toast } from "vue-sonner";
+import { storeToRefs } from "pinia";
+import { useErrorToastStore } from "@/app/stores/errorToastStore";
 const openingFile = ref(false);
 const openingFASTAFile = ref(false);
 const openingAGPFile = ref(false);
@@ -238,6 +270,9 @@ const props = defineProps<{
 }>();
 
 const errorMessage: Ref<unknown | null> = ref(null);
+const errorToastStore = useErrorToastStore();
+const { requestErrorToastsEnabled, webuiErrorToastsEnabled } =
+  storeToRefs(errorToastStore);
 
 function onOpenFile() {
   openingFile.value = true;
diff --git a/src/app/ui/components/upper_ribbon/UniversalFileSelector.vue b/src/app/ui/components/upper_ribbon/UniversalFileSelector.vue
index 7774c7f..eb52c8b 100644
--- a/src/app/ui/components/upper_ribbon/UniversalFileSelector.vue
+++ b/src/app/ui/components/upper_ribbon/UniversalFileSelector.vue
@@ -50,21 +50,6 @@
             <div class="spinner-border ms-auto" role="status"></div>
           </div>
           <div>
-            <select
-              class="form-select form-select-lg mb-3"
-              v-model="selectedFilename"
-            >
-              <option selected>
-                Select {{ props.fileType ?? "a" }} file from the list below...
-              </option>
-              <option
-                v-for="(filename, idx) in filenames"
-                :key="idx"
-                :value="filename"
-              >
-                {{ filename }}
-              </option>
-            </select>
             <div class="card flex justify-content-center" v-if="primeVueTree">
               <Tree
                 :filter="true"
@@ -385,7 +370,7 @@ function onNodeSelect(evt: { originalIndex?: number; key?: string }) {
   // console.log(evt);
   const idx = evt.originalIndex;
   const key = evt.key;
-  if (idx) {
+  if (idx !== undefined && idx !== null) {
     const fn = filenames.value;
     if (fn) {
       selectedFilename.value = fn[idx];
diff --git a/src/main.ts b/src/main.ts
index e1cb5e9..ead0758 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -31,6 +31,8 @@ import "primeicons/primeicons.css";
 // import "./assets/main.css";
 import { createApp } from "vue";
 import { createPinia } from "pinia";
+import { useErrorToastStore } from "@/app/stores/errorToastStore";
+import { toast } from "vue-sonner";
 
 const pinia = createPinia();
 
@@ -39,3 +41,41 @@ const pinia = createPinia();
 const app = createApp(App);
 app.use(pinia);
 app.mount("#app");
+
+const errorToastStore = useErrorToastStore(pinia);
+
+const originalConsoleError = console.error.bind(console);
+console.error = (...args: unknown[]) => {
+  originalConsoleError(...args);
+  if (!errorToastStore.webuiErrorToastsEnabled) return;
+  try {
+    const message = args
+      .map((arg) => {
+        if (arg instanceof Error) return arg.message;
+        if (typeof arg === "string") return arg;
+        return JSON.stringify(arg);
+      })
+      .join(" ");
+    toast.error(message);
+  } catch (_e) {
+    toast.error("WebUI error (see console for details)");
+  }
+};
+
+window.addEventListener("error", (event) => {
+  if (!errorToastStore.webuiErrorToastsEnabled) return;
+  const msg = event.error?.message ?? event.message ?? "WebUI error";
+  toast.error(msg);
+});
+
+window.addEventListener("unhandledrejection", (event) => {
+  if (!errorToastStore.webuiErrorToastsEnabled) return;
+  const reason = event.reason;
+  const msg =
+    reason instanceof Error
+      ? reason.message
+      : typeof reason === "string"
+      ? reason
+      : "Unhandled promise rejection";
+  toast.error(msg);
+});

From e2d04a9b1b2c5e397278ce13ff404cadb50e4252 Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Mon, 23 Feb 2026 04:08:01 +0400
Subject: [PATCH 11/27] Massive refactoring in progress, added ctg/scf names,
 layers, conversion stubs

---
 src/app/core/VersionedXYZSource.ts            |   8 +
 src/app/core/domain/ContigDescriptor.ts       |   1 +
 src/app/core/domain/ScaffoldDescriptor.ts     |   1 +
 .../core/mapmanagers/CommonEventManager.ts    |  91 ++-
 src/app/core/mapmanagers/ContactMapManager.ts |   5 +
 .../mapmanagers/HiCViewAndLayersManager.ts    |  84 ++-
 src/app/core/net/api/RequestManager.ts        | 134 ++++-
 src/app/core/net/api/request.ts               | 103 +++-
 src/app/core/net/api/response.ts              |  37 +-
 src/app/core/net/dto/dto.ts                   |   2 +
 src/app/core/net/dto/requestDTO.ts            | 141 ++++-
 src/app/core/net/dto/responseDTO.ts           |  46 +-
 src/app/core/tracks/Track2DSymmetric.ts       | 172 ++++++
 src/app/core/tracks/TrackStylePreset.ts       |   1 +
 .../ui/components/sidebar/LayerComponent.vue  | 122 +++-
 .../ui/components/sidebar/SavedLocations.vue  | 536 ++++++++++++++++--
 src/app/ui/components/sidebar/SideBar.vue     | 161 +++++-
 .../upper_ribbon/CoolerConverter.vue          | 407 ++++++++++++-
 .../components/upper_ribbon/HeaderRibbon.vue  |  16 +-
 .../converter/ConverterStatusChecker.vue      | 217 ++++---
 20 files changed, 2038 insertions(+), 247 deletions(-)

diff --git a/src/app/core/VersionedXYZSource.ts b/src/app/core/VersionedXYZSource.ts
index 3765807..47a03e6 100644
--- a/src/app/core/VersionedXYZSource.ts
+++ b/src/app/core/VersionedXYZSource.ts
@@ -97,6 +97,14 @@ class VersionedXYZContactMapSource extends XYZ {
     this.changed();
   }
 
+  public reloadWithVersion(version: number) {
+    this.tileCache.expireCache({});
+    this.tileCache.clear();
+    this.sourceVersion = Math.max(0, Math.floor(version));
+    this.setTileUrlFunction(this.create_tile_url_function());
+    this.changed();
+  }
+
   protected create_tile_url_function() {
     return (coord_zxy: number[]) => {
       const col = coord_zxy[1];
diff --git a/src/app/core/domain/ContigDescriptor.ts b/src/app/core/domain/ContigDescriptor.ts
index a2050d9..5687169 100644
--- a/src/app/core/domain/ContigDescriptor.ts
+++ b/src/app/core/domain/ContigDescriptor.ts
@@ -24,6 +24,7 @@ import type { ContigDirection, ContigHideType } from "./common";
 interface ContigDescriptor {
   contigId: number;
   contigName: string;
+  contigOriginalName: string;
   contigLengthBp: number;
   contigLengthBins: Map<number, number>;
   direction: ContigDirection;
diff --git a/src/app/core/domain/ScaffoldDescriptor.ts b/src/app/core/domain/ScaffoldDescriptor.ts
index 141571a..90ec4f7 100644
--- a/src/app/core/domain/ScaffoldDescriptor.ts
+++ b/src/app/core/domain/ScaffoldDescriptor.ts
@@ -22,6 +22,7 @@
 interface ScaffoldDescriptor {
   scaffoldId: number;
   scaffoldName: string;
+  scaffoldOriginalName: string;
   spacerLength: number;
   scaffoldBordersBP: ScaffoldBordersBP | null;
 }
diff --git a/src/app/core/mapmanagers/CommonEventManager.ts b/src/app/core/mapmanagers/CommonEventManager.ts
index b4e4968..6ada34f 100644
--- a/src/app/core/mapmanagers/CommonEventManager.ts
+++ b/src/app/core/mapmanagers/CommonEventManager.ts
@@ -38,7 +38,7 @@ import {
 } from "../net/api/request";
 import { ContactMapManager } from "./ContactMapManager";
 import { ActiveTool } from "./HiCViewAndLayersManager";
-import { BorderStyle } from "@/app/core/tracks/Track2DSymmetric";
+import { BorderStyle, NamePlacement } from "@/app/core/tracks/Track2DSymmetric";
 import { Coordinate } from "ol/coordinate";
 import { toast } from "vue-sonner";
 
@@ -99,6 +99,95 @@ class CommonEventManager {
     this.mapManager.viewAndLayersManager.onScaffoldFillColorChanged(fillColor);
   }
 
+  public onContigLabelSizeChanged(size: number): void {
+    this.mapManager.viewAndLayersManager.onContigLabelSizeChanged(size);
+  }
+
+  public onScaffoldLabelSizeChanged(size: number): void {
+    this.mapManager.viewAndLayersManager.onScaffoldLabelSizeChanged(size);
+  }
+
+  private toNamePlacement(style: BorderStyle): NamePlacement {
+    switch (style) {
+      case BorderStyle.FULL:
+        return NamePlacement.CENTER;
+      case BorderStyle.BOTTOM:
+        return NamePlacement.BOTTOM;
+      case BorderStyle.TOP:
+        return NamePlacement.TOP;
+      case BorderStyle.NONE:
+      default:
+        return NamePlacement.HIDDEN;
+    }
+  }
+
+  public onContigNamePlacementChanged(style: BorderStyle): void {
+    const placement = this.toNamePlacement(style);
+    this.mapManager.viewAndLayersManager.onContigNamePlacementChanged(placement);
+  }
+
+  public onScaffoldNamePlacementChanged(style: BorderStyle): void {
+    const placement = this.toNamePlacement(style);
+    this.mapManager.viewAndLayersManager.onScaffoldNamePlacementChanged(
+      placement
+    );
+  }
+
+  public onContigLabelOffsetMultiplierChanged(multiplier: number): void {
+    this.mapManager.viewAndLayersManager.onContigLabelOffsetMultiplierChanged(
+      multiplier
+    );
+  }
+
+  public onScaffoldLabelOffsetMultiplierChanged(multiplier: number): void {
+    this.mapManager.viewAndLayersManager.onScaffoldLabelOffsetMultiplierChanged(
+      multiplier
+    );
+  }
+
+  public onContigLabelBoldChanged(enabled: boolean): void {
+    this.mapManager.viewAndLayersManager.onContigLabelBoldChanged(enabled);
+  }
+
+  public onScaffoldLabelBoldChanged(enabled: boolean): void {
+    this.mapManager.viewAndLayersManager.onScaffoldLabelBoldChanged(enabled);
+  }
+
+  public onContigLabelOutlineChanged(enabled: boolean): void {
+    this.mapManager.viewAndLayersManager.onContigLabelOutlineChanged(enabled);
+  }
+
+  public onScaffoldLabelOutlineChanged(enabled: boolean): void {
+    this.mapManager.viewAndLayersManager.onScaffoldLabelOutlineChanged(enabled);
+  }
+
+  public onContigLabelOutlineWidthChanged(width: number): void {
+    this.mapManager.viewAndLayersManager.onContigLabelOutlineWidthChanged(width);
+  }
+
+  public onScaffoldLabelOutlineWidthChanged(width: number): void {
+    this.mapManager.viewAndLayersManager.onScaffoldLabelOutlineWidthChanged(
+      width
+    );
+  }
+
+  public onNamePlacementChanged(style: BorderStyle): void {
+    const placement = (() => {
+      switch (style) {
+        case BorderStyle.FULL:
+          return NamePlacement.TOP;
+        case BorderStyle.BOTTOM:
+          return NamePlacement.BOTTOM;
+        case BorderStyle.TOP:
+          return NamePlacement.TOP;
+        case BorderStyle.NONE:
+        default:
+          return NamePlacement.HIDDEN;
+      }
+    })();
+    this.mapManager.viewAndLayersManager.onNamePlacementChanged(placement);
+  }
+
   // public onNormalizationChanged(
   //   normalizationSettings: NormalizationSettings
   // ): void {
diff --git a/src/app/core/mapmanagers/ContactMapManager.ts b/src/app/core/mapmanagers/ContactMapManager.ts
index e83e622..6aea41d 100644
--- a/src/app/core/mapmanagers/ContactMapManager.ts
+++ b/src/app/core/mapmanagers/ContactMapManager.ts
@@ -179,6 +179,11 @@ class ContactMapManager {
     this.viewAndLayersManager.reloadTiles();
   }
 
+  public async reloadTilesFromBackend(): Promise<void> {
+    const version = await this.networkManager.requestManager.reloadTilesVersion();
+    this.viewAndLayersManager.reloadTiles(version);
+  }
+
   public async exportCurrentMapSvg(
     progressCallback?: (progress: number) => void
   ): Promise<void> {
diff --git a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
index d579bbb..0ed1bfe 100644
--- a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
+++ b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
@@ -46,6 +46,7 @@ import {
   TranslocationArrowsTrack2D,
   ScaffoldBordersTrack2D,
   Track2DSymmetric,
+  NamePlacement,
   BorderStyle,
 } from "../tracks/Track2DSymmetric";
 import type {
@@ -308,6 +309,13 @@ class HiCViewAndLayersManager {
       scaffoldBordersTrack: new ScaffoldBordersTrack2D(this.mapManager),
     };
 
+    this.track2DHolder.contigBordersTrack.setNamePlacement(
+      NamePlacement.TOP
+    );
+    this.track2DHolder.scaffoldBordersTrack.setNamePlacement(
+      NamePlacement.TOP
+    );
+
     this.deferredInitializationInteractions = {
       scissorsGuideInteraction: undefined,
     };
@@ -467,6 +475,72 @@ class HiCViewAndLayersManager {
     this.reloadTracks();
   }
 
+  public onContigLabelSizeChanged(size: number): void {
+    this.track2DHolder.contigBordersTrack.setLabelSize(size);
+    this.reloadTracks();
+  }
+
+  public onScaffoldLabelSizeChanged(size: number): void {
+    this.track2DHolder.scaffoldBordersTrack.setLabelSize(size);
+    this.reloadTracks();
+  }
+
+  public onContigLabelBoldChanged(enabled: boolean): void {
+    this.track2DHolder.contigBordersTrack.setLabelBold(enabled);
+    this.reloadTracks();
+  }
+
+  public onScaffoldLabelBoldChanged(enabled: boolean): void {
+    this.track2DHolder.scaffoldBordersTrack.setLabelBold(enabled);
+    this.reloadTracks();
+  }
+
+  public onContigLabelOutlineChanged(enabled: boolean): void {
+    this.track2DHolder.contigBordersTrack.setLabelOutline(enabled);
+    this.reloadTracks();
+  }
+
+  public onScaffoldLabelOutlineChanged(enabled: boolean): void {
+    this.track2DHolder.scaffoldBordersTrack.setLabelOutline(enabled);
+    this.reloadTracks();
+  }
+
+  public onContigLabelOutlineWidthChanged(width: number): void {
+    this.track2DHolder.contigBordersTrack.setLabelOutlineWidth(width);
+    this.reloadTracks();
+  }
+
+  public onScaffoldLabelOutlineWidthChanged(width: number): void {
+    this.track2DHolder.scaffoldBordersTrack.setLabelOutlineWidth(width);
+    this.reloadTracks();
+  }
+
+  public onContigLabelOffsetMultiplierChanged(multiplier: number): void {
+    this.track2DHolder.contigBordersTrack.setLabelOffsetMultiplier(multiplier);
+    this.reloadTracks();
+  }
+
+  public onScaffoldLabelOffsetMultiplierChanged(multiplier: number): void {
+    this.track2DHolder.scaffoldBordersTrack.setLabelOffsetMultiplier(multiplier);
+    this.reloadTracks();
+  }
+
+  public onContigNamePlacementChanged(placement: NamePlacement): void {
+    this.track2DHolder.contigBordersTrack.setNamePlacement(placement);
+    this.reloadTracks();
+  }
+
+  public onScaffoldNamePlacementChanged(placement: NamePlacement): void {
+    this.track2DHolder.scaffoldBordersTrack.setNamePlacement(placement);
+    this.reloadTracks();
+  }
+
+  public onNamePlacementChanged(placement: NamePlacement): void {
+    this.track2DHolder.contigBordersTrack.setNamePlacement(placement);
+    this.track2DHolder.scaffoldBordersTrack.setNamePlacement(placement);
+    this.reloadTracks();
+  }
+
   public getTrackStylePreset(): TrackStylePresetBundle {
     return {
       contigs: this.getSingleTrackStylePreset(
@@ -497,6 +571,7 @@ class HiCViewAndLayersManager {
       borderColor,
       fillColor,
       width: track.options.width,
+      labelSize: track.getLabelSize(),
       borderStyle: track.getStyleType(),
     };
   }
@@ -508,6 +583,7 @@ class HiCViewAndLayersManager {
     track.options.borderColor = preset.borderColor;
     track.options.fillColor = preset.fillColor;
     track.options.width = Math.max(1, preset.width);
+    track.setLabelSize(preset.labelSize ?? track.getLabelSize());
     track.setStyleType(preset.borderStyle);
     track.style = track.generateStyleFunction()();
   }
@@ -986,11 +1062,15 @@ class HiCViewAndLayersManager {
     return layer as Layer<VectorSource>;
   }
 
-  public reloadTiles(): void {
+  public reloadTiles(version?: number): void {
     for (const layer of this.layersHolder.hicDataLayers) {
       const source = layer.getSource();
       if (source instanceof VersionedXYZContactMapSource) {
-        source.do_reload();
+        if (version !== undefined) {
+          source.reloadWithVersion(version);
+        } else {
+          source.do_reload();
+        }
       }
     }
   }
diff --git a/src/app/core/net/api/RequestManager.ts b/src/app/core/net/api/RequestManager.ts
index 6341e91..16fc4fa 100644
--- a/src/app/core/net/api/RequestManager.ts
+++ b/src/app/core/net/api/RequestManager.ts
@@ -32,16 +32,15 @@ import {
 } from "../dto/dto";
 import { HiCTAPIRequestDTO } from "../dto/requestDTO";
 import {
-  ConverterStatusResponseDTO,
+  ConversionJobResponseDTO,
   CurrentSignalRangeResponseDTO,
+  NameMappingResponseDTO,
   TilePOSTResponseDTO,
 } from "../dto/responseDTO";
 import type { OpenFileResponse } from "../netcommon";
 import type { NetworkManager } from "../NetworkManager";
 import {
-  ConvertCoolerRequest,
   GetAGPForAssemblyRequest,
-  GetConverterStatusRequest,
   GetCurrentSignalRangeRequest,
   GetFastaForAssemblyRequest,
   GetFastaForSelectionRequest,
@@ -62,10 +61,21 @@ import {
   MoveSelectionToDebrisRequest,
   GetVisualizationOptionsRequest,
   SetVisualizationOptionsRequest,
+  StartBatchConversionJobsRequest,
+  StartConversionJobRequest,
+  ListConversionJobsRequest,
+  GetConversionJobRequest,
+  StopConversionJobRequest,
+  RenameContigRequest,
+  RenameScaffoldRequest,
+  ExportNameMappingRequest,
+  ImportNameMappingRequest,
+  ReloadTilesRequest,
 } from "./request";
 import {
-  ConverterStatusResponse,
+  ConversionJobResponse,
   CurrentSignalRangeResponse,
+  NameMappingResponse,
 } from "./response";
 import { toast } from "vue-sonner";
 import { useErrorToastStore } from "@/app/stores/errorToastStore";
@@ -74,6 +84,11 @@ import VisualizationOptions from "../../visualization/VisualizationOptions";
 class RequestManager {
   constructor(public readonly networkManager: NetworkManager) {}
 
+  private normalizeAssemblyInfo(json: Record<string, unknown>): Record<string, unknown> {
+    const assemblyInfo = json["assemblyInfo"] as Record<string, unknown> | undefined;
+    return assemblyInfo ?? json;
+  }
+
   public async sendRequest(
     request: HiCTAPIRequest,
     axiosConfig?: AxiosRequestConfig | undefined
@@ -165,20 +180,89 @@ class RequestManager {
       });
   }
 
-  public async convertCooler(request: ConvertCoolerRequest): Promise<void> {
-    return this.sendRequest(request).then(() => {
-      return;
-    });
+  public async startConversionJob(
+    request: StartConversionJobRequest
+  ): Promise<{ status: string; jobId: string }> {
+    return this.sendRequest(request).then((response) => response.data);
+  }
+
+  public async startBatchConversionJobs(
+    request: StartBatchConversionJobsRequest
+  ): Promise<{ status: string; groupId: string; jobIds: string[] }> {
+    return this.sendRequest(request).then((response) => response.data);
+  }
+
+  public async listConversionJobs(): Promise<ConversionJobResponse[]> {
+    return this.sendRequest(new ListConversionJobsRequest()).then((response) =>
+      (response.data as Record<string, unknown>[]).map((job) =>
+        new ConversionJobResponseDTO(job).toEntity()
+      )
+    );
   }
 
-  public async getConverterStatus(): Promise<ConverterStatusResponse> {
-    return this.sendRequest(new GetConverterStatusRequest(), {
-      timeout: 1000,
-    }).then((response) =>
-      new ConverterStatusResponseDTO(response.data).toEntity()
+  public async getConversionJob(jobId: string): Promise<ConversionJobResponse> {
+    return this.sendRequest(new GetConversionJobRequest(jobId)).then(
+      (response) => new ConversionJobResponseDTO(response.data).toEntity()
     );
   }
 
+  public async stopConversionJob(
+    jobId: string
+  ): Promise<{ status: string; jobId: string }> {
+    return this.sendRequest(new StopConversionJobRequest(jobId)).then(
+      (response) => response.data
+    );
+  }
+
+  public async renameContig(
+    contigId: number,
+    newName: string | null
+  ): Promise<AssemblyInfo> {
+    return this.sendRequest(new RenameContigRequest({ contigId, newName }))
+      .then((response) => response.data)
+      .then((json) =>
+        new AssemblyInfoDTO(this.normalizeAssemblyInfo(json)).toEntity()
+      );
+  }
+
+  public async renameScaffold(
+    scaffoldId: number,
+    newName: string | null
+  ): Promise<AssemblyInfo> {
+    return this.sendRequest(
+      new RenameScaffoldRequest({ scaffoldId, newName })
+    )
+      .then((response) => response.data)
+      .then((json) =>
+        new AssemblyInfoDTO(this.normalizeAssemblyInfo(json)).toEntity()
+      );
+  }
+
+  public async exportNameMapping(): Promise<NameMappingResponse> {
+    return this.sendRequest(new ExportNameMappingRequest())
+      .then((response) => response.data)
+      .then((json) => new NameMappingResponseDTO(json).toEntity());
+  }
+
+  public async importNameMapping(
+    contigs: { contigId: number; name: string }[],
+    scaffolds: { scaffoldId: number; name: string }[]
+  ): Promise<AssemblyInfo> {
+    return this.sendRequest(
+      new ImportNameMappingRequest({ contigs, scaffolds })
+    )
+      .then((response) => response.data)
+      .then((json) =>
+        new AssemblyInfoDTO(this.normalizeAssemblyInfo(json)).toEntity()
+      );
+  }
+
+  public async reloadTilesVersion(): Promise<number> {
+    return this.sendRequest(new ReloadTilesRequest())
+      .then((response) => response.data)
+      .then((json) => Number(json.version ?? 0));
+  }
+
   public async listAGPFiles(): Promise<string[]> {
     const response = await this.sendRequest(new ListAGPFilesRequest());
     return response.data as string[];
@@ -243,7 +327,9 @@ class RequestManager {
   ): Promise<AssemblyInfo> {
     return this.sendRequest(request)
       .then((response) => response.data)
-      .then((json) => new AssemblyInfoDTO(json).toEntity());
+      .then((json) =>
+        new AssemblyInfoDTO(this.normalizeAssemblyInfo(json)).toEntity()
+      );
   }
 
   public async ungroupContigsFromScaffold(
@@ -251,7 +337,9 @@ class RequestManager {
   ): Promise<AssemblyInfo> {
     return this.sendRequest(request)
       .then((response) => response.data)
-      .then((json) => new AssemblyInfoDTO(json).toEntity());
+      .then((json) =>
+        new AssemblyInfoDTO(this.normalizeAssemblyInfo(json)).toEntity()
+      );
   }
 
   public async moveSelectionToDebris(
@@ -259,7 +347,9 @@ class RequestManager {
   ): Promise<AssemblyInfo> {
     return this.sendRequest(request)
       .then((response) => response.data)
-      .then((json) => new AssemblyInfoDTO(json).toEntity());
+      .then((json) =>
+        new AssemblyInfoDTO(this.normalizeAssemblyInfo(json)).toEntity()
+      );
   }
 
   public async reverseSelectionRange(
@@ -267,7 +357,9 @@ class RequestManager {
   ): Promise<AssemblyInfo> {
     return this.sendRequest(request)
       .then((response) => response.data)
-      .then((json) => new AssemblyInfoDTO(json).toEntity());
+      .then((json) =>
+        new AssemblyInfoDTO(this.normalizeAssemblyInfo(json)).toEntity()
+      );
   }
 
   public async moveSelectionRange(
@@ -275,7 +367,9 @@ class RequestManager {
   ): Promise<AssemblyInfo> {
     return this.sendRequest(request)
       .then((response) => response.data)
-      .then((json) => new AssemblyInfoDTO(json).toEntity());
+      .then((json) =>
+        new AssemblyInfoDTO(this.normalizeAssemblyInfo(json)).toEntity()
+      );
   }
 
   public async splitContigAtPx(
@@ -283,7 +377,9 @@ class RequestManager {
   ): Promise<AssemblyInfo> {
     return this.sendRequest(request)
       .then((response) => response.data)
-      .then((json) => new AssemblyInfoDTO(json).toEntity());
+      .then((json) =>
+        new AssemblyInfoDTO(this.normalizeAssemblyInfo(json)).toEntity()
+      );
   }
 
   public async getVisualizationOptions(
diff --git a/src/app/core/net/api/request.ts b/src/app/core/net/api/request.ts
index b610314..835294a 100644
--- a/src/app/core/net/api/request.ts
+++ b/src/app/core/net/api/request.ts
@@ -69,10 +69,6 @@ class ListCoolerFilesRequest implements HiCTAPIRequest {
   requestPath = "/list_coolers";
 }
 
-class GetConverterStatusRequest implements HiCTAPIRequest {
-  requestPath = "/converter_status";
-}
-
 class CloseFileRequest implements HiCTAPIRequest {
   requestPath = "/close";
 }
@@ -108,16 +104,93 @@ class SetNormalizationRequest implements HiCTAPIRequest {
   ) {}
 }
 
-class ConvertCoolerRequest implements HiCTAPIRequest {
-  requestPath = "/convert_cooler";
+class RenameContigRequest implements HiCTAPIRequest {
+  requestPath = "/names/contig";
 
   public constructor(
     public readonly options: {
-      readonly cooler_filename: string;
+      readonly contigId: number;
+      readonly newName: string | null;
     }
   ) {}
 }
 
+class RenameScaffoldRequest implements HiCTAPIRequest {
+  requestPath = "/names/scaffold";
+
+  public constructor(
+    public readonly options: {
+      readonly scaffoldId: number;
+      readonly newName: string | null;
+    }
+  ) {}
+}
+
+class ExportNameMappingRequest implements HiCTAPIRequest {
+  requestPath = "/names/export";
+}
+
+class ImportNameMappingRequest implements HiCTAPIRequest {
+  requestPath = "/names/import";
+
+  public constructor(
+    public readonly options: {
+      readonly contigs: { contigId: number; name: string }[];
+      readonly scaffolds: { scaffoldId: number; name: string }[];
+    }
+  ) {}
+}
+
+class StartConversionJobRequest implements HiCTAPIRequest {
+  requestPath = "/convert/jobs";
+
+  public constructor(
+    public readonly options: {
+      readonly filename: string;
+      readonly direction?: string;
+      readonly resolutions?: string;
+      readonly compression?: number;
+      readonly compressionAlgorithm?: string;
+      readonly chunkSize?: number;
+      readonly parallelism?: number;
+    }
+  ) {}
+}
+
+class StartBatchConversionJobsRequest implements HiCTAPIRequest {
+  requestPath = "/convert/jobs/batch";
+
+  public constructor(
+    public readonly options: {
+      readonly files: string[];
+      readonly parallelJobs: number;
+      readonly parallelism: number;
+      readonly resolutions?: string;
+      readonly compression?: number;
+      readonly compressionAlgorithm?: string;
+      readonly chunkSize?: number;
+    }
+  ) {}
+}
+
+class ListConversionJobsRequest implements HiCTAPIRequest {
+  requestPath = "/convert/jobs/list";
+}
+
+class GetConversionJobRequest implements HiCTAPIRequest {
+  public requestPath: string;
+  public constructor(public readonly jobId: string) {
+    this.requestPath = `/convert/jobs/${jobId}`;
+  }
+}
+
+class StopConversionJobRequest implements HiCTAPIRequest {
+  public requestPath: string;
+  public constructor(public readonly jobId: string) {
+    this.requestPath = `/convert/jobs/${jobId}/stop`;
+  }
+}
+
 class SetContrastRangeRequest implements HiCTAPIRequest {
   requestPath = "/set_contrast_range";
 
@@ -128,6 +201,10 @@ class SetContrastRangeRequest implements HiCTAPIRequest {
   ) {}
 }
 
+class ReloadTilesRequest implements HiCTAPIRequest {
+  requestPath = "/tiles/reload";
+}
+
 class GetCurrentSignalRangeRequest implements HiCTAPIRequest {
   requestPath = "/get_current_signal_range";
 
@@ -260,7 +337,16 @@ export {
   type HiCTAPIRequest,
   CloseFileRequest,
   ListCoolerFilesRequest,
-  ConvertCoolerRequest,
+  StartConversionJobRequest,
+  StartBatchConversionJobsRequest,
+  ListConversionJobsRequest,
+  GetConversionJobRequest,
+  StopConversionJobRequest,
+  RenameContigRequest,
+  RenameScaffoldRequest,
+  ExportNameMappingRequest,
+  ImportNameMappingRequest,
+  ReloadTilesRequest,
   GetFastaForAssemblyRequest,
   GetAGPForAssemblyRequest,
   OpenFileRequest,
@@ -278,7 +364,6 @@ export {
   SetContrastRangeRequest,
   GetCurrentSignalRangeRequest,
   SaveFileRequest,
-  GetConverterStatusRequest,
   SplitContigRequest,
   // TileLoadPOSTRequest,
   MoveSelectionToDebrisRequest,
diff --git a/src/app/core/net/api/response.ts b/src/app/core/net/api/response.ts
index 85ce2ba..8b2e788 100644
--- a/src/app/core/net/api/response.ts
+++ b/src/app/core/net/api/response.ts
@@ -35,16 +35,45 @@ class TilePOSTResponse {
   ) {}
 }
 
-class ConverterStatusResponse {
+class ConversionJobResponse {
   public constructor(
-    public readonly isConverting: boolean,
+    public readonly jobId: string,
+    public readonly status: string,
+    public readonly sourceFilename: string,
+    public readonly outputFilename: string,
+    public readonly direction: string,
+    public readonly overallProgress: number,
     public readonly resolutionProgress: number,
-    public readonly totalProgress: number
+    public readonly currentResolution: number,
+    public readonly elapsedMillis: number,
+    public readonly etaMillis: number,
+    public readonly resolutionElapsedMillis: number,
+    public readonly resolutionEtaMillis: number,
+    public readonly inputSizeBytes: number,
+    public readonly outputSizeBytes: number,
+    public readonly logs: string[],
+    public readonly error: string
+  ) {}
+}
+
+class NameMappingResponse {
+  public constructor(
+    public readonly contigs: {
+      contigId: number;
+      originalName: string;
+      name: string;
+    }[],
+    public readonly scaffolds: {
+      scaffoldId: number;
+      originalName: string;
+      name: string;
+    }[]
   ) {}
 }
 
 export {
   CurrentSignalRangeResponse,
   TilePOSTResponse,
-  ConverterStatusResponse,
+  ConversionJobResponse,
+  NameMappingResponse,
 };
diff --git a/src/app/core/net/dto/dto.ts b/src/app/core/net/dto/dto.ts
index 4f5831b..1690e5e 100644
--- a/src/app/core/net/dto/dto.ts
+++ b/src/app/core/net/dto/dto.ts
@@ -87,6 +87,7 @@ class ContigDescriptorDTO extends InboundDTO<ContigDescriptor> {
     return {
       contigId: this.json.contigId as number,
       contigName: this.json.contigName as string,
+      contigOriginalName: this.json.contigOriginalName as string,
       contigLengthBp: this.json.contigLengthBp as number,
       contigLengthBins: new Map(
         Array.from(
@@ -124,6 +125,7 @@ class ScaffoldDescriptorDTO extends InboundDTO<ScaffoldDescriptor> {
     return {
       scaffoldId: this.json.scaffoldId as number,
       scaffoldName: this.json.scaffoldName as string,
+      scaffoldOriginalName: this.json.scaffoldOriginalName as string,
       spacerLength: this.json.spacerLength as number,
       scaffoldBordersBP: this.json.scaffoldBordersBP
         ? new ScaffoldBordersBPDTO(
diff --git a/src/app/core/net/dto/requestDTO.ts b/src/app/core/net/dto/requestDTO.ts
index d2571a7..83f41fa 100644
--- a/src/app/core/net/dto/requestDTO.ts
+++ b/src/app/core/net/dto/requestDTO.ts
@@ -40,8 +40,16 @@ import {
   SaveFileRequest,
   GetAGPForAssemblyRequest,
   ListCoolerFilesRequest,
-  ConvertCoolerRequest,
-  GetConverterStatusRequest,
+  StartConversionJobRequest,
+  StartBatchConversionJobsRequest,
+  ListConversionJobsRequest,
+  GetConversionJobRequest,
+  StopConversionJobRequest,
+  RenameContigRequest,
+  RenameScaffoldRequest,
+  ExportNameMappingRequest,
+  ImportNameMappingRequest,
+  ReloadTilesRequest,
   SplitContigRequest,
   MoveSelectionToDebrisRequest,
   GetVisualizationOptionsRequest,
@@ -79,8 +87,14 @@ abstract class HiCTAPIRequestDTO<
         );
       case entity instanceof SplitContigRequest:
         return new SplitContigRequestDTO(entity as SplitContigRequest);
-      case entity instanceof ConvertCoolerRequest:
-        return new ConvertCoolerRequestDTO(entity as ConvertCoolerRequest);
+      case entity instanceof StartConversionJobRequest:
+        return new StartConversionJobRequestDTO(
+          entity as StartConversionJobRequest
+        );
+      case entity instanceof StartBatchConversionJobsRequest:
+        return new StartBatchConversionJobsRequestDTO(
+          entity as StartBatchConversionJobsRequest
+        );
       case entity instanceof UngroupContigsFromScaffoldRequest:
         return new UngroupContigsFromScaffoldRequestDTO(
           entity as UngroupContigsFromScaffoldRequest
@@ -105,10 +119,24 @@ abstract class HiCTAPIRequestDTO<
         return new ListFilesRequestDTO(entity);
       case entity instanceof ListCoolerFilesRequest:
         return new ListCoolerFilesRequestDTO(entity);
-      case entity instanceof GetConverterStatusRequest:
-        return new GetConverterStatusRequestDTO(
-          entity as GetConverterStatusRequest
+      case entity instanceof ListConversionJobsRequest:
+        return new ListConversionJobsRequestDTO(entity);
+      case entity instanceof GetConversionJobRequest:
+        return new GetConversionJobRequestDTO(entity as GetConversionJobRequest);
+      case entity instanceof StopConversionJobRequest:
+        return new StopConversionJobRequestDTO(
+          entity as StopConversionJobRequest
         );
+      case entity instanceof RenameContigRequest:
+        return new RenameContigRequestDTO(entity as RenameContigRequest);
+      case entity instanceof RenameScaffoldRequest:
+        return new RenameScaffoldRequestDTO(entity as RenameScaffoldRequest);
+      case entity instanceof ExportNameMappingRequest:
+        return new ExportNameMappingRequestDTO(entity);
+      case entity instanceof ImportNameMappingRequest:
+        return new ImportNameMappingRequestDTO(entity as ImportNameMappingRequest);
+      case entity instanceof ReloadTilesRequest:
+        return new ReloadTilesRequestDTO(entity);
       case entity instanceof ListFASTAFilesRequest:
         return new ListFASTAFilesRequestDTO(entity);
       case entity instanceof LinkFASTARequest:
@@ -178,14 +206,91 @@ class ReverseSelectionRangeRequestDTO extends HiCTAPIRequestDTO<ReverseSelection
     };
   }
 }
-class ConvertCoolerRequestDTO extends HiCTAPIRequestDTO<ConvertCoolerRequest> {
+class StartConversionJobRequestDTO extends HiCTAPIRequestDTO<StartConversionJobRequest> {
   toDTO(): Record<string, unknown> {
     return {
-      cooler_filename: this.entity.options.cooler_filename,
+      filename: this.entity.options.filename,
+      direction: this.entity.options.direction,
+      resolutions: this.entity.options.resolutions,
+      compression: this.entity.options.compression,
+      compressionAlgorithm: this.entity.options.compressionAlgorithm,
+      chunkSize: this.entity.options.chunkSize,
+      parallelism: this.entity.options.parallelism,
     };
   }
 }
 
+class StartBatchConversionJobsRequestDTO extends HiCTAPIRequestDTO<StartBatchConversionJobsRequest> {
+  toDTO(): Record<string, unknown> {
+    return {
+      files: this.entity.options.files,
+      parallelJobs: this.entity.options.parallelJobs,
+      parallelism: this.entity.options.parallelism,
+      resolutions: this.entity.options.resolutions,
+      compression: this.entity.options.compression,
+      compressionAlgorithm: this.entity.options.compressionAlgorithm,
+      chunkSize: this.entity.options.chunkSize,
+    };
+  }
+}
+
+class ListConversionJobsRequestDTO extends HiCTAPIRequestDTO<ListConversionJobsRequest> {
+  toDTO(): Record<string, unknown> {
+    return {};
+  }
+}
+
+class GetConversionJobRequestDTO extends HiCTAPIRequestDTO<GetConversionJobRequest> {
+  toDTO(): Record<string, unknown> {
+    return {};
+  }
+}
+
+class StopConversionJobRequestDTO extends HiCTAPIRequestDTO<StopConversionJobRequest> {
+  toDTO(): Record<string, unknown> {
+    return {};
+  }
+}
+
+class RenameContigRequestDTO extends HiCTAPIRequestDTO<RenameContigRequest> {
+  toDTO(): Record<string, unknown> {
+    return {
+      contigId: this.entity.options.contigId,
+      newName: this.entity.options.newName,
+    };
+  }
+}
+
+class RenameScaffoldRequestDTO extends HiCTAPIRequestDTO<RenameScaffoldRequest> {
+  toDTO(): Record<string, unknown> {
+    return {
+      scaffoldId: this.entity.options.scaffoldId,
+      newName: this.entity.options.newName,
+    };
+  }
+}
+
+class ExportNameMappingRequestDTO extends HiCTAPIRequestDTO<ExportNameMappingRequest> {
+  toDTO(): Record<string, unknown> {
+    return {};
+  }
+}
+
+class ImportNameMappingRequestDTO extends HiCTAPIRequestDTO<ImportNameMappingRequest> {
+  toDTO(): Record<string, unknown> {
+    return {
+      contigs: this.entity.options.contigs,
+      scaffolds: this.entity.options.scaffolds,
+    };
+  }
+}
+
+class ReloadTilesRequestDTO extends HiCTAPIRequestDTO<ReloadTilesRequest> {
+  toDTO(): Record<string, unknown> {
+    return {};
+  }
+}
+
 class MoveSelectionRangeRequestDTO extends HiCTAPIRequestDTO<MoveSelectionRangeRequest> {
   toDTO(): Record<string, unknown> {
     return {
@@ -302,12 +407,6 @@ class ListCoolerFilesRequestDTO extends HiCTAPIRequestDTO<ListCoolerFilesRequest
   }
 }
 
-class GetConverterStatusRequestDTO extends HiCTAPIRequestDTO<GetConverterStatusRequest> {
-  toDTO(): Record<string, unknown> {
-    return {};
-  }
-}
-
 class ListFASTAFilesRequestDTO extends HiCTAPIRequestDTO<ListFASTAFilesRequest> {
   toDTO(): Record<string, unknown> {
     return {};
@@ -352,7 +451,16 @@ export {
   OpenFileRequestDTO,
   ListFilesRequestDTO,
   CloseFileRequestDTO,
-  ConvertCoolerRequest,
+  StartConversionJobRequestDTO,
+  StartBatchConversionJobsRequestDTO,
+  ListConversionJobsRequestDTO,
+  GetConversionJobRequestDTO,
+  StopConversionJobRequestDTO,
+  RenameContigRequestDTO,
+  RenameScaffoldRequestDTO,
+  ExportNameMappingRequestDTO,
+  ImportNameMappingRequestDTO,
+  ReloadTilesRequestDTO,
   GetFastaForAssemblyRequestDTO,
   GetAGPForAssemblyRequestDTO,
   GroupContigsIntoScaffoldRequestDTO,
@@ -363,7 +471,6 @@ export {
   GetCurrentSignalRangeRequestDTO,
   SaveFileRequestDTO,
   ListCoolerFilesRequestDTO,
-  GetConverterStatusRequestDTO,
   SplitContigRequestDTO,
   MoveSelectionToDebrisRequestDTO,
   GetVisualizationOptionsRequestDTO,
diff --git a/src/app/core/net/dto/responseDTO.ts b/src/app/core/net/dto/responseDTO.ts
index c0b346c..930a686 100644
--- a/src/app/core/net/dto/responseDTO.ts
+++ b/src/app/core/net/dto/responseDTO.ts
@@ -20,8 +20,9 @@
  */
 
 import {
-  ConverterStatusResponse,
+  ConversionJobResponse,
   CurrentSignalRangeResponse,
+  NameMappingResponse,
   TilePOSTResponse,
 } from "../api/response";
 import { InboundDTO } from "./dto";
@@ -68,12 +69,42 @@ class TilePOSTResponseDTO extends InboundDTO<TilePOSTResponse> {
   }
 }
 
-class ConverterStatusResponseDTO extends InboundDTO<ConverterStatusResponse> {
-  public toEntity(): ConverterStatusResponse {
-    return new ConverterStatusResponse(
-      this.json["isConverting"] as boolean,
+class ConversionJobResponseDTO extends InboundDTO<ConversionJobResponse> {
+  public toEntity(): ConversionJobResponse {
+    return new ConversionJobResponse(
+      this.json["jobId"] as string,
+      this.json["status"] as string,
+      this.json["sourceFilename"] as string,
+      this.json["outputFilename"] as string,
+      this.json["direction"] as string,
+      this.json["overallProgress"] as number,
       this.json["resolutionProgress"] as number,
-      this.json["totalProgress"] as number
+      this.json["currentResolution"] as number,
+      this.json["elapsedMillis"] as number,
+      this.json["etaMillis"] as number,
+      this.json["resolutionElapsedMillis"] as number,
+      this.json["resolutionEtaMillis"] as number,
+      this.json["inputSizeBytes"] as number,
+      this.json["outputSizeBytes"] as number,
+      (this.json["logs"] as string[]) ?? [],
+      (this.json["error"] as string) ?? ""
+    );
+  }
+}
+
+class NameMappingResponseDTO extends InboundDTO<NameMappingResponse> {
+  public toEntity(): NameMappingResponse {
+    return new NameMappingResponse(
+      (this.json["contigs"] as Record<string, unknown>[]).map((item) => ({
+        contigId: item["contigId"] as number,
+        originalName: item["originalName"] as string,
+        name: item["name"] as string,
+      })),
+      (this.json["scaffolds"] as Record<string, unknown>[]).map((item) => ({
+        scaffoldId: item["scaffoldId"] as number,
+        originalName: item["originalName"] as string,
+        name: item["name"] as string,
+      }))
     );
   }
 }
@@ -81,5 +112,6 @@ class ConverterStatusResponseDTO extends InboundDTO<ConverterStatusResponse> {
 export {
   CurrentSignalRangeResponseDTO,
   TilePOSTResponseDTO,
-  ConverterStatusResponseDTO,
+  ConversionJobResponseDTO,
+  NameMappingResponseDTO,
 };
diff --git a/src/app/core/tracks/Track2DSymmetric.ts b/src/app/core/tracks/Track2DSymmetric.ts
index fabfbce..e1e9713 100644
--- a/src/app/core/tracks/Track2DSymmetric.ts
+++ b/src/app/core/tracks/Track2DSymmetric.ts
@@ -33,6 +33,8 @@ import {
 import Fill from "ol/style/Fill";
 import Stroke from "ol/style/Stroke";
 import Style from "ol/style/Style";
+import Text from "ol/style/Text";
+import Point from "ol/geom/Point";
 import { ContigHideType } from "../domain/common";
 import type { ContigDescriptor } from "../domain/ContigDescriptor";
 import type { ContactMapManager } from "../mapmanagers/ContactMapManager";
@@ -56,12 +58,26 @@ interface Track2DSymmetricOptions {
   fillColor: Color | ColorLike;
   width: number;
   zIndex: number;
+  labelSize: number;
+  labelOffsetMultiplier: number;
+  labelBold: boolean;
+  labelOutline: boolean;
+  labelOutlineWidth: number;
+}
+
+export enum NamePlacement {
+  CENTER = -1,
+  TOP = 0,
+  BOTTOM = 1,
+  HIDDEN = 2,
 }
 
 abstract class Track2DSymmetric extends Track2D {
   public features: Map<number, Feature<Geometry>[]> = new Map();
   public options: Track2DSymmetricOptions;
   public style: Style;
+  protected namePlacement: NamePlacement = NamePlacement.TOP;
+  private static measureCanvas?: HTMLCanvasElement;
 
   public constructor(
     public readonly trackDescriptor: Track2DSymmetricDescriptor,
@@ -71,6 +87,11 @@ abstract class Track2DSymmetric extends Track2D {
       fillColor?: Color | ColorLike;
       width?: number | undefined;
       zIndex?: number | undefined;
+      labelSize?: number | undefined;
+      labelOffsetMultiplier?: number | undefined;
+      labelBold?: boolean | undefined;
+      labelOutline?: boolean | undefined;
+      labelOutlineWidth?: number | undefined;
     }
   ) {
     super();
@@ -79,6 +100,11 @@ abstract class Track2DSymmetric extends Track2D {
       fillColor: opt_options?.fillColor ?? [0x77, 0x77, 0x77, 0.1],
       width: opt_options?.width ?? 2,
       zIndex: opt_options?.zIndex ?? 0,
+      labelSize: opt_options?.labelSize ?? 12,
+      labelOffsetMultiplier: opt_options?.labelOffsetMultiplier ?? 0.5,
+      labelBold: opt_options?.labelBold ?? true,
+      labelOutline: opt_options?.labelOutline ?? true,
+      labelOutlineWidth: opt_options?.labelOutlineWidth ?? 2,
     };
     this.style = this.generateStyleFunction()();
   }
@@ -108,6 +134,88 @@ abstract class Track2DSymmetric extends Track2D {
     // console.log("Generate style function called and produced ", style);
     return () => style;
   }
+
+  public setLabelSize(size: number): void {
+    this.options.labelSize = Math.max(6, size);
+  }
+
+  public getLabelSize(): number {
+    return this.options.labelSize;
+  }
+
+  public setLabelOffsetMultiplier(multiplier: number): void {
+    this.options.labelOffsetMultiplier = Math.max(0, multiplier);
+  }
+
+  public getLabelOffsetMultiplier(): number {
+    return this.options.labelOffsetMultiplier;
+  }
+
+  public setLabelBold(enabled: boolean): void {
+    this.options.labelBold = enabled;
+  }
+
+  public getLabelBold(): boolean {
+    return this.options.labelBold;
+  }
+
+  public setLabelOutline(enabled: boolean): void {
+    this.options.labelOutline = enabled;
+  }
+
+  public getLabelOutline(): boolean {
+    return this.options.labelOutline;
+  }
+
+  public setLabelOutlineWidth(width: number): void {
+    this.options.labelOutlineWidth = Math.max(0, width);
+  }
+
+  public getLabelOutlineWidth(): number {
+    return this.options.labelOutlineWidth;
+  }
+
+  public setNamePlacement(placement: NamePlacement): void {
+    this.namePlacement = placement;
+  }
+
+  public getNamePlacement(): NamePlacement {
+    return this.namePlacement;
+  }
+
+  protected createLabelStyle(label: string): Style {
+    return new Style({
+      text: new Text({
+        text: label,
+        font: `${this.options.labelBold ? "bold " : ""}${
+          this.options.labelSize
+        }px sans-serif`,
+        fill: new Fill({
+          color: this.options.borderColor,
+        }),
+        stroke: this.options.labelOutline
+          ? new Stroke({
+              color: "rgba(0,0,0,0.9)",
+              width: this.options.labelOutlineWidth,
+            })
+          : undefined,
+        overflow: true,
+        textAlign: "center",
+      }),
+    });
+  }
+
+  protected measureLabelWidthPx(label: string): number {
+    if (!Track2DSymmetric.measureCanvas) {
+      Track2DSymmetric.measureCanvas = document.createElement("canvas");
+    }
+    const ctx = Track2DSymmetric.measureCanvas.getContext("2d");
+    if (!ctx) {
+      return label.length * this.options.labelSize * 0.6;
+    }
+    ctx.font = `${this.options.labelSize}px sans-serif`;
+    return ctx.measureText(label).width;
+  }
 }
 
 class BasePairsTrack2DSymmetric extends Track2DSymmetric {
@@ -300,6 +408,36 @@ class ContigBordersTrack2D extends WithRing {
 
             this.features.get(resolution)?.push(polygonFeature);
 
+            if (this.namePlacement !== NamePlacement.HIDDEN) {
+              const rectWidthPx = toPx - fromPx;
+              const labelWidthPx = this.measureLabelWidthPx(cd.contigName);
+              if (rectWidthPx > 0 && labelWidthPx < rectWidthPx * 0.9) {
+                const labelOffset =
+                  this.options.labelSize * this.options.labelOffsetMultiplier;
+                const labelY =
+                  this.namePlacement === NamePlacement.CENTER
+                    ? -(fromPx + toPx) / 2
+                    : this.namePlacement === NamePlacement.TOP
+                    ? -fromPx + labelOffset
+                    : -toPx - labelOffset;
+                const midPx = (fromPx + toPx) / 2;
+                const labelPoint = new Point([
+                  midPx * pixelResolution,
+                  labelY * pixelResolution,
+                ]);
+                const labelFeature = new Feature({
+                  name: `ContigName-${cd.contigName}-bp${resolution}`,
+                  geometry: labelPoint,
+                });
+                labelFeature.setStyle(this.createLabelStyle(cd.contigName));
+                labelFeature.set("trackType", "contigNames");
+                labelFeature.set("bpResolution", resolution);
+                labelFeature.set("pixelResolution", pixelResolution);
+                labelFeature.set("contigDescriptor", cd);
+                this.features.get(resolution)?.push(labelFeature);
+              }
+            }
+
             break;
           }
           default:
@@ -401,6 +539,40 @@ class ScaffoldBordersTrack2D extends WithRing {
             polygonFeature.set("scaffolDescriptor", scaffoldDescriptor);
 
             this.features.get(bpResolution)?.push(polygonFeature);
+
+            if (this.namePlacement !== NamePlacement.HIDDEN) {
+              const rectWidthPx = toPx - fromPx;
+              const labelWidthPx = this.measureLabelWidthPx(
+                scaffoldDescriptor.scaffoldName
+              );
+              if (rectWidthPx > 0 && labelWidthPx < rectWidthPx * 0.9) {
+                const labelOffset =
+                  this.options.labelSize * this.options.labelOffsetMultiplier;
+                const labelY =
+                  this.namePlacement === NamePlacement.CENTER
+                    ? -(fromPx + toPx) / 2
+                    : this.namePlacement === NamePlacement.TOP
+                    ? -fromPx + labelOffset
+                    : -toPx - labelOffset;
+                const midPx = (fromPx + toPx) / 2;
+                const labelPoint = new Point([
+                  midPx * pixelResolution,
+                  labelY * pixelResolution,
+                ]);
+                const labelFeature = new Feature({
+                  name: `ScaffoldName-${scaffoldDescriptor.scaffoldName}-bp${bpResolution}`,
+                  geometry: labelPoint,
+                });
+                labelFeature.setStyle(
+                  this.createLabelStyle(scaffoldDescriptor.scaffoldName)
+                );
+                labelFeature.set("trackType", "scaffoldNames");
+                labelFeature.set("bpResolution", bpResolution);
+                labelFeature.set("pixelResolution", pixelResolution);
+                labelFeature.set("scaffolDescriptor", scaffoldDescriptor);
+                this.features.get(bpResolution)?.push(labelFeature);
+              }
+            }
           }
         );
       }
diff --git a/src/app/core/tracks/TrackStylePreset.ts b/src/app/core/tracks/TrackStylePreset.ts
index 40e38b5..662d6cf 100644
--- a/src/app/core/tracks/TrackStylePreset.ts
+++ b/src/app/core/tracks/TrackStylePreset.ts
@@ -4,6 +4,7 @@ export type TrackStylePreset = {
   borderColor: string;
   fillColor: string;
   width: number;
+  labelSize?: number;
   borderStyle: BorderStyle;
 };
 
diff --git a/src/app/ui/components/sidebar/LayerComponent.vue b/src/app/ui/components/sidebar/LayerComponent.vue
index 1a5cf36..7bfeb39 100644
--- a/src/app/ui/components/sidebar/LayerComponent.vue
+++ b/src/app/ui/components/sidebar/LayerComponent.vue
@@ -69,12 +69,66 @@
             />
           </div>
           <div class="mb-2">
-            <label class="form-label">Fill color</label>
-            <ColorPickerRectangle
-              :position="['top', 'left']"
-              :getDefaultColor="getDefaultFillColor"
-              @onColorChanged="(c: ColorTranslator) => (fillColor = c)"
-            ></ColorPickerRectangle>
+            <label class="form-label" for="track-label-size">Label size</label>
+            <input
+              id="track-label-size"
+              class="form-control form-control-sm"
+              type="number"
+              min="6"
+              step="1"
+              v-model.number="labelSize"
+            />
+          </div>
+          <div class="mb-2">
+            <label class="form-label" for="track-label-offset"
+              >Label offset</label
+            >
+            <input
+              id="track-label-offset"
+              class="form-control form-control-sm"
+              type="number"
+              min="0"
+              step="0.1"
+              v-model.number="labelOffsetMultiplier"
+            />
+          </div>
+          <div class="mb-2" v-if="props.layerName.includes('names')">
+            <div class="form-check">
+              <input
+                id="track-label-bold"
+                class="form-check-input"
+                type="checkbox"
+                v-model="labelBold"
+              />
+              <label class="form-check-label" for="track-label-bold"
+                >Bold</label
+              >
+            </div>
+            <div class="form-check mt-1">
+              <input
+                id="track-label-outline"
+                class="form-check-input"
+                type="checkbox"
+                v-model="labelOutline"
+              />
+              <label class="form-check-label" for="track-label-outline"
+                >Outline</label
+              >
+            </div>
+            <div class="mt-2">
+              <label class="form-label" for="track-label-outline-width"
+                >Outline width</label
+              >
+              <input
+                id="track-label-outline-width"
+                class="form-control form-control-sm"
+                type="number"
+                min="0"
+                step="0.5"
+                v-model.number="labelOutlineWidth"
+                :disabled="!labelOutline"
+              />
+            </div>
           </div>
           <div class="d-flex gap-2">
             <button class="btn btn-sm btn-success" @click="applyStyle">
@@ -86,6 +140,7 @@
           </div>
         </div>
       </div>
+      <div v-else class="edit-spacer"></div>
     </div>
   </div>
 </template>
@@ -103,6 +158,11 @@ const props = defineProps<{
   layerName: string;
   getDefaultColor?: () => Style | undefined;
   enableStyleEditor?: boolean;
+  getLabelSize?: () => number;
+  getLabelOffsetMultiplier?: () => number;
+  getLabelBold?: () => boolean;
+  getLabelOutline?: () => boolean;
+  getLabelOutlineWidth?: () => number;
 }>();
 
 function getBaseColor(): ColorTranslator {
@@ -131,7 +191,12 @@ const emit = defineEmits<{
     e: "onStyleChanged",
     layerName: string,
     borderWidth: number,
-    fillColor: ColorTranslator
+    fillColor: ColorTranslator,
+    labelSize: number,
+    labelOffsetMultiplier: number,
+    labelBold: boolean,
+    labelOutline: boolean,
+    labelOutlineWidth: number
   ): void;
 }>();
 
@@ -140,8 +205,15 @@ const borderWidth: Ref<number> = ref(2);
 const fillColor: Ref<ColorTranslator> = ref(
   new ColorTranslator("rgba(0,0,0,0.0)", { legacyCSS: true })
 ) as Ref<ColorTranslator>;
-
-const bordersStyle: Ref<number> = ref(0);
+const labelSize: Ref<number> = ref(12);
+const labelOffsetMultiplier: Ref<number> = ref(0.5);
+const labelBold: Ref<boolean> = ref(true);
+const labelOutline: Ref<boolean> = ref(true);
+const labelOutlineWidth: Ref<number> = ref(2);
+
+const bordersStyle: Ref<number> = ref(
+  props.layerName.includes("names") ? BorderStyle.TOP : 0
+);
 const visible: Ref<boolean> = ref(true);
 
 function updateVisibility() {
@@ -185,6 +257,21 @@ function openStyleEditor() {
     borderWidth.value = strokeWidth;
   }
   fillColor.value = getDefaultFillColor();
+  if (props.getLabelSize) {
+    labelSize.value = props.getLabelSize();
+  }
+  if (props.getLabelOffsetMultiplier) {
+    labelOffsetMultiplier.value = props.getLabelOffsetMultiplier();
+  }
+  if (props.getLabelBold) {
+    labelBold.value = props.getLabelBold();
+  }
+  if (props.getLabelOutline) {
+    labelOutline.value = props.getLabelOutline();
+  }
+  if (props.getLabelOutlineWidth) {
+    labelOutlineWidth.value = props.getLabelOutlineWidth();
+  }
 }
 
 function applyStyle() {
@@ -192,7 +279,12 @@ function applyStyle() {
     "onStyleChanged",
     props.layerName as string,
     borderWidth.value,
-    fillColor.value
+    fillColor.value,
+    labelSize.value,
+    labelOffsetMultiplier.value,
+    labelBold.value,
+    labelOutline.value,
+    labelOutlineWidth.value
   );
 }
 
@@ -226,7 +318,7 @@ function resetStyle() {
 .layer-name {
   /* layer name */
 
-  width: 21px;
+  width: 28px;
   height: 20px;
 
   /* Body/Small */
@@ -316,4 +408,12 @@ function resetStyle() {
   justify-content: center;
   align-items: center;
 }
+
+.edit-spacer {
+  width: 20px;
+  height: 20px;
+  flex: none;
+  order: 3;
+  flex-grow: 0;
+}
 </style>
diff --git a/src/app/ui/components/sidebar/SavedLocations.vue b/src/app/ui/components/sidebar/SavedLocations.vue
index 5fbc212..90393de 100644
--- a/src/app/ui/components/sidebar/SavedLocations.vue
+++ b/src/app/ui/components/sidebar/SavedLocations.vue
@@ -20,56 +20,195 @@
  -->
 
 <template>
-  <p class="w-100 m-0"><b>Saved Locations:</b></p>
+  <p class="w-100 m-0"><b>Locations:</b></p>
   <div class="pills w-100">
     <div class="btn-group" role="group">
       <input
-        id="saved-btn"
+        id="bookmarks-btn"
         autocomplete="off"
-        checked
         class="btn-check"
         name="btnradio"
         type="radio"
+        :checked="activeTab === 'bookmarks'"
+        @change="activeTab = 'bookmarks'"
       />
-      <label class="btn btn-outline-primary" for="saved-btn">Saved</label>
+      <label class="btn btn-outline-primary" for="bookmarks-btn">
+        Bookmarks
+      </label>
 
       <input
-        id="unplaced-btn"
+        id="contigs-btn"
         autocomplete="off"
         class="btn-check"
         name="btnradio"
         type="radio"
+        :checked="activeTab === 'contigs'"
+        @change="activeTab = 'contigs'"
       />
-      <label class="btn btn-outline-primary" for="unplaced-btn">Unplaced</label>
+      <label class="btn btn-outline-primary" for="contigs-btn">Contigs</label>
+
+      <input
+        id="scaffolds-btn"
+        autocomplete="off"
+        class="btn-check"
+        name="btnradio"
+        type="radio"
+        :checked="activeTab === 'scaffolds'"
+        @change="activeTab = 'scaffolds'"
+      />
+      <label class="btn btn-outline-primary" for="scaffolds-btn">
+        Scaffolds
+      </label>
+    </div>
+  </div>
+
+  <div v-if="activeTab === 'bookmarks'">
+    <div class="save-btn-div">
+      <button
+        id="save-button"
+        class="btn btn-outline-primary"
+        type="button"
+        data-bs-toggle="tooltip"
+        data-bs-placement="bottom"
+        title="Save current viewport"
+        @click="saveLocation"
+      >
+        <i class="bi bi-bookmark-plus"></i>
+        <span id="save-btn-text">Save</span>
+      </button>
+      <div class="bookmark-actions">
+        <button class="btn btn-outline-secondary" @click="exportBookmarks">
+          Export
+        </button>
+        <label class="btn btn-outline-secondary">
+          Import
+          <input type="file" accept="application/json" @change="importBookmarks" />
+        </label>
+      </div>
+    </div>
+    <div class="saved-locations-div">
+      <div v-for="[id, loc] of savedLocations" :key="id">
+        <SavedLocationElement
+          v-if="loc"
+          :map-manager="props.mapManager"
+          :location_id="loc.location_id"
+          :center_point="loc.center_point"
+          :resolution="loc.resolution"
+          :rotation="loc.rotation"
+          @goto="gotoSavedLocation"
+          @remove="removeSavedLocation"
+        ></SavedLocationElement>
+      </div>
     </div>
   </div>
 
-  <div class="save-btn-div">
-    <button
-      id="save-button"
-      class="btn btn-outline-primary"
-      type="button"
-      data-bs-toggle="tooltip"
-      data-bs-placement="bottom"
-      title="Save current viewport"
-      @click="saveLocation"
+  <div v-if="activeTab === 'contigs'" class="list-panel">
+    <div class="names-actions">
+      <button class="btn btn-outline-secondary" @click="exportNames">
+        Export names
+      </button>
+      <label class="btn btn-outline-secondary">
+        Import names
+        <input type="file" accept="application/json" @change="importNames" />
+      </label>
+    </div>
+    <div
+      v-for="contig in contigList"
+      :key="contig.contigId"
+      class="name-row"
     >
-      <i class="bi bi-bookmark-plus"></i>
-      <span id="save-btn-text">Save</span>
-    </button>
+      <div class="input-group">
+        <input
+          type="text"
+          class="form-control m-0"
+          v-model="contigDraftNames[contig.contigId]"
+          @input="markContigDirty(contig.contigId)"
+          @focus="isEditingNames = true"
+          @blur="isEditingNames = false"
+        />
+        <button
+          class="btn btn-outline-success"
+          type="button"
+          title="Rename contig"
+          v-if="contigDirty.has(contig.contigId)"
+          @click="renameContig(contig.contigId)"
+        >
+          <i class="bi bi-check-square-fill"></i>
+        </button>
+        <button
+          class="btn btn-outline-secondary"
+          type="button"
+          title="Reset contig name"
+          @click="resetContigName(contig.contigId)"
+        >
+          <i class="bi bi-arrow-counterclockwise"></i>
+        </button>
+        <button
+          class="btn btn-outline-primary"
+          type="button"
+          title="Go to contig"
+          @click="goToContig(contig.contigId)"
+        >
+          <i class="bi bi-eye"></i>
+        </button>
+      </div>
+      <div class="original-name">Original: {{ contig.contigOriginalName }}</div>
+    </div>
   </div>
-  <div class="saved-locations-div">
-    <div v-for="[id, loc] of savedLocations" :key="id">
-      <SavedLocationElement
-        v-if="loc"
-        :map-manager="props.mapManager"
-        :location_id="loc.location_id"
-        :center_point="loc.center_point"
-        :resolution="loc.resolution"
-        :rotation="loc.rotation"
-        @goto="gotoSavedLocation"
-        @remove="removeSavedLocation"
-      ></SavedLocationElement>
+
+  <div v-if="activeTab === 'scaffolds'" class="list-panel">
+    <div class="names-actions">
+      <button class="btn btn-outline-secondary" @click="exportNames">
+        Export names
+      </button>
+      <label class="btn btn-outline-secondary">
+        Import names
+        <input type="file" accept="application/json" @change="importNames" />
+      </label>
+    </div>
+    <div
+      v-for="scaffold in scaffoldList"
+      :key="scaffold.scaffoldId"
+      class="name-row"
+    >
+      <div class="input-group">
+        <input
+          type="text"
+          class="form-control m-0"
+          v-model="scaffoldDraftNames[scaffold.scaffoldId]"
+          @input="markScaffoldDirty(scaffold.scaffoldId)"
+          @focus="isEditingNames = true"
+          @blur="isEditingNames = false"
+        />
+        <button
+          class="btn btn-outline-success"
+          type="button"
+          title="Rename scaffold"
+          v-if="scaffoldDirty.has(scaffold.scaffoldId)"
+          @click="renameScaffold(scaffold.scaffoldId)"
+        >
+          <i class="bi bi-check-square-fill"></i>
+        </button>
+        <button
+          class="btn btn-outline-secondary"
+          type="button"
+          title="Reset scaffold name"
+          @click="resetScaffoldName(scaffold.scaffoldId)"
+        >
+          <i class="bi bi-arrow-counterclockwise"></i>
+        </button>
+        <button
+          class="btn btn-outline-primary"
+          type="button"
+          title="Go to scaffold"
+          @click="goToScaffold(scaffold.scaffoldId)"
+        >
+          <i class="bi bi-eye"></i>
+        </button>
+      </div>
+      <div class="original-name">
+        Original: {{ scaffold.scaffoldOriginalName }}
+      </div>
     </div>
   </div>
 </template>
@@ -77,13 +216,18 @@
 <script setup lang="ts">
 import { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
 import SavedLocationElement from "./SavedLocationElement.vue";
-import { Ref, ref } from "vue";
+import { Ref, ref, watch, onMounted, onBeforeUnmount } from "vue";
 import { Coordinate } from "ol/coordinate";
+import { toast } from "vue-sonner";
+import type { ContigDescriptor } from "@/app/core/domain/ContigDescriptor";
+import type { ScaffoldDescriptor } from "@/app/core/domain/ScaffoldDescriptor";
 
 const props = defineProps<{
   mapManager?: ContactMapManager;
 }>();
 
+const activeTab = ref<"bookmarks" | "contigs" | "scaffolds">("bookmarks");
+
 const savedLocations: Ref<
   Map<
     number,
@@ -98,6 +242,79 @@ const savedLocations: Ref<
 
 const locationCount = ref(0);
 
+const contigList = ref<ContigDescriptor[]>([]);
+const scaffoldList = ref<ScaffoldDescriptor[]>([]);
+const contigDraftNames = ref<Record<number, string>>({});
+const scaffoldDraftNames = ref<Record<number, string>>({});
+const contigDirty = ref<Set<number>>(new Set());
+const scaffoldDirty = ref<Set<number>>(new Set());
+const isEditingNames = ref(false);
+let refreshTimer: number | undefined;
+
+function refreshAssemblyLists(): void {
+  const map = props.mapManager;
+  if (!map) {
+    return;
+  }
+  if (isEditingNames.value) {
+    return;
+  }
+  contigList.value = [...map.getContigDimensionHolder().contigDescriptors];
+  const nextContigDrafts: Record<number, string> = {};
+  contigList.value.forEach((ctg) => {
+    const isDirty = contigDirty.value.has(ctg.contigId);
+    nextContigDrafts[ctg.contigId] = isDirty
+      ? contigDraftNames.value[ctg.contigId] ?? ctg.contigName
+      : ctg.contigName;
+  });
+  contigDraftNames.value = nextContigDrafts;
+  contigDirty.value = new Set(
+    Array.from(contigDirty.value).filter((id) =>
+      contigList.value.some((ctg) => ctg.contigId === id)
+    )
+  );
+
+  const scaffoldsSorted = map.scaffoldHolder.scaffoldBordersSorted.map(
+    ([, scaffoldId]) => map.scaffoldHolder.getScaffoldById(scaffoldId)
+  );
+  scaffoldList.value = scaffoldsSorted;
+  const nextScaffoldDrafts: Record<number, string> = {};
+  scaffoldList.value.forEach((sc) => {
+    const isDirty = scaffoldDirty.value.has(sc.scaffoldId);
+    nextScaffoldDrafts[sc.scaffoldId] = isDirty
+      ? scaffoldDraftNames.value[sc.scaffoldId] ?? sc.scaffoldName
+      : sc.scaffoldName;
+  });
+  scaffoldDraftNames.value = nextScaffoldDrafts;
+  scaffoldDirty.value = new Set(
+    Array.from(scaffoldDirty.value).filter((id) =>
+      scaffoldList.value.some((sc) => sc.scaffoldId === id)
+    )
+  );
+}
+
+watch(activeTab, () => {
+  refreshAssemblyLists();
+});
+
+onMounted(() => {
+  refreshAssemblyLists();
+  // Poll for assembly changes triggered by backend ops (group/ungroup/move).
+  // This keeps Contigs/Scaffolds tabs in sync without tab switches.
+  refreshTimer = window.setInterval(() => {
+    if (activeTab.value === "contigs" || activeTab.value === "scaffolds") {
+      refreshAssemblyLists();
+    }
+  }, 1000);
+});
+
+onBeforeUnmount(() => {
+  if (refreshTimer) {
+    clearInterval(refreshTimer);
+    refreshTimer = undefined;
+  }
+});
+
 function saveLocation() {
   const map = props.mapManager;
   const view = map?.getView();
@@ -126,53 +343,220 @@ function gotoSavedLocation(location_id: number) {
 }
 
 function removeSavedLocation(location_id: number) {
-  //savedLocations.value.splice(location_id, 1);
-  // delete savedLocations.value[location_id];
   savedLocations.value.delete(location_id);
 }
+
+function exportBookmarks(): void {
+  const entries = Array.from(savedLocations.value.values());
+  const blob = new Blob([JSON.stringify(entries, null, 2)], {
+    type: "application/json",
+  });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "hict_bookmarks.json";
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function importBookmarks(event: Event): void {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  if (!file) {
+    return;
+  }
+  file.text().then((text) => {
+    try {
+      const entries = JSON.parse(text) as {
+        location_id: number;
+        center_point: Coordinate;
+        resolution: number;
+        rotation: number;
+      }[];
+      savedLocations.value.clear();
+      entries.forEach((entry, idx) => {
+        savedLocations.value.set(idx, {
+          location_id: idx,
+          center_point: entry.center_point,
+          resolution: entry.resolution,
+          rotation: entry.rotation,
+        });
+      });
+      locationCount.value = entries.length;
+    } catch (e) {
+      toast.error("Invalid bookmarks file");
+    }
+  });
+}
+
+function markContigDirty(contigId: number): void {
+  contigDirty.value.add(contigId);
+}
+
+function markScaffoldDirty(scaffoldId: number): void {
+  scaffoldDirty.value.add(scaffoldId);
+}
+
+function renameContig(contigId: number): void {
+  const map = props.mapManager;
+  if (!map) return;
+  const newName = contigDraftNames.value[contigId] ?? "";
+  map.networkManager.requestManager
+    .renameContig(contigId, newName)
+    .then((asm) => {
+      map.contigDimensionHolder.updateContigData(asm.contigDescriptors);
+      map.scaffoldHolder.updateScaffoldData(asm.scaffoldDescriptors);
+      contigDirty.value.delete(contigId);
+      map.getLayersManager().reloadTracks();
+      map.reloadTiles();
+      refreshAssemblyLists();
+    })
+    .catch((err) => {
+      toast.error(err?.message ?? "Failed to rename contig");
+    });
+}
+
+function renameScaffold(scaffoldId: number): void {
+  const map = props.mapManager;
+  if (!map) return;
+  const newName = scaffoldDraftNames.value[scaffoldId] ?? "";
+  map.networkManager.requestManager
+    .renameScaffold(scaffoldId, newName)
+    .then((asm) => {
+      map.contigDimensionHolder.updateContigData(asm.contigDescriptors);
+      map.scaffoldHolder.updateScaffoldData(asm.scaffoldDescriptors);
+      scaffoldDirty.value.delete(scaffoldId);
+      map.getLayersManager().reloadTracks();
+      map.reloadTiles();
+      refreshAssemblyLists();
+    })
+    .catch((err) => {
+      toast.error(err?.message ?? "Failed to rename scaffold");
+    });
+}
+
+function resetContigName(contigId: number): void {
+  const contig = contigList.value.find((c) => c.contigId === contigId);
+  if (!contig) return;
+  contigDraftNames.value[contigId] = contig.contigOriginalName;
+  renameContig(contigId);
+}
+
+function resetScaffoldName(scaffoldId: number): void {
+  const scaffold = scaffoldList.value.find((s) => s.scaffoldId === scaffoldId);
+  if (!scaffold) return;
+  scaffoldDraftNames.value[scaffoldId] = scaffold.scaffoldOriginalName;
+  renameScaffold(scaffoldId);
+}
+
+function goToContig(contigId: number): void {
+  const map = props.mapManager;
+  if (!map) return;
+  const contig = contigList.value.find((c) => c.contigId === contigId);
+  if (!contig) return;
+  const view = map.getView();
+  const prefix = map.contigDimensionHolder.prefix_sum_bp;
+  const ord = map.contigDimensionHolder.contigIdToOrd[contigId];
+  if (ord === undefined || Number.isNaN(ord)) {
+    toast.error("Contig is not available in the current assembly");
+    return;
+  }
+  const startBp = prefix[ord];
+  const endBp = startBp + contig.contigLengthBp;
+  const midBp = (startBp + endBp) / 2;
+  const res = view.getResolution() ?? 1;
+  const midPx = midBp / res;
+  view.animate({ center: [midPx, -midPx] });
+}
+
+function goToScaffold(scaffoldId: number): void {
+  const map = props.mapManager;
+  if (!map) return;
+  const scaffold = map.scaffoldHolder.getScaffoldById(scaffoldId);
+  const borders = scaffold.scaffoldBordersBP;
+  if (!borders) {
+    toast.error("Scaffold has no borders in the current assembly");
+    return;
+  }
+  const view = map.getView();
+  const midBp = (borders.startBP + borders.endBP) / 2;
+  const res = view.getResolution() ?? 1;
+  const midPx = midBp / res;
+  view.animate({ center: [midPx, -midPx] });
+}
+
+function exportNames(): void {
+  const map = props.mapManager;
+  if (!map) return;
+  map.networkManager.requestManager
+    .exportNameMapping()
+    .then((mapping) => {
+      const blob = new Blob([JSON.stringify(mapping, null, 2)], {
+        type: "application/json",
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "hict_names.json";
+      a.click();
+      URL.revokeObjectURL(url);
+    })
+    .catch((err) => {
+      toast.error(err?.message ?? "Failed to export names");
+    });
+}
+
+function importNames(event: Event): void {
+  const map = props.mapManager;
+  if (!map) return;
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  if (!file) return;
+  file.text().then((text) => {
+    try {
+      const payload = JSON.parse(text) as {
+        contigs: { contigId: number; name: string }[];
+        scaffolds: { scaffoldId: number; name: string }[];
+      };
+      map.networkManager.requestManager
+        .importNameMapping(payload.contigs ?? [], payload.scaffolds ?? [])
+        .then((asm) => {
+          map.contigDimensionHolder.updateContigData(asm.contigDescriptors);
+          map.scaffoldHolder.updateScaffoldData(asm.scaffoldDescriptors);
+          map.reloadTiles();
+          refreshAssemblyLists();
+        })
+        .catch((err) => {
+          toast.error(err?.message ?? "Failed to import names");
+        });
+    } catch (e) {
+      toast.error("Invalid names file");
+    }
+  });
+}
 </script>
 
 <style scoped>
 .pills {
-  /* pills */
-
-  /* Auto layout */
   display: flex;
   flex-direction: column;
   padding: 0px 16px;
   gap: 10px;
-
-  /* width: 80%; */
   height: 40px;
 }
 
 .save-btn-div {
-  /* save btn */
-
-  /* Auto layout */
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   padding: 8px 16px 0px;
-
   width: 232px;
-  height: 37px;
-
-  /* Inside auto layout */
-  flex: none;
-  order: 1;
-  flex-grow: 0;
+  height: auto;
+  gap: 8px;
 }
 
 #save-button {
-  /* Buttons */
   width: 232px;
-
-  /* Inside auto layout */
-  flex: none;
-  order: 0;
-  align-self: stretch;
-  flex-grow: 0;
 }
 
 #save-btn-text {
@@ -180,16 +564,9 @@ function removeSavedLocation(location_id: number) {
 }
 
 .saved-locations-div {
-  /* Auto layout */
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-
-  /* Inside auto layout */
-  flex: none;
-  order: 2;
-  flex-grow: 0;
-
   height: 50%;
   max-height: 250px;
   overflow-y: scroll;
@@ -198,4 +575,39 @@ function removeSavedLocation(location_id: number) {
   padding-top: 15px;
   padding-right: 20px;
 }
+
+.bookmark-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.bookmark-actions input[type="file"] {
+  display: none;
+}
+
+.names-actions {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.names-actions input[type="file"] {
+  display: none;
+}
+
+.list-panel {
+  padding: 8px 16px;
+  max-height: 320px;
+  overflow: auto;
+}
+
+.name-row {
+  margin-bottom: 10px;
+}
+
+.original-name {
+  font-size: 12px;
+  color: #6b7280;
+  margin-left: 6px;
+}
 </style>
diff --git a/src/app/ui/components/sidebar/SideBar.vue b/src/app/ui/components/sidebar/SideBar.vue
index a860e25..6f39115 100644
--- a/src/app/ui/components/sidebar/SideBar.vue
+++ b/src/app/ui/components/sidebar/SideBar.vue
@@ -36,6 +36,11 @@
           v-bind:key="layer.name"
           v-bind:layer-name="layer.name"
           :getDefaultColor="layer.getStyle"
+          :getLabelSize="layer.getLabelSize"
+          :getLabelOffsetMultiplier="layer.getLabelOffsetMultiplier"
+          :getLabelBold="layer.getLabelBold"
+          :getLabelOutline="layer.getLabelOutline"
+          :getLabelOutlineWidth="layer.getLabelOutlineWidth"
           :enableStyleEditor="layer.enableStyleEditor"
           @onColorChanged="onColorChanged"
           @onBorderStyleChanged="onBorderStyleChanged"
@@ -120,7 +125,12 @@ class LayerDescriptor {
     public name: string,
     public getStyle?: () => Style | undefined,
     public layer_manager?: unknown,
-    public enableStyleEditor: boolean = false
+    public enableStyleEditor: boolean = false,
+    public getLabelSize?: () => number,
+    public getLabelOffsetMultiplier?: () => number,
+    public getLabelBold?: () => boolean,
+    public getLabelOutline?: () => boolean,
+    public getLabelOutlineWidth?: () => number
   ) {}
 }
 
@@ -132,7 +142,28 @@ const layers: Ref<LayerDescriptor[]> = ref([
         ?.getLayersManager()
         .track2DHolder.contigBordersTrack.getStyle(),
     undefined,
-    true
+    true,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.contigBordersTrack.getLabelSize() ?? 12,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.contigBordersTrack.getLabelOffsetMultiplier() ?? 1.25
+    ,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.contigBordersTrack.getLabelBold() ?? true,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.contigBordersTrack.getLabelOutline() ?? true,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.contigBordersTrack.getLabelOutlineWidth() ?? 2
   ),
   new LayerDescriptor(
     "Scaffolds",
@@ -141,9 +172,83 @@ const layers: Ref<LayerDescriptor[]> = ref([
         ?.getLayersManager()
         .track2DHolder.scaffoldBordersTrack.getStyle(),
     undefined,
-    true
+    true,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.scaffoldBordersTrack.getLabelSize() ?? 12,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.scaffoldBordersTrack.getLabelOffsetMultiplier() ?? 1.25
+    ,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.scaffoldBordersTrack.getLabelBold() ?? true,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.scaffoldBordersTrack.getLabelOutline() ?? true,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.scaffoldBordersTrack.getLabelOutlineWidth() ?? 2
+  ),
+  new LayerDescriptor(
+    "Cnames",
+    undefined,
+    undefined,
+    true,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.contigBordersTrack.getLabelSize() ?? 12,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.contigBordersTrack.getLabelOffsetMultiplier() ?? 1.25
+    ,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.contigBordersTrack.getLabelBold() ?? true,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.contigBordersTrack.getLabelOutline() ?? true,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.contigBordersTrack.getLabelOutlineWidth() ?? 2
+  ),
+  new LayerDescriptor(
+    "Snames",
+    undefined,
+    undefined,
+    true,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.scaffoldBordersTrack.getLabelSize() ?? 12,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.scaffoldBordersTrack.getLabelOffsetMultiplier() ?? 1.25
+    ,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.scaffoldBordersTrack.getLabelBold() ?? true,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.scaffoldBordersTrack.getLabelOutline() ?? true,
+    () =>
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.scaffoldBordersTrack.getLabelOutlineWidth() ?? 2
   ),
-  new LayerDescriptor("Gridlines"),
   new LayerDescriptor("Background", () => backgroundColorStyle.value),
 ]);
 
@@ -155,6 +260,9 @@ function onColorChanged(layerName: string, newColor: ColorTranslator) {
     case "Scaffolds":
       getEventManager()?.onScanffoldBorderColorChanged(newColor.RGBA);
       break;
+    case "Cnames":
+    case "Snames":
+      break;
     case "Background":
       stylesStore.setMapBackground(newColor);
       break;
@@ -176,6 +284,12 @@ function onBorderStyleChanged(layerName: string, style: BorderStyle) {
     case "Scaffolds":
       getEventManager()?.onScanffoldBorderStyleChanged(style);
       break;
+    case "Cnames":
+      getEventManager()?.onContigNamePlacementChanged(style);
+      break;
+    case "Snames":
+      getEventManager()?.onScaffoldNamePlacementChanged(style);
+      break;
     default:
       // alert(`Method for ${layerName} is undefined`);
       toast.error(`Method for ${layerName} is undefined`);
@@ -186,16 +300,53 @@ function onBorderStyleChanged(layerName: string, style: BorderStyle) {
 function onStyleChanged(
   layerName: string,
   borderWidth: number,
-  fillColor: ColorTranslator
+  fillColor: ColorTranslator,
+  labelSize: number,
+  labelOffsetMultiplier: number,
+  labelBold: boolean,
+  labelOutline: boolean,
+  labelOutlineWidth: number
 ) {
   switch (layerName) {
     case "Contigs":
       getEventManager()?.onContigBorderWidthChanged(borderWidth);
       getEventManager()?.onContigFillColorChanged(fillColor.RGBA);
+      getEventManager()?.onContigLabelSizeChanged(labelSize);
+      getEventManager()?.onContigLabelOffsetMultiplierChanged(
+        labelOffsetMultiplier
+      );
+      getEventManager()?.onContigLabelBoldChanged(labelBold);
+      getEventManager()?.onContigLabelOutlineChanged(labelOutline);
+      getEventManager()?.onContigLabelOutlineWidthChanged(labelOutlineWidth);
       break;
     case "Scaffolds":
       getEventManager()?.onScaffoldBorderWidthChanged(borderWidth);
       getEventManager()?.onScaffoldFillColorChanged(fillColor.RGBA);
+      getEventManager()?.onScaffoldLabelSizeChanged(labelSize);
+      getEventManager()?.onScaffoldLabelOffsetMultiplierChanged(
+        labelOffsetMultiplier
+      );
+      getEventManager()?.onScaffoldLabelBoldChanged(labelBold);
+      getEventManager()?.onScaffoldLabelOutlineChanged(labelOutline);
+      getEventManager()?.onScaffoldLabelOutlineWidthChanged(labelOutlineWidth);
+      break;
+    case "Cnames":
+      getEventManager()?.onContigLabelSizeChanged(labelSize);
+      getEventManager()?.onContigLabelOffsetMultiplierChanged(
+        labelOffsetMultiplier
+      );
+      getEventManager()?.onContigLabelBoldChanged(labelBold);
+      getEventManager()?.onContigLabelOutlineChanged(labelOutline);
+      getEventManager()?.onContigLabelOutlineWidthChanged(labelOutlineWidth);
+      break;
+    case "Snames":
+      getEventManager()?.onScaffoldLabelSizeChanged(labelSize);
+      getEventManager()?.onScaffoldLabelOffsetMultiplierChanged(
+        labelOffsetMultiplier
+      );
+      getEventManager()?.onScaffoldLabelBoldChanged(labelBold);
+      getEventManager()?.onScaffoldLabelOutlineChanged(labelOutline);
+      getEventManager()?.onScaffoldLabelOutlineWidthChanged(labelOutlineWidth);
       break;
     default:
       toast.error(`Method for ${layerName} is undefined`);
diff --git a/src/app/ui/components/upper_ribbon/CoolerConverter.vue b/src/app/ui/components/upper_ribbon/CoolerConverter.vue
index 46011d4..c5cbadc 100644
--- a/src/app/ui/components/upper_ribbon/CoolerConverter.vue
+++ b/src/app/ui/components/upper_ribbon/CoolerConverter.vue
@@ -39,19 +39,157 @@
           ></button>
         </div>
         <div class="modal-body">
+          <div class="mode-tabs">
+            <button
+              type="button"
+              class="btn"
+              :class="mode === 'single' ? 'btn-primary' : 'btn-outline-primary'"
+              @click="mode = 'single'"
+            >
+              Single
+            </button>
+            <button
+              type="button"
+              class="btn"
+              :class="mode === 'batch' ? 'btn-primary' : 'btn-outline-primary'"
+              @click="switchToBatch"
+            >
+              Batch
+            </button>
+          </div>
           <div class="d-flex align-items-center" v-if="errorMessage">
             <p class="error-message">Error: {{ errorMessage }}</p>
           </div>
-          <CoolerFileSelector
-            v-if="!selectedCoolerFilename"
-            :network-manager="networkManager"
-            @selected="onCoolerFileSelected"
-          />
-          <ConverterStatusChecker
-            v-if="converting"
-            :network-manager="networkManager"
-            @finished="onConverterFinished"
-          ></ConverterStatusChecker>
+          <div v-if="mode === 'single'">
+            <div v-if="!jobId" class="convert-section">
+              <CoolerFileSelector
+                :network-manager="networkManager"
+                @selected="onCoolerFileSelected"
+              />
+              <div class="mt-3 d-flex gap-2">
+                <button
+                  type="button"
+                  class="btn btn-primary"
+                  :disabled="!selectedCoolerFilename || converting"
+                  @click="convertCooler"
+                >
+                  Convert
+                </button>
+                <button
+                  type="button"
+                  class="btn btn-outline-secondary"
+                  @click="refreshJobs"
+                >
+                  View current conversion jobs
+                </button>
+              </div>
+            </div>
+            <ConverterStatusChecker
+              v-if="jobId"
+              :network-manager="networkManager"
+              :job-id="jobId"
+            ></ConverterStatusChecker>
+            <div v-if="jobs.length && !jobId" class="mt-3">
+              <h6>Running jobs</h6>
+              <ul class="job-list">
+                <li v-for="job in jobs" :key="job.jobId">
+                  <span>{{ job.sourceFilename }} → {{ job.outputFilename }}</span>
+                  <button
+                    type="button"
+                    class="btn btn-sm btn-outline-primary"
+                    @click="openJob(job.jobId)"
+                  >
+                    Open
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <div v-if="mode === 'batch'">
+            <div v-if="batchStep === 'select'">
+              <div class="batch-actions">
+                <button class="btn btn-sm btn-outline-primary" @click="selectAll">
+                  Select All
+                </button>
+                <button class="btn btn-sm btn-outline-secondary" @click="selectNone">
+                  Select None
+                </button>
+                <button class="btn btn-sm btn-outline-secondary" @click="invertSelection">
+                  Invert Selection
+                </button>
+                <button class="btn btn-sm btn-outline-success" @click="selectAllConverted">
+                  Select All Converted
+                </button>
+                <button class="btn btn-sm btn-outline-success" @click="selectAllUnconverted">
+                  Select All Unconverted
+                </button>
+              </div>
+              <div class="batch-table">
+                <div class="batch-row batch-header">
+                  <span></span>
+                  <span>File</span>
+                  <span>Status</span>
+                </div>
+                <div
+                  v-for="(file, index) in batchFiles"
+                  :key="file"
+                  class="batch-row"
+                  @click="toggleSelection(file, index, $event)"
+                >
+                  <input
+                    type="checkbox"
+                    :checked="batchSelection.has(file)"
+                    @change="toggleSelection(file, index, $event)"
+                  />
+                  <span>{{ file }}</span>
+                  <span
+                    class="status-pill"
+                    :class="isConverted(file) ? 'converted' : 'unconverted'"
+                  >
+                    {{ isConverted(file) ? "Converted" : "Unconverted" }}
+                  </span>
+                </div>
+              </div>
+              <div class="mt-3 d-flex gap-2">
+                <button class="btn btn-primary" @click="proceedBatchSettings" :disabled="batchSelection.size === 0">
+                  Continue
+                </button>
+                <button class="btn btn-secondary" @click="onDismissClicked">
+                  Dismiss
+                </button>
+              </div>
+            </div>
+            <div v-if="batchStep === 'settings'">
+              <div class="mb-3">
+                <label class="form-label">Parallel jobs</label>
+                <input type="number" class="form-control" v-model.number="batchParallelJobs" min="1" />
+              </div>
+              <div class="mb-3">
+                <label class="form-label">Parallelism per file</label>
+                <input type="number" class="form-control" v-model.number="batchParallelism" min="1" />
+              </div>
+              <div class="mt-3 d-flex gap-2">
+                <button class="btn btn-primary" @click="startBatchConversion">
+                  Start
+                </button>
+                <button class="btn btn-secondary" @click="batchStep = 'select'">
+                  Back
+                </button>
+              </div>
+            </div>
+            <div v-if="batchStep === 'progress'">
+              <h6>Batch progress</h6>
+              <div class="batch-progress-list">
+                <ConverterStatusChecker
+                  v-for="job in batchJobIds"
+                  :key="job"
+                  :network-manager="networkManager"
+                  :job-id="job"
+                  :show-stop="true"
+                />
+              </div>
+            </div>
+          </div>
         </div>
         <div class="modal-footer">
           <button
@@ -71,7 +209,11 @@
 import { type Ref, ref, onMounted } from "vue";
 import { Modal } from "bootstrap";
 import type { NetworkManager } from "@/app/core/net/NetworkManager.js";
-import { ConvertCoolerRequest } from "@/app/core/net/api/request";
+import {
+  StartBatchConversionJobsRequest,
+  StartConversionJobRequest,
+} from "@/app/core/net/api/request";
+import { ConversionJobResponse } from "@/app/core/net/api/response";
 import CoolerFileSelector from "./converter/CoolerFileSelector.vue";
 import ConverterStatusChecker from "./converter/ConverterStatusChecker.vue";
 
@@ -84,11 +226,21 @@ const props = defineProps<{
 }>();
 
 const selectedCoolerFilename: Ref<string | null> = ref(null);
-const filenames: Ref<string[] | null> = ref(null);
 const converting: Ref<boolean> = ref(false);
 const errorMessage: Ref<unknown | null> = ref(null);
 const modal: Ref<Modal | null> = ref(null);
 const convertCoolerModal = ref<HTMLElement | null>(null);
+const jobId: Ref<string | null> = ref(null);
+const jobs: Ref<ConversionJobResponse[]> = ref([]);
+const mode: Ref<"single" | "batch"> = ref("single");
+const batchStep: Ref<"select" | "settings" | "progress"> = ref("select");
+const batchFiles: Ref<string[]> = ref([]);
+const batchSelection: Ref<Set<string>> = ref(new Set<string>());
+const batchParallelJobs: Ref<number> = ref(2);
+const batchParallelism: Ref<number> = ref(4);
+const batchJobIds: Ref<string[]> = ref([]);
+const allFiles: Ref<Set<string>> = ref(new Set<string>());
+const lastSelectedIndex: Ref<number | null> = ref(null);
 
 function resetState(): void {
   try {
@@ -99,8 +251,16 @@ function resetState(): void {
     modal.value = null;
     errorMessage.value = null;
     converting.value = false;
-    filenames.value = null;
     selectedCoolerFilename.value = null;
+    jobId.value = null;
+    jobs.value = [];
+    mode.value = "single";
+    batchStep.value = "select";
+    batchFiles.value = [];
+    batchSelection.value = new Set<string>();
+    batchJobIds.value = [];
+    allFiles.value = new Set<string>();
+    lastSelectedIndex.value = null;
   }
 }
 
@@ -111,34 +271,32 @@ function onDismissClicked(): void {
 
 function onCoolerFileSelected(coolerFilename: string): void {
   selectedCoolerFilename.value = coolerFilename;
-  convertCooler();
 }
 
 function convertCooler(): void {
   const filename = selectedCoolerFilename.value;
   if (filename) {
     props.networkManager.requestManager
-      .convertCooler(
-        new ConvertCoolerRequest({
-          cooler_filename: filename,
+      .startConversionJob(
+        new StartConversionJobRequest({
+          filename: filename,
+          direction: "mcool-to-hict",
         })
       )
+      .then((resp) => {
+        jobId.value = resp.jobId;
+      })
       .catch((e) => {
         errorMessage.value = e;
       })
       .finally(() => {
         converting.value = false;
       });
-
     converting.value = true;
   }
 }
 
 onMounted(() => {
-  const fns = filenames.value;
-  if (fns) {
-    fns.length = 0;
-  }
   converting.value = false;
   modal.value = new Modal(convertCoolerModal.value ?? "loadAGPModal", {
     backdrop: "static",
@@ -147,9 +305,143 @@ onMounted(() => {
   modal.value.show();
 });
 
-function onConverterFinished(): void {
-  converting.value = false;
-  selectedCoolerFilename.value = null;
+function openJob(id: string): void {
+  jobId.value = id;
+}
+
+function refreshJobs(): void {
+  props.networkManager.requestManager
+    .listConversionJobs()
+    .then((items) => {
+      jobs.value = items.filter(
+        (job) => job.status === "running" || job.status === "queued"
+      );
+    })
+    .catch((e) => {
+      errorMessage.value = e;
+    });
+}
+
+function switchToBatch(): void {
+  mode.value = "batch";
+  batchStep.value = "select";
+  loadBatchFiles();
+}
+
+function loadBatchFiles(): void {
+  Promise.all([
+    props.networkManager.requestManager.listCoolers(),
+    props.networkManager.requestManager.listFiles(),
+  ])
+    .then(([coolers, files]) => {
+      batchFiles.value = coolers;
+      allFiles.value = new Set(files);
+      batchSelection.value = new Set<string>();
+    })
+    .catch((e) => {
+      errorMessage.value = e;
+    });
+}
+
+function isConverted(file: string): boolean {
+  const output = deriveOutputFilename(file);
+  return allFiles.value.has(output);
+}
+
+function deriveOutputFilename(file: string): string {
+  const lower = file.toLowerCase();
+  if (lower.endsWith(".mcool")) {
+    return file.slice(0, -".mcool".length) + ".hict.hdf5";
+  }
+  if (lower.endsWith(".cool")) {
+    return file.slice(0, -".cool".length) + ".hict.hdf5";
+  }
+  return file + ".hict.hdf5";
+}
+
+function toggleSelection(file: string, index: number, event: Event): void {
+  const isShift = (event as MouseEvent).shiftKey;
+  if (isShift && lastSelectedIndex.value !== null) {
+    const start = Math.min(lastSelectedIndex.value, index);
+    const end = Math.max(lastSelectedIndex.value, index);
+    const shouldSelect = !batchSelection.value.has(file);
+    for (let i = start; i <= end; i++) {
+      const name = batchFiles.value[i];
+      if (shouldSelect) {
+        batchSelection.value.add(name);
+      } else {
+        batchSelection.value.delete(name);
+      }
+    }
+  } else {
+    if (batchSelection.value.has(file)) {
+      batchSelection.value.delete(file);
+    } else {
+      batchSelection.value.add(file);
+    }
+  }
+  lastSelectedIndex.value = index;
+}
+
+function selectAll(): void {
+  batchSelection.value = new Set(batchFiles.value);
+}
+
+function selectNone(): void {
+  batchSelection.value = new Set<string>();
+}
+
+function invertSelection(): void {
+  const next = new Set<string>();
+  batchFiles.value.forEach((file) => {
+    if (!batchSelection.value.has(file)) {
+      next.add(file);
+    }
+  });
+  batchSelection.value = next;
+}
+
+function selectAllConverted(): void {
+  const next = new Set<string>();
+  batchFiles.value.forEach((file) => {
+    if (isConverted(file)) {
+      next.add(file);
+    }
+  });
+  batchSelection.value = next;
+}
+
+function selectAllUnconverted(): void {
+  const next = new Set<string>();
+  batchFiles.value.forEach((file) => {
+    if (!isConverted(file)) {
+      next.add(file);
+    }
+  });
+  batchSelection.value = next;
+}
+
+function proceedBatchSettings(): void {
+  batchStep.value = "settings";
+}
+
+function startBatchConversion(): void {
+  const files = Array.from(batchSelection.value);
+  props.networkManager.requestManager
+    .startBatchConversionJobs(
+      new StartBatchConversionJobsRequest({
+        files,
+        parallelJobs: batchParallelJobs.value,
+        parallelism: batchParallelism.value,
+      })
+    )
+    .then((resp) => {
+      batchJobIds.value = resp.jobIds;
+      batchStep.value = "progress";
+    })
+    .catch((e) => {
+      errorMessage.value = e;
+    });
 }
 </script>
 
@@ -157,4 +449,69 @@ function onConverterFinished(): void {
 .error-message {
   color: red;
 }
+.job-list {
+  list-style: none;
+  padding-left: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.job-list li {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+}
+.mode-tabs {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.batch-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+.batch-table {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 280px;
+  overflow: auto;
+  border: 1px solid #e5e7eb;
+  padding: 8px;
+  border-radius: 6px;
+}
+.batch-row {
+  display: grid;
+  grid-template-columns: 24px 1fr 120px;
+  gap: 8px;
+  align-items: center;
+}
+.batch-header {
+  font-weight: 600;
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 4px;
+  margin-bottom: 4px;
+}
+.status-pill {
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  text-align: center;
+}
+.status-pill.converted {
+  background: #d1fae5;
+  color: #065f46;
+}
+.status-pill.unconverted {
+  background: #fef3c7;
+  color: #92400e;
+}
+.batch-progress-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
 </style>
diff --git a/src/app/ui/components/upper_ribbon/HeaderRibbon.vue b/src/app/ui/components/upper_ribbon/HeaderRibbon.vue
index afa8f52..cd6c0aa 100644
--- a/src/app/ui/components/upper_ribbon/HeaderRibbon.vue
+++ b/src/app/ui/components/upper_ribbon/HeaderRibbon.vue
@@ -94,7 +94,7 @@
         id="reload-tiles-button"
         class="btn-sm btn-outline-primary"
         type="button"
-        @click="props.mapManager?.reloadTiles()"
+        @click="reloadTiles"
       >
         Reload tiles
       </button>
@@ -120,6 +120,7 @@
 import { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
 import NormalizationSelector from "./NormalizationSelector.vue";
 import { Ref, ref } from "vue";
+import { toast } from "vue-sonner";
 
 const props = defineProps<{
   mapManager?: ContactMapManager;
@@ -212,6 +213,15 @@ function checkOptionsAndSnapToContigIntersection() {
   }
 }
 
+async function reloadTiles() {
+  try {
+    await props.mapManager?.reloadTilesFromBackend();
+  } catch (e) {
+    toast.error("Failed to reload tiles");
+    console.error(e);
+  }
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 // const emit = defineEmits<{
 //   (e: "reloadTiles"): void;
@@ -345,7 +355,7 @@ function onNormalizationChanged() {
   padding: 0px;
   gap: 16px;
 
-  width: 150px;
+  width: auto;
   height: 29px;
 
   /* Inside auto layout */
@@ -399,7 +409,7 @@ function onNormalizationChanged() {
   align-items: center;
   padding: 4px 8px;
 
-  width: 37px;
+  min-width: 140px;
   height: 29px;
 
   /* Global/07. Light */
diff --git a/src/app/ui/components/upper_ribbon/converter/ConverterStatusChecker.vue b/src/app/ui/components/upper_ribbon/converter/ConverterStatusChecker.vue
index 0f2a471..bf65b6c 100644
--- a/src/app/ui/components/upper_ribbon/converter/ConverterStatusChecker.vue
+++ b/src/app/ui/components/upper_ribbon/converter/ConverterStatusChecker.vue
@@ -23,128 +23,107 @@
   <div class="d-flex align-items-center" v-if="errorMessage">
     <p class="error-message">Error: {{ errorMessage }}</p>
   </div>
-  <div class="d-flex align-items-center" v-if="loading">
-    <div v-if="converterStatus && converterStatus.isConverting">
-      <div class="spinner-border ms-auto" role="status"></div>
-      <p><strong>Converting...</strong></p>
-      <p>The status is updated automatically. Please, wait.</p>
-    </div>
-    <div v-if="converterStatus && !converterStatus.isConverting">
-      <p><strong>Conversion finished!</strong></p>
-      <p>Please, click "Next" to continue.</p>
+  <div v-if="job">
+    <div class="status-header">
+      <div>
+        <p><strong>Status:</strong> {{ job.status }}</p>
+        <p>
+          <strong>Input:</strong> {{ job.sourceFilename }} ({{
+            formatBytes(job.inputSizeBytes)
+          }})
+        </p>
+        <p>
+          <strong>Output:</strong> {{ job.outputFilename }} ({{
+            formatBytes(job.outputSizeBytes)
+          }})
+        </p>
+        <p v-if="job.currentResolution">
+          <strong>Current resolution:</strong> {{ job.currentResolution }}
+        </p>
+      </div>
+      <div class="actions">
+        <button
+          v-if="showStop && isRunning"
+          type="button"
+          class="btn btn-danger"
+          @click="onStopClicked"
+        >
+          Stop
+        </button>
+      </div>
     </div>
+
     <div class="progress-wrapper">
       <div class="some-progress">
         <p>
           Progress in current resolution:
-          {{
-            String(
-              Math.round(100 * (converterStatus?.resolutionProgress ?? 0))
-            ) + "%"
-          }}
+          {{ formatPercent(job.resolutionProgress) }}
+          <span class="progress-meta">
+            (elapsed {{ formatDuration(job.resolutionElapsedMillis) }}, eta
+            {{ formatDuration(job.resolutionEtaMillis) }})
+          </span>
         </p>
         <div class="progress hict-progress">
           <div
             class="progress-bar bg-info"
             role="progressbar"
-            :style="{
-              width:
-                String(
-                  Math.round(100 * (converterStatus?.resolutionProgress ?? 0))
-                ) + '%',
-            }"
-            aria-valuenow="{{ Math.round(100 * (converterStatus?.resolutionProgress ?? 0)) }}"
-            aria-valuemin="0"
-            aria-valuemax="100"
+            :style="{ width: formatPercent(job.resolutionProgress) }"
           ></div>
         </div>
       </div>
       <div class="some-progress">
         <p>
           Total progress:
-          {{
-            String(Math.round(100 * (converterStatus?.totalProgress ?? 0))) +
-            "%"
-          }}
+          {{ formatPercent(job.overallProgress) }}
+          <span class="progress-meta">
+            (elapsed {{ formatDuration(job.elapsedMillis) }}, eta
+            {{ formatDuration(job.etaMillis) }})
+          </span>
         </p>
         <div class="progress hict-progress">
           <div
             class="progress-bar bg-success"
             role="progressbar"
-            :style="{
-              width:
-                String(
-                  Math.round(100 * (converterStatus?.totalProgress ?? 0))
-                ) + '%',
-            }"
-            aria-valuenow="{{ Math.round(100 * (converterStatus?.totalProgress ?? 0)) }}"
-            aria-valuemin="0"
-            aria-valuemax="100"
+            :style="{ width: formatPercent(job.overallProgress) }"
           ></div>
         </div>
       </div>
     </div>
-  </div>
-  <div>
-    <button
-      type="button"
-      class="btn btn-primary"
-      v-if="converterStatus && !converterStatus.isConverting"
-      @click="onNextClicked"
-    >
-      Next
-    </button>
+
+    <div v-if="job.error" class="error-message">
+      Error: {{ job.error }}
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, onMounted } from "vue";
+import { type Ref, ref, onMounted, computed, withDefaults } from "vue";
 import type { NetworkManager } from "@/app/core/net/NetworkManager.js";
-import { ConverterStatusResponse } from "@/app/core/net/api/response";
+import { ConversionJobResponse } from "@/app/core/net/api/response";
 
-const props = defineProps<{
-  networkManager: NetworkManager;
-}>();
+const props = withDefaults(
+  defineProps<{
+    networkManager: NetworkManager;
+    jobId: string;
+    showStop?: boolean;
+  }>(),
+  { showStop: true }
+);
 
-const emit = defineEmits<{
-  (e: "finished"): void;
-}>();
-
-const loading: Ref<boolean> = ref(true);
-const converterStatus: Ref<ConverterStatusResponse | undefined> =
-  ref(undefined);
+const job: Ref<ConversionJobResponse | undefined> = ref(undefined);
 const errorMessage: Ref<unknown | undefined> = ref(undefined);
 const timerId: Ref<string | number | undefined> = ref(undefined);
 const missedRequestCount: Ref<number> = ref(0);
 const MISSED_THRESHOLD = 10;
 
-function resetState(): void {
-  if (timerId.value) {
-    clearInterval(timerId.value);
-    timerId.value = undefined;
-  }
-  loading.value = true;
-  converterStatus.value = undefined;
-  errorMessage.value = null;
-  missedRequestCount.value = 0;
-}
-
-function onNextClicked(): void {
-  emit("finished");
-  resetState();
-}
-
 function updateState(): void {
   props.networkManager.requestManager
-    .getConverterStatus()
+    .getConversionJob(props.jobId)
     .then((resp) => {
       missedRequestCount.value = 0;
-      converterStatus.value = resp;
-      if (!resp.isConverting) {
-        if (timerId.value) {
-          clearInterval(timerId.value);
-          timerId.value = undefined;
-        }
+      job.value = resp;
+      if (!isRunning.value) {
+        stopTimer();
       }
     })
     .catch((err) => {
@@ -162,9 +141,68 @@ function updateState(): void {
     });
 }
 
+function onStopClicked(): void {
+  props.networkManager.requestManager.stopConversionJob(props.jobId).catch((e) => {
+    errorMessage.value = e;
+  });
+}
+
+function stopTimer(): void {
+  if (timerId.value) {
+    clearInterval(timerId.value);
+    timerId.value = undefined;
+  }
+}
+
+const isRunning = computed(() => {
+  return job.value?.status === "running" || job.value?.status === "queued";
+});
+
+function formatPercent(value: number | undefined): string {
+  if (value === undefined || Number.isNaN(value)) {
+    return "0%";
+  }
+  return `${Math.round(value * 100)}%`;
+}
+
+function formatDuration(millis: number | undefined): string {
+  if (!millis || millis <= 0) {
+    return "00:00";
+  }
+  const totalSeconds = Math.floor(millis / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  if (hours > 0) {
+    return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(
+      2,
+      "0"
+    )}:${String(seconds).padStart(2, "0")}`;
+  }
+  return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(
+    2,
+    "0"
+  )}`;
+}
+
+function formatBytes(bytes: number | undefined): string {
+  if (!bytes || bytes <= 0) {
+    return "0 B";
+  }
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let size = bytes;
+  let unit = 0;
+  while (size >= 1024 && unit < units.length - 1) {
+    size /= 1024;
+    unit++;
+  }
+  return `${size.toFixed(1)} ${units[unit]}`;
+}
+
 onMounted(() => {
   // @ts-expect-error "Using default JS-style timer instead of NodeJS"
-  timerId.value = setInterval(updateState, 5000);
+  timerId.value = setInterval(updateState, 3000);
+  updateState();
 });
 </script>
 
@@ -185,4 +223,19 @@ onMounted(() => {
 .hict-progress {
   width: 100%;
 }
+.status-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.actions {
+  display: flex;
+  align-items: flex-start;
+}
+.progress-meta {
+  color: #6c757d;
+  font-size: 0.85em;
+  margin-left: 6px;
+}
 </style>

From 90d843fcb435950e5c795d4e4f9ed1883c6d270c Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Mon, 23 Feb 2026 05:59:02 +0400
Subject: [PATCH 12/27] Massive refactoring, added SVG export, added names
 tracks, added converter batch mode, update README, updated years in license
 text.

---
 .eslintrc.cjs                                 |   2 +-
 LICENSE                                       |   2 +-
 env.d.ts                                      |   2 +-
 index.html                                    |   2 +-
 src/App.vue                                   |   2 +-
 src/BinMousePosition.js                       |   2 +-
 src/CommonUtils.ts                            |   2 +-
 src/ContigMouseWheelZoom.js                   |  26 +-
 src/app/core/VersionedXYZSource.ts            |   2 +-
 src/app/core/controls/RulerControl.ts         |  26 +-
 src/app/core/domain/AssemblyInfo.ts           |   2 +-
 src/app/core/domain/ContigDescriptor.ts       |   2 +-
 src/app/core/domain/ScaffoldDescriptor.ts     |   2 +-
 src/app/core/domain/common.ts                 |   2 +-
 .../ContactMapSelectionInteraction.ts         |   2 +-
 .../interactions/SplitRulesInteraction.ts     |   2 +-
 .../core/mapmanagers/CommonEventManager.ts    |  22 +-
 src/app/core/mapmanagers/ContactMapManager.ts | 151 +++++++++-
 .../core/mapmanagers/ContigDimensionHolder.ts |   2 +-
 .../mapmanagers/HiCViewAndLayersManager.ts    |  44 ++-
 src/app/core/mapmanagers/ScaffoldHolder.ts    |   2 +-
 .../core/mapmanagers/VisualizationManager.ts  |   2 +-
 src/app/core/net/NetworkManager.ts            |   2 +-
 src/app/core/net/api/RequestManager.ts        |   9 +-
 src/app/core/net/api/request.ts               |   2 +-
 src/app/core/net/api/response.ts              |   2 +-
 src/app/core/net/dto/dto.ts                   |   2 +-
 src/app/core/net/dto/requestDTO.ts            |   2 +-
 src/app/core/net/dto/responseDTO.ts           |   2 +-
 src/app/core/net/netcommon.ts                 |   2 +-
 src/app/core/tracks/Track2D.ts                |   2 +-
 src/app/core/tracks/Track2DSymmetric.ts       |   4 +-
 .../visualization/VisualizationOptions.ts     |   2 +-
 .../core/visualization/colormap/Colormap.ts   |   2 +-
 .../colormap/SimpleLinearGradient.ts          |   2 +-
 src/app/stores/htmlElementReferencesStore.ts  |   2 +-
 src/app/stores/styleStore.ts                  |   2 +-
 src/app/stores/uiSettingsStore.ts             |  10 +
 src/app/stores/visualizationOptionsStore.ts   |   2 +-
 src/app/ui/MainUIComponent.vue                |   2 +-
 src/app/ui/components/ComponentCommon.ts      |   2 +-
 .../sidebar/ColorPickerRectangle.vue          |   2 +-
 .../ui/components/sidebar/LayerComponent.vue  |  28 +-
 src/app/ui/components/sidebar/MiniMap.vue     |   2 +-
 .../sidebar/SavedLocationElement.vue          |   2 +-
 .../ui/components/sidebar/SavedLocations.vue  |   2 +-
 .../components/sidebar/SavedVisualOptions.vue |   2 +-
 .../sidebar/SavedVisualOptionsElement.vue     |   2 +-
 src/app/ui/components/sidebar/SideBar.vue     |  25 +-
 .../sidebar/VisualziationSettingsEditor.vue   |  14 +-
 .../ui/components/sidebar/contrast-slider.css |   2 +-
 src/app/ui/components/toolbar/ToolBar.vue     |   2 +-
 .../toolbar/bottom_blocks/BottomButtons.vue   |   2 +-
 .../toolbar/upper_blocks/FirstBlock.vue       |   5 +-
 .../upper_blocks/RearrangementButtons.vue     |   2 +-
 .../upper_blocks/ScaffoldingButtons.vue       |   2 +-
 .../toolbar/upper_blocks/ThirdBlock.vue       |   2 +-
 .../toolbar/upper_blocks/ZoomSlider.vue       | 193 ++++++++++++
 .../components/tracks/HorizontalIGVTrack.vue  |   2 +-
 .../ui/components/tracks/VerticalIGVTrack.vue |   2 +-
 .../upper_ribbon/AGPFileSelector.vue          |   2 +-
 .../upper_ribbon/CoolerConverter.vue          |  82 +++++-
 .../upper_ribbon/FASTAFileSelector.vue        |   2 +-
 .../components/upper_ribbon/HeaderRibbon.vue  | 274 ++++++++++++++++--
 .../components/upper_ribbon/NavigationBar.vue | 139 ++++++++-
 .../upper_ribbon/NormalizationSelector.vue    |   2 +-
 .../upper_ribbon/OpenFileSelector.vue         |   2 +-
 .../upper_ribbon/UniversalFileSelector.vue    |   2 +-
 .../ui/components/upper_ribbon/UpperFrame.vue |   2 +-
 .../converter/ConverterStatusChecker.vue      |  88 +++++-
 .../converter/CoolerFileSelector.vue          |   2 +-
 .../workspace/InteractiveWorkspace.vue        |   4 +-
 .../ui/components/workspace/TrackNames.vue    |   2 +-
 .../workspace/WorkspaceComponent.vue          |   2 +-
 src/app/ui/contactmap/ContactMap.vue          |  38 ++-
 src/app/ui/zoomslider.css                     |   3 +
 src/assets/base.css                           |   2 +-
 src/assets/global.css                         |   2 +-
 src/assets/main.css                           |   2 +-
 src/env.d.ts                                  |   2 +-
 src/main.ts                                   |  49 +++-
 vite.config.ts                                |   2 +-
 82 files changed, 1220 insertions(+), 136 deletions(-)
 create mode 100644 src/app/stores/uiSettingsStore.ts
 create mode 100644 src/app/ui/components/toolbar/upper_blocks/ZoomSlider.vue
 create mode 100644 src/app/ui/zoomslider.css

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index b5ef05b..bdc7d31 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/LICENSE b/LICENSE
index b8ec035..12d3f32 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/env.d.ts b/env.d.ts
index 3bc14fe..f25dfdc 100644
--- a/env.d.ts
+++ b/env.d.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/index.html b/index.html
index 279d696..248b5b1 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/App.vue b/src/App.vue
index 04b0fdf..a62aef3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/BinMousePosition.js b/src/BinMousePosition.js
index 73dd718..b9b1c85 100644
--- a/src/BinMousePosition.js
+++ b/src/BinMousePosition.js
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/CommonUtils.ts b/src/CommonUtils.ts
index 3318445..ad40777 100644
--- a/src/CommonUtils.ts
+++ b/src/CommonUtils.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/ContigMouseWheelZoom.js b/src/ContigMouseWheelZoom.js
index da0597a..70f8821 100644
--- a/src/ContigMouseWheelZoom.js
+++ b/src/ContigMouseWheelZoom.js
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
@@ -204,14 +204,26 @@ export default class ContigMouseWheelZoom extends MouseWheelZoom {
       return;
     }
 
-    const newZoom = view.getConstrainedZoom(currentZoom + delta);
-    const newResolution = view.getResolutionForZoom(newZoom);
+    const zoomFactor = view.getZoomFactor ? view.getZoomFactor() : 2;
+    const currentResolution = view.getResolution();
+    if (currentResolution === undefined) {
+      return;
+    }
+    const newResolution =
+      currentResolution / Math.pow(zoomFactor, delta);
     if (newResolution === undefined) {
       return;
     }
 
+    const minResolution = view.getMinResolution();
+    const maxResolution = view.getMaxResolution();
+    const constrainedResolution = Math.min(
+      Math.max(newResolution, minResolution ?? newResolution),
+      maxResolution ?? newResolution
+    );
+
     const old_level_index = this.getClosestResolutionIndex(view.getResolution());
-    const new_level_index = this.getClosestResolutionIndex(newResolution);
+    const new_level_index = this.getClosestResolutionIndex(constrainedResolution);
 
     if (
       this.lastMouseBps &&
@@ -242,7 +254,7 @@ export default class ContigMouseWheelZoom extends MouseWheelZoom {
         view.animate({
           // duration: 50,
           duration: this.duration_,
-          resolution: newResolution,
+          resolution: constrainedResolution,
           center: [
             finish_coordinate_on_map[0] + dx_px * newResolution,
             finish_coordinate_on_map[1] - dy_px * newResolution,
@@ -251,14 +263,14 @@ export default class ContigMouseWheelZoom extends MouseWheelZoom {
       } else {
         view.animate({
           duration: this.duration_,
-          resolution: newResolution,
+          resolution: constrainedResolution,
           anchor: this.lastMouseCoord,
         });
       }
     } else {
       view.animate({
         duration: this.duration_,
-        resolution: newResolution,
+        resolution: constrainedResolution,
         anchor: this.lastMouseCoord,
       });
     }
diff --git a/src/app/core/VersionedXYZSource.ts b/src/app/core/VersionedXYZSource.ts
index 47a03e6..6e7a834 100644
--- a/src/app/core/VersionedXYZSource.ts
+++ b/src/app/core/VersionedXYZSource.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/controls/RulerControl.ts b/src/app/core/controls/RulerControl.ts
index fdef81e..33498ec 100644
--- a/src/app/core/controls/RulerControl.ts
+++ b/src/app/core/controls/RulerControl.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
@@ -56,6 +56,7 @@ class RulerControl extends Control {
   protected readonly colormap: Ref<Colormap>;
 
   public readonly canvasSize: number[];
+  public readonly direction: "vertical" | "horizontal";
 
   public constructor(public readonly opt_options: Options) {
     const canvas = document.createElement("canvas");
@@ -102,6 +103,7 @@ class RulerControl extends Control {
     this.mapManager = opt_options.mapManager;
     this.viewAndLayersManager = this.mapManager.getLayersManager();
     this.contigDimensionHolder = this.mapManager.getContigDimensionHolder();
+    this.direction = opt_options.direction;
 
     const visualizationOptionsStore = useVisualizationOptionsStore();
     const { colormap } = storeToRefs(visualizationOptionsStore);
@@ -117,6 +119,7 @@ class RulerControl extends Control {
   }
 
   render(mapEvent: MapEvent) {
+    //this.updateCanvasSize();
     const map = mapEvent.map;
     // const size = this.canvasSize; //map.getSize() as [number, number];
     this.canvas.width = this.canvasSize[0];
@@ -428,6 +431,27 @@ class RulerControl extends Control {
     }
   }
 
+  private updateCanvasSize(): void {
+    const parent = this.canvas.parentElement;
+    if (parent) {
+      const dim = parent.getBoundingClientRect();
+      const newWidth = Math.max(1, Math.floor(dim.width));
+      const newHeight = Math.max(1, Math.floor(dim.height));
+      this.canvasSize[0] = newWidth;
+      this.canvasSize[1] = newHeight;
+      return;
+    }
+    const mapSize = this.mapManager.getMap().getSize() as [number, number];
+    if (!mapSize) return;
+    if (this.direction === "vertical") {
+      this.canvasSize[0] = DEFAULT_CANVAS_SIZE;
+      this.canvasSize[1] = mapSize[1];
+    } else {
+      this.canvasSize[0] = mapSize[0];
+      this.canvasSize[1] = DEFAULT_CANVAS_SIZE;
+    }
+  }
+
   protected drawTickAtPxOffset(
     context: CanvasRenderingContext2D,
     resolutionDescriptor: LayerResolutionDescriptor,
diff --git a/src/app/core/domain/AssemblyInfo.ts b/src/app/core/domain/AssemblyInfo.ts
index a03c615..2b83338 100644
--- a/src/app/core/domain/AssemblyInfo.ts
+++ b/src/app/core/domain/AssemblyInfo.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/domain/ContigDescriptor.ts b/src/app/core/domain/ContigDescriptor.ts
index 5687169..fdf522b 100644
--- a/src/app/core/domain/ContigDescriptor.ts
+++ b/src/app/core/domain/ContigDescriptor.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/domain/ScaffoldDescriptor.ts b/src/app/core/domain/ScaffoldDescriptor.ts
index 90ec4f7..74cb9de 100644
--- a/src/app/core/domain/ScaffoldDescriptor.ts
+++ b/src/app/core/domain/ScaffoldDescriptor.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/domain/common.ts b/src/app/core/domain/common.ts
index 155da55..d5030b6 100644
--- a/src/app/core/domain/common.ts
+++ b/src/app/core/domain/common.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/interactions/ContactMapSelectionInteraction.ts b/src/app/core/interactions/ContactMapSelectionInteraction.ts
index 0492a17..1c7d9aa 100644
--- a/src/app/core/interactions/ContactMapSelectionInteraction.ts
+++ b/src/app/core/interactions/ContactMapSelectionInteraction.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/interactions/SplitRulesInteraction.ts b/src/app/core/interactions/SplitRulesInteraction.ts
index 9a0c481..162a543 100644
--- a/src/app/core/interactions/SplitRulesInteraction.ts
+++ b/src/app/core/interactions/SplitRulesInteraction.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/mapmanagers/CommonEventManager.ts b/src/app/core/mapmanagers/CommonEventManager.ts
index 6ada34f..04b3ebd 100644
--- a/src/app/core/mapmanagers/CommonEventManager.ts
+++ b/src/app/core/mapmanagers/CommonEventManager.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
@@ -171,6 +171,26 @@ class CommonEventManager {
     );
   }
 
+  public onContigExportEnabledChanged(enabled: boolean): void {
+    this.mapManager.viewAndLayersManager.onContigExportEnabledChanged(enabled);
+  }
+
+  public onScaffoldExportEnabledChanged(enabled: boolean): void {
+    this.mapManager.viewAndLayersManager.onScaffoldExportEnabledChanged(enabled);
+  }
+
+  public onContigNamesExportEnabledChanged(enabled: boolean): void {
+    this.mapManager.viewAndLayersManager.onContigNamesExportEnabledChanged(
+      enabled
+    );
+  }
+
+  public onScaffoldNamesExportEnabledChanged(enabled: boolean): void {
+    this.mapManager.viewAndLayersManager.onScaffoldNamesExportEnabledChanged(
+      enabled
+    );
+  }
+
   public onNamePlacementChanged(style: BorderStyle): void {
     const placement = (() => {
       switch (style) {
diff --git a/src/app/core/mapmanagers/ContactMapManager.ts b/src/app/core/mapmanagers/ContactMapManager.ts
index 6aea41d..dd0147f 100644
--- a/src/app/core/mapmanagers/ContactMapManager.ts
+++ b/src/app/core/mapmanagers/ContactMapManager.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
@@ -20,7 +20,7 @@
  */
 
 import { Map, View } from "ol";
-import { ZoomSlider, ScaleLine, OverviewMap } from "ol/control";
+import { ScaleLine, OverviewMap, ZoomSlider } from "ol/control";
 import { DoubleClickZoom, DragPan } from "ol/interaction";
 import TileLayer from "ol/layer/Tile";
 import ContigDimensionHolder from "./ContigDimensionHolder";
@@ -185,7 +185,11 @@ class ContactMapManager {
   }
 
   public async exportCurrentMapSvg(
-    progressCallback?: (progress: number) => void
+    progressCallback?: (progress: number) => void,
+    options?: {
+      backgroundColor?: string;
+      metadata?: Record<string, unknown>;
+    }
   ): Promise<void> {
     const descriptor =
       this.viewAndLayersManager.currentViewState.resolutionDesciptor;
@@ -223,6 +227,7 @@ class ContactMapManager {
 
     const width = imageSize;
     const height = imageSize;
+    const backgroundColor = options?.backgroundColor ?? "rgba(255,255,255,0)";
     const svgImages: string[] = [];
     let completed = 0;
     let nextIndex = 0;
@@ -268,7 +273,14 @@ class ContactMapManager {
       `xmlns:xlink=\"http://www.w3.org/1999/xlink\" ` +
       `width=\"${width}\" height=\"${height}\" viewBox=\"0 0 ${width} ${height}\">`;
 
+    svg += `<rect width=\"${width}\" height=\"${height}\" fill=\"${backgroundColor}\" />`;
+    if (options?.metadata) {
+      const metaJson = JSON.stringify(options.metadata);
+      svg += `<metadata><![CDATA[${metaJson}]]></metadata>`;
+    }
+
     svg += svgImages.join("");
+    svg += this.exportTracksSvg(descriptor.bpResolution);
     svg += `</svg>`;
 
     const blob = new Blob([svg], { type: "image/svg+xml" });
@@ -279,6 +291,139 @@ class ContactMapManager {
     URL.revokeObjectURL(a.href);
   }
 
+  private exportTracksSvg(bpResolution: number): string {
+    const flags = this.viewAndLayersManager.getExportTrackFlags();
+    if (
+      !flags.contigBorders &&
+      !flags.scaffoldBorders &&
+      !flags.contigNames &&
+      !flags.scaffoldNames
+    ) {
+      return "";
+    }
+
+    const contigTrack = this.viewAndLayersManager.track2DHolder.contigBordersTrack;
+    const scaffoldTrack =
+      this.viewAndLayersManager.track2DHolder.scaffoldBordersTrack;
+    const prefixPx = this.contigDimensionHolder.prefix_sum_px.get(bpResolution);
+    if (!prefixPx) {
+      return "";
+    }
+
+    const measureCanvas =
+      typeof document !== "undefined"
+        ? document.createElement("canvas")
+        : null;
+    const measureCtx = measureCanvas?.getContext("2d") ?? null;
+    const measureLabelWidth = (text: string, font: string): number => {
+      if (!measureCtx) return text.length * 6;
+      measureCtx.font = font;
+      return measureCtx.measureText(text).width;
+    };
+
+    const toFont = (track: typeof contigTrack) =>
+      `${track.getLabelBold() ? "bold " : ""}${track.getLabelSize()}px sans-serif`;
+
+    let svg = "";
+
+    if (flags.contigBorders || flags.contigNames) {
+      const borderStyle = contigTrack.getStyleType();
+      const strokeColor = contigTrack.options.borderColor as string;
+      const strokeWidth = contigTrack.options.width;
+      const fillColor = contigTrack.options.fillColor as string;
+      const labelSize = contigTrack.getLabelSize();
+      const labelOffset = labelSize * contigTrack.getLabelOffsetMultiplier();
+      const namePlacement = contigTrack.getNamePlacement();
+      const labelFont = toFont(contigTrack);
+      const labelStroke = contigTrack.getLabelOutline()
+        ? `stroke="rgba(0,0,0,0.9)" stroke-width="${contigTrack.getLabelOutlineWidth()}"`
+        : "";
+      for (let i = 0; i < this.contigDimensionHolder.contigDescriptors.length; i++) {
+        const cd = this.contigDimensionHolder.contigDescriptors[i];
+        const startPx = prefixPx[i] ?? 0;
+        const lenBins = cd.contigLengthBins.get(bpResolution) ?? 0;
+        const endPx = startPx + lenBins;
+        if (endPx <= startPx) continue;
+        if (flags.contigBorders) {
+          if (borderStyle === 0) {
+            svg += `<rect x="${startPx}" y="${startPx}" width="${lenBins}" height="${lenBins}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}" />`;
+          } else if (borderStyle === 1) {
+            svg += `<line x1="${startPx}" y1="${endPx}" x2="${endPx}" y2="${endPx}" stroke="${strokeColor}" stroke-width="${strokeWidth}" />`;
+          } else if (borderStyle === 2) {
+            svg += `<line x1="${startPx}" y1="${startPx}" x2="${endPx}" y2="${startPx}" stroke="${strokeColor}" stroke-width="${strokeWidth}" />`;
+          }
+        }
+        if (flags.contigNames) {
+          const rectWidth = endPx - startPx;
+          const labelWidth = measureLabelWidth(cd.contigName, labelFont);
+          if (rectWidth > 0 && labelWidth < rectWidth * 0.9) {
+            let labelY = (startPx + endPx) / 2;
+            if (namePlacement === 0) {
+              labelY = startPx - labelOffset;
+            } else if (namePlacement === 1) {
+              labelY = endPx + labelOffset;
+            }
+            const midPx = (startPx + endPx) / 2;
+            svg += `<text x="${midPx}" y="${labelY}" text-anchor="middle" dominant-baseline="middle" fill="${strokeColor}" font-size="${labelSize}" font-family="sans-serif" font-weight="${contigTrack.getLabelBold() ? "bold" : "normal"}" ${labelStroke}>${cd.contigName}</text>`;
+          }
+        }
+      }
+    }
+
+    if (flags.scaffoldBorders || flags.scaffoldNames) {
+      const borderStyle = scaffoldTrack.getStyleType();
+      const strokeColor = scaffoldTrack.options.borderColor as string;
+      const strokeWidth = scaffoldTrack.options.width;
+      const fillColor = scaffoldTrack.options.fillColor as string;
+      const labelSize = scaffoldTrack.getLabelSize();
+      const labelOffset = labelSize * scaffoldTrack.getLabelOffsetMultiplier();
+      const namePlacement = scaffoldTrack.getNamePlacement();
+      const labelFont = toFont(scaffoldTrack);
+      const labelStroke = scaffoldTrack.getLabelOutline()
+        ? `stroke="rgba(0,0,0,0.9)" stroke-width="${scaffoldTrack.getLabelOutlineWidth()}"`
+        : "";
+      for (const sd of this.scaffoldHolder.scaffoldTable.values()) {
+        const borders = sd.scaffoldBordersBP;
+        if (!borders) continue;
+        const startPx = this.contigDimensionHolder.getPxContainingBp(
+          borders.startBP,
+          bpResolution
+        );
+        const endPx = this.contigDimensionHolder.getPxContainingBp(
+          borders.endBP,
+          bpResolution
+        );
+        if (endPx <= startPx) continue;
+        const lenBins = endPx - startPx;
+        if (flags.scaffoldBorders) {
+          if (borderStyle === 0) {
+            svg += `<rect x="${startPx}" y="${startPx}" width="${lenBins}" height="${lenBins}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}" />`;
+          } else if (borderStyle === 1) {
+            svg += `<line x1="${startPx}" y1="${endPx}" x2="${endPx}" y2="${endPx}" stroke="${strokeColor}" stroke-width="${strokeWidth}" />`;
+          } else if (borderStyle === 2) {
+            svg += `<line x1="${startPx}" y1="${startPx}" x2="${endPx}" y2="${startPx}" stroke="${strokeColor}" stroke-width="${strokeWidth}" />`;
+          }
+        }
+        if (flags.scaffoldNames) {
+          const rectWidth = endPx - startPx;
+          const labelWidth = measureLabelWidth(sd.scaffoldName, labelFont);
+          if (rectWidth > 0 && labelWidth < rectWidth * 0.9) {
+            let labelY = (startPx + endPx) / 2;
+            if (namePlacement === 0) {
+              labelY = startPx - labelOffset;
+            } else if (namePlacement === 1) {
+              labelY = endPx + labelOffset;
+            }
+            const midPx = (startPx + endPx) / 2;
+            svg += `<text x="${midPx}" y="${labelY}" text-anchor="middle" dominant-baseline="middle" fill="${strokeColor}" font-size="${labelSize}" font-family="sans-serif" font-weight="${scaffoldTrack.getLabelBold() ? "bold" : "normal"}" ${labelStroke}>${sd.scaffoldName}</text>`;
+          }
+        }
+      }
+    }
+
+    return svg;
+  }
+
   public dispose() {
     this.map.setTarget(undefined);
   }
diff --git a/src/app/core/mapmanagers/ContigDimensionHolder.ts b/src/app/core/mapmanagers/ContigDimensionHolder.ts
index ccc2b00..5f003cf 100644
--- a/src/app/core/mapmanagers/ContigDimensionHolder.ts
+++ b/src/app/core/mapmanagers/ContigDimensionHolder.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
index 0ed1bfe..9b362e2 100644
--- a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
+++ b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
@@ -191,6 +191,14 @@ class HiCViewAndLayersManager {
     contrastSliderRangesCallbacks: [],
   };
 
+  public readonly exportTrackFlags = {
+    contigBorders: true,
+    scaffoldBorders: true,
+    contigNames: true,
+    scaffoldNames: true,
+    translocationArrows: true,
+  };
+
   constructor(
     public readonly mapManager: ContactMapManager,
     response: OpenFileResponse,
@@ -266,16 +274,22 @@ class HiCViewAndLayersManager {
       global: false,
       getPointResolution: (resolution) => resolution,
     });
+    const minPixelResolution = Math.min(...this.pixelResolutionSet);
+    const maxPixelResolution = Math.max(...this.pixelResolutionSet);
+    const overzoomFactor = 1024;
+    const minResolution = minPixelResolution / overzoomFactor;
+    const maxResolution = maxPixelResolution * overzoomFactor;
     // Define view:
     this.view = new View({
       center: [
         this.pixelProjection.getExtent()[0],
         this.pixelProjection.getExtent()[3],
       ],
-      resolutions: this.pixelResolutionSet,
-      resolution: Math.max(...this.pixelResolutionSet),
-      minResolution: Math.min(...this.pixelResolutionSet),
-      maxResolution: Math.max(...this.pixelResolutionSet),
+      resolution: maxPixelResolution,
+      minResolution: minResolution,
+      maxResolution: maxResolution,
+      constrainResolution: false,
+      zoomFactor: 2,
       showFullExtent: true,
       constrainOnlyCenter: true,
       projection: this.pixelProjection,
@@ -515,6 +529,26 @@ class HiCViewAndLayersManager {
     this.reloadTracks();
   }
 
+  public onContigExportEnabledChanged(enabled: boolean): void {
+    this.exportTrackFlags.contigBorders = enabled;
+  }
+
+  public onScaffoldExportEnabledChanged(enabled: boolean): void {
+    this.exportTrackFlags.scaffoldBorders = enabled;
+  }
+
+  public onContigNamesExportEnabledChanged(enabled: boolean): void {
+    this.exportTrackFlags.contigNames = enabled;
+  }
+
+  public onScaffoldNamesExportEnabledChanged(enabled: boolean): void {
+    this.exportTrackFlags.scaffoldNames = enabled;
+  }
+
+  public getExportTrackFlags() {
+    return { ...this.exportTrackFlags };
+  }
+
   public onContigLabelOffsetMultiplierChanged(multiplier: number): void {
     this.track2DHolder.contigBordersTrack.setLabelOffsetMultiplier(multiplier);
     this.reloadTracks();
diff --git a/src/app/core/mapmanagers/ScaffoldHolder.ts b/src/app/core/mapmanagers/ScaffoldHolder.ts
index 6f23a27..278fb6d 100644
--- a/src/app/core/mapmanagers/ScaffoldHolder.ts
+++ b/src/app/core/mapmanagers/ScaffoldHolder.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/mapmanagers/VisualizationManager.ts b/src/app/core/mapmanagers/VisualizationManager.ts
index e5de578..9ee99d0 100644
--- a/src/app/core/mapmanagers/VisualizationManager.ts
+++ b/src/app/core/mapmanagers/VisualizationManager.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/net/NetworkManager.ts b/src/app/core/net/NetworkManager.ts
index f29cb55..b46ab78 100644
--- a/src/app/core/net/NetworkManager.ts
+++ b/src/app/core/net/NetworkManager.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/net/api/RequestManager.ts b/src/app/core/net/api/RequestManager.ts
index 16fc4fa..be38945 100644
--- a/src/app/core/net/api/RequestManager.ts
+++ b/src/app/core/net/api/RequestManager.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
@@ -263,6 +263,13 @@ class RequestManager {
       .then((json) => Number(json.version ?? 0));
   }
 
+  public async getBackendVersion(): Promise<{ version: string; webuiVersion?: string } | string> {
+    return axios
+      .get(`${this.networkManager.host}/version`)
+      .then((resp) => resp.data ?? { version: "unknown" })
+      .catch(() => "unknown");
+  }
+
   public async listAGPFiles(): Promise<string[]> {
     const response = await this.sendRequest(new ListAGPFilesRequest());
     return response.data as string[];
diff --git a/src/app/core/net/api/request.ts b/src/app/core/net/api/request.ts
index 835294a..40e7e42 100644
--- a/src/app/core/net/api/request.ts
+++ b/src/app/core/net/api/request.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/net/api/response.ts b/src/app/core/net/api/response.ts
index 8b2e788..d57fba7 100644
--- a/src/app/core/net/api/response.ts
+++ b/src/app/core/net/api/response.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/net/dto/dto.ts b/src/app/core/net/dto/dto.ts
index 1690e5e..ecd2596 100644
--- a/src/app/core/net/dto/dto.ts
+++ b/src/app/core/net/dto/dto.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/net/dto/requestDTO.ts b/src/app/core/net/dto/requestDTO.ts
index 83f41fa..c91ea39 100644
--- a/src/app/core/net/dto/requestDTO.ts
+++ b/src/app/core/net/dto/requestDTO.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/net/dto/responseDTO.ts b/src/app/core/net/dto/responseDTO.ts
index 930a686..f951a57 100644
--- a/src/app/core/net/dto/responseDTO.ts
+++ b/src/app/core/net/dto/responseDTO.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/net/netcommon.ts b/src/app/core/net/netcommon.ts
index ddb62e6..edafaf8 100644
--- a/src/app/core/net/netcommon.ts
+++ b/src/app/core/net/netcommon.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/tracks/Track2D.ts b/src/app/core/tracks/Track2D.ts
index f6c7639..b54f8b3 100644
--- a/src/app/core/tracks/Track2D.ts
+++ b/src/app/core/tracks/Track2D.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/tracks/Track2DSymmetric.ts b/src/app/core/tracks/Track2DSymmetric.ts
index e1e9713..ab1b7cb 100644
--- a/src/app/core/tracks/Track2DSymmetric.ts
+++ b/src/app/core/tracks/Track2DSymmetric.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
@@ -101,7 +101,7 @@ abstract class Track2DSymmetric extends Track2D {
       width: opt_options?.width ?? 2,
       zIndex: opt_options?.zIndex ?? 0,
       labelSize: opt_options?.labelSize ?? 12,
-      labelOffsetMultiplier: opt_options?.labelOffsetMultiplier ?? 0.5,
+      labelOffsetMultiplier: opt_options?.labelOffsetMultiplier ?? 1.25,
       labelBold: opt_options?.labelBold ?? true,
       labelOutline: opt_options?.labelOutline ?? true,
       labelOutlineWidth: opt_options?.labelOutlineWidth ?? 2,
diff --git a/src/app/core/visualization/VisualizationOptions.ts b/src/app/core/visualization/VisualizationOptions.ts
index c132cfd..8875279 100644
--- a/src/app/core/visualization/VisualizationOptions.ts
+++ b/src/app/core/visualization/VisualizationOptions.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/visualization/colormap/Colormap.ts b/src/app/core/visualization/colormap/Colormap.ts
index 1ba3108..cb7b7a9 100644
--- a/src/app/core/visualization/colormap/Colormap.ts
+++ b/src/app/core/visualization/colormap/Colormap.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/core/visualization/colormap/SimpleLinearGradient.ts b/src/app/core/visualization/colormap/SimpleLinearGradient.ts
index 823b86e..3aa7a19 100644
--- a/src/app/core/visualization/colormap/SimpleLinearGradient.ts
+++ b/src/app/core/visualization/colormap/SimpleLinearGradient.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/stores/htmlElementReferencesStore.ts b/src/app/stores/htmlElementReferencesStore.ts
index 81d94bb..1822111 100644
--- a/src/app/stores/htmlElementReferencesStore.ts
+++ b/src/app/stores/htmlElementReferencesStore.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/stores/styleStore.ts b/src/app/stores/styleStore.ts
index cff548d..169867a 100644
--- a/src/app/stores/styleStore.ts
+++ b/src/app/stores/styleStore.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/stores/uiSettingsStore.ts b/src/app/stores/uiSettingsStore.ts
new file mode 100644
index 0000000..ae94fec
--- /dev/null
+++ b/src/app/stores/uiSettingsStore.ts
@@ -0,0 +1,10 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useUiSettingsStore = defineStore("uiSettings", () => {
+  const customZoomSliderEnabled = ref(false);
+
+  return {
+    customZoomSliderEnabled,
+  };
+});
diff --git a/src/app/stores/visualizationOptionsStore.ts b/src/app/stores/visualizationOptionsStore.ts
index 31f637e..40c45cc 100644
--- a/src/app/stores/visualizationOptionsStore.ts
+++ b/src/app/stores/visualizationOptionsStore.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/MainUIComponent.vue b/src/app/ui/MainUIComponent.vue
index 6e8d11d..bb07552 100644
--- a/src/app/ui/MainUIComponent.vue
+++ b/src/app/ui/MainUIComponent.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/ComponentCommon.ts b/src/app/ui/components/ComponentCommon.ts
index 679d2eb..bf9c1d3 100644
--- a/src/app/ui/components/ComponentCommon.ts
+++ b/src/app/ui/components/ComponentCommon.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/sidebar/ColorPickerRectangle.vue b/src/app/ui/components/sidebar/ColorPickerRectangle.vue
index 72323c5..3405413 100644
--- a/src/app/ui/components/sidebar/ColorPickerRectangle.vue
+++ b/src/app/ui/components/sidebar/ColorPickerRectangle.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/sidebar/LayerComponent.vue b/src/app/ui/components/sidebar/LayerComponent.vue
index 7bfeb39..176fd97 100644
--- a/src/app/ui/components/sidebar/LayerComponent.vue
+++ b/src/app/ui/components/sidebar/LayerComponent.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
@@ -130,6 +130,19 @@
               />
             </div>
           </div>
+          <div class="mb-2">
+            <div class="form-check">
+              <input
+                id="track-export-svg"
+                class="form-check-input"
+                type="checkbox"
+                v-model="includeInSvg"
+              />
+              <label class="form-check-label" for="track-export-svg">
+                Include in SVG export
+              </label>
+            </div>
+          </div>
           <div class="d-flex gap-2">
             <button class="btn btn-sm btn-success" @click="applyStyle">
               Apply
@@ -163,6 +176,7 @@ const props = defineProps<{
   getLabelBold?: () => boolean;
   getLabelOutline?: () => boolean;
   getLabelOutlineWidth?: () => number;
+  getIncludeInSvg?: () => boolean;
 }>();
 
 function getBaseColor(): ColorTranslator {
@@ -196,7 +210,8 @@ const emit = defineEmits<{
     labelOffsetMultiplier: number,
     labelBold: boolean,
     labelOutline: boolean,
-    labelOutlineWidth: number
+    labelOutlineWidth: number,
+    includeInSvg: boolean
   ): void;
 }>();
 
@@ -206,10 +221,11 @@ const fillColor: Ref<ColorTranslator> = ref(
   new ColorTranslator("rgba(0,0,0,0.0)", { legacyCSS: true })
 ) as Ref<ColorTranslator>;
 const labelSize: Ref<number> = ref(12);
-const labelOffsetMultiplier: Ref<number> = ref(0.5);
+const labelOffsetMultiplier: Ref<number> = ref(1.25);
 const labelBold: Ref<boolean> = ref(true);
 const labelOutline: Ref<boolean> = ref(true);
 const labelOutlineWidth: Ref<number> = ref(2);
+const includeInSvg: Ref<boolean> = ref(true);
 
 const bordersStyle: Ref<number> = ref(
   props.layerName.includes("names") ? BorderStyle.TOP : 0
@@ -272,6 +288,9 @@ function openStyleEditor() {
   if (props.getLabelOutlineWidth) {
     labelOutlineWidth.value = props.getLabelOutlineWidth();
   }
+  if (props.getIncludeInSvg) {
+    includeInSvg.value = props.getIncludeInSvg();
+  }
 }
 
 function applyStyle() {
@@ -284,7 +303,8 @@ function applyStyle() {
     labelOffsetMultiplier.value,
     labelBold.value,
     labelOutline.value,
-    labelOutlineWidth.value
+    labelOutlineWidth.value,
+    includeInSvg.value
   );
 }
 
diff --git a/src/app/ui/components/sidebar/MiniMap.vue b/src/app/ui/components/sidebar/MiniMap.vue
index 3776215..4070db3 100644
--- a/src/app/ui/components/sidebar/MiniMap.vue
+++ b/src/app/ui/components/sidebar/MiniMap.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/sidebar/SavedLocationElement.vue b/src/app/ui/components/sidebar/SavedLocationElement.vue
index 6f99781..0f71fa9 100644
--- a/src/app/ui/components/sidebar/SavedLocationElement.vue
+++ b/src/app/ui/components/sidebar/SavedLocationElement.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/sidebar/SavedLocations.vue b/src/app/ui/components/sidebar/SavedLocations.vue
index 90393de..1ca36d7 100644
--- a/src/app/ui/components/sidebar/SavedLocations.vue
+++ b/src/app/ui/components/sidebar/SavedLocations.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/sidebar/SavedVisualOptions.vue b/src/app/ui/components/sidebar/SavedVisualOptions.vue
index 07f04b1..2d6194c 100644
--- a/src/app/ui/components/sidebar/SavedVisualOptions.vue
+++ b/src/app/ui/components/sidebar/SavedVisualOptions.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/sidebar/SavedVisualOptionsElement.vue b/src/app/ui/components/sidebar/SavedVisualOptionsElement.vue
index 585bb16..3028e84 100644
--- a/src/app/ui/components/sidebar/SavedVisualOptionsElement.vue
+++ b/src/app/ui/components/sidebar/SavedVisualOptionsElement.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/sidebar/SideBar.vue b/src/app/ui/components/sidebar/SideBar.vue
index 6f39115..d01f741 100644
--- a/src/app/ui/components/sidebar/SideBar.vue
+++ b/src/app/ui/components/sidebar/SideBar.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
@@ -41,6 +41,7 @@
           :getLabelBold="layer.getLabelBold"
           :getLabelOutline="layer.getLabelOutline"
           :getLabelOutlineWidth="layer.getLabelOutlineWidth"
+          :getIncludeInSvg="layer.getIncludeInSvg"
           :enableStyleEditor="layer.enableStyleEditor"
           @onColorChanged="onColorChanged"
           @onBorderStyleChanged="onBorderStyleChanged"
@@ -130,7 +131,8 @@ class LayerDescriptor {
     public getLabelOffsetMultiplier?: () => number,
     public getLabelBold?: () => boolean,
     public getLabelOutline?: () => boolean,
-    public getLabelOutlineWidth?: () => number
+    public getLabelOutlineWidth?: () => number,
+    public getIncludeInSvg?: () => boolean
   ) {}
 }
 
@@ -163,7 +165,8 @@ const layers: Ref<LayerDescriptor[]> = ref([
     () =>
       props.mapManager
         ?.getLayersManager()
-        .track2DHolder.contigBordersTrack.getLabelOutlineWidth() ?? 2
+        .track2DHolder.contigBordersTrack.getLabelOutlineWidth() ?? 2,
+    () => props.mapManager?.getLayersManager().getExportTrackFlags().contigBorders ?? true
   ),
   new LayerDescriptor(
     "Scaffolds",
@@ -193,7 +196,8 @@ const layers: Ref<LayerDescriptor[]> = ref([
     () =>
       props.mapManager
         ?.getLayersManager()
-        .track2DHolder.scaffoldBordersTrack.getLabelOutlineWidth() ?? 2
+        .track2DHolder.scaffoldBordersTrack.getLabelOutlineWidth() ?? 2,
+    () => props.mapManager?.getLayersManager().getExportTrackFlags().scaffoldBorders ?? true
   ),
   new LayerDescriptor(
     "Cnames",
@@ -220,7 +224,8 @@ const layers: Ref<LayerDescriptor[]> = ref([
     () =>
       props.mapManager
         ?.getLayersManager()
-        .track2DHolder.contigBordersTrack.getLabelOutlineWidth() ?? 2
+        .track2DHolder.contigBordersTrack.getLabelOutlineWidth() ?? 2,
+    () => props.mapManager?.getLayersManager().getExportTrackFlags().contigNames ?? true
   ),
   new LayerDescriptor(
     "Snames",
@@ -247,7 +252,8 @@ const layers: Ref<LayerDescriptor[]> = ref([
     () =>
       props.mapManager
         ?.getLayersManager()
-        .track2DHolder.scaffoldBordersTrack.getLabelOutlineWidth() ?? 2
+        .track2DHolder.scaffoldBordersTrack.getLabelOutlineWidth() ?? 2,
+    () => props.mapManager?.getLayersManager().getExportTrackFlags().scaffoldNames ?? true
   ),
   new LayerDescriptor("Background", () => backgroundColorStyle.value),
 ]);
@@ -305,7 +311,8 @@ function onStyleChanged(
   labelOffsetMultiplier: number,
   labelBold: boolean,
   labelOutline: boolean,
-  labelOutlineWidth: number
+  labelOutlineWidth: number,
+  includeInSvg: boolean
 ) {
   switch (layerName) {
     case "Contigs":
@@ -318,6 +325,7 @@ function onStyleChanged(
       getEventManager()?.onContigLabelBoldChanged(labelBold);
       getEventManager()?.onContigLabelOutlineChanged(labelOutline);
       getEventManager()?.onContigLabelOutlineWidthChanged(labelOutlineWidth);
+      getEventManager()?.onContigExportEnabledChanged(includeInSvg);
       break;
     case "Scaffolds":
       getEventManager()?.onScaffoldBorderWidthChanged(borderWidth);
@@ -329,6 +337,7 @@ function onStyleChanged(
       getEventManager()?.onScaffoldLabelBoldChanged(labelBold);
       getEventManager()?.onScaffoldLabelOutlineChanged(labelOutline);
       getEventManager()?.onScaffoldLabelOutlineWidthChanged(labelOutlineWidth);
+      getEventManager()?.onScaffoldExportEnabledChanged(includeInSvg);
       break;
     case "Cnames":
       getEventManager()?.onContigLabelSizeChanged(labelSize);
@@ -338,6 +347,7 @@ function onStyleChanged(
       getEventManager()?.onContigLabelBoldChanged(labelBold);
       getEventManager()?.onContigLabelOutlineChanged(labelOutline);
       getEventManager()?.onContigLabelOutlineWidthChanged(labelOutlineWidth);
+      getEventManager()?.onContigNamesExportEnabledChanged(includeInSvg);
       break;
     case "Snames":
       getEventManager()?.onScaffoldLabelSizeChanged(labelSize);
@@ -347,6 +357,7 @@ function onStyleChanged(
       getEventManager()?.onScaffoldLabelBoldChanged(labelBold);
       getEventManager()?.onScaffoldLabelOutlineChanged(labelOutline);
       getEventManager()?.onScaffoldLabelOutlineWidthChanged(labelOutlineWidth);
+      getEventManager()?.onScaffoldNamesExportEnabledChanged(includeInSvg);
       break;
     default:
       toast.error(`Method for ${layerName} is undefined`);
diff --git a/src/app/ui/components/sidebar/VisualziationSettingsEditor.vue b/src/app/ui/components/sidebar/VisualziationSettingsEditor.vue
index fb9c692..6b9fac9 100644
--- a/src/app/ui/components/sidebar/VisualziationSettingsEditor.vue
+++ b/src/app/ui/components/sidebar/VisualziationSettingsEditor.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
@@ -35,6 +35,7 @@
               type="number"
               lang="en"
               v-model.number="lowerBound"
+              @keydown.enter="applySettings"
             />
           </li>
           <li class="list-group-item w-100 h-100">
@@ -56,6 +57,7 @@
               type="number"
               lang="en"
               v-model.number="upperBound"
+              @keydown.enter="applySettings"
             />
           </li>
           <li class="list-group-item w-100 h-100">
@@ -73,7 +75,7 @@
       <button
         type="button"
         id="gradient-apply-button"
-        class="btn m-1"
+        class="btn m-1 gradient-apply-button"
         :style="gradstyle"
         @click="applySettings"
       >
@@ -131,6 +133,7 @@ const gradstyle = ref({
     " , " +
     toColor.value.RGBA +
     ")",
+  color: "#ffffff",
 });
 
 watch(
@@ -239,4 +242,11 @@ function applySettings() {
   width: 250px;
   margin: 15px;
 }
+
+.gradient-apply-button {
+  text-shadow:
+    0 0 2px #000,
+    0 0 1px #000;
+  border: none;
+}
 </style>
diff --git a/src/app/ui/components/sidebar/contrast-slider.css b/src/app/ui/components/sidebar/contrast-slider.css
index a9a8b89..bbfcc15 100644
--- a/src/app/ui/components/sidebar/contrast-slider.css
+++ b/src/app/ui/components/sidebar/contrast-slider.css
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/toolbar/ToolBar.vue b/src/app/ui/components/toolbar/ToolBar.vue
index 58a8e65..520afbc 100644
--- a/src/app/ui/components/toolbar/ToolBar.vue
+++ b/src/app/ui/components/toolbar/ToolBar.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/toolbar/bottom_blocks/BottomButtons.vue b/src/app/ui/components/toolbar/bottom_blocks/BottomButtons.vue
index 70005e1..2ae1608 100644
--- a/src/app/ui/components/toolbar/bottom_blocks/BottomButtons.vue
+++ b/src/app/ui/components/toolbar/bottom_blocks/BottomButtons.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/toolbar/upper_blocks/FirstBlock.vue b/src/app/ui/components/toolbar/upper_blocks/FirstBlock.vue
index eeb30cc..e8f1be1 100644
--- a/src/app/ui/components/toolbar/upper_blocks/FirstBlock.vue
+++ b/src/app/ui/components/toolbar/upper_blocks/FirstBlock.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
@@ -493,6 +493,7 @@ function slideByCounterDiagonal() {
 .block-of-buttons {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  align-items: center;
+  gap: 6px;
 }
 </style>
diff --git a/src/app/ui/components/toolbar/upper_blocks/RearrangementButtons.vue b/src/app/ui/components/toolbar/upper_blocks/RearrangementButtons.vue
index f8422a4..cfd0696 100644
--- a/src/app/ui/components/toolbar/upper_blocks/RearrangementButtons.vue
+++ b/src/app/ui/components/toolbar/upper_blocks/RearrangementButtons.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/toolbar/upper_blocks/ScaffoldingButtons.vue b/src/app/ui/components/toolbar/upper_blocks/ScaffoldingButtons.vue
index 75535e4..161fb85 100644
--- a/src/app/ui/components/toolbar/upper_blocks/ScaffoldingButtons.vue
+++ b/src/app/ui/components/toolbar/upper_blocks/ScaffoldingButtons.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/toolbar/upper_blocks/ThirdBlock.vue b/src/app/ui/components/toolbar/upper_blocks/ThirdBlock.vue
index af671d4..b65a358 100644
--- a/src/app/ui/components/toolbar/upper_blocks/ThirdBlock.vue
+++ b/src/app/ui/components/toolbar/upper_blocks/ThirdBlock.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/toolbar/upper_blocks/ZoomSlider.vue b/src/app/ui/components/toolbar/upper_blocks/ZoomSlider.vue
new file mode 100644
index 0000000..205d56e
--- /dev/null
+++ b/src/app/ui/components/toolbar/upper_blocks/ZoomSlider.vue
@@ -0,0 +1,193 @@
+<template>
+  <div
+    class="zoom-slider ol-control ol-zoomslider custom-zoomslider"
+    :style="{ height: `${sliderHeight}px` }"
+    title="Zoom level"
+  >
+    <input
+      class="zoom-range"
+      type="range"
+      min="0"
+      max="1000"
+      step="1"
+      v-model.number="sliderValue"
+      @input="onSliderInput"
+      aria-label="Zoom level"
+    />
+    <div class="zoom-marks">
+      <div
+        v-for="mark in marks"
+        :key="mark.key"
+        class="zoom-mark"
+        :style="{ bottom: `${mark.pos}%` }"
+      >
+        <span class="zoom-mark-label">{{ mark.label }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import type { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
+
+const props = defineProps<{
+  readonly mapManager?: ContactMapManager | undefined;
+}>();
+
+const sliderValue = ref(0);
+const minRes = ref(1);
+const maxRes = ref(1);
+const logMin = ref(0);
+const logMax = ref(1);
+const resMarks = ref<{ bp: number; pixel: number }[]>([]);
+let viewKey: unknown;
+
+function recomputeScale() {
+  const map = props.mapManager;
+  if (!map) return;
+  const layersManager = map.viewAndLayersManager;
+  const pixelRes = layersManager.pixelResolutionSet;
+  if (!pixelRes.length) return;
+  const minPixel = Math.min(...pixelRes);
+  const maxPixel = Math.max(...pixelRes);
+  const factor = 1024;
+  minRes.value = minPixel / factor;
+  maxRes.value = maxPixel * factor;
+  logMin.value = Math.log(minRes.value);
+  logMax.value = Math.log(maxRes.value);
+  resMarks.value = layersManager.resolutions.map((bp, i) => ({
+    bp,
+    pixel: layersManager.pixelResolutionSet[i],
+  }));
+}
+
+function resolutionToSlider(resolution: number): number {
+  const t =
+    (Math.log(resolution) - logMin.value) /
+    (logMax.value - logMin.value || 1);
+  return Math.min(1, Math.max(0, t)) * 1000;
+}
+
+function sliderToResolution(value: number): number {
+  const t = Math.min(1, Math.max(0, value / 1000));
+  return Math.exp(logMin.value + t * (logMax.value - logMin.value));
+}
+
+function formatBp(bp: number): string {
+  if (bp >= 1_000_000_000) return `${Math.round(bp / 1_000_000_000)}G`;
+  if (bp >= 1_000_000) return `${Math.round(bp / 1_000_000)}M`;
+  if (bp >= 1_000) return `${Math.round(bp / 1_000)}K`;
+  return `${bp}`;
+}
+
+const marks = computed(() => {
+  const result: { key: string; pos: number; label: string }[] = [];
+  result.push({ key: "min", pos: 0, label: "-Inf" });
+  for (const entry of resMarks.value) {
+    const pos =
+      ((Math.log(entry.pixel) - logMin.value) /
+        (logMax.value - logMin.value || 1)) *
+      100;
+    result.push({
+      key: `bp-${entry.bp}`,
+      pos,
+      label: `1:${formatBp(entry.bp)}`,
+    });
+  }
+  result.push({ key: "max", pos: 100, label: "+Inf" });
+  return result;
+});
+
+const sliderHeight = computed(() => {
+  return Math.max(220, marks.value.length * 22 + 20);
+});
+
+function syncFromView() {
+  const map = props.mapManager;
+  if (!map) return;
+  const view = map.getMap().getView();
+  const res = view.getResolution();
+  if (res == null) return;
+  sliderValue.value = resolutionToSlider(res);
+}
+
+function onSliderInput() {
+  const map = props.mapManager;
+  if (!map) return;
+  const view = map.getMap().getView();
+  const res = sliderToResolution(sliderValue.value);
+  view.setResolution(res);
+}
+
+watch(
+  () => props.mapManager,
+  () => {
+    recomputeScale();
+    syncFromView();
+  }
+);
+
+onMounted(() => {
+  recomputeScale();
+  syncFromView();
+  const map = props.mapManager;
+  if (!map) return;
+  const view = map.getMap().getView();
+  viewKey = view.on("change:resolution", () => {
+    syncFromView();
+  });
+});
+
+onBeforeUnmount(() => {
+  const map = props.mapManager;
+  if (!map || !viewKey) return;
+  map.getMap().getView().un("change:resolution", viewKey as never);
+  viewKey = undefined;
+});
+</script>
+
+<style scoped>
+.zoom-slider {
+  position: relative;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid #adb5bd;
+  border-radius: 4px;
+  padding: 10px 0;
+}
+
+.zoom-range {
+  position: absolute;
+  width: 180px;
+  height: 24px;
+  transform: rotate(-90deg);
+}
+
+.zoom-marks {
+  position: absolute;
+  right: -6px;
+  top: 0;
+  bottom: 0;
+  width: 70px;
+  pointer-events: none;
+}
+
+.zoom-mark {
+  position: absolute;
+  right: 0;
+  transform: translateY(50%);
+  font-size: 9px;
+  color: #495057;
+  white-space: nowrap;
+}
+
+.zoom-mark-label {
+  display: inline-block;
+  background: rgba(255, 255, 255, 0.9);
+  padding: 0 2px;
+}
+</style>
diff --git a/src/app/ui/components/tracks/HorizontalIGVTrack.vue b/src/app/ui/components/tracks/HorizontalIGVTrack.vue
index 7681466..a86520c 100644
--- a/src/app/ui/components/tracks/HorizontalIGVTrack.vue
+++ b/src/app/ui/components/tracks/HorizontalIGVTrack.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/tracks/VerticalIGVTrack.vue b/src/app/ui/components/tracks/VerticalIGVTrack.vue
index 55877aa..ee40a48 100644
--- a/src/app/ui/components/tracks/VerticalIGVTrack.vue
+++ b/src/app/ui/components/tracks/VerticalIGVTrack.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/upper_ribbon/AGPFileSelector.vue b/src/app/ui/components/upper_ribbon/AGPFileSelector.vue
index 7195f2d..9d4774c 100644
--- a/src/app/ui/components/upper_ribbon/AGPFileSelector.vue
+++ b/src/app/ui/components/upper_ribbon/AGPFileSelector.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/upper_ribbon/CoolerConverter.vue b/src/app/ui/components/upper_ribbon/CoolerConverter.vue
index c5cbadc..a79f36a 100644
--- a/src/app/ui/components/upper_ribbon/CoolerConverter.vue
+++ b/src/app/ui/components/upper_ribbon/CoolerConverter.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
@@ -139,6 +139,7 @@
                   <input
                     type="checkbox"
                     :checked="batchSelection.has(file)"
+                    @click.stop="toggleSelection(file, index, $event)"
                     @change="toggleSelection(file, index, $event)"
                   />
                   <span>{{ file }}</span>
@@ -179,6 +180,11 @@
             </div>
             <div v-if="batchStep === 'progress'">
               <h6>Batch progress</h6>
+              <div class="overall-status">
+                <span class="status-pill" :class="overallBatchStatusClass">
+                  {{ overallBatchStatusLabel }}
+                </span>
+              </div>
               <div class="batch-progress-list">
                 <ConverterStatusChecker
                   v-for="job in batchJobIds"
@@ -186,6 +192,7 @@
                   :network-manager="networkManager"
                   :job-id="job"
                   :show-stop="true"
+                  @status-update="onBatchStatusUpdate"
                 />
               </div>
             </div>
@@ -206,7 +213,7 @@
 </template>
 
 <script setup lang="ts">
-import { type Ref, ref, onMounted } from "vue";
+import { type Ref, ref, onMounted, computed } from "vue";
 import { Modal } from "bootstrap";
 import type { NetworkManager } from "@/app/core/net/NetworkManager.js";
 import {
@@ -239,6 +246,8 @@ const batchSelection: Ref<Set<string>> = ref(new Set<string>());
 const batchParallelJobs: Ref<number> = ref(2);
 const batchParallelism: Ref<number> = ref(4);
 const batchJobIds: Ref<string[]> = ref([]);
+const batchStatusMap: Ref<Map<string, string>> = ref(new Map());
+const batchProgressMap: Ref<Map<string, number>> = ref(new Map());
 const allFiles: Ref<Set<string>> = ref(new Set<string>());
 const lastSelectedIndex: Ref<number | null> = ref(null);
 
@@ -259,6 +268,8 @@ function resetState(): void {
     batchFiles.value = [];
     batchSelection.value = new Set<string>();
     batchJobIds.value = [];
+    batchStatusMap.value.clear();
+    batchProgressMap.value.clear();
     allFiles.value = new Set<string>();
     lastSelectedIndex.value = null;
   }
@@ -427,6 +438,8 @@ function proceedBatchSettings(): void {
 
 function startBatchConversion(): void {
   const files = Array.from(batchSelection.value);
+  batchStatusMap.value.clear();
+  batchProgressMap.value.clear();
   props.networkManager.requestManager
     .startBatchConversionJobs(
       new StartBatchConversionJobsRequest({
@@ -443,6 +456,41 @@ function startBatchConversion(): void {
       errorMessage.value = e;
     });
 }
+
+function onBatchStatusUpdate(payload: {
+  jobId: string;
+  status: string;
+  overallProgress: number;
+}): void {
+  batchStatusMap.value.set(payload.jobId, payload.status);
+  batchProgressMap.value.set(payload.jobId, payload.overallProgress);
+}
+
+const overallBatchStatusLabel = computed(() => {
+  const statuses = Array.from(batchStatusMap.value.values());
+  if (!statuses.length) return "Running";
+  if (statuses.some((s) => s === "failed")) return "Failed";
+  if (statuses.some((s) => s === "cancelled")) return "Cancelled";
+  if (statuses.every((s) => s === "finished")) return "Finished";
+  if (statuses.some((s) => s === "running")) return "Running";
+  if (statuses.some((s) => s === "queued")) return "Queued";
+  return "Running";
+});
+
+const overallBatchStatusClass = computed(() => {
+  switch (overallBatchStatusLabel.value) {
+    case "Finished":
+      return "finished";
+    case "Failed":
+      return "failed";
+    case "Cancelled":
+      return "cancelled";
+    case "Queued":
+      return "queued";
+    default:
+      return "running";
+  }
+});
 </script>
 
 <style scoped>
@@ -455,6 +503,8 @@ function startBatchConversion(): void {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  max-height: 180px;
+  overflow: auto;
 }
 .job-list li {
   display: flex;
@@ -513,5 +563,33 @@ function startBatchConversion(): void {
   display: flex;
   flex-direction: column;
   gap: 16px;
+  max-height: 360px;
+  overflow: auto;
+  padding-right: 6px;
+}
+
+.overall-status {
+  margin-bottom: 8px;
+}
+
+.status-pill.finished {
+  background: #d1fae5;
+  color: #065f46;
+}
+.status-pill.running {
+  background: #bfdbfe;
+  color: #1e3a8a;
+}
+.status-pill.queued {
+  background: #fef3c7;
+  color: #92400e;
+}
+.status-pill.failed {
+  background: #fee2e2;
+  color: #991b1b;
+}
+.status-pill.cancelled {
+  background: #e5e7eb;
+  color: #374151;
 }
 </style>
diff --git a/src/app/ui/components/upper_ribbon/FASTAFileSelector.vue b/src/app/ui/components/upper_ribbon/FASTAFileSelector.vue
index e509123..8ce44b0 100644
--- a/src/app/ui/components/upper_ribbon/FASTAFileSelector.vue
+++ b/src/app/ui/components/upper_ribbon/FASTAFileSelector.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/upper_ribbon/HeaderRibbon.vue b/src/app/ui/components/upper_ribbon/HeaderRibbon.vue
index cd6c0aa..d332eee 100644
--- a/src/app/ui/components/upper_ribbon/HeaderRibbon.vue
+++ b/src/app/ui/components/upper_ribbon/HeaderRibbon.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
@@ -21,7 +21,7 @@
 
 <template>
   <div class="header-ribbon">
-    <div id="left-header-block" class="input-group">
+    <div id="left-header-block" class="header-block">
       <div id="search-container">
         <div id="search-input-group" class="input-group input-group-sm mb-3">
           <input
@@ -29,15 +29,37 @@
             class="form-control form-control-sm m-0"
             placeholder="I'm looking for..."
             type="text"
+            v-model="searchQuery"
+            @input="onSearchInput"
           />
           <button
             id="global-search-button"
             class="btn btn-sm btn-outline-light"
             type="button"
+            @click="goToSelection"
           >
             Go to
           </button>
         </div>
+        <div
+          v-if="searchResults.length > 0 && searchQuery.length >= 3"
+          class="search-dropdown"
+        >
+          <button
+            v-for="(item, idx) in searchResults"
+            :key="item.key"
+            type="button"
+            class="search-result"
+            :class="{ active: idx === selectedIndex }"
+            @click="selectResult(idx)"
+          >
+            <span class="search-type">{{ item.type }}</span>
+            <span class="search-name">{{ item.name }}</span>
+            <span class="search-original" v-if="item.originalName">
+              ({{ item.originalName }})
+            </span>
+          </button>
+        </div>
       </div>
       <div class="mb-3">
         <select
@@ -89,7 +111,7 @@
         <NormalizationSelector :map-manager="props.mapManager" />
       </div>
     </div>
-    <div id="right-header-block" class="input-group">
+    <div id="right-header-block" class="header-block">
       <button
         id="reload-tiles-button"
         class="btn-sm btn-outline-primary"
@@ -121,6 +143,10 @@ import { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
 import NormalizationSelector from "./NormalizationSelector.vue";
 import { Ref, ref } from "vue";
 import { toast } from "vue-sonner";
+import { useStyleStore } from "@/app/stores/styleStore";
+import { useVisualizationOptionsStore } from "@/app/stores/visualizationOptionsStore";
+import { storeToRefs } from "pinia";
+import SimpleLinearGradient from "@/app/core/visualization/colormap/SimpleLinearGradient";
 
 const props = defineProps<{
   mapManager?: ContactMapManager;
@@ -130,20 +156,169 @@ const rowContigId: Ref<number | null> = ref(null);
 const columnContigId: Ref<number | null> = ref(null);
 const exportingSvg = ref(false);
 const svgProgress = ref(0);
+const searchQuery = ref("");
+const searchResults = ref<
+  {
+    key: string;
+    type: "Contig" | "Scaffold";
+    id: number;
+    name: string;
+    originalName?: string;
+  }[]
+>([]);
+const selectedIndex = ref(0);
+const stylesStore = useStyleStore();
+const visualizationOptionsStore = useVisualizationOptionsStore();
+const { mapBackgroundColor } = storeToRefs(stylesStore);
+const {
+  preLogBase,
+  postLogBase,
+  applyCoolerWeights,
+  resolutionScaling,
+  resolutionLinearScaling,
+  colormap,
+} = storeToRefs(visualizationOptionsStore);
 
 async function exportSvg() {
   if (!props.mapManager || exportingSvg.value) return;
   exportingSvg.value = true;
   svgProgress.value = 0;
+  const cmap = colormap.value;
+  const metadata: Record<string, unknown> = {
+    filename: props.mapManager.getOptions().filename,
+    visualization: {
+      preLogBase: preLogBase.value,
+      postLogBase: postLogBase.value,
+      applyCoolerWeights: applyCoolerWeights.value,
+      resolutionScaling: resolutionScaling.value,
+      resolutionLinearScaling: resolutionLinearScaling.value,
+      colormap:
+        cmap instanceof SimpleLinearGradient
+          ? {
+              type: cmap.colormapType,
+              startColor: cmap.startColorRGBA?.RGBA,
+              endColor: cmap.endColorRGBA?.RGBA,
+              minSignal: cmap.minSignal,
+              maxSignal: cmap.maxSignal,
+            }
+          : { type: cmap?.colormapType ?? "Unknown" },
+    },
+  };
   try {
-    await props.mapManager.exportCurrentMapSvg((progress) => {
-      svgProgress.value = progress;
-    });
+    await props.mapManager.exportCurrentMapSvg(
+      (progress) => {
+        svgProgress.value = progress;
+      },
+      {
+        backgroundColor: mapBackgroundColor.value.RGBA,
+        metadata,
+      }
+    );
   } finally {
     exportingSvg.value = false;
   }
 }
 
+function buildSearchResults(): void {
+  const query = searchQuery.value.trim().toLowerCase();
+  if (!props.mapManager || query.length < 3) {
+    searchResults.value = [];
+    selectedIndex.value = 0;
+    return;
+  }
+  const contigs =
+    props.mapManager.getContigDimensionHolder().contigDescriptors ?? [];
+  const scaffolds = Array.from(
+    props.mapManager.scaffoldHolder.scaffoldTable.values()
+  );
+  const results: typeof searchResults.value = [];
+  for (const ctg of contigs) {
+    const name = ctg.contigName ?? "";
+    const original = ctg.contigOriginalName ?? "";
+    if (
+      name.toLowerCase().includes(query) ||
+      original.toLowerCase().includes(query)
+    ) {
+      results.push({
+        key: `contig-${ctg.contigId}`,
+        type: "Contig",
+        id: ctg.contigId,
+        name,
+        originalName: original !== name ? original : undefined,
+      });
+    }
+  }
+  for (const sc of scaffolds) {
+    const name = sc.scaffoldName ?? "";
+    const original = sc.scaffoldOriginalName ?? "";
+    if (
+      name.toLowerCase().includes(query) ||
+      original.toLowerCase().includes(query)
+    ) {
+      results.push({
+        key: `scaffold-${sc.scaffoldId}`,
+        type: "Scaffold",
+        id: sc.scaffoldId,
+        name,
+        originalName: original !== name ? original : undefined,
+      });
+    }
+  }
+  searchResults.value = results.slice(0, 50);
+  selectedIndex.value = 0;
+}
+
+function onSearchInput(): void {
+  buildSearchResults();
+}
+
+function selectResult(idx: number): void {
+  selectedIndex.value = idx;
+  const item = searchResults.value[idx];
+  if (item) {
+    searchQuery.value = item.name;
+  }
+}
+
+function goToSelection(): void {
+  if (!props.mapManager) return;
+  const item = searchResults.value[selectedIndex.value] ?? searchResults.value[0];
+  if (!item) return;
+  if (item.type === "Contig") {
+    const contig =
+      props.mapManager
+        .getContigDimensionHolder()
+        .contigDescriptors.find((c) => c.contigId === item.id) ?? null;
+    if (!contig) return;
+    const view = props.mapManager.getView();
+    const prefix = props.mapManager.contigDimensionHolder.prefix_sum_bp;
+    const ord =
+      props.mapManager.contigDimensionHolder.contigIdToOrd[contig.contigId];
+    if (ord === undefined || Number.isNaN(ord)) {
+      toast.error("Contig is not available in the current assembly");
+      return;
+    }
+    const startBp = prefix[ord];
+    const endBp = startBp + contig.contigLengthBp;
+    const midBp = (startBp + endBp) / 2;
+    const res = view.getResolution() ?? 1;
+    const midPx = midBp / res;
+    view.animate({ center: [midPx, -midPx] });
+  } else {
+    const scaffold = props.mapManager.scaffoldHolder.getScaffoldById(item.id);
+    const borders = scaffold.scaffoldBordersBP;
+    if (!borders) {
+      toast.error("Scaffold has no borders in the current assembly");
+      return;
+    }
+    const view = props.mapManager.getView();
+    const midBp = (borders.startBP + borders.endBP) / 2;
+    const res = view.getResolution() ?? 1;
+    const midPx = midBp / res;
+    view.animate({ center: [midPx, -midPx] });
+  }
+}
+
 function checkOptionsAndSnapToContigIntersection() {
   // alert("Row " + rowContigId.value + " Column " + columnContigId.value);
   const rowCtgId = rowContigId.value;
@@ -265,6 +440,7 @@ function onNormalizationChanged() {
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: nowrap;
   padding: 12px 16px;
   gap: 16px;
 
@@ -280,23 +456,41 @@ function onNormalizationChanged() {
   flex-grow: 0;
 }
 
+.header-ribbon .mb-3 {
+  margin-bottom: 0 !important;
+}
+
+#left-header-block,
+#right-header-block {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: nowrap;
+}
+
 #left-header-block {
   /* left block */
 
   /* Auto layout */
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
+  align-items: center;
   padding: 0px;
   gap: 16px;
 
-  width: calc(100% - 150px);
+  width: auto;
   height: 29px;
 
   /* Inside auto layout */
-  flex: none;
+  flex: 1 1 auto;
+  min-width: 0;
   order: 0;
-  flex-grow: 0;
+  flex-grow: 1;
+}
+
+#right-header-block {
+  gap: 12px;
+  margin-left: auto;
+  flex: 0 0 auto;
 }
 
 #search-container {
@@ -316,6 +510,7 @@ function onNormalizationChanged() {
   flex: none;
   order: 0;
   flex-grow: 0;
+  position: relative;
 }
 
 #search-input-group {
@@ -345,23 +540,52 @@ function onNormalizationChanged() {
   flex-grow: 0;
 }
 
-#right-header-block {
-  /* right block */
+.search-dropdown {
+  position: absolute;
+  top: 36px;
+  left: 0;
+  width: 320px;
+  max-height: 240px;
+  overflow: auto;
+  background: #ffffff;
+  border: 1px solid #ced4da;
+  border-radius: 6px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
+  z-index: 30;
+  padding: 4px;
+}
 
-  /* Auto layout */
+.search-result {
+  width: 100%;
+  border: none;
+  background: transparent;
+  text-align: left;
+  padding: 6px 8px;
   display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  padding: 0px;
-  gap: 16px;
+  gap: 6px;
+  align-items: center;
+  border-radius: 4px;
+}
 
-  width: auto;
-  height: 29px;
+.search-result:hover,
+.search-result.active {
+  background: #f1f3f5;
+}
 
-  /* Inside auto layout */
-  flex: none;
-  order: 1;
-  flex-grow: 0;
+.search-type {
+  font-size: 11px;
+  color: #6c757d;
+  min-width: 52px;
+}
+
+.search-name {
+  font-weight: 600;
+  color: #212529;
+}
+
+.search-original {
+  font-size: 11px;
+  color: #6c757d;
 }
 
 #reload-tiles-button {
diff --git a/src/app/ui/components/upper_ribbon/NavigationBar.vue b/src/app/ui/components/upper_ribbon/NavigationBar.vue
index 55e0353..5a8db8c 100644
--- a/src/app/ui/components/upper_ribbon/NavigationBar.vue
+++ b/src/app/ui/components/upper_ribbon/NavigationBar.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
@@ -154,6 +154,17 @@
                   Show WebUI error toasts
                 </label>
               </li>
+              <li class="form-check mt-2">
+                <input
+                  id="toggle-custom-zoomslider"
+                  class="form-check-input"
+                  type="checkbox"
+                  v-model="customZoomSliderEnabled"
+                />
+                <label class="form-check-label" for="toggle-custom-zoomslider">
+                  Use custom ZoomSlider
+                </label>
+              </li>
             </ul>
           </li>
           <!-- Connection settings -->
@@ -185,6 +196,15 @@
             </ul>
           </li>
           <!-- Report a bug -->
+          <li class="nav-item">
+            <a
+              aria-current="page"
+              class="nav-link active"
+              href="#"
+              @click="openAbout"
+              >About</a
+            >
+          </li>
           <li class="nav-item">
             <a
               aria-current="page"
@@ -232,6 +252,30 @@
     @dismissed="onConvertCoolersDismissed"
   >
   </CoolerConverter>
+  <div
+    v-if="aboutOpen"
+    class="about-backdrop"
+    @click.self="aboutOpen = false"
+  >
+    <div class="about-modal">
+      <div class="about-header">
+        <h2>HiCT</h2>
+        <button class="btn-close" @click="aboutOpen = false"></button>
+      </div>
+      <div class="about-body">
+        <p class="about-authors">
+          Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii
+          Dravgelis and Computer Technologies Laboratory ITMO University team.
+        </p>
+        <pre class="about-license">{{ licenseText }}</pre>
+        <div class="about-versions">
+          <div><strong>Backend:</strong> {{ backendVersion }}</div>
+          <div><strong>WebUI:</strong> {{ webuiVersion }}</div>
+          <div><strong>Commit:</strong> {{ webuiCommit }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -252,12 +296,39 @@ import UniversalFileSelector from "@/app/ui/components/upper_ribbon/UniversalFil
 import { toast } from "vue-sonner";
 import { storeToRefs } from "pinia";
 import { useErrorToastStore } from "@/app/stores/errorToastStore";
+import { useUiSettingsStore } from "@/app/stores/uiSettingsStore";
+import pkg from "../../../../../package.json";
 const openingFile = ref(false);
 const openingFASTAFile = ref(false);
 const openingAGPFile = ref(false);
 const convertingCoolers = ref(false);
 const saving = ref(false);
 const gatewayAddress: Ref<string> = ref("http://localhost:5000/");
+const aboutOpen = ref(false);
+const backendVersion = ref("loading...");
+const webuiVersion = ref(String((pkg as { version?: string })?.version ?? "unknown"));
+const webuiCommit = ref("unknown");
+const licenseText = `MIT License
+
+Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.`;
 
 const emit = defineEmits<{
   (e: "selected", filename: string): void;
@@ -271,8 +342,10 @@ const props = defineProps<{
 
 const errorMessage: Ref<unknown | null> = ref(null);
 const errorToastStore = useErrorToastStore();
+const uiSettingsStore = useUiSettingsStore();
 const { requestErrorToastsEnabled, webuiErrorToastsEnabled } =
   storeToRefs(errorToastStore);
+const { customZoomSliderEnabled } = storeToRefs(uiSettingsStore);
 
 function onOpenFile() {
   openingFile.value = true;
@@ -307,6 +380,22 @@ function onConvertCoolersDismissed(): void {
   convertingCoolers.value = false;
 }
 
+function openAbout(): void {
+  aboutOpen.value = true;
+  backendVersion.value = "loading...";
+  props.networkManager.requestManager
+    .getBackendVersion()
+    .then((v) => {
+      if (typeof v === "string") {
+        backendVersion.value = v;
+      } else {
+        backendVersion.value = v.version ?? "unknown";
+        webuiVersion.value = v.webuiVersion ?? webuiVersion.value;
+      }
+    })
+    .catch(() => (backendVersion.value = "unknown"));
+}
+
 function onOpenFASTAFile() {
   openingFASTAFile.value = true;
 }
@@ -449,4 +538,52 @@ function onAssemblyAGPRequest() {
 #set-gateway-btn {
   margin-right: 30px;
 }
+
+.about-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+
+.about-modal {
+  background: #ffffff;
+  border-radius: 10px;
+  width: min(720px, 90vw);
+  max-height: 90vh;
+  overflow: auto;
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
+  padding: 20px 24px;
+}
+
+.about-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.about-body {
+  margin-top: 12px;
+}
+
+.about-authors {
+  margin-bottom: 12px;
+}
+
+.about-license {
+  background: #f8f9fa;
+  padding: 12px;
+  border-radius: 6px;
+  white-space: pre-wrap;
+  font-size: 12px;
+}
+
+.about-versions {
+  margin-top: 12px;
+  display: grid;
+  gap: 4px;
+}
 </style>
diff --git a/src/app/ui/components/upper_ribbon/NormalizationSelector.vue b/src/app/ui/components/upper_ribbon/NormalizationSelector.vue
index 62cba49..cd7ba1a 100644
--- a/src/app/ui/components/upper_ribbon/NormalizationSelector.vue
+++ b/src/app/ui/components/upper_ribbon/NormalizationSelector.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/upper_ribbon/OpenFileSelector.vue b/src/app/ui/components/upper_ribbon/OpenFileSelector.vue
index ceaf776..07846f0 100644
--- a/src/app/ui/components/upper_ribbon/OpenFileSelector.vue
+++ b/src/app/ui/components/upper_ribbon/OpenFileSelector.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/upper_ribbon/UniversalFileSelector.vue b/src/app/ui/components/upper_ribbon/UniversalFileSelector.vue
index eb52c8b..81addca 100644
--- a/src/app/ui/components/upper_ribbon/UniversalFileSelector.vue
+++ b/src/app/ui/components/upper_ribbon/UniversalFileSelector.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/upper_ribbon/UpperFrame.vue b/src/app/ui/components/upper_ribbon/UpperFrame.vue
index 16481e2..d3994e5 100644
--- a/src/app/ui/components/upper_ribbon/UpperFrame.vue
+++ b/src/app/ui/components/upper_ribbon/UpperFrame.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/upper_ribbon/converter/ConverterStatusChecker.vue b/src/app/ui/components/upper_ribbon/converter/ConverterStatusChecker.vue
index bf65b6c..c4a6222 100644
--- a/src/app/ui/components/upper_ribbon/converter/ConverterStatusChecker.vue
+++ b/src/app/ui/components/upper_ribbon/converter/ConverterStatusChecker.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
@@ -26,7 +26,10 @@
   <div v-if="job">
     <div class="status-header">
       <div>
-        <p><strong>Status:</strong> {{ job.status }}</p>
+        <p>
+          <strong>Status:</strong>
+          <span class="status-pill" :class="statusClass">{{ statusLabel }}</span>
+        </p>
         <p>
           <strong>Input:</strong> {{ job.sourceFilename }} ({{
             formatBytes(job.inputSizeBytes)
@@ -57,7 +60,7 @@
       <div class="some-progress">
         <p>
           Progress in current resolution:
-          {{ formatPercent(job.resolutionProgress) }}
+          {{ formatPercent(resolutionProgressValue) }}
           <span class="progress-meta">
             (elapsed {{ formatDuration(job.resolutionElapsedMillis) }}, eta
             {{ formatDuration(job.resolutionEtaMillis) }})
@@ -67,14 +70,14 @@
           <div
             class="progress-bar bg-info"
             role="progressbar"
-            :style="{ width: formatPercent(job.resolutionProgress) }"
+            :style="{ width: formatPercent(resolutionProgressValue) }"
           ></div>
         </div>
       </div>
       <div class="some-progress">
         <p>
           Total progress:
-          {{ formatPercent(job.overallProgress) }}
+          {{ formatPercent(overallProgressValue) }}
           <span class="progress-meta">
             (elapsed {{ formatDuration(job.elapsedMillis) }}, eta
             {{ formatDuration(job.etaMillis) }})
@@ -84,7 +87,7 @@
           <div
             class="progress-bar bg-success"
             role="progressbar"
-            :style="{ width: formatPercent(job.overallProgress) }"
+            :style="{ width: formatPercent(overallProgressValue) }"
           ></div>
         </div>
       </div>
@@ -110,6 +113,13 @@ const props = withDefaults(
   { showStop: true }
 );
 
+const emit = defineEmits<{
+  (
+    e: "status-update",
+    payload: { jobId: string; status: string; overallProgress: number }
+  ): void;
+}>();
+
 const job: Ref<ConversionJobResponse | undefined> = ref(undefined);
 const errorMessage: Ref<unknown | undefined> = ref(undefined);
 const timerId: Ref<string | number | undefined> = ref(undefined);
@@ -122,6 +132,11 @@ function updateState(): void {
     .then((resp) => {
       missedRequestCount.value = 0;
       job.value = resp;
+      emit("status-update", {
+        jobId: props.jobId,
+        status: resp.status ?? "unknown",
+        overallProgress: resp.overallProgress ?? 0,
+      });
       if (!isRunning.value) {
         stopTimer();
       }
@@ -158,6 +173,37 @@ const isRunning = computed(() => {
   return job.value?.status === "running" || job.value?.status === "queued";
 });
 
+const statusLabel = computed(() => {
+  return job.value?.status ?? "unknown";
+});
+
+const statusClass = computed(() => {
+  switch (job.value?.status) {
+    case "finished":
+      return "finished";
+    case "failed":
+      return "failed";
+    case "cancelled":
+      return "cancelled";
+    case "running":
+      return "running";
+    case "queued":
+      return "queued";
+    default:
+      return "unknown";
+  }
+});
+
+const overallProgressValue = computed(() => {
+  if (job.value?.status === "finished") return 1;
+  return job.value?.overallProgress ?? 0;
+});
+
+const resolutionProgressValue = computed(() => {
+  if (job.value?.status === "finished") return 1;
+  return job.value?.resolutionProgress ?? 0;
+});
+
 function formatPercent(value: number | undefined): string {
   if (value === undefined || Number.isNaN(value)) {
     return "0%";
@@ -233,6 +279,36 @@ onMounted(() => {
   display: flex;
   align-items: flex-start;
 }
+.status-pill {
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  text-transform: capitalize;
+}
+.status-pill.finished {
+  background: #d1fae5;
+  color: #065f46;
+}
+.status-pill.running {
+  background: #bfdbfe;
+  color: #1e3a8a;
+}
+.status-pill.queued {
+  background: #fef3c7;
+  color: #92400e;
+}
+.status-pill.failed {
+  background: #fee2e2;
+  color: #991b1b;
+}
+.status-pill.cancelled {
+  background: #e5e7eb;
+  color: #374151;
+}
+.status-pill.unknown {
+  background: #e5e7eb;
+  color: #374151;
+}
 .progress-meta {
   color: #6c757d;
   font-size: 0.85em;
diff --git a/src/app/ui/components/upper_ribbon/converter/CoolerFileSelector.vue b/src/app/ui/components/upper_ribbon/converter/CoolerFileSelector.vue
index 5c067fc..574930d 100644
--- a/src/app/ui/components/upper_ribbon/converter/CoolerFileSelector.vue
+++ b/src/app/ui/components/upper_ribbon/converter/CoolerFileSelector.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/workspace/InteractiveWorkspace.vue b/src/app/ui/components/workspace/InteractiveWorkspace.vue
index 472aa2d..03bc791 100644
--- a/src/app/ui/components/workspace/InteractiveWorkspace.vue
+++ b/src/app/ui/components/workspace/InteractiveWorkspace.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
@@ -31,7 +31,7 @@
       <VerticalIGVTrack></VerticalIGVTrack>
     </div>
     <div class="interactive-workspace_content">
-      <ContactMap></ContactMap>
+      <ContactMap :map-manager="props.mapManager"></ContactMap>
     </div>
   </div>
 </template>
diff --git a/src/app/ui/components/workspace/TrackNames.vue b/src/app/ui/components/workspace/TrackNames.vue
index 6b82a6b..1ce8c3c 100644
--- a/src/app/ui/components/workspace/TrackNames.vue
+++ b/src/app/ui/components/workspace/TrackNames.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/components/workspace/WorkspaceComponent.vue b/src/app/ui/components/workspace/WorkspaceComponent.vue
index a86590a..c656626 100644
--- a/src/app/ui/components/workspace/WorkspaceComponent.vue
+++ b/src/app/ui/components/workspace/WorkspaceComponent.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/app/ui/contactmap/ContactMap.vue b/src/app/ui/contactmap/ContactMap.vue
index 3aca7dd..d4271e5 100644
--- a/src/app/ui/contactmap/ContactMap.vue
+++ b/src/app/ui/contactmap/ContactMap.vue
@@ -1,5 +1,5 @@
 <!--
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
@@ -20,7 +20,15 @@
  -->
 
 <template>
-  <div id="hic-contact-map" :style="mapContainerStyle" ref="mapTarget"></div>
+  <div class="map-shell">
+    <div id="hic-contact-map" :style="mapContainerStyle" ref="mapTarget"></div>
+    <div
+      class="zoom-slider-overlay"
+      v-if="props.mapManager && customZoomSliderEnabled"
+    >
+      <ZoomSlider :map-manager="props.mapManager" />
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -29,6 +37,9 @@ import { useStyleStore } from "@/app/stores/styleStore";
 import { ref, computed, Ref, watch } from "vue";
 import { storeToRefs } from "pinia";
 import { usehtmlElementReferencesStore } from "@/app/stores/htmlElementReferencesStore";
+import ZoomSlider from "@/app/ui/components/toolbar/upper_blocks/ZoomSlider.vue";
+import type { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
+import { useUiSettingsStore } from "@/app/stores/uiSettingsStore";
 
 const stylesStore = useStyleStore();
 
@@ -48,6 +59,27 @@ const mapContainerStyle = ref({
   height: "100%",
   "padding-right": "15px",
 });
+
+const props = defineProps<{
+  mapManager?: ContactMapManager;
+}>();
+
+const uiSettingsStore = useUiSettingsStore();
+const { customZoomSliderEnabled } = storeToRefs(uiSettingsStore);
 </script>
 
-<style scoped></style>
+<style scoped>
+.map-shell {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.zoom-slider-overlay {
+  position: absolute;
+  left: 8px;
+  top: 140px;
+  z-index: 20;
+  pointer-events: auto;
+}
+</style>
diff --git a/src/app/ui/zoomslider.css b/src/app/ui/zoomslider.css
new file mode 100644
index 0000000..8b13db3
--- /dev/null
+++ b/src/app/ui/zoomslider.css
@@ -0,0 +1,3 @@
+body.custom-zoomslider-enabled .ol-zoomslider:not(.custom-zoomslider) {
+  display: none;
+}
diff --git a/src/assets/base.css b/src/assets/base.css
index d4ca329..b1b3a6e 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/assets/global.css b/src/assets/global.css
index e3f38b3..c4a6aaf 100644
--- a/src/assets/global.css
+++ b/src/assets/global.css
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/assets/main.css b/src/assets/main.css
index a3666ce..e3800a6 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis, Zakhar Lobanov, Nikita Zheleznov and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/env.d.ts b/src/env.d.ts
index b1d0dba..1c2d987 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
diff --git a/src/main.ts b/src/main.ts
index ead0758..53699e8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in
@@ -32,7 +32,10 @@ import "primeicons/primeicons.css";
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import { useErrorToastStore } from "@/app/stores/errorToastStore";
+import { useUiSettingsStore } from "@/app/stores/uiSettingsStore";
 import { toast } from "vue-sonner";
+import { watch } from "vue";
+import "./app/ui/zoomslider.css";
 
 const pinia = createPinia();
 
@@ -42,7 +45,51 @@ const app = createApp(App);
 app.use(pinia);
 app.mount("#app");
 
+function applyDefaultTooltips(root: ParentNode = document) {
+  const candidates = root.querySelectorAll(
+    "button, a, input, select, textarea, [role='button'], [role='menuitem']"
+  );
+  candidates.forEach((el) => {
+    const element = el as HTMLElement;
+    if (element.getAttribute("title")) return;
+    const aria =
+      element.getAttribute("aria-label") ||
+      element.getAttribute("data-bs-title");
+    const placeholder =
+      element instanceof HTMLInputElement ||
+      element instanceof HTMLTextAreaElement
+        ? element.placeholder
+        : "";
+    const text = element.textContent?.trim() ?? "";
+    const title = aria || placeholder || text;
+    if (title) {
+      element.setAttribute("title", title);
+    }
+  });
+}
+
+applyDefaultTooltips();
+const tooltipObserver = new MutationObserver((mutations) => {
+  for (const mutation of mutations) {
+    mutation.addedNodes.forEach((node) => {
+      if (node instanceof HTMLElement) {
+        applyDefaultTooltips(node);
+      }
+    });
+  }
+});
+tooltipObserver.observe(document.body, { childList: true, subtree: true });
+
 const errorToastStore = useErrorToastStore(pinia);
+const uiSettingsStore = useUiSettingsStore(pinia);
+
+watch(
+  () => uiSettingsStore.customZoomSliderEnabled,
+  (enabled) => {
+    document.body.classList.toggle("custom-zoomslider-enabled", enabled);
+  },
+  { immediate: true }
+);
 
 const originalConsoleError = console.error.bind(console);
 console.error = (...args: unknown[]) => {
diff --git a/vite.config.ts b/vite.config.ts
index 3842ab4..81e810d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,5 @@
 /*
- Copyright (c) 2021-2024 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
 
  Permission is hereby granted, free of charge, to any person obtaining a copy of
  this software and associated documentation files (the "Software"), to deal in

From 17ed59965d033a59227698900e40e645eb8e144b Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Tue, 24 Feb 2026 03:27:12 +0400
Subject: [PATCH 13/27] Fixed SVG export, added PNG/PDF export

---
 package-lock.json                             | 326 ++++++++++++++++++
 package.json                                  |   3 +-
 src/app/core/mapmanagers/ContactMapManager.ts | 180 +++++++++-
 .../components/sidebar/SavedVisualOptions.vue |  89 ++++-
 .../components/upper_ribbon/HeaderRibbon.vue  | 161 ++++++++-
 5 files changed, 718 insertions(+), 41 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1e4785e..00c6c4d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "core-js": "^3.25.5",
         "display-si": "^1.0.7",
         "igv": "^2.13.3",
+        "jspdf": "^2.5.1",
         "mobx": "^6.6.2",
         "mobx-vue-lite": "^0.3.1",
         "multi-range-slider-vue": "^1.1.4",
@@ -457,6 +458,14 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.18.10",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz",
@@ -1021,6 +1030,12 @@
         "xmlbuilder": ">=11.0.1"
       }
     },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "optional": true
+    },
     "node_modules/@types/verror": {
       "version": "1.10.6",
       "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.6.tgz",
@@ -1982,6 +1997,17 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/axios": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz",
@@ -1998,6 +2024,15 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -2221,6 +2256,17 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==",
+      "bin": {
+        "btoa": "bin/btoa.js"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
@@ -2512,6 +2558,25 @@
         }
       ]
     },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -2904,6 +2969,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3167,6 +3241,12 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dompurify": {
+      "version": "2.5.8",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.8.tgz",
+      "integrity": "sha512-o1vSNgrmYMQObbSSvF/1brBYEQPHhV1+gsmrusO7/GXtp1T9rCS8cXFqVxK/9crT1jA6Ccv+5MTSjBNqr7Sovw==",
+      "optional": true
+    },
     "node_modules/dot-prop": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@@ -4508,6 +4588,11 @@
         "pend": "~1.2.0"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A=="
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -5091,6 +5176,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
@@ -5735,6 +5833,23 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jspdf": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.2.tgz",
+      "integrity": "sha512-myeX9c+p7znDWPk0eTrujCzNjT+CXdXyk7YmJq5nD5V7uLLKmSXnlQ/Jn/kuo3X09Op70Apm0rQSnFWyGK8uEQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.5.4",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "node_modules/keyv": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
@@ -6463,6 +6578,12 @@
       "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
       "dev": true
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "optional": true
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -6756,6 +6877,15 @@
       "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
       "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/rbush": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
@@ -6830,6 +6960,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "optional": true
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
@@ -6951,6 +7087,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -7327,6 +7472,15 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
     "node_modules/stat-mode": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stat-mode/-/stat-mode-1.0.0.tgz",
@@ -7464,6 +7618,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -7515,6 +7678,15 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -7943,6 +8115,15 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -8664,6 +8845,11 @@
         "@babel/plugin-syntax-typescript": "^7.20.0"
       }
     },
+    "@babel/runtime": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA=="
+    },
     "@babel/template": {
       "version": "7.18.10",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz",
@@ -9104,6 +9290,12 @@
         "xmlbuilder": ">=11.0.1"
       }
     },
+    "@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "optional": true
+    },
     "@types/verror": {
       "version": "1.10.6",
       "resolved": "https://registry.npmjs.org/@types/verror/-/verror-1.10.6.tgz",
@@ -9816,6 +10008,11 @@
       "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
       "dev": true
     },
+    "atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
+    },
     "axios": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.1.3.tgz",
@@ -9832,6 +10029,12 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "optional": true
+    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -9985,6 +10188,11 @@
         "update-browserslist-db": "^1.0.9"
       }
     },
+    "btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
+    },
     "buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
@@ -10200,6 +10408,22 @@
       "integrity": "sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg==",
       "dev": true
     },
+    "canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "optional": true,
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      }
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -10502,6 +10726,15 @@
       "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
       "dev": true
     },
+    "css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "optional": true,
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -10699,6 +10932,12 @@
         "esutils": "^2.0.2"
       }
     },
+    "dompurify": {
+      "version": "2.5.8",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.8.tgz",
+      "integrity": "sha512-o1vSNgrmYMQObbSSvF/1brBYEQPHhV1+gsmrusO7/GXtp1T9rCS8cXFqVxK/9crT1jA6Ccv+5MTSjBNqr7Sovw==",
+      "optional": true
+    },
     "dot-prop": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@@ -11613,6 +11852,11 @@
         "pend": "~1.2.0"
       }
     },
+    "fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A=="
+    },
     "file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -12039,6 +12283,16 @@
       "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==",
       "dev": true
     },
+    "html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "optional": true,
+      "requires": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      }
+    },
     "http-cache-semantics": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
@@ -12497,6 +12751,21 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "jspdf": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.2.tgz",
+      "integrity": "sha512-myeX9c+p7znDWPk0eTrujCzNjT+CXdXyk7YmJq5nD5V7uLLKmSXnlQ/Jn/kuo3X09Op70Apm0rQSnFWyGK8uEQ==",
+      "requires": {
+        "@babel/runtime": "^7.23.2",
+        "atob": "^2.1.2",
+        "btoa": "^1.2.1",
+        "canvg": "^3.0.6",
+        "core-js": "^3.6.0",
+        "dompurify": "^2.5.4",
+        "fflate": "^0.8.1",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
     "keyv": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
@@ -13049,6 +13318,12 @@
       "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
       "dev": true
     },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "optional": true
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -13226,6 +13501,15 @@
       "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
       "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
     },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "optional": true,
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "rbush": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
@@ -13289,6 +13573,12 @@
         }
       }
     },
+    "regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "optional": true
+    },
     "regexp.prototype.flags": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
@@ -13376,6 +13666,12 @@
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
       "dev": true
     },
+    "rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "optional": true
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -13677,6 +13973,12 @@
       "dev": true,
       "optional": true
     },
+    "stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "optional": true
+    },
     "stat-mode": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stat-mode/-/stat-mode-1.0.0.tgz",
@@ -13772,6 +14074,12 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
       "dev": true
     },
+    "svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "optional": true
+    },
     "svg-tags": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
@@ -13817,6 +14125,15 @@
         }
       }
     },
+    "text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "optional": true,
+      "requires": {
+        "utrie": "^1.0.2"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -14133,6 +14450,15 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "optional": true,
+      "requires": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
diff --git a/package.json b/package.json
index b7bd810..99314d1 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,8 @@
     "vue": "^3.2.41",
     "vue-color-kit": "^1.0.6",
     "vue-sonner": "^0.4.2",
-    "colortranslator": "^4.1.0"
+    "colortranslator": "^4.1.0",
+    "jspdf": "^2.5.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",
diff --git a/src/app/core/mapmanagers/ContactMapManager.ts b/src/app/core/mapmanagers/ContactMapManager.ts
index dd0147f..ae59be0 100644
--- a/src/app/core/mapmanagers/ContactMapManager.ts
+++ b/src/app/core/mapmanagers/ContactMapManager.ts
@@ -184,13 +184,13 @@ class ContactMapManager {
     this.viewAndLayersManager.reloadTiles(version);
   }
 
-  public async exportCurrentMapSvg(
+  private async buildCurrentMapSvg(
     progressCallback?: (progress: number) => void,
     options?: {
       backgroundColor?: string;
       metadata?: Record<string, unknown>;
     }
-  ): Promise<void> {
+  ): Promise<string> {
     const descriptor =
       this.viewAndLayersManager.currentViewState.resolutionDesciptor;
     const imageSize =
@@ -228,6 +228,7 @@ class ContactMapManager {
     const width = imageSize;
     const height = imageSize;
     const backgroundColor = options?.backgroundColor ?? "rgba(255,255,255,0)";
+    const escapeAttr = ContactMapManager.escapeXml;
     const svgImages: string[] = [];
     let completed = 0;
     let nextIndex = 0;
@@ -248,7 +249,7 @@ class ContactMapManager {
             const tileWidth = Math.min(tileSize, width - x);
             const tileHeight = Math.min(tileSize, height - y);
             svgImages.push(
-              `<image x=\"${x}\" y=\"${y}\" width=\"${tileWidth}\" height=\"${tileHeight}\" href=\"${data.image}\" />`
+              `<image x=\"${x}\" y=\"${y}\" width=\"${tileWidth}\" height=\"${tileHeight}\" href=\"${escapeAttr(data.image)}\" />`
             );
           }
           completed += 1;
@@ -283,6 +284,42 @@ class ContactMapManager {
     svg += this.exportTracksSvg(descriptor.bpResolution);
     svg += `</svg>`;
 
+    if (typeof DOMParser !== "undefined") {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(svg, "image/svg+xml");
+      const errorNode = doc.querySelector("parsererror");
+      if (errorNode) {
+        const errorText = errorNode.textContent ?? "Unknown SVG parse error";
+        let context = "";
+        const match = errorText.match(/line\s+(\d+)\s+at\s+column\s+(\d+)/i);
+        if (match) {
+          const column = Number(match[2]);
+          if (Number.isFinite(column)) {
+            const idx = Math.max(0, column - 1);
+            const start = Math.max(0, idx - 200);
+            const end = Math.min(svg.length, idx + 200);
+            context = svg.slice(start, end);
+          }
+        }
+        throw new Error(
+          `SVG export failed validation: ${errorText}${
+            context ? `\nContext:\n${context}` : ""
+          }`
+        );
+      }
+    }
+
+    return svg;
+  }
+
+  public async exportCurrentMapSvg(
+    progressCallback?: (progress: number) => void,
+    options?: {
+      backgroundColor?: string;
+      metadata?: Record<string, unknown>;
+    }
+  ): Promise<void> {
+    const svg = await this.buildCurrentMapSvg(progressCallback, options);
     const blob = new Blob([svg], { type: "image/svg+xml" });
     const a = document.createElement("a");
     a.download = `${this.options.filename}.svg`;
@@ -291,6 +328,99 @@ class ContactMapManager {
     URL.revokeObjectURL(a.href);
   }
 
+  public async exportCurrentMapPng(
+    progressCallback?: (progress: number) => void,
+    options?: {
+      backgroundColor?: string;
+      metadata?: Record<string, unknown>;
+    }
+  ): Promise<void> {
+    const svg = await this.buildCurrentMapSvg(progressCallback, options);
+    const svgBlob = new Blob([svg], { type: "image/svg+xml" });
+    const svgUrl = URL.createObjectURL(svgBlob);
+    const image = new Image();
+    const descriptor =
+      this.viewAndLayersManager.currentViewState.resolutionDesciptor;
+    const imageSize =
+      this.viewAndLayersManager.imageSizes[descriptor.imageSizeIndex];
+
+    await new Promise<void>((resolve, reject) => {
+      image.onload = () => resolve();
+      image.onerror = (e) => reject(e);
+      image.src = svgUrl;
+    });
+
+    const canvas = document.createElement("canvas");
+    canvas.width = imageSize;
+    canvas.height = imageSize;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      URL.revokeObjectURL(svgUrl);
+      throw new Error("Cannot export PNG: canvas not available");
+    }
+    ctx.drawImage(image, 0, 0);
+
+    await new Promise<void>((resolve) => {
+      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();
+      }, "image/png");
+    });
+    URL.revokeObjectURL(svgUrl);
+  }
+
+  public async exportCurrentMapPdf(
+    progressCallback?: (progress: number) => void,
+    options?: {
+      backgroundColor?: string;
+      metadata?: Record<string, unknown>;
+    }
+  ): Promise<void> {
+    const svg = await this.buildCurrentMapSvg(progressCallback, options);
+    const svgBlob = new Blob([svg], { type: "image/svg+xml" });
+    const svgUrl = URL.createObjectURL(svgBlob);
+    const image = new Image();
+    const descriptor =
+      this.viewAndLayersManager.currentViewState.resolutionDesciptor;
+    const imageSize =
+      this.viewAndLayersManager.imageSizes[descriptor.imageSizeIndex];
+
+    await new Promise<void>((resolve, reject) => {
+      image.onload = () => resolve();
+      image.onerror = (e) => reject(e);
+      image.src = svgUrl;
+    });
+
+    const canvas = document.createElement("canvas");
+    canvas.width = imageSize;
+    canvas.height = imageSize;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      URL.revokeObjectURL(svgUrl);
+      throw new Error("Cannot export PDF: canvas not available");
+    }
+    ctx.drawImage(image, 0, 0);
+    const dataUrl = canvas.toDataURL("image/png");
+    const { jsPDF } = await import("jspdf");
+    const orientation = imageSize >= imageSize ? "landscape" : "portrait";
+    const pdf = new jsPDF({
+      orientation,
+      unit: "px",
+      format: [imageSize, imageSize],
+    });
+    pdf.addImage(dataUrl, "PNG", 0, 0, imageSize, imageSize);
+    pdf.save(`${this.options.filename}.pdf`);
+    URL.revokeObjectURL(svgUrl);
+  }
+
   private exportTracksSvg(bpResolution: number): string {
     const flags = this.viewAndLayersManager.getExportTrackFlags();
     if (
@@ -320,9 +450,18 @@ class ContactMapManager {
       measureCtx.font = font;
       return measureCtx.measureText(text).width;
     };
-
-    const toFont = (track: typeof contigTrack) =>
-      `${track.getLabelBold() ? "bold " : ""}${track.getLabelSize()}px sans-serif`;
+    const escapeXml = ContactMapManager.escapeXml;
+    const escapeAttr = ContactMapManager.escapeXml;
+
+    const toFont = (track: typeof contigTrack) => {
+      const fontFamily =
+        typeof window !== "undefined"
+          ? window.getComputedStyle(document.body).fontFamily
+          : "sans-serif";
+      return `${track.getLabelBold() ? "bold " : ""}${track.getLabelSize()}px ${fontFamily}`;
+    };
+    const toFontFamily = (track: typeof contigTrack) =>
+      toFont(track).replace(/^[^ ]+ /, "");
 
     let svg = "";
 
@@ -336,7 +475,7 @@ class ContactMapManager {
       const namePlacement = contigTrack.getNamePlacement();
       const labelFont = toFont(contigTrack);
       const labelStroke = contigTrack.getLabelOutline()
-        ? `stroke="rgba(0,0,0,0.9)" stroke-width="${contigTrack.getLabelOutlineWidth()}"`
+        ? `stroke="rgba(0,0,0,0.9)" stroke-width="${contigTrack.getLabelOutlineWidth()}" paint-order="stroke fill" stroke-linejoin="round"`
         : "";
       for (let i = 0; i < this.contigDimensionHolder.contigDescriptors.length; i++) {
         const cd = this.contigDimensionHolder.contigDescriptors[i];
@@ -346,11 +485,11 @@ class ContactMapManager {
         if (endPx <= startPx) continue;
         if (flags.contigBorders) {
           if (borderStyle === 0) {
-            svg += `<rect x="${startPx}" y="${startPx}" width="${lenBins}" height="${lenBins}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}" />`;
+            svg += `<rect x="${startPx}" y="${startPx}" width="${lenBins}" height="${lenBins}" fill="${escapeAttr(fillColor)}" stroke="${escapeAttr(strokeColor)}" stroke-width="${strokeWidth}" />`;
           } else if (borderStyle === 1) {
-            svg += `<line x1="${startPx}" y1="${endPx}" x2="${endPx}" y2="${endPx}" stroke="${strokeColor}" stroke-width="${strokeWidth}" />`;
+            svg += `<polyline points="${startPx},${startPx} ${endPx},${startPx} ${endPx},${endPx}" fill="none" stroke="${escapeAttr(strokeColor)}" stroke-width="${strokeWidth}" />`;
           } else if (borderStyle === 2) {
-            svg += `<line x1="${startPx}" y1="${startPx}" x2="${endPx}" y2="${startPx}" stroke="${strokeColor}" stroke-width="${strokeWidth}" />`;
+            svg += `<polyline points="${endPx},${endPx} ${startPx},${endPx} ${startPx},${startPx}" fill="none" stroke="${escapeAttr(strokeColor)}" stroke-width="${strokeWidth}" />`;
           }
         }
         if (flags.contigNames) {
@@ -364,7 +503,7 @@ class ContactMapManager {
               labelY = endPx + labelOffset;
             }
             const midPx = (startPx + endPx) / 2;
-            svg += `<text x="${midPx}" y="${labelY}" text-anchor="middle" dominant-baseline="middle" fill="${strokeColor}" font-size="${labelSize}" font-family="sans-serif" font-weight="${contigTrack.getLabelBold() ? "bold" : "normal"}" ${labelStroke}>${cd.contigName}</text>`;
+            svg += `<text x="${midPx}" y="${labelY}" text-anchor="middle" dominant-baseline="middle" fill="${escapeAttr(strokeColor)}" font-size="${labelSize}" font-family="${escapeAttr(toFontFamily(contigTrack))}" font-weight="${contigTrack.getLabelBold() ? "bold" : "normal"}" ${labelStroke}>${escapeXml(cd.contigName)}</text>`;
           }
         }
       }
@@ -380,7 +519,7 @@ class ContactMapManager {
       const namePlacement = scaffoldTrack.getNamePlacement();
       const labelFont = toFont(scaffoldTrack);
       const labelStroke = scaffoldTrack.getLabelOutline()
-        ? `stroke="rgba(0,0,0,0.9)" stroke-width="${scaffoldTrack.getLabelOutlineWidth()}"`
+        ? `stroke="rgba(0,0,0,0.9)" stroke-width="${scaffoldTrack.getLabelOutlineWidth()}" paint-order="stroke fill" stroke-linejoin="round"`
         : "";
       for (const sd of this.scaffoldHolder.scaffoldTable.values()) {
         const borders = sd.scaffoldBordersBP;
@@ -397,11 +536,11 @@ class ContactMapManager {
         const lenBins = endPx - startPx;
         if (flags.scaffoldBorders) {
           if (borderStyle === 0) {
-            svg += `<rect x="${startPx}" y="${startPx}" width="${lenBins}" height="${lenBins}" fill="${fillColor}" stroke="${strokeColor}" stroke-width="${strokeWidth}" />`;
+            svg += `<rect x="${startPx}" y="${startPx}" width="${lenBins}" height="${lenBins}" fill="${escapeAttr(fillColor)}" stroke="${escapeAttr(strokeColor)}" stroke-width="${strokeWidth}" />`;
           } else if (borderStyle === 1) {
-            svg += `<line x1="${startPx}" y1="${endPx}" x2="${endPx}" y2="${endPx}" stroke="${strokeColor}" stroke-width="${strokeWidth}" />`;
+            svg += `<polyline points="${startPx},${startPx} ${endPx},${startPx} ${endPx},${endPx}" fill="none" stroke="${escapeAttr(strokeColor)}" stroke-width="${strokeWidth}" />`;
           } else if (borderStyle === 2) {
-            svg += `<line x1="${startPx}" y1="${startPx}" x2="${endPx}" y2="${startPx}" stroke="${strokeColor}" stroke-width="${strokeWidth}" />`;
+            svg += `<polyline points="${endPx},${endPx} ${startPx},${endPx} ${startPx},${startPx}" fill="none" stroke="${escapeAttr(strokeColor)}" stroke-width="${strokeWidth}" />`;
           }
         }
         if (flags.scaffoldNames) {
@@ -415,7 +554,7 @@ class ContactMapManager {
               labelY = endPx + labelOffset;
             }
             const midPx = (startPx + endPx) / 2;
-            svg += `<text x="${midPx}" y="${labelY}" text-anchor="middle" dominant-baseline="middle" fill="${strokeColor}" font-size="${labelSize}" font-family="sans-serif" font-weight="${scaffoldTrack.getLabelBold() ? "bold" : "normal"}" ${labelStroke}>${sd.scaffoldName}</text>`;
+            svg += `<text x="${midPx}" y="${labelY}" text-anchor="middle" dominant-baseline="middle" fill="${escapeAttr(strokeColor)}" font-size="${labelSize}" font-family="${escapeAttr(toFontFamily(scaffoldTrack))}" font-weight="${scaffoldTrack.getLabelBold() ? "bold" : "normal"}" ${labelStroke}>${escapeXml(sd.scaffoldName)}</text>`;
           }
         }
       }
@@ -424,6 +563,15 @@ class ContactMapManager {
     return svg;
   }
 
+  private static escapeXml(text: string): string {
+    return text
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&apos;");
+  }
+
   public dispose() {
     this.map.setTarget(undefined);
   }
diff --git a/src/app/ui/components/sidebar/SavedVisualOptions.vue b/src/app/ui/components/sidebar/SavedVisualOptions.vue
index 2d6194c..bcda1f3 100644
--- a/src/app/ui/components/sidebar/SavedVisualOptions.vue
+++ b/src/app/ui/components/sidebar/SavedVisualOptions.vue
@@ -79,6 +79,8 @@ import { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
 import { Ref, ref, shallowRef, triggerRef, onMounted } from "vue";
 import SavedVisualOptionsElement from "./SavedVisualOptionsElement.vue";
 import VisualizationOptions from "@/app/core/visualization/VisualizationOptions";
+import SimpleLinearGradient from "@/app/core/visualization/colormap/SimpleLinearGradient";
+import Colormap from "@/app/core/visualization/colormap/Colormap";
 import type { TrackStylePresetBundle } from "@/app/core/tracks/TrackStylePreset";
 import { useVisualizationOptionsStore } from "@/app/stores/visualizationOptionsStore";
 import { storeToRefs } from "pinia";
@@ -166,7 +168,7 @@ function renameOption(option_id: number, name: string) {
 function exportOptions() {
   const values: {
     option_id: number;
-    options: VisualizationOptions;
+    options: Record<string, unknown>;
     backgroundColor: string; // <-- stable
     name: string;
     trackStyles?: TrackStylePresetBundle;
@@ -175,7 +177,7 @@ function exportOptions() {
   savedOptions.value.forEach((v) =>
     values.push({
       option_id: v.option_id,
-      options: v.options,
+      options: serializeVisualizationOptions(v.options),
       name: v.name,
       backgroundColor: colorToString(v.backgroundColor),
       trackStyles: v.trackStyles,
@@ -281,14 +283,14 @@ function importJSONResults(jsonPreResult: unknown) {
       filename: string;
       savedLocations?: {
         option_id: number;
-        options: VisualizationOptions;
+        options: Record<string, unknown>;
         backgroundColor?: string | ColorTranslator;
         name?: string;
         trackStyles?: TrackStylePresetBundle;
       }[];
       savedVisualizationPresets?: {
         option_id: number;
-        options: VisualizationOptions;
+        options: Record<string, unknown>;
         backgroundColor?: string | ColorTranslator;
         name?: string;
         trackStyles?: TrackStylePresetBundle;
@@ -318,7 +320,7 @@ function importJSONResults(jsonPreResult: unknown) {
 
     const newOption = {
       option_id: newId,
-      options: option.options,
+      options: deserializeVisualizationOptions(option.options),
       backgroundColor,
       trackStyles: option.trackStyles,
       name: option.name ?? `Imported preset ${newId}`,
@@ -328,6 +330,83 @@ function importJSONResults(jsonPreResult: unknown) {
   });
 }
 
+function serializeVisualizationOptions(options: VisualizationOptions): Record<string, unknown> {
+  const cmap = options.colormap;
+  if (cmap instanceof SimpleLinearGradient) {
+    return {
+      preLogBase: options.preLogBase,
+      postLogBase: options.postLogBase,
+      applyCoolerWeights: options.applyCoolerWeights ?? false,
+      resolutionScaling: options.resolutionScaling ?? false,
+      resolutionLinearScaling: options.resolutionLinearScaling ?? false,
+      colormap: {
+        colormapType: cmap.colormapType,
+        startColorRGBAString: cmap.startColorRGBA.toString(),
+        endColorRGBAString: cmap.endColorRGBA.toString(),
+        minSignal: cmap.minSignal,
+        maxSignal: cmap.maxSignal,
+      },
+    };
+  }
+  return {
+    preLogBase: options.preLogBase,
+    postLogBase: options.postLogBase,
+    applyCoolerWeights: options.applyCoolerWeights ?? false,
+    resolutionScaling: options.resolutionScaling ?? false,
+    resolutionLinearScaling: options.resolutionLinearScaling ?? false,
+    colormap: {
+      colormapType: options.colormap?.colormapType ?? "Unknown",
+    },
+  };
+}
+
+function deserializeVisualizationOptions(raw: Record<string, unknown>): VisualizationOptions {
+  const preLogBase = typeof raw.preLogBase === "number" ? raw.preLogBase : -1;
+  const postLogBase = typeof raw.postLogBase === "number" ? raw.postLogBase : 10;
+  const applyCoolerWeights =
+    typeof raw.applyCoolerWeights === "boolean" ? raw.applyCoolerWeights : false;
+  const resolutionScaling =
+    typeof raw.resolutionScaling === "boolean" ? raw.resolutionScaling : false;
+  const resolutionLinearScaling =
+    typeof raw.resolutionLinearScaling === "boolean" ? raw.resolutionLinearScaling : false;
+  const cmapRaw = isRecord(raw.colormap) ? raw.colormap : {};
+  const cmapType =
+    typeof cmapRaw.colormapType === "string"
+      ? cmapRaw.colormapType
+      : "Unknown";
+  let cmap: Colormap;
+  if (cmapType === "SimpleLinearGradient") {
+    const startColor =
+      typeof cmapRaw.startColorRGBAString === "string"
+        ? cmapRaw.startColorRGBAString
+        : "rgba(0,255,0,0.0)";
+    const endColor =
+      typeof cmapRaw.endColorRGBAString === "string"
+        ? cmapRaw.endColorRGBAString
+        : "rgba(0,96,0,1.0)";
+    const minSignal =
+      typeof cmapRaw.minSignal === "number" ? cmapRaw.minSignal : 0;
+    const maxSignal =
+      typeof cmapRaw.maxSignal === "number" ? cmapRaw.maxSignal : 1;
+    cmap = new SimpleLinearGradient(
+      new ColorTranslator(startColor, { legacyCSS: true }),
+      new ColorTranslator(endColor, { legacyCSS: true }),
+      minSignal,
+      maxSignal
+    );
+  } else {
+    cmap = new Colormap(cmapType);
+  }
+  return new VisualizationOptions(
+    preLogBase,
+    postLogBase,
+    applyCoolerWeights,
+    resolutionScaling,
+    resolutionLinearScaling,
+    cmap
+  );
+}
+
 function importOptionsFromFile() {
   try {
     if (importFileBtn.value) {
diff --git a/src/app/ui/components/upper_ribbon/HeaderRibbon.vue b/src/app/ui/components/upper_ribbon/HeaderRibbon.vue
index d332eee..3de1064 100644
--- a/src/app/ui/components/upper_ribbon/HeaderRibbon.vue
+++ b/src/app/ui/components/upper_ribbon/HeaderRibbon.vue
@@ -120,20 +120,50 @@
       >
         Reload tiles
       </button>
-      <button
-        id="export-png-button"
-        class="btn-sm btn-outline-primary"
-        type="button"
-        :disabled="exportingSvg"
-        @click="exportSvg"
-        title="Export full map as SVG"
-      >
-        <span v-if="!exportingSvg"><i class="bi bi-box-arrow-up"></i></span>
-        <span v-else>
-          <span class="spinner-border spinner-border-sm me-2"></span>
-          {{ Math.round(svgProgress * 100) }}%
-        </span>
-      </button>
+      <div class="export-group">
+        <button
+          id="export-svg-button"
+          class="btn-sm btn-outline-primary"
+          type="button"
+          :disabled="exportingType !== null"
+          @click="exportSvg"
+          title="Export full map as SVG"
+        >
+          <span v-if="exportingType !== 'svg'"><i class="bi bi-box-arrow-up"></i> SVG</span>
+          <span v-else>
+            <span class="spinner-border spinner-border-sm me-2"></span>
+            {{ Math.round(svgProgress * 100) }}%
+          </span>
+        </button>
+        <button
+          id="export-png-button"
+          class="btn-sm btn-outline-primary"
+          type="button"
+          :disabled="exportingType !== null"
+          @click="exportPng"
+          title="Export full map as PNG"
+        >
+          <span v-if="exportingType !== 'png'"><i class="bi bi-box-arrow-up"></i> PNG</span>
+          <span v-else>
+            <span class="spinner-border spinner-border-sm me-2"></span>
+            {{ Math.round(svgProgress * 100) }}%
+          </span>
+        </button>
+        <button
+          id="export-pdf-button"
+          class="btn-sm btn-outline-primary"
+          type="button"
+          :disabled="exportingType !== null"
+          @click="exportPdf"
+          title="Export full map as PDF"
+        >
+          <span v-if="exportingType !== 'pdf'"><i class="bi bi-box-arrow-up"></i> PDF</span>
+          <span v-else>
+            <span class="spinner-border spinner-border-sm me-2"></span>
+            {{ Math.round(svgProgress * 100) }}%
+          </span>
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -154,7 +184,7 @@ const props = defineProps<{
 
 const rowContigId: Ref<number | null> = ref(null);
 const columnContigId: Ref<number | null> = ref(null);
-const exportingSvg = ref(false);
+const exportingType = ref<"svg" | "png" | "pdf" | null>(null);
 const svgProgress = ref(0);
 const searchQuery = ref("");
 const searchResults = ref<
@@ -180,8 +210,8 @@ const {
 } = storeToRefs(visualizationOptionsStore);
 
 async function exportSvg() {
-  if (!props.mapManager || exportingSvg.value) return;
-  exportingSvg.value = true;
+  if (!props.mapManager || exportingType.value) return;
+  exportingType.value = "svg";
   svgProgress.value = 0;
   const cmap = colormap.value;
   const metadata: Record<string, unknown> = {
@@ -214,8 +244,94 @@ async function exportSvg() {
         metadata,
       }
     );
+  } catch (e) {
+    toast.error((e as Error)?.message ?? "Failed to export SVG");
+  } finally {
+    exportingType.value = null;
+  }
+}
+
+async function exportPng() {
+  if (!props.mapManager || exportingType.value) return;
+  exportingType.value = "png";
+  svgProgress.value = 0;
+  const cmap = colormap.value;
+  const metadata: Record<string, unknown> = {
+    filename: props.mapManager.getOptions().filename,
+    visualization: {
+      preLogBase: preLogBase.value,
+      postLogBase: postLogBase.value,
+      applyCoolerWeights: applyCoolerWeights.value,
+      resolutionScaling: resolutionScaling.value,
+      resolutionLinearScaling: resolutionLinearScaling.value,
+      colormap:
+        cmap instanceof SimpleLinearGradient
+          ? {
+              type: cmap.colormapType,
+              startColor: cmap.startColorRGBA?.RGBA,
+              endColor: cmap.endColorRGBA?.RGBA,
+              minSignal: cmap.minSignal,
+              maxSignal: cmap.maxSignal,
+            }
+          : { type: cmap?.colormapType ?? "Unknown" },
+    },
+  };
+  try {
+    await props.mapManager.exportCurrentMapPng(
+      (progress) => {
+        svgProgress.value = progress;
+      },
+      {
+        backgroundColor: mapBackgroundColor.value.RGBA,
+        metadata,
+      }
+    );
+  } catch (e) {
+    toast.error((e as Error)?.message ?? "Failed to export PNG");
   } finally {
-    exportingSvg.value = false;
+    exportingType.value = null;
+  }
+}
+
+async function exportPdf() {
+  if (!props.mapManager || exportingType.value) return;
+  exportingType.value = "pdf";
+  svgProgress.value = 0;
+  const cmap = colormap.value;
+  const metadata: Record<string, unknown> = {
+    filename: props.mapManager.getOptions().filename,
+    visualization: {
+      preLogBase: preLogBase.value,
+      postLogBase: postLogBase.value,
+      applyCoolerWeights: applyCoolerWeights.value,
+      resolutionScaling: resolutionScaling.value,
+      resolutionLinearScaling: resolutionLinearScaling.value,
+      colormap:
+        cmap instanceof SimpleLinearGradient
+          ? {
+              type: cmap.colormapType,
+              startColor: cmap.startColorRGBA?.RGBA,
+              endColor: cmap.endColorRGBA?.RGBA,
+              minSignal: cmap.minSignal,
+              maxSignal: cmap.maxSignal,
+            }
+          : { type: cmap?.colormapType ?? "Unknown" },
+    },
+  };
+  try {
+    await props.mapManager.exportCurrentMapPdf(
+      (progress) => {
+        svgProgress.value = progress;
+      },
+      {
+        backgroundColor: mapBackgroundColor.value.RGBA,
+        metadata,
+      }
+    );
+  } catch (e) {
+    toast.error((e as Error)?.message ?? "Failed to export PDF");
+  } finally {
+    exportingType.value = null;
   }
 }
 
@@ -621,7 +737,9 @@ function onNormalizationChanged() {
   flex-grow: 0;
 }
 
-#export-png-button {
+#export-png-button,
+#export-svg-button,
+#export-pdf-button {
   /* _base */
 
   box-sizing: border-box;
@@ -645,4 +763,9 @@ function onNormalizationChanged() {
   order: 1;
   flex-grow: 0;
 }
+
+.export-group {
+  display: flex;
+  gap: 6px;
+}
 </style>

From acd757ee589ab1db3f41def4191ebc3072b18f0b Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Tue, 24 Feb 2026 03:58:16 +0400
Subject: [PATCH 14/27] Fixed export-import of visualization options and export
 SVG/PNG/PDF

---
 src/app/core/mapmanagers/ContactMapManager.ts |   6 +-
 .../mapmanagers/HiCViewAndLayersManager.ts    |  20 +++
 src/app/core/tracks/Track2DSymmetric.ts       |  16 +-
 src/app/core/tracks/TrackStylePreset.ts       |   5 +
 .../components/sidebar/SavedVisualOptions.vue | 167 +++++++++++-------
 src/app/ui/components/sidebar/SideBar.vue     |  31 +++-
 .../sidebar/VisualziationSettingsEditor.vue   |  12 ++
 7 files changed, 192 insertions(+), 65 deletions(-)

diff --git a/src/app/core/mapmanagers/ContactMapManager.ts b/src/app/core/mapmanagers/ContactMapManager.ts
index ae59be0..d4d80df 100644
--- a/src/app/core/mapmanagers/ContactMapManager.ts
+++ b/src/app/core/mapmanagers/ContactMapManager.ts
@@ -468,6 +468,7 @@ class ContactMapManager {
     if (flags.contigBorders || flags.contigNames) {
       const borderStyle = contigTrack.getStyleType();
       const strokeColor = contigTrack.options.borderColor as string;
+      const labelColor = contigTrack.getLabelColor() as string;
       const strokeWidth = contigTrack.options.width;
       const fillColor = contigTrack.options.fillColor as string;
       const labelSize = contigTrack.getLabelSize();
@@ -503,7 +504,7 @@ class ContactMapManager {
               labelY = endPx + labelOffset;
             }
             const midPx = (startPx + endPx) / 2;
-            svg += `<text x="${midPx}" y="${labelY}" text-anchor="middle" dominant-baseline="middle" fill="${escapeAttr(strokeColor)}" font-size="${labelSize}" font-family="${escapeAttr(toFontFamily(contigTrack))}" font-weight="${contigTrack.getLabelBold() ? "bold" : "normal"}" ${labelStroke}>${escapeXml(cd.contigName)}</text>`;
+            svg += `<text x="${midPx}" y="${labelY}" text-anchor="middle" dominant-baseline="middle" fill="${escapeAttr(labelColor)}" font-size="${labelSize}" font-family="${escapeAttr(toFontFamily(contigTrack))}" font-weight="${contigTrack.getLabelBold() ? "bold" : "normal"}" ${labelStroke}>${escapeXml(cd.contigName)}</text>`;
           }
         }
       }
@@ -512,6 +513,7 @@ class ContactMapManager {
     if (flags.scaffoldBorders || flags.scaffoldNames) {
       const borderStyle = scaffoldTrack.getStyleType();
       const strokeColor = scaffoldTrack.options.borderColor as string;
+      const labelColor = scaffoldTrack.getLabelColor() as string;
       const strokeWidth = scaffoldTrack.options.width;
       const fillColor = scaffoldTrack.options.fillColor as string;
       const labelSize = scaffoldTrack.getLabelSize();
@@ -554,7 +556,7 @@ class ContactMapManager {
               labelY = endPx + labelOffset;
             }
             const midPx = (startPx + endPx) / 2;
-            svg += `<text x="${midPx}" y="${labelY}" text-anchor="middle" dominant-baseline="middle" fill="${escapeAttr(strokeColor)}" font-size="${labelSize}" font-family="${escapeAttr(toFontFamily(scaffoldTrack))}" font-weight="${scaffoldTrack.getLabelBold() ? "bold" : "normal"}" ${labelStroke}>${escapeXml(sd.scaffoldName)}</text>`;
+            svg += `<text x="${midPx}" y="${labelY}" text-anchor="middle" dominant-baseline="middle" fill="${escapeAttr(labelColor)}" font-size="${labelSize}" font-family="${escapeAttr(toFontFamily(scaffoldTrack))}" font-weight="${scaffoldTrack.getLabelBold() ? "bold" : "normal"}" ${labelStroke}>${escapeXml(sd.scaffoldName)}</text>`;
           }
         }
       }
diff --git a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
index 9b362e2..b70b547 100644
--- a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
+++ b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
@@ -606,6 +606,11 @@ class HiCViewAndLayersManager {
       fillColor,
       width: track.options.width,
       labelSize: track.getLabelSize(),
+      labelOffsetMultiplier: track.getLabelOffsetMultiplier(),
+      labelBold: track.getLabelBold(),
+      labelOutline: track.getLabelOutline(),
+      labelOutlineWidth: track.getLabelOutlineWidth(),
+      labelColor: this.colorLikeToString(track.getLabelColor()),
       borderStyle: track.getStyleType(),
     };
   }
@@ -618,6 +623,21 @@ class HiCViewAndLayersManager {
     track.options.fillColor = preset.fillColor;
     track.options.width = Math.max(1, preset.width);
     track.setLabelSize(preset.labelSize ?? track.getLabelSize());
+    if (preset.labelOffsetMultiplier !== undefined) {
+      track.setLabelOffsetMultiplier(preset.labelOffsetMultiplier);
+    }
+    if (preset.labelBold !== undefined) {
+      track.setLabelBold(preset.labelBold);
+    }
+    if (preset.labelOutline !== undefined) {
+      track.setLabelOutline(preset.labelOutline);
+    }
+    if (preset.labelOutlineWidth !== undefined) {
+      track.setLabelOutlineWidth(preset.labelOutlineWidth);
+    }
+    if (preset.labelColor !== undefined) {
+      track.setLabelColor(preset.labelColor);
+    }
     track.setStyleType(preset.borderStyle);
     track.style = track.generateStyleFunction()();
   }
diff --git a/src/app/core/tracks/Track2DSymmetric.ts b/src/app/core/tracks/Track2DSymmetric.ts
index ab1b7cb..0a33d8a 100644
--- a/src/app/core/tracks/Track2DSymmetric.ts
+++ b/src/app/core/tracks/Track2DSymmetric.ts
@@ -63,6 +63,7 @@ interface Track2DSymmetricOptions {
   labelBold: boolean;
   labelOutline: boolean;
   labelOutlineWidth: number;
+  labelColor: Color | ColorLike;
 }
 
 export enum NamePlacement {
@@ -92,6 +93,7 @@ abstract class Track2DSymmetric extends Track2D {
       labelBold?: boolean | undefined;
       labelOutline?: boolean | undefined;
       labelOutlineWidth?: number | undefined;
+      labelColor?: Color | ColorLike;
     }
   ) {
     super();
@@ -105,6 +107,10 @@ abstract class Track2DSymmetric extends Track2D {
       labelBold: opt_options?.labelBold ?? true,
       labelOutline: opt_options?.labelOutline ?? true,
       labelOutlineWidth: opt_options?.labelOutlineWidth ?? 2,
+      labelColor:
+        opt_options?.labelColor ??
+        opt_options?.borderColor ??
+        [0xff, 0xaa, 0xcc, 1.0],
     };
     this.style = this.generateStyleFunction()();
   }
@@ -175,6 +181,14 @@ abstract class Track2DSymmetric extends Track2D {
     return this.options.labelOutlineWidth;
   }
 
+  public setLabelColor(color: Color | ColorLike): void {
+    this.options.labelColor = color;
+  }
+
+  public getLabelColor(): Color | ColorLike {
+    return this.options.labelColor;
+  }
+
   public setNamePlacement(placement: NamePlacement): void {
     this.namePlacement = placement;
   }
@@ -191,7 +205,7 @@ abstract class Track2DSymmetric extends Track2D {
           this.options.labelSize
         }px sans-serif`,
         fill: new Fill({
-          color: this.options.borderColor,
+          color: this.options.labelColor ?? this.options.borderColor,
         }),
         stroke: this.options.labelOutline
           ? new Stroke({
diff --git a/src/app/core/tracks/TrackStylePreset.ts b/src/app/core/tracks/TrackStylePreset.ts
index 662d6cf..190c140 100644
--- a/src/app/core/tracks/TrackStylePreset.ts
+++ b/src/app/core/tracks/TrackStylePreset.ts
@@ -6,6 +6,11 @@ export type TrackStylePreset = {
   width: number;
   labelSize?: number;
   borderStyle: BorderStyle;
+  labelBold?: boolean;
+  labelOutline?: boolean;
+  labelOutlineWidth?: number;
+  labelOffsetMultiplier?: number;
+  labelColor?: string;
 };
 
 export type TrackStylePresetBundle = {
diff --git a/src/app/ui/components/sidebar/SavedVisualOptions.vue b/src/app/ui/components/sidebar/SavedVisualOptions.vue
index bcda1f3..29f7b71 100644
--- a/src/app/ui/components/sidebar/SavedVisualOptions.vue
+++ b/src/app/ui/components/sidebar/SavedVisualOptions.vue
@@ -131,7 +131,7 @@ function nextOptionId(): number {
 }
 
 function colorToString(c: ColorTranslator): string {
-  return c.toString();
+  return c.RGBA;
 }
 
 const importFileBtn: Ref<HTMLInputElement | null> = ref(null);
@@ -181,6 +181,7 @@ function exportOptions() {
       name: v.name,
       backgroundColor: colorToString(v.backgroundColor),
       trackStyles: v.trackStyles,
+      signalThresholds: extractSignalThresholds(v.options),
     })
   );
 
@@ -229,53 +230,6 @@ function importJSONResults(jsonPreResult: unknown) {
     return;
   }
 
-  // Compatibility with old saved visualization presets:
-  const savedVisualizationPresets = data.savedVisualizationPresets;
-  if (isArray(savedVisualizationPresets) && savedVisualizationPresets.length > 0) {
-    savedVisualizationPresets.forEach((sl) => {
-      if (!isRecord(sl)) return;
-
-      if (typeof sl.backgroundColor === "string") {
-        sl.backgroundColor = new ColorTranslator(sl.backgroundColor);
-      }
-
-      const opt = sl.options;
-      if (isRecord(opt) && isRecord(opt.colormap)) {
-        const cm = opt.colormap;
-
-        if (typeof cm.startColorRGBAString === "string") {
-          cm.startColorRGBA = new ColorTranslator(cm.startColorRGBAString as string);
-        }
-        if (typeof cm.endColorRGBAString === "string") {
-          cm.endColorRGBA = new ColorTranslator(cm.endColorRGBAString as string);
-        }
-      }
-    });
-  }
-
-  const savedLocations = data.savedLocations;
-  if (isArray(savedLocations) && savedLocations.length > 0) {
-    savedLocations.forEach((sl) => {
-      if (!isRecord(sl)) return;
-
-      if (typeof sl.backgroundColor === "string") {
-        sl.backgroundColor = new ColorTranslator(sl.backgroundColor);
-      }
-
-      const opt = sl.options;
-      if (isRecord(opt) && isRecord(opt.colormap)) {
-        const cm = opt.colormap;
-
-        if (typeof cm.startColorRGBAString === "string") {
-          cm.startColorRGBA = new ColorTranslator(cm.startColorRGBAString as string);
-        }
-        if (typeof cm.endColorRGBAString === "string") {
-          cm.endColorRGBA = new ColorTranslator(cm.endColorRGBAString as string);
-        }
-      }
-    });
-  }
-
   // Now parse into your expected (new) format safely
   const jsonResult = jsonPreResult as {
     exportType: "visualizationOptions";
@@ -287,6 +241,10 @@ function importJSONResults(jsonPreResult: unknown) {
         backgroundColor?: string | ColorTranslator;
         name?: string;
         trackStyles?: TrackStylePresetBundle;
+        signalThresholds?: {
+          lowerSignalBound?: number;
+          upperSignalBound?: number;
+        };
       }[];
       savedVisualizationPresets?: {
         option_id: number;
@@ -294,6 +252,10 @@ function importJSONResults(jsonPreResult: unknown) {
         backgroundColor?: string | ColorTranslator;
         name?: string;
         trackStyles?: TrackStylePresetBundle;
+        signalThresholds?: {
+          lowerSignalBound?: number;
+          upperSignalBound?: number;
+        };
       }[];
     };
   };
@@ -303,6 +265,11 @@ function importJSONResults(jsonPreResult: unknown) {
     jsonResult.data.savedLocations ??
     [];
 
+  const existingKeys = new Set<string>();
+  savedOptions.value.forEach((opt) => {
+    existingKeys.add(buildPresetKey(opt));
+  });
+
   arr.forEach((option) => {
     const newId = nextOptionId();
 
@@ -314,8 +281,14 @@ function importJSONResults(jsonPreResult: unknown) {
     const b = option.backgroundColor;
     if (b instanceof ColorTranslator) {
       backgroundColor = b;
-    } else if (typeof b === "string") {
-      backgroundColor = new ColorTranslator(b);
+  } else if (typeof b === "string") {
+      try {
+        backgroundColor = new ColorTranslator(b, { legacyCSS: true });
+      } catch {
+        backgroundColor = new ColorTranslator("rgba(255,255,255,1.0)", {
+          legacyCSS: true,
+        });
+      }
     }
 
     const newOption = {
@@ -325,8 +298,13 @@ function importJSONResults(jsonPreResult: unknown) {
       trackStyles: option.trackStyles,
       name: option.name ?? `Imported preset ${newId}`,
     };
-    savedOptions.value.set(newOption.option_id, newOption);
-    bumpSavedOptions();
+    const key = buildPresetKey(newOption);
+    if (!existingKeys.has(key)) {
+      savedOptions.value.set(newOption.option_id, newOption);
+      existingKeys.add(key);
+      bumpSavedOptions();
+      applySignalThresholds(option);
+    }
   });
 }
 
@@ -341,8 +319,8 @@ function serializeVisualizationOptions(options: VisualizationOptions): Record<st
       resolutionLinearScaling: options.resolutionLinearScaling ?? false,
       colormap: {
         colormapType: cmap.colormapType,
-        startColorRGBAString: cmap.startColorRGBA.toString(),
-        endColorRGBAString: cmap.endColorRGBA.toString(),
+        startColorRGBAString: cmap.startColorRGBA.RGBA,
+        endColorRGBAString: cmap.endColorRGBA.RGBA,
         minSignal: cmap.minSignal,
         maxSignal: cmap.maxSignal,
       },
@@ -388,12 +366,19 @@ function deserializeVisualizationOptions(raw: Record<string, unknown>): Visualiz
       typeof cmapRaw.minSignal === "number" ? cmapRaw.minSignal : 0;
     const maxSignal =
       typeof cmapRaw.maxSignal === "number" ? cmapRaw.maxSignal : 1;
-    cmap = new SimpleLinearGradient(
-      new ColorTranslator(startColor, { legacyCSS: true }),
-      new ColorTranslator(endColor, { legacyCSS: true }),
-      minSignal,
-      maxSignal
-    );
+    let startCt: ColorTranslator;
+    let endCt: ColorTranslator;
+    try {
+      startCt = new ColorTranslator(startColor, { legacyCSS: true });
+    } catch {
+      startCt = new ColorTranslator("rgba(0,255,0,0.0)", { legacyCSS: true });
+    }
+    try {
+      endCt = new ColorTranslator(endColor, { legacyCSS: true });
+    } catch {
+      endCt = new ColorTranslator("rgba(0,96,0,1.0)", { legacyCSS: true });
+    }
+    cmap = new SimpleLinearGradient(startCt, endCt, minSignal, maxSignal);
   } else {
     cmap = new Colormap(cmapType);
   }
@@ -407,6 +392,68 @@ function deserializeVisualizationOptions(raw: Record<string, unknown>): Visualiz
   );
 }
 
+function extractSignalThresholds(options: VisualizationOptions): {
+  lowerSignalBound?: number;
+  upperSignalBound?: number;
+} {
+  const cmap = options.colormap;
+  if (cmap instanceof SimpleLinearGradient) {
+    return {
+      lowerSignalBound: cmap.minSignal,
+      upperSignalBound: cmap.maxSignal,
+    };
+  }
+  return {};
+}
+
+function applySignalThresholds(option: {
+  signalThresholds?: { lowerSignalBound?: number; upperSignalBound?: number };
+}) {
+  const thresholds = option.signalThresholds;
+  if (!thresholds) return;
+  const lower = thresholds.lowerSignalBound;
+  const upper = thresholds.upperSignalBound;
+  if (typeof lower === "number" && colormap.value instanceof SimpleLinearGradient) {
+    const cmap = colormap.value as SimpleLinearGradient;
+    colormap.value = new SimpleLinearGradient(
+      cmap.startColorRGBA,
+      cmap.endColorRGBA,
+      lower,
+      typeof upper === "number" ? upper : cmap.maxSignal
+    );
+  }
+}
+
+function buildPresetKey(opt: {
+  name: string;
+  options: VisualizationOptions;
+  backgroundColor: ColorTranslator;
+  trackStyles?: TrackStylePresetBundle;
+}): string {
+  const payload = {
+    name: opt.name,
+    options: serializeVisualizationOptions(opt.options),
+    backgroundColor: colorToString(opt.backgroundColor),
+    trackStyles: opt.trackStyles ?? null,
+  };
+  return stableStringify(payload);
+}
+
+function stableStringify(obj: unknown): string {
+  if (obj === null || obj === undefined) return String(obj);
+  if (Array.isArray(obj)) {
+    return `[${obj.map((v) => stableStringify(v)).join(",")}]`;
+  }
+  if (typeof obj === "object") {
+    const record = obj as Record<string, unknown>;
+    const keys = Object.keys(record).sort();
+    return `{${keys
+      .map((k) => `${JSON.stringify(k)}:${stableStringify(record[k])}`)
+      .join(",")}}`;
+  }
+  return JSON.stringify(obj);
+}
+
 function importOptionsFromFile() {
   try {
     if (importFileBtn.value) {
diff --git a/src/app/ui/components/sidebar/SideBar.vue b/src/app/ui/components/sidebar/SideBar.vue
index d01f741..65c31d3 100644
--- a/src/app/ui/components/sidebar/SideBar.vue
+++ b/src/app/ui/components/sidebar/SideBar.vue
@@ -201,7 +201,16 @@ const layers: Ref<LayerDescriptor[]> = ref([
   ),
   new LayerDescriptor(
     "Cnames",
-    undefined,
+    () => {
+      const color =
+        props.mapManager?.getLayersManager().track2DHolder.contigBordersTrack.getLabelColor() ??
+        props.mapManager?.getLayersManager().track2DHolder.contigBordersTrack.options.borderColor;
+      return new Style({
+        stroke: new Stroke({
+          color: color as string,
+        }),
+      });
+    },
     undefined,
     true,
     () =>
@@ -229,7 +238,16 @@ const layers: Ref<LayerDescriptor[]> = ref([
   ),
   new LayerDescriptor(
     "Snames",
-    undefined,
+    () => {
+      const color =
+        props.mapManager?.getLayersManager().track2DHolder.scaffoldBordersTrack.getLabelColor() ??
+        props.mapManager?.getLayersManager().track2DHolder.scaffoldBordersTrack.options.borderColor;
+      return new Style({
+        stroke: new Stroke({
+          color: color as string,
+        }),
+      });
+    },
     undefined,
     true,
     () =>
@@ -267,7 +285,16 @@ function onColorChanged(layerName: string, newColor: ColorTranslator) {
       getEventManager()?.onScanffoldBorderColorChanged(newColor.RGBA);
       break;
     case "Cnames":
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.contigBordersTrack.setLabelColor(newColor.RGBA);
+      getEventManager()?.reloadTracks();
+      break;
     case "Snames":
+      props.mapManager
+        ?.getLayersManager()
+        .track2DHolder.scaffoldBordersTrack.setLabelColor(newColor.RGBA);
+      getEventManager()?.reloadTracks();
       break;
     case "Background":
       stylesStore.setMapBackground(newColor);
diff --git a/src/app/ui/components/sidebar/VisualziationSettingsEditor.vue b/src/app/ui/components/sidebar/VisualziationSettingsEditor.vue
index 6b9fac9..6a0d025 100644
--- a/src/app/ui/components/sidebar/VisualziationSettingsEditor.vue
+++ b/src/app/ui/components/sidebar/VisualziationSettingsEditor.vue
@@ -156,6 +156,18 @@ watch(
   }
 );
 
+watch(
+  () => colormap.value,
+  () => {
+    if (colormap.value instanceof SimpleLinearGradient) {
+      const cmap = colormap.value as SimpleLinearGradient;
+      lowerBound.value = cmap.minSignal;
+      upperBound.value = cmap.maxSignal;
+    }
+  },
+  { deep: false }
+);
+
 watch(
   () => [
     fromColor.value,

From 255cb3a591e88321a1033504ed5d94b5ba21dbbf Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Tue, 24 Feb 2026 04:57:31 +0400
Subject: [PATCH 15/27] Fix close/attach session, reordered visualization
 presets

---
 src/app/core/mapmanagers/ContactMapManager.ts |   1 +
 .../mapmanagers/HiCViewAndLayersManager.ts    |  19 +
 src/app/core/net/api/RequestManager.ts        |  25 +-
 src/app/core/net/api/request.ts               |   5 +
 src/app/core/net/dto/requestDTO.ts            |  10 +
 .../colormap/default_options.json             |  80 ++--
 src/app/stores/sessionStore.ts                |  45 +++
 src/app/ui/MainUIComponent.vue                | 375 +++++++++++++++++-
 .../ui/components/sidebar/LayerComponent.vue  |  20 +-
 .../ui/components/sidebar/SavedLocations.vue  |  47 +++
 .../components/sidebar/SavedVisualOptions.vue |  64 ++-
 .../components/upper_ribbon/NavigationBar.vue |  54 +++
 .../ui/components/upper_ribbon/UpperFrame.vue |  30 ++
 13 files changed, 714 insertions(+), 61 deletions(-)
 create mode 100644 src/app/stores/sessionStore.ts

diff --git a/src/app/core/mapmanagers/ContactMapManager.ts b/src/app/core/mapmanagers/ContactMapManager.ts
index d4d80df..a6cd760 100644
--- a/src/app/core/mapmanagers/ContactMapManager.ts
+++ b/src/app/core/mapmanagers/ContactMapManager.ts
@@ -575,6 +575,7 @@ class ContactMapManager {
   }
 
   public dispose() {
+    this.viewAndLayersManager?.dispose?.();
     this.map.setTarget(undefined);
   }
 
diff --git a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
index b70b547..c962a49 100644
--- a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
+++ b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
@@ -882,6 +882,25 @@ class HiCViewAndLayersManager {
     }
   }
 
+  public dispose(): void {
+    if (!this.map) {
+      return;
+    }
+    try {
+      this.map.getControls().clear();
+      const hTrack = document.getElementById("horizontal-igv-track-div");
+      if (hTrack) {
+        hTrack.replaceChildren();
+      }
+      const vTrack = document.getElementById("vertical-igv-track-div");
+      if (vTrack) {
+        vTrack.replaceChildren();
+      }
+    } catch (e: unknown) {
+      console.log("Error while disposing controls", e);
+    }
+  }
+
   public initializeMapInteractions(): void {
     this.mapManager.getMap().addInteraction(
       new ContigMouseWheelZoom({
diff --git a/src/app/core/net/api/RequestManager.ts b/src/app/core/net/api/RequestManager.ts
index be38945..bec3c88 100644
--- a/src/app/core/net/api/RequestManager.ts
+++ b/src/app/core/net/api/RequestManager.ts
@@ -71,6 +71,8 @@ import {
   ExportNameMappingRequest,
   ImportNameMappingRequest,
   ReloadTilesRequest,
+  AttachSessionRequest,
+  CloseFileRequest,
 } from "./request";
 import {
   ConversionJobResponse,
@@ -93,9 +95,11 @@ class RequestManager {
     request: HiCTAPIRequest,
     axiosConfig?: AxiosRequestConfig | undefined
   ): Promise<AxiosResponse> {
+    const host = this.networkManager.host.replace(/\/+$/, "");
+    const path = request.requestPath.replace(/^\/+/, "");
     return axios
       .post(
-        `${this.networkManager.host}/${request.requestPath}`,
+        `${host}/${path}`,
         HiCTAPIRequestDTO.toDTOClass(request).toDTO(),
         axiosConfig ?? undefined
       )
@@ -145,6 +149,25 @@ class RequestManager {
       .then((json) => new OpenFileResponseDTO(json).toEntity());
   }
 
+  public async closeFile(): Promise<void> {
+    await this.sendRequest(new CloseFileRequest());
+  }
+
+  public async attachSession(): Promise<{ filename: string; response: OpenFileResponse }> {
+    return this.sendRequest(new AttachSessionRequest())
+      .then((response) => response.data as Record<string, unknown>)
+      .then((json) => {
+        if (json && typeof json === "object" && "error" in json) {
+          throw new Error(String((json as Record<string, unknown>).error));
+        }
+        const filename = (json["filename"] as string) ?? "";
+        const response = new OpenFileResponseDTO(
+          json["openFileResponse"] as Record<string, unknown>
+        ).toEntity();
+        return { filename, response };
+      });
+  }
+
   public async getSignalRanges(
     tileVersion: number
   ): Promise<CurrentSignalRangeResponse> {
diff --git a/src/app/core/net/api/request.ts b/src/app/core/net/api/request.ts
index 40e7e42..5f6a262 100644
--- a/src/app/core/net/api/request.ts
+++ b/src/app/core/net/api/request.ts
@@ -73,6 +73,10 @@ class CloseFileRequest implements HiCTAPIRequest {
   requestPath = "/close";
 }
 
+class AttachSessionRequest implements HiCTAPIRequest {
+  requestPath = "/attach";
+}
+
 class GetFastaForAssemblyRequest implements HiCTAPIRequest {
   requestPath = "/get_fasta_for_assembly";
 }
@@ -335,6 +339,7 @@ class SetVisualizationOptionsRequest implements HiCTAPIRequest {
 
 export {
   type HiCTAPIRequest,
+  AttachSessionRequest,
   CloseFileRequest,
   ListCoolerFilesRequest,
   StartConversionJobRequest,
diff --git a/src/app/core/net/dto/requestDTO.ts b/src/app/core/net/dto/requestDTO.ts
index c91ea39..78b160c 100644
--- a/src/app/core/net/dto/requestDTO.ts
+++ b/src/app/core/net/dto/requestDTO.ts
@@ -23,6 +23,7 @@ import {
   ListFilesRequest,
   OpenFileRequest,
   CloseFileRequest,
+  AttachSessionRequest,
   GetFastaForAssemblyRequest,
   type HiCTAPIRequest,
   GroupContigsIntoScaffoldRequest,
@@ -147,6 +148,8 @@ abstract class HiCTAPIRequestDTO<
         return new LoadAGPRequestDTO(entity as LoadAGPRequest);
       case entity instanceof CloseFileRequest:
         return new CloseFileRequestDTO(entity as CloseFileRequest);
+      case entity instanceof AttachSessionRequest:
+        return new AttachSessionRequestDTO(entity as AttachSessionRequest);
       case entity instanceof GetFastaForAssemblyRequest:
         return new GetFastaForAssemblyRequestDTO(
           entity as GetFastaForAssemblyRequest
@@ -424,6 +427,12 @@ class CloseFileRequestDTO extends HiCTAPIRequestDTO<CloseFileRequest> {
   }
 }
 
+class AttachSessionRequestDTO extends HiCTAPIRequestDTO<AttachSessionRequest> {
+  toDTO(): Record<string, unknown> {
+    return {};
+  }
+}
+
 class GetFastaForAssemblyRequestDTO extends HiCTAPIRequestDTO<GetFastaForAssemblyRequest> {
   toDTO(): Record<string, unknown> {
     return {};
@@ -451,6 +460,7 @@ export {
   OpenFileRequestDTO,
   ListFilesRequestDTO,
   CloseFileRequestDTO,
+  AttachSessionRequestDTO,
   StartConversionJobRequestDTO,
   StartBatchConversionJobsRequestDTO,
   ListConversionJobsRequestDTO,
diff --git a/src/app/core/visualization/colormap/default_options.json b/src/app/core/visualization/colormap/default_options.json
index 76b05ac..554b801 100644
--- a/src/app/core/visualization/colormap/default_options.json
+++ b/src/app/core/visualization/colormap/default_options.json
@@ -1,40 +1,39 @@
 {
   "exportType": "visualizationOptions",
   "data": {
-    "filename": "quad_orlando_4DN.mcool.hict.hdf5",
     "savedLocations": [
       {
         "option_id": 0,
         "options": {
-          "preLogBase": 10,
-          "postLogBase": 0,
-          "applyCoolerWeights": false,
+          "preLogBase": 0,
+          "postLogBase": -1,
+          "applyCoolerWeights": true,
           "colormap": {
             "colormapType": "SimpleLinearGradient",
             "startColorRGBAString": "rgba(255,255,255,1.000000)",
-            "endColorRGBAString": "rgba(0,96,0,1.000000)",
+            "endColorRGBAString": "rgba(232,0,0,1.000000)",
             "minSignal": 0,
-            "maxSignal": 1
+            "maxSignal": 0.003
           }
         },
-        "name": "Greens",
+        "name": "Mosquitoes Demo",
         "backgroundColor": "rgb(255,255,255)"
       },
       {
         "option_id": 1,
         "options": {
           "preLogBase": 10,
-          "postLogBase": 0,
+          "postLogBase": 5,
           "applyCoolerWeights": false,
           "colormap": {
             "colormapType": "SimpleLinearGradient",
-            "startColorRGBAString": "rgba(0,0,0,0.000000)",
-            "endColorRGBAString": "rgba(0,96,0,1.000000)",
+            "startColorRGBAString": "rgba(0,19,227,0.000000)",
+            "endColorRGBAString": "rgba(232,0,0,1.000000)",
             "minSignal": 0,
-            "maxSignal": 4
+            "maxSignal": 0.75
           }
         },
-        "name": "Terminal",
+        "name": "Cold-Hot",
         "backgroundColor": "rgba(0,0,0,1)"
       },
       {
@@ -58,17 +57,17 @@
         "option_id": 3,
         "options": {
           "preLogBase": 10,
-          "postLogBase": 1.0001,
-          "applyCoolerWeights": true,
+          "postLogBase": 5,
+          "applyCoolerWeights": false,
           "colormap": {
             "colormapType": "SimpleLinearGradient",
-            "startColorRGBAString": "rgba(0,0,0,0.000000)",
-            "endColorRGBAString": "rgba(0,232,0,1.000000)",
+            "startColorRGBAString": "rgba(255,255,255,1.000000)",
+            "endColorRGBAString": "rgba(232,0,0,1.000000)",
             "minSignal": 0,
             "maxSignal": 1
           }
         },
-        "name": "Light terminal",
+        "name": "JBAT-like",
         "backgroundColor": "rgba(255,255,255,1)"
       },
       {
@@ -79,49 +78,66 @@
           "applyCoolerWeights": false,
           "colormap": {
             "colormapType": "SimpleLinearGradient",
-            "startColorRGBAString": "rgba(255,255,255,1.000000)",
+            "startColorRGBAString": "rgba(0,0,0,1.000000)",
             "endColorRGBAString": "rgba(232,0,0,1.000000)",
             "minSignal": 0,
             "maxSignal": 1
           }
         },
-        "name": "JBAT-like",
-        "backgroundColor": "rgba(255,255,255,1)"
+        "name": "Night JBAT-like",
+        "backgroundColor": "rgba(0,0,0,1)"
       },
       {
         "option_id": 5,
         "options": {
           "preLogBase": 10,
-          "postLogBase": 5,
-          "applyCoolerWeights": false,
+          "postLogBase": 1.0001,
+          "applyCoolerWeights": true,
           "colormap": {
             "colormapType": "SimpleLinearGradient",
-            "startColorRGBAString": "rgba(0,0,0,1.000000)",
-            "endColorRGBAString": "rgba(232,0,0,1.000000)",
+            "startColorRGBAString": "rgba(0,0,0,0.000000)",
+            "endColorRGBAString": "rgba(0,232,0,1.000000)",
             "minSignal": 0,
             "maxSignal": 1
           }
         },
-        "name": "Night JBAT-like",
-        "backgroundColor": "rgba(0,0,0,1)"
+        "name": "Light terminal",
+        "backgroundColor": "rgba(255,255,255,1)"
       },
       {
         "option_id": 6,
         "options": {
           "preLogBase": 10,
-          "postLogBase": 5,
+          "postLogBase": 0,
           "applyCoolerWeights": false,
           "colormap": {
             "colormapType": "SimpleLinearGradient",
-            "startColorRGBAString": "rgba(0,19,227,0.000000)",
-            "endColorRGBAString": "rgba(232,0,0,1.000000)",
+            "startColorRGBAString": "rgba(0,0,0,0.000000)",
+            "endColorRGBAString": "rgba(0,96,0,1.000000)",
             "minSignal": 0,
-            "maxSignal": 2
+            "maxSignal": 4
           }
         },
-        "name": "Cold-Hot",
+        "name": "Terminal",
         "backgroundColor": "rgba(0,0,0,1)"
-      }
+      },
+      {
+        "option_id": 7,
+        "options": {
+          "preLogBase": 10,
+          "postLogBase": 0,
+          "applyCoolerWeights": false,
+          "colormap": {
+            "colormapType": "SimpleLinearGradient",
+            "startColorRGBAString": "rgba(255,255,255,1.000000)",
+            "endColorRGBAString": "rgba(0,96,0,1.000000)",
+            "minSignal": 0,
+            "maxSignal": 1
+          }
+        },
+        "name": "Greens",
+        "backgroundColor": "rgb(255,255,255)"
+      }      
     ]
   }
 }
diff --git a/src/app/stores/sessionStore.ts b/src/app/stores/sessionStore.ts
new file mode 100644
index 0000000..86c8a44
--- /dev/null
+++ b/src/app/stores/sessionStore.ts
@@ -0,0 +1,45 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export interface SessionSavedLocation {
+  location_id: number;
+  center_point: [number, number];
+  resolution: number;
+  rotation: number;
+}
+
+export interface SessionVisualizationPreset {
+  option_id: number;
+  options: Record<string, unknown>;
+  backgroundColor: string;
+  name: string;
+  trackStyles?: Record<string, unknown>;
+  signalThresholds?: { min: number; max: number };
+}
+
+export const useSessionStore = defineStore("sessionStore", () => {
+  const savedLocations = ref<SessionSavedLocation[]>([]);
+  const savedVisualizationPresets = ref<SessionVisualizationPreset[]>([]);
+  const lastAgpFilename = ref<string>("");
+
+  function setSavedLocations(locations: SessionSavedLocation[]) {
+    savedLocations.value = locations;
+  }
+
+  function setSavedVisualizationPresets(presets: SessionVisualizationPreset[]) {
+    savedVisualizationPresets.value = presets;
+  }
+
+  function setLastAgpFilename(name: string) {
+    lastAgpFilename.value = name;
+  }
+
+  return {
+    savedLocations,
+    savedVisualizationPresets,
+    lastAgpFilename,
+    setSavedLocations,
+    setSavedVisualizationPresets,
+    setLastAgpFilename,
+  };
+});
diff --git a/src/app/ui/MainUIComponent.vue b/src/app/ui/MainUIComponent.vue
index bb07552..e230be6 100644
--- a/src/app/ui/MainUIComponent.vue
+++ b/src/app/ui/MainUIComponent.vue
@@ -28,6 +28,11 @@
       :mapManager="mapManager"
       @selected="onFileSelected"
       @closed="onClosed"
+      @attached="onAttached"
+      @saveSession="onSaveSession"
+      @openSession="onOpenSession"
+      @agpLoaded="onAgpLoaded"
+      @fastaLinked="onFastaLinked"
     ></UpperFrame>
     <WorkspaceComponent
       :mapManager="mapManager"
@@ -48,11 +53,23 @@ import {
 } from "@/app/core/mapmanagers/ContactMapManager";
 import { ref, watch, type Ref } from "vue";
 import { NetworkManager } from "@/app/core/net/NetworkManager";
+import defaultOptions from "@/app/core/visualization/colormap/default_options.json";
+import { useVisualizationOptionsStore } from "@/app/stores/visualizationOptionsStore";
+import { useStyleStore } from "@/app/stores/styleStore";
+import SimpleLinearGradient from "@/app/core/visualization/colormap/SimpleLinearGradient";
+import VisualizationOptions from "@/app/core/visualization/VisualizationOptions";
+import { ColorTranslator } from "colortranslator";
+import { LoadAGPRequest } from "@/app/core/net/api/request";
 
 import WorkspaceComponent from "@/app/ui/components/workspace/WorkspaceComponent.vue";
 import { Toaster, toast } from "vue-sonner";
 import { storeToRefs } from "pinia";
 import { usehtmlElementReferencesStore } from "../stores/htmlElementReferencesStore";
+import {
+  useSessionStore,
+  type SessionSavedLocation,
+  type SessionVisualizationPreset,
+} from "@/app/stores/sessionStore";
 
 // Reactively use these refs only inside component
 // Pass them to Map Manager on creation as values, not Refs as objects
@@ -68,41 +85,51 @@ const networkManager: NetworkManager = new NetworkManager(
   "http://localhost:5000/",
   undefined
 );
+const visualizationOptionsStore = useVisualizationOptionsStore();
+const stylesStore = useStyleStore();
+const { mapBackgroundColor } = storeToRefs(stylesStore);
+const sessionStore = useSessionStore();
 
 const htmlElementReferencesStore = usehtmlElementReferencesStore();
 const { mapTarget, miniMapTarget } = storeToRefs(htmlElementReferencesStore);
+const lastAgpFilename: Ref<string> = ref("");
 
 function resetState() {
   mapManager.value?.dispose();
   filename.value = "";
   fastaFilename.value = "";
   mapManager.value = undefined;
+  const hTrack = document.getElementById("horizontal-igv-track-div");
+  if (hTrack) {
+    hTrack.replaceChildren();
+  }
+  const vTrack = document.getElementById("vertical-igv-track-div");
+  if (vTrack) {
+    vTrack.replaceChildren();
+  }
 }
 
 function onClosed() {
-  resetState();
+  networkManager.requestManager
+    .closeFile()
+    .catch(() => undefined)
+    .finally(() => resetState());
 }
 
-function displayNewMap() {
-  const fname = filename.value;
-  const ffname = fastaFilename.value;
-  if (!fname) {
-    const message =
-      "Cannot open non-specified files: filename=" +
-      fname +
-      " fastaFilename=" +
-      ffname;
-    toast.error(message);
-    throw new Error(message);
-  }
+function onAttached() {
   networkManager.requestManager
-    .openFile(fname, ffname)
-    .then((openFileResponse) => {
+    .attachSession()
+    .then(({ filename: attachedName, response }) => {
+      if (!attachedName) {
+        toast.error("No active session to attach");
+        return;
+      }
       mapManager.value?.dispose();
+      filename.value = attachedName;
       const newManager = new ContactMapManager({
-        response: openFileResponse,
-        filename: fname,
-        fastaFilename: ffname ?? "",
+        response,
+        filename: attachedName,
+        fastaFilename: fastaFilename.value ?? "",
         tileSize: tileSize.value,
         contigBorderColor: contigBorderColor.value,
         mapTargetSelector: "hic-contact-map",
@@ -112,6 +139,56 @@ function displayNewMap() {
       mapManager.value = newManager;
       networkManager.mapManager = mapManager.value;
       newManager.initializeMap();
+      toast.success("Attached to session " + attachedName);
+    })
+    .catch((err) => {
+      const message =
+        err?.response?.data?.error ??
+        err?.message ??
+        "Failed to attach session";
+      toast.error(message);
+    });
+}
+
+async function openFileWithOptions(
+  fname: string,
+  ffname: string | undefined
+): Promise<void> {
+  const openFileResponse = await networkManager.requestManager.openFile(
+    fname,
+    ffname
+  );
+  mapManager.value?.dispose();
+  const newManager = new ContactMapManager({
+    response: openFileResponse,
+    filename: fname,
+    fastaFilename: ffname ?? "",
+    tileSize: tileSize.value,
+    contigBorderColor: contigBorderColor.value,
+    mapTargetSelector: "hic-contact-map",
+    networkManager: networkManager,
+    minimapTarget: miniMapTarget,
+  });
+  mapManager.value = newManager;
+  networkManager.mapManager = mapManager.value;
+  newManager.initializeMap();
+  applyDefaultVisualizationPreset();
+}
+
+function displayNewMap() {
+  const fname = filename.value;
+  const ffname = fastaFilename.value;
+  if (!fname) {
+    const message =
+      "Cannot open non-specified files: filename=" +
+      fname +
+      " fastaFilename=" +
+      ffname;
+    toast.error(message);
+    throw new Error(message);
+  }
+  openFileWithOptions(fname, ffname)
+    .then(() => {
       toast.success("Opened file " + fname);
     })
     .catch((a) => {
@@ -120,6 +197,268 @@ function displayNewMap() {
     });
 }
 
+function applyDefaultVisualizationPreset() {
+  const presets =
+    (defaultOptions as unknown as {
+      data?: { savedLocations?: unknown[]; savedVisualizationPresets?: unknown[] };
+    }).data?.savedLocations ??
+    (defaultOptions as unknown as {
+      data?: { savedVisualizationPresets?: unknown[] };
+    }).data?.savedVisualizationPresets ??
+    [];
+  if (!presets || presets.length === 0) {
+    return;
+  }
+  const first = presets[0] as Record<string, unknown>;
+  const opt = (first["options"] as Record<string, unknown>) ?? {};
+  const cmap = (opt["colormap"] as Record<string, unknown>) ?? {};
+  const startColor = (cmap["startColorRGBAString"] as string) ?? "rgba(0,255,0,0.0)";
+  const endColor = (cmap["endColorRGBAString"] as string) ?? "rgba(0,96,0,1.0)";
+  const minSignal = (cmap["minSignal"] as number) ?? 0;
+  const maxSignal = (cmap["maxSignal"] as number) ?? 1;
+  const preLogBase = (opt["preLogBase"] as number) ?? -1;
+  const postLogBase = (opt["postLogBase"] as number) ?? 10;
+  const applyCoolerWeights = (opt["applyCoolerWeights"] as boolean) ?? false;
+  const resolutionScaling = (opt["resolutionScaling"] as boolean) ?? false;
+  const resolutionLinearScaling =
+    (opt["resolutionLinearScaling"] as boolean) ?? false;
+  const cmapObj = new SimpleLinearGradient(
+    new ColorTranslator(startColor, { legacyCSS: true }),
+    new ColorTranslator(endColor, { legacyCSS: true }),
+    minSignal,
+    maxSignal
+  );
+  visualizationOptionsStore.setVisualizationOptions(
+    new VisualizationOptions(
+      preLogBase,
+      postLogBase,
+      applyCoolerWeights,
+      resolutionScaling,
+      resolutionLinearScaling,
+      cmapObj
+    )
+  );
+  const bg = (first["backgroundColor"] as string) ?? "rgba(255,255,255,1)";
+  stylesStore.setMapBackground(new ColorTranslator(bg, { legacyCSS: true }));
+  mapManager.value?.visualizationManager.sendVisualizationOptionsToServer().then(() => {
+    mapManager.value?.reloadTiles();
+  });
+}
+
+function onAgpLoaded(filename: string): void {
+  lastAgpFilename.value = filename;
+  sessionStore.setLastAgpFilename(filename);
+}
+
+function onFastaLinked(filename: string): void {
+  fastaFilename.value = filename;
+}
+
+function serializeCurrentVisualizationOptions(): Record<string, unknown> {
+  const options = visualizationOptionsStore.asVisualizationOptions();
+  const cmap = options.colormap;
+  if (cmap instanceof SimpleLinearGradient) {
+    return {
+      preLogBase: options.preLogBase,
+      postLogBase: options.postLogBase,
+      applyCoolerWeights: options.applyCoolerWeights ?? false,
+      resolutionScaling: options.resolutionScaling ?? false,
+      resolutionLinearScaling: options.resolutionLinearScaling ?? false,
+      colormap: {
+        colormapType: cmap.colormapType,
+        startColorRGBAString: cmap.startColorRGBA.RGBA,
+        endColorRGBAString: cmap.endColorRGBA.RGBA,
+        minSignal: cmap.minSignal,
+        maxSignal: cmap.maxSignal,
+      },
+    };
+  }
+  return {
+    preLogBase: options.preLogBase,
+    postLogBase: options.postLogBase,
+    applyCoolerWeights: options.applyCoolerWeights ?? false,
+    resolutionScaling: options.resolutionScaling ?? false,
+    resolutionLinearScaling: options.resolutionLinearScaling ?? false,
+    colormap: {
+      colormapType: options.colormap?.colormapType ?? "Unknown",
+    },
+  };
+}
+
+function onSaveSession(): void {
+  if (!mapManager.value) {
+    toast.error("No open map to save session");
+    return;
+  }
+  const view = mapManager.value.getView();
+  const session = {
+    version: 1,
+    filename: filename.value ?? "",
+    fastaFilename: fastaFilename.value ?? "",
+    agpFilename: lastAgpFilename.value ?? "",
+    visualizationOptions: serializeCurrentVisualizationOptions(),
+    backgroundColor: mapBackgroundColor.value?.RGBA ?? "rgba(255,255,255,1)",
+    trackStyles: mapManager.value.getLayersManager().getTrackStylePreset(),
+    savedLocations: sessionStore.savedLocations,
+    savedVisualizationPresets: sessionStore.savedVisualizationPresets,
+    view: {
+      center: view.getCenter(),
+      resolution: view.getResolution(),
+      rotation: view.getRotation(),
+      bpResolution:
+        mapManager.value.viewAndLayersManager.currentViewState
+          .resolutionDesciptor.bpResolution,
+    },
+  };
+  const blob = new Blob([JSON.stringify(session, null, 2)], {
+    type: "application/json",
+  });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "hict_session.json";
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+async function resolveFilename(
+  label: string,
+  original: string,
+  list: string[]
+): Promise<string | null> {
+  if (!original) return "";
+  if (list.includes(original)) return original;
+  const replacement = window.prompt(
+    `${label} file '${original}' not found. Enter an alternative filename or leave empty to cancel:`
+  );
+  if (!replacement) return null;
+  if (!list.includes(replacement)) {
+    toast.error(`${label} file '${replacement}' not found`);
+    return null;
+  }
+  return replacement;
+}
+
+async function onOpenSession(file: File): Promise<void> {
+  try {
+    const text = await file.text();
+    const session = JSON.parse(text) as Record<string, unknown>;
+    const sessionFilename = (session["filename"] as string) ?? "";
+    const sessionFasta = (session["fastaFilename"] as string) ?? "";
+    const sessionAgp = (session["agpFilename"] as string) ?? "";
+
+    const fileList = await networkManager.requestManager.listFiles();
+    const fastaList = await networkManager.requestManager.listFASTAFiles();
+    const agpList = await networkManager.requestManager.listAGPFiles();
+
+    const resolvedFile = await resolveFilename(
+      "HiCT",
+      sessionFilename,
+      fileList
+    );
+    if (resolvedFile === null) return;
+
+    const resolvedFasta = await resolveFilename(
+      "FASTA",
+      sessionFasta,
+      fastaList
+    );
+    if (resolvedFasta === null) return;
+
+    const resolvedAgp = await resolveFilename("AGP", sessionAgp, agpList);
+    if (resolvedAgp === null) return;
+
+    filename.value = resolvedFile ?? "";
+    fastaFilename.value = resolvedFasta ?? "";
+    await openFileWithOptions(filename.value, fastaFilename.value);
+
+    if (resolvedAgp) {
+      await networkManager.requestManager.loadAGP(
+        new LoadAGPRequest({ agpFilename: resolvedAgp })
+      );
+      lastAgpFilename.value = resolvedAgp;
+      sessionStore.setLastAgpFilename(resolvedAgp);
+    }
+
+    const visRaw = session["visualizationOptions"] as Record<string, unknown>;
+    if (visRaw) {
+      const cmap = (visRaw["colormap"] as Record<string, unknown>) ?? {};
+      const startColor =
+        (cmap["startColorRGBAString"] as string) ?? "rgba(0,255,0,0.0)";
+      const endColor =
+        (cmap["endColorRGBAString"] as string) ?? "rgba(0,96,0,1.0)";
+      const minSignal = (cmap["minSignal"] as number) ?? 0;
+      const maxSignal = (cmap["maxSignal"] as number) ?? 1;
+      const preLogBase = (visRaw["preLogBase"] as number) ?? -1;
+      const postLogBase = (visRaw["postLogBase"] as number) ?? 10;
+      const applyCoolerWeights =
+        (visRaw["applyCoolerWeights"] as boolean) ?? false;
+      const resolutionScaling =
+        (visRaw["resolutionScaling"] as boolean) ?? false;
+      const resolutionLinearScaling =
+        (visRaw["resolutionLinearScaling"] as boolean) ?? false;
+      const cmapObj = new SimpleLinearGradient(
+        new ColorTranslator(startColor, { legacyCSS: true }),
+        new ColorTranslator(endColor, { legacyCSS: true }),
+        minSignal,
+        maxSignal
+      );
+      visualizationOptionsStore.setVisualizationOptions(
+        new VisualizationOptions(
+          preLogBase,
+          postLogBase,
+          applyCoolerWeights,
+          resolutionScaling,
+          resolutionLinearScaling,
+          cmapObj
+        )
+      );
+    }
+
+    const bg = (session["backgroundColor"] as string) ?? null;
+    if (bg) {
+      stylesStore.setMapBackground(new ColorTranslator(bg, { legacyCSS: true }));
+    }
+
+    const trackStyles = session["trackStyles"] as Record<string, unknown>;
+    if (trackStyles && mapManager.value) {
+      mapManager.value
+        .getLayersManager()
+        .applyTrackStylePreset(trackStyles as never);
+    }
+
+    const savedLocs = (session["savedLocations"] as unknown[]) ?? [];
+    sessionStore.setSavedLocations(savedLocs as SessionSavedLocation[]);
+
+    const savedPresets =
+      (session["savedVisualizationPresets"] as unknown[]) ?? [];
+    sessionStore.setSavedVisualizationPresets(
+      savedPresets as SessionVisualizationPreset[]
+    );
+
+    const viewState = session["view"] as Record<string, unknown>;
+    if (viewState && mapManager.value) {
+      const view = mapManager.value.getView();
+      if (Array.isArray(viewState["center"])) {
+        view.setCenter(viewState["center"] as [number, number]);
+      }
+      if (typeof viewState["resolution"] === "number") {
+        view.setResolution(viewState["resolution"] as number);
+      }
+      if (typeof viewState["rotation"] === "number") {
+        view.setRotation(viewState["rotation"] as number);
+      }
+      mapManager.value.viewAndLayersManager.updateCurrentHiCViewState();
+    }
+
+    await mapManager.value?.visualizationManager.sendVisualizationOptionsToServer();
+    mapManager.value?.reloadTiles();
+    toast.success("Session restored");
+  } catch (e) {
+    toast.error("Failed to open session");
+  }
+}
+
 watch(
   () => tileSize.value,
   (newTileSize, oldTileSize) => {
diff --git a/src/app/ui/components/sidebar/LayerComponent.vue b/src/app/ui/components/sidebar/LayerComponent.vue
index 176fd97..fce3b97 100644
--- a/src/app/ui/components/sidebar/LayerComponent.vue
+++ b/src/app/ui/components/sidebar/LayerComponent.vue
@@ -180,16 +180,18 @@ const props = defineProps<{
 }>();
 
 function getBaseColor(): ColorTranslator {
-  if (props.getDefaultColor) {
-    const olColorString = props
-      .getDefaultColor()
-      ?.getStroke()
-      ?.getColor() as ColorLike as string;
-
-    const color = new ColorTranslator(olColorString, { legacyCSS: true });
-    if (color) {
-      return color;
+  try {
+    if (props.getDefaultColor) {
+      const style = props.getDefaultColor();
+      const olColorString = style
+        ?.getStroke()
+        ?.getColor() as ColorLike as string | undefined;
+      if (olColorString) {
+        return new ColorTranslator(olColorString, { legacyCSS: true });
+      }
     }
+  } catch (e) {
+    // fall through to default
   }
   return new ColorTranslator("rgb(127, 192, 224)", { legacyCSS: true });
 }
diff --git a/src/app/ui/components/sidebar/SavedLocations.vue b/src/app/ui/components/sidebar/SavedLocations.vue
index 1ca36d7..68376a1 100644
--- a/src/app/ui/components/sidebar/SavedLocations.vue
+++ b/src/app/ui/components/sidebar/SavedLocations.vue
@@ -221,6 +221,7 @@ import { Coordinate } from "ol/coordinate";
 import { toast } from "vue-sonner";
 import type { ContigDescriptor } from "@/app/core/domain/ContigDescriptor";
 import type { ScaffoldDescriptor } from "@/app/core/domain/ScaffoldDescriptor";
+import { useSessionStore } from "@/app/stores/sessionStore";
 
 const props = defineProps<{
   mapManager?: ContactMapManager;
@@ -241,6 +242,7 @@ const savedLocations: Ref<
 > = ref(new Map());
 
 const locationCount = ref(0);
+const sessionStore = useSessionStore();
 
 const contigList = ref<ContigDescriptor[]>([]);
 const scaffoldList = ref<ScaffoldDescriptor[]>([]);
@@ -299,6 +301,7 @@ watch(activeTab, () => {
 
 onMounted(() => {
   refreshAssemblyLists();
+  syncSessionStore();
   // Poll for assembly changes triggered by backend ops (group/ungroup/move).
   // This keeps Contigs/Scaffolds tabs in sync without tab switches.
   refreshTimer = window.setInterval(() => {
@@ -326,6 +329,7 @@ function saveLocation() {
       rotation: view.getRotation(),
     });
     locationCount.value += 1;
+    syncSessionStore();
   }
 }
 
@@ -344,6 +348,7 @@ function gotoSavedLocation(location_id: number) {
 
 function removeSavedLocation(location_id: number) {
   savedLocations.value.delete(location_id);
+  syncSessionStore();
 }
 
 function exportBookmarks(): void {
@@ -383,12 +388,54 @@ function importBookmarks(event: Event): void {
         });
       });
       locationCount.value = entries.length;
+      syncSessionStore();
     } catch (e) {
       toast.error("Invalid bookmarks file");
     }
   });
 }
 
+function syncSessionStore() {
+  const entries = Array.from(savedLocations.value.values()).map((loc, idx) => ({
+    location_id: idx,
+    center_point: (loc.center_point ?? [0, 0]) as [number, number],
+    resolution: loc.resolution ?? 1,
+    rotation: loc.rotation ?? 0,
+  }));
+  sessionStore.setSavedLocations(entries);
+}
+
+function loadFromSessionStore() {
+  const entries = sessionStore.savedLocations;
+  savedLocations.value.clear();
+  entries.forEach((entry, idx) => {
+    savedLocations.value.set(idx, {
+      location_id: idx,
+      center_point: entry.center_point,
+      resolution: entry.resolution,
+      rotation: entry.rotation,
+    });
+  });
+  locationCount.value = entries.length;
+}
+
+watch(
+  () => sessionStore.savedLocations,
+  () => {
+    const current = Array.from(savedLocations.value.values()).map((loc) => ({
+      location_id: loc.location_id,
+      center_point: loc.center_point,
+      resolution: loc.resolution,
+      rotation: loc.rotation,
+    }));
+    const next = sessionStore.savedLocations;
+    if (JSON.stringify(current) !== JSON.stringify(next)) {
+      loadFromSessionStore();
+    }
+  },
+  { deep: true }
+);
+
 function markContigDirty(contigId: number): void {
   contigDirty.value.add(contigId);
 }
diff --git a/src/app/ui/components/sidebar/SavedVisualOptions.vue b/src/app/ui/components/sidebar/SavedVisualOptions.vue
index 29f7b71..fc24c8a 100644
--- a/src/app/ui/components/sidebar/SavedVisualOptions.vue
+++ b/src/app/ui/components/sidebar/SavedVisualOptions.vue
@@ -76,7 +76,7 @@
 
 <script setup lang="ts">
 import { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
-import { Ref, ref, shallowRef, triggerRef, onMounted } from "vue";
+import { Ref, ref, shallowRef, triggerRef, onMounted, watch } from "vue";
 import SavedVisualOptionsElement from "./SavedVisualOptionsElement.vue";
 import VisualizationOptions from "@/app/core/visualization/VisualizationOptions";
 import SimpleLinearGradient from "@/app/core/visualization/colormap/SimpleLinearGradient";
@@ -88,6 +88,7 @@ import { toast } from "vue-sonner";
 import { useStyleStore } from "@/app/stores/styleStore";
 import { ColorTranslator } from "colortranslator";
 import defaultOptions from "@/app/core/visualization/colormap/default_options.json";
+import { useSessionStore } from "@/app/stores/sessionStore";
 const visualizationOptionsStore = useVisualizationOptionsStore();
 const { preLogBase, applyCoolerWeights, postLogBase, colormap } = storeToRefs(
   visualizationOptionsStore
@@ -100,6 +101,7 @@ onMounted(() => {
 
 const stylesStore = useStyleStore();
 const { mapBackgroundColor } = storeToRefs(stylesStore);
+const sessionStore = useSessionStore();
 
 const props = defineProps<{
   mapManager?: ContactMapManager;
@@ -120,6 +122,7 @@ const savedOptions = shallowRef(
 
 function bumpSavedOptions() {
   triggerRef(savedOptions);
+  syncSessionStore();
 }
 
 function nextOptionId(): number {
@@ -205,6 +208,65 @@ function exportOptions() {
   URL.revokeObjectURL(a.href);
 }
 
+function syncSessionStore() {
+  const values: {
+    option_id: number;
+    options: Record<string, unknown>;
+    backgroundColor: string;
+    name: string;
+    trackStyles?: TrackStylePresetBundle;
+    signalThresholds?: { min: number; max: number };
+  }[] = [];
+  savedOptions.value.forEach((v) =>
+    values.push({
+      option_id: v.option_id,
+      options: serializeVisualizationOptions(v.options),
+      name: v.name,
+      backgroundColor: colorToString(v.backgroundColor),
+      trackStyles: v.trackStyles,
+      signalThresholds: extractSignalThresholds(v.options),
+    })
+  );
+  sessionStore.setSavedVisualizationPresets(values);
+}
+
+function loadFromSessionStore() {
+  const presets = sessionStore.savedVisualizationPresets;
+  savedOptions.value.clear();
+  presets.forEach((opt, idx) => {
+    const backgroundColor = new ColorTranslator(
+      opt.backgroundColor ?? "rgba(255,255,255,1.0)",
+      { legacyCSS: true }
+    );
+    savedOptions.value.set(idx, {
+      option_id: idx,
+      name: opt.name ?? `Preset ${idx}`,
+      options: deserializeVisualizationOptions(opt.options ?? {}),
+      backgroundColor,
+      trackStyles: opt.trackStyles as TrackStylePresetBundle | undefined,
+    });
+  });
+  bumpSavedOptions();
+}
+
+watch(
+  () => sessionStore.savedVisualizationPresets,
+  () => {
+    const current = Array.from(savedOptions.value.values()).map((v) => ({
+      option_id: v.option_id,
+      options: serializeVisualizationOptions(v.options),
+      backgroundColor: colorToString(v.backgroundColor),
+      name: v.name,
+      trackStyles: v.trackStyles,
+    }));
+    const next = sessionStore.savedVisualizationPresets;
+    if (JSON.stringify(current) !== JSON.stringify(next)) {
+      loadFromSessionStore();
+    }
+  },
+  { deep: true }
+);
+
 type UnknownRecord = Record<string, unknown>;
 
 function isRecord(v: unknown): v is UnknownRecord {
diff --git a/src/app/ui/components/upper_ribbon/NavigationBar.vue b/src/app/ui/components/upper_ribbon/NavigationBar.vue
index 5a8db8c..e35e664 100644
--- a/src/app/ui/components/upper_ribbon/NavigationBar.vue
+++ b/src/app/ui/components/upper_ribbon/NavigationBar.vue
@@ -50,6 +50,28 @@
                   >Close</a
                 >
               </li>
+              <li>
+                <a class="dropdown-item" href="#" @click="onAttachClicked"
+                  >Attach</a
+                >
+              </li>
+              <li>
+                <a class="dropdown-item" href="#" @click="onSaveSessionClicked"
+                  >Save session</a
+                >
+              </li>
+              <li>
+                <a class="dropdown-item" href="#" @click="onOpenSessionClicked"
+                  >Open session</a
+                >
+                <input
+                  ref="sessionFileInput"
+                  type="file"
+                  accept="application/json"
+                  @change="onSessionFileSelected"
+                  hidden
+                />
+              </li>
               <li>
                 <a
                   class="dropdown-item"
@@ -333,6 +355,11 @@ SOFTWARE.`;
 const emit = defineEmits<{
   (e: "selected", filename: string): void;
   (e: "closed"): void;
+  (e: "attached"): void;
+  (e: "saveSession"): void;
+  (e: "openSession", file: File): void;
+  (e: "agpLoaded", filename: string): void;
+  (e: "fastaLinked", filename: string): void;
 }>();
 
 const props = defineProps<{
@@ -372,6 +399,31 @@ function onCloseClicked(): void {
   errorMessage.value = null;
 }
 
+function onAttachClicked(): void {
+  emit("attached");
+  errorMessage.value = null;
+}
+
+function onSaveSessionClicked(): void {
+  emit("saveSession");
+  errorMessage.value = null;
+}
+
+const sessionFileInput = ref<HTMLInputElement | null>(null);
+
+function onOpenSessionClicked(): void {
+  sessionFileInput.value?.click();
+}
+
+function onSessionFileSelected(event: Event): void {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  if (!file) return;
+  emit("openSession", file);
+  input.value = "";
+  errorMessage.value = null;
+}
+
 function onConvertCoolersClicked(): void {
   convertingCoolers.value = true;
 }
@@ -435,6 +487,7 @@ function openAGP(filename: string) {
       openingFile.value = false;
       openingAGPFile.value = false;
       errorMessage.value = null;
+      emit("agpLoaded", filename);
       toast.message("Assembly loaded from AGP file " + filename);
     })
     .catch((e) => {
@@ -449,6 +502,7 @@ function linkFASTA(filename: string) {
       openingFile.value = false;
       openingFASTAFile.value = false;
       errorMessage.value = false;
+      emit("fastaLinked", filename);
       toast.message("Linked FASTA file " + filename);
     })
     .catch((e) => {
diff --git a/src/app/ui/components/upper_ribbon/UpperFrame.vue b/src/app/ui/components/upper_ribbon/UpperFrame.vue
index d3994e5..974ec13 100644
--- a/src/app/ui/components/upper_ribbon/UpperFrame.vue
+++ b/src/app/ui/components/upper_ribbon/UpperFrame.vue
@@ -26,6 +26,11 @@
       :mapManager="props.mapManager"
       @selected="onFileSelected"
       @closed="onClosed"
+      @attached="onAttached"
+      @saveSession="onSaveSession"
+      @openSession="onOpenSession"
+      @agpLoaded="onAgpLoaded"
+      @fastaLinked="onFastaLinked"
     ></NavigationBar>
     <HeaderRibbon :mapManager="props.mapManager"></HeaderRibbon>
   </div>
@@ -39,6 +44,11 @@ import { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
 const emit = defineEmits<{
   (e: "selected", filename: string): void;
   (e: "closed"): void;
+  (e: "attached"): void;
+  (e: "saveSession"): void;
+  (e: "openSession", file: File): void;
+  (e: "agpLoaded", filename: string): void;
+  (e: "fastaLinked", filename: string): void;
 }>();
 
 const props = defineProps<{
@@ -53,6 +63,26 @@ function onFileSelected(filename: string): void {
 function onClosed(): void {
   emit("closed");
 }
+
+function onAttached(): void {
+  emit("attached");
+}
+
+function onSaveSession(): void {
+  emit("saveSession");
+}
+
+function onOpenSession(file: File): void {
+  emit("openSession", file);
+}
+
+function onAgpLoaded(filename: string): void {
+  emit("agpLoaded", filename);
+}
+
+function onFastaLinked(filename: string): void {
+  emit("fastaLinked", filename);
+}
 </script>
 
 <style scoped>

From 5cb0f79411066980da2acf97bb86e80c34d7a1f7 Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Tue, 24 Feb 2026 05:11:09 +0400
Subject: [PATCH 16/27] Visualization options overhaul and saving track styles

---
 .../mapmanagers/HiCViewAndLayersManager.ts    |  11 +
 src/app/core/tracks/TrackStylePreset.ts       |   2 +
 .../colormap/default_options.json             | 274 +++++++++++++++++-
 src/app/ui/MainUIComponent.vue                |  20 +-
 .../components/sidebar/SavedVisualOptions.vue |  14 +-
 .../sidebar/SavedVisualOptionsElement.vue     |  18 ++
 6 files changed, 328 insertions(+), 11 deletions(-)

diff --git a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
index c962a49..7550c69 100644
--- a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
+++ b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
@@ -612,6 +612,7 @@ class HiCViewAndLayersManager {
       labelOutlineWidth: track.getLabelOutlineWidth(),
       labelColor: this.colorLikeToString(track.getLabelColor()),
       borderStyle: track.getStyleType(),
+      namePlacement: track.getNamePlacement(),
     };
   }
 
@@ -638,6 +639,16 @@ class HiCViewAndLayersManager {
     if (preset.labelColor !== undefined) {
       track.setLabelColor(preset.labelColor);
     }
+    if (preset.namePlacement !== undefined) {
+      if (typeof preset.namePlacement === "string") {
+        const key = preset.namePlacement as keyof typeof NamePlacement;
+        if (NamePlacement[key] !== undefined) {
+          track.setNamePlacement(NamePlacement[key]);
+        }
+      } else {
+        track.setNamePlacement(preset.namePlacement);
+      }
+    }
     track.setStyleType(preset.borderStyle);
     track.style = track.generateStyleFunction()();
   }
diff --git a/src/app/core/tracks/TrackStylePreset.ts b/src/app/core/tracks/TrackStylePreset.ts
index 190c140..b62687c 100644
--- a/src/app/core/tracks/TrackStylePreset.ts
+++ b/src/app/core/tracks/TrackStylePreset.ts
@@ -1,4 +1,5 @@
 import { BorderStyle } from "@/app/core/tracks/Track2DSymmetric";
+import { NamePlacement } from "@/app/core/tracks/Track2DSymmetric";
 
 export type TrackStylePreset = {
   borderColor: string;
@@ -6,6 +7,7 @@ export type TrackStylePreset = {
   width: number;
   labelSize?: number;
   borderStyle: BorderStyle;
+  namePlacement?: NamePlacement | keyof typeof NamePlacement;
   labelBold?: boolean;
   labelOutline?: boolean;
   labelOutlineWidth?: number;
diff --git a/src/app/core/visualization/colormap/default_options.json b/src/app/core/visualization/colormap/default_options.json
index 554b801..bc7ec96 100644
--- a/src/app/core/visualization/colormap/default_options.json
+++ b/src/app/core/visualization/colormap/default_options.json
@@ -17,7 +17,39 @@
           }
         },
         "name": "Mosquitoes Demo",
-        "backgroundColor": "rgb(255,255,255)"
+        "backgroundColor": "rgb(255,255,255)",
+        "signalThresholds": {
+          "lowerSignalBound": 0,
+          "upperSignalBound": 0.003
+        },
+        "trackStyles": {
+          "contigs": {
+            "borderColor": "rgba(61, 167, 221, 1)",
+            "fillColor": "rgba(0, 127, 127, 0.0)",
+            "width": 2,
+            "labelSize": 12,
+            "borderStyle": 1,
+            "namePlacement": "HIDDEN",
+            "labelBold": true,
+            "labelOutline": true,
+            "labelOutlineWidth": 2,
+            "labelOffsetMultiplier": 1.25,
+            "labelColor": "rgba(61, 167, 221, 1)"
+          },
+          "scaffolds": {
+            "borderColor": "rgba(100, 104, 111, 0.698)",
+            "fillColor": "rgba(64, 64, 255, 0.0)",
+            "width": 4,
+            "labelSize": 12,
+            "borderStyle": 1,
+            "namePlacement": "TOP",
+            "labelBold": true,
+            "labelOutline": true,
+            "labelOutlineWidth": 2,
+            "labelOffsetMultiplier": 1.25,
+            "labelColor": "rgba(100, 104, 111, 0.698)"
+          }
+        }
       },
       {
         "option_id": 1,
@@ -34,7 +66,39 @@
           }
         },
         "name": "Cold-Hot",
-        "backgroundColor": "rgba(0,0,0,1)"
+        "backgroundColor": "rgba(0,0,0,1)",
+        "signalThresholds": {
+          "lowerSignalBound": 0,
+          "upperSignalBound": 0.75
+        },
+        "trackStyles": {
+          "contigs": {
+            "borderColor": "rgba(255, 64, 64, 1.0)",
+            "fillColor": "rgba(0, 127, 127, 0.0)",
+            "width": 2,
+            "labelSize": 12,
+            "borderStyle": 0,
+            "namePlacement": "TOP",
+            "labelBold": true,
+            "labelOutline": true,
+            "labelOutlineWidth": 2,
+            "labelOffsetMultiplier": 1.25,
+            "labelColor": "rgba(255, 64, 64, 1.0)"
+          },
+          "scaffolds": {
+            "borderColor": "rgba(255, 255, 0, 1)",
+            "fillColor": "rgba(64, 64, 255, 0.0)",
+            "width": 4,
+            "labelSize": 12,
+            "borderStyle": 0,
+            "namePlacement": "TOP",
+            "labelBold": true,
+            "labelOutline": true,
+            "labelOutlineWidth": 2,
+            "labelOffsetMultiplier": 1.25,
+            "labelColor": "rgba(255, 255, 0, 1)"
+          }
+        }
       },
       {
         "option_id": 2,
@@ -51,7 +115,39 @@
           }
         },
         "name": "Visible dots with cooler weights",
-        "backgroundColor": "rgba(0,0,0,1)"
+        "backgroundColor": "rgba(0,0,0,1)",
+        "signalThresholds": {
+          "lowerSignalBound": 0,
+          "upperSignalBound": 1
+        },
+        "trackStyles": {
+          "contigs": {
+            "borderColor": "rgba(255, 64, 64, 1.0)",
+            "fillColor": "rgba(0, 127, 127, 0.0)",
+            "width": 2,
+            "labelSize": 12,
+            "borderStyle": 0,
+            "namePlacement": "TOP",
+            "labelBold": true,
+            "labelOutline": true,
+            "labelOutlineWidth": 2,
+            "labelOffsetMultiplier": 1.25,
+            "labelColor": "rgba(255, 64, 64, 1.0)"
+          },
+          "scaffolds": {
+            "borderColor": "rgba(255, 255, 0, 1)",
+            "fillColor": "rgba(64, 64, 255, 0.0)",
+            "width": 4,
+            "labelSize": 12,
+            "borderStyle": 0,
+            "namePlacement": "TOP",
+            "labelBold": true,
+            "labelOutline": true,
+            "labelOutlineWidth": 2,
+            "labelOffsetMultiplier": 1.25,
+            "labelColor": "rgba(255, 255, 0, 1)"
+          }
+        }
       },
       {
         "option_id": 3,
@@ -68,7 +164,39 @@
           }
         },
         "name": "JBAT-like",
-        "backgroundColor": "rgba(255,255,255,1)"
+        "backgroundColor": "rgba(255,255,255,1)",
+        "signalThresholds": {
+          "lowerSignalBound": 0,
+          "upperSignalBound": 1
+        },
+        "trackStyles": {
+          "contigs": {
+            "borderColor": "rgba(255, 64, 64, 1.0)",
+            "fillColor": "rgba(0, 127, 127, 0.0)",
+            "width": 2,
+            "labelSize": 12,
+            "borderStyle": 0,
+            "namePlacement": "TOP",
+            "labelBold": true,
+            "labelOutline": true,
+            "labelOutlineWidth": 2,
+            "labelOffsetMultiplier": 1.25,
+            "labelColor": "rgba(255, 64, 64, 1.0)"
+          },
+          "scaffolds": {
+            "borderColor": "rgba(255, 255, 0, 1)",
+            "fillColor": "rgba(64, 64, 255, 0.0)",
+            "width": 4,
+            "labelSize": 12,
+            "borderStyle": 0,
+            "namePlacement": "TOP",
+            "labelBold": true,
+            "labelOutline": true,
+            "labelOutlineWidth": 2,
+            "labelOffsetMultiplier": 1.25,
+            "labelColor": "rgba(255, 255, 0, 1)"
+          }
+        }
       },
       {
         "option_id": 4,
@@ -85,7 +213,39 @@
           }
         },
         "name": "Night JBAT-like",
-        "backgroundColor": "rgba(0,0,0,1)"
+        "backgroundColor": "rgba(0,0,0,1)",
+        "signalThresholds": {
+          "lowerSignalBound": 0,
+          "upperSignalBound": 1
+        },
+        "trackStyles": {
+          "contigs": {
+            "borderColor": "rgba(255, 64, 64, 1.0)",
+            "fillColor": "rgba(0, 127, 127, 0.0)",
+            "width": 2,
+            "labelSize": 12,
+            "borderStyle": 0,
+            "namePlacement": "TOP",
+            "labelBold": true,
+            "labelOutline": true,
+            "labelOutlineWidth": 2,
+            "labelOffsetMultiplier": 1.25,
+            "labelColor": "rgba(255, 64, 64, 1.0)"
+          },
+          "scaffolds": {
+            "borderColor": "rgba(255, 255, 0, 1)",
+            "fillColor": "rgba(64, 64, 255, 0.0)",
+            "width": 4,
+            "labelSize": 12,
+            "borderStyle": 0,
+            "namePlacement": "TOP",
+            "labelBold": true,
+            "labelOutline": true,
+            "labelOutlineWidth": 2,
+            "labelOffsetMultiplier": 1.25,
+            "labelColor": "rgba(255, 255, 0, 1)"
+          }
+        }
       },
       {
         "option_id": 5,
@@ -102,7 +262,39 @@
           }
         },
         "name": "Light terminal",
-        "backgroundColor": "rgba(255,255,255,1)"
+        "backgroundColor": "rgba(255,255,255,1)",
+        "signalThresholds": {
+          "lowerSignalBound": 0,
+          "upperSignalBound": 1
+        },
+        "trackStyles": {
+          "contigs": {
+            "borderColor": "rgba(255, 64, 64, 1.0)",
+            "fillColor": "rgba(0, 127, 127, 0.0)",
+            "width": 2,
+            "labelSize": 12,
+            "borderStyle": 0,
+            "namePlacement": "TOP",
+            "labelBold": true,
+            "labelOutline": true,
+            "labelOutlineWidth": 2,
+            "labelOffsetMultiplier": 1.25,
+            "labelColor": "rgba(255, 64, 64, 1.0)"
+          },
+          "scaffolds": {
+            "borderColor": "rgba(255, 255, 0, 1)",
+            "fillColor": "rgba(64, 64, 255, 0.0)",
+            "width": 4,
+            "labelSize": 12,
+            "borderStyle": 0,
+            "namePlacement": "TOP",
+            "labelBold": true,
+            "labelOutline": true,
+            "labelOutlineWidth": 2,
+            "labelOffsetMultiplier": 1.25,
+            "labelColor": "rgba(255, 255, 0, 1)"
+          }
+        }
       },
       {
         "option_id": 6,
@@ -119,7 +311,39 @@
           }
         },
         "name": "Terminal",
-        "backgroundColor": "rgba(0,0,0,1)"
+        "backgroundColor": "rgba(0,0,0,1)",
+        "signalThresholds": {
+          "lowerSignalBound": 0,
+          "upperSignalBound": 4
+        },
+        "trackStyles": {
+          "contigs": {
+            "borderColor": "rgba(255, 64, 64, 1.0)",
+            "fillColor": "rgba(0, 127, 127, 0.0)",
+            "width": 2,
+            "labelSize": 12,
+            "borderStyle": 0,
+            "namePlacement": "TOP",
+            "labelBold": true,
+            "labelOutline": true,
+            "labelOutlineWidth": 2,
+            "labelOffsetMultiplier": 1.25,
+            "labelColor": "rgba(255, 64, 64, 1.0)"
+          },
+          "scaffolds": {
+            "borderColor": "rgba(255, 255, 0, 1)",
+            "fillColor": "rgba(64, 64, 255, 0.0)",
+            "width": 4,
+            "labelSize": 12,
+            "borderStyle": 0,
+            "namePlacement": "TOP",
+            "labelBold": true,
+            "labelOutline": true,
+            "labelOutlineWidth": 2,
+            "labelOffsetMultiplier": 1.25,
+            "labelColor": "rgba(255, 255, 0, 1)"
+          }
+        }
       },
       {
         "option_id": 7,
@@ -136,8 +360,40 @@
           }
         },
         "name": "Greens",
-        "backgroundColor": "rgb(255,255,255)"
-      }      
+        "backgroundColor": "rgb(255,255,255)",
+        "signalThresholds": {
+          "lowerSignalBound": 0,
+          "upperSignalBound": 1
+        },
+        "trackStyles": {
+          "contigs": {
+            "borderColor": "rgba(255, 64, 64, 1.0)",
+            "fillColor": "rgba(0, 127, 127, 0.0)",
+            "width": 2,
+            "labelSize": 12,
+            "borderStyle": 0,
+            "namePlacement": "TOP",
+            "labelBold": true,
+            "labelOutline": true,
+            "labelOutlineWidth": 2,
+            "labelOffsetMultiplier": 1.25,
+            "labelColor": "rgba(255, 64, 64, 1.0)"
+          },
+          "scaffolds": {
+            "borderColor": "rgba(255, 255, 0, 1)",
+            "fillColor": "rgba(64, 64, 255, 0.0)",
+            "width": 4,
+            "labelSize": 12,
+            "borderStyle": 0,
+            "namePlacement": "TOP",
+            "labelBold": true,
+            "labelOutline": true,
+            "labelOutlineWidth": 2,
+            "labelOffsetMultiplier": 1.25,
+            "labelColor": "rgba(255, 255, 0, 1)"
+          }
+        }
+      }
     ]
   }
 }
diff --git a/src/app/ui/MainUIComponent.vue b/src/app/ui/MainUIComponent.vue
index e230be6..5dc457a 100644
--- a/src/app/ui/MainUIComponent.vue
+++ b/src/app/ui/MainUIComponent.vue
@@ -211,6 +211,10 @@ function applyDefaultVisualizationPreset() {
   }
   const first = presets[0] as Record<string, unknown>;
   const opt = (first["options"] as Record<string, unknown>) ?? {};
+  const signalThresholds = first["signalThresholds"] as
+    | { lowerSignalBound?: number; upperSignalBound?: number }
+    | undefined;
+  const trackStyles = first["trackStyles"] as Record<string, unknown> | undefined;
   const cmap = (opt["colormap"] as Record<string, unknown>) ?? {};
   const startColor = (cmap["startColorRGBAString"] as string) ?? "rgba(0,255,0,0.0)";
   const endColor = (cmap["endColorRGBAString"] as string) ?? "rgba(0,96,0,1.0)";
@@ -228,6 +232,17 @@ function applyDefaultVisualizationPreset() {
     minSignal,
     maxSignal
   );
+  let finalCmap = cmapObj;
+  if (signalThresholds && typeof signalThresholds.lowerSignalBound === "number") {
+    finalCmap = new SimpleLinearGradient(
+      cmapObj.startColorRGBA,
+      cmapObj.endColorRGBA,
+      signalThresholds.lowerSignalBound,
+      typeof signalThresholds.upperSignalBound === "number"
+        ? signalThresholds.upperSignalBound
+        : cmapObj.maxSignal
+    );
+  }
   visualizationOptionsStore.setVisualizationOptions(
     new VisualizationOptions(
       preLogBase,
@@ -235,11 +250,14 @@ function applyDefaultVisualizationPreset() {
       applyCoolerWeights,
       resolutionScaling,
       resolutionLinearScaling,
-      cmapObj
+      finalCmap
     )
   );
   const bg = (first["backgroundColor"] as string) ?? "rgba(255,255,255,1)";
   stylesStore.setMapBackground(new ColorTranslator(bg, { legacyCSS: true }));
+  if (trackStyles && mapManager.value) {
+    mapManager.value.getLayersManager().applyTrackStylePreset(trackStyles as never);
+  }
   mapManager.value?.visualizationManager.sendVisualizationOptionsToServer().then(() => {
     mapManager.value?.reloadTiles();
   });
diff --git a/src/app/ui/components/sidebar/SavedVisualOptions.vue b/src/app/ui/components/sidebar/SavedVisualOptions.vue
index fc24c8a..4fc4cf6 100644
--- a/src/app/ui/components/sidebar/SavedVisualOptions.vue
+++ b/src/app/ui/components/sidebar/SavedVisualOptions.vue
@@ -66,6 +66,7 @@
         :visualization-options="opt.options"
         :background-color="opt.backgroundColor"
         :track-styles="opt.trackStyles"
+        :signal-thresholds="opt.signalThresholds"
         :name="opt.name"
         @remove="removeOption"
         @rename="renameOption"
@@ -116,6 +117,10 @@ const savedOptions = shallowRef(
       options: VisualizationOptions;
       backgroundColor: ColorTranslator;
       trackStyles?: TrackStylePresetBundle;
+      signalThresholds?: {
+        lowerSignalBound?: number;
+        upperSignalBound?: number;
+      };
     }
   >()
 );
@@ -151,6 +156,9 @@ function saveOptions() {
     options: visualizationOptionsStore.asVisualizationOptions(),
     backgroundColor: mapBackgroundColor.value as ColorTranslator,
     trackStyles: props.mapManager.getLayersManager().getTrackStylePreset(),
+    signalThresholds: extractSignalThresholds(
+      visualizationOptionsStore.asVisualizationOptions()
+    ),
   });
   bumpSavedOptions();
 }
@@ -184,7 +192,7 @@ function exportOptions() {
       name: v.name,
       backgroundColor: colorToString(v.backgroundColor),
       trackStyles: v.trackStyles,
-      signalThresholds: extractSignalThresholds(v.options),
+      signalThresholds: v.signalThresholds ?? extractSignalThresholds(v.options),
     })
   );
 
@@ -244,6 +252,7 @@ function loadFromSessionStore() {
       options: deserializeVisualizationOptions(opt.options ?? {}),
       backgroundColor,
       trackStyles: opt.trackStyles as TrackStylePresetBundle | undefined,
+      signalThresholds: opt.signalThresholds,
     });
   });
   bumpSavedOptions();
@@ -359,6 +368,7 @@ function importJSONResults(jsonPreResult: unknown) {
       backgroundColor,
       trackStyles: option.trackStyles,
       name: option.name ?? `Imported preset ${newId}`,
+      signalThresholds: option.signalThresholds,
     };
     const key = buildPresetKey(newOption);
     if (!existingKeys.has(key)) {
@@ -491,12 +501,14 @@ function buildPresetKey(opt: {
   options: VisualizationOptions;
   backgroundColor: ColorTranslator;
   trackStyles?: TrackStylePresetBundle;
+  signalThresholds?: { lowerSignalBound?: number; upperSignalBound?: number };
 }): string {
   const payload = {
     name: opt.name,
     options: serializeVisualizationOptions(opt.options),
     backgroundColor: colorToString(opt.backgroundColor),
     trackStyles: opt.trackStyles ?? null,
+    signalThresholds: opt.signalThresholds ?? null,
   };
   return stableStringify(payload);
 }
diff --git a/src/app/ui/components/sidebar/SavedVisualOptionsElement.vue b/src/app/ui/components/sidebar/SavedVisualOptionsElement.vue
index 3028e84..4c1e5b1 100644
--- a/src/app/ui/components/sidebar/SavedVisualOptionsElement.vue
+++ b/src/app/ui/components/sidebar/SavedVisualOptionsElement.vue
@@ -72,6 +72,7 @@ import { ref } from "vue";
 import { useVisualizationOptionsStore } from "@/app/stores/visualizationOptionsStore";
 import { storeToRefs } from "pinia";
 import { useStyleStore } from "@/app/stores/styleStore";
+import SimpleLinearGradient from "@/app/core/visualization/colormap/SimpleLinearGradient";
 import { ColorTranslator } from "colortranslator";
 
 const visualizationOptionsStore = useVisualizationOptionsStore();
@@ -89,6 +90,7 @@ const props = defineProps<{
   visualizationOptions: VisualizationOptions;
   backgroundColor: ColorTranslator;
   trackStyles?: TrackStylePresetBundle;
+  signalThresholds?: { lowerSignalBound?: number; upperSignalBound?: number };
 }>();
 
 const emits = defineEmits<{
@@ -111,6 +113,22 @@ function setOptionsPreset() {
     visualizationOptionsStore.setVisualizationOptions(
       props.visualizationOptions
     );
+    if (
+      props.signalThresholds &&
+      colormap.value instanceof SimpleLinearGradient
+    ) {
+      const lower = props.signalThresholds.lowerSignalBound;
+      const upper = props.signalThresholds.upperSignalBound;
+      if (typeof lower === "number") {
+        const cmap = colormap.value as SimpleLinearGradient;
+        colormap.value = new SimpleLinearGradient(
+          cmap.startColorRGBA,
+          cmap.endColorRGBA,
+          lower,
+          typeof upper === "number" ? upper : cmap.maxSignal
+        );
+      }
+    }
     stylesStore.setMapBackground(props.backgroundColor);
     if (props.trackStyles) {
       props.mapManager.getLayersManager().applyTrackStylePreset(props.trackStyles);

From 4248d6e735c4503b4bf59230fcb4eff57134983c Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Tue, 24 Feb 2026 05:13:13 +0400
Subject: [PATCH 17/27] Default option fixed

---
 src/app/core/visualization/colormap/default_options.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/core/visualization/colormap/default_options.json b/src/app/core/visualization/colormap/default_options.json
index bc7ec96..ba3e00a 100644
--- a/src/app/core/visualization/colormap/default_options.json
+++ b/src/app/core/visualization/colormap/default_options.json
@@ -34,7 +34,7 @@
             "labelOutline": true,
             "labelOutlineWidth": 2,
             "labelOffsetMultiplier": 1.25,
-            "labelColor": "rgba(61, 167, 221, 1)"
+            "labelColor": "rgba(255, 64, 64, 1.0)"
           },
           "scaffolds": {
             "borderColor": "rgba(100, 104, 111, 0.698)",
@@ -47,7 +47,7 @@
             "labelOutline": true,
             "labelOutlineWidth": 2,
             "labelOffsetMultiplier": 1.25,
-            "labelColor": "rgba(100, 104, 111, 0.698)"
+            "labelColor": "rgba(255, 255, 0, 1)"
           }
         }
       },

From 8cec7a25126b7958efde725ebee79b169f9f8ed0 Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Tue, 24 Feb 2026 05:39:35 +0400
Subject: [PATCH 18/27] Type fixes

---
 src/app/core/mapmanagers/HiCViewAndLayersManager.ts  | 4 ++--
 src/app/stores/sessionStore.ts                       | 2 +-
 src/app/ui/components/sidebar/SavedVisualOptions.vue | 3 ++-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
index 7550c69..36d7241 100644
--- a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
+++ b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
@@ -894,11 +894,11 @@ class HiCViewAndLayersManager {
   }
 
   public dispose(): void {
-    if (!this.map) {
+    if (!this.mapManager.getMap()) {
       return;
     }
     try {
-      this.map.getControls().clear();
+      this.mapManager.getMap().getControls().clear();
       const hTrack = document.getElementById("horizontal-igv-track-div");
       if (hTrack) {
         hTrack.replaceChildren();
diff --git a/src/app/stores/sessionStore.ts b/src/app/stores/sessionStore.ts
index 86c8a44..5c382fe 100644
--- a/src/app/stores/sessionStore.ts
+++ b/src/app/stores/sessionStore.ts
@@ -14,7 +14,7 @@ export interface SessionVisualizationPreset {
   backgroundColor: string;
   name: string;
   trackStyles?: Record<string, unknown>;
-  signalThresholds?: { min: number; max: number };
+  signalThresholds?: { lowerSignalBound?: number; upperSignalBound?: number };
 }
 
 export const useSessionStore = defineStore("sessionStore", () => {
diff --git a/src/app/ui/components/sidebar/SavedVisualOptions.vue b/src/app/ui/components/sidebar/SavedVisualOptions.vue
index 4fc4cf6..293a9c3 100644
--- a/src/app/ui/components/sidebar/SavedVisualOptions.vue
+++ b/src/app/ui/components/sidebar/SavedVisualOptions.vue
@@ -183,6 +183,7 @@ function exportOptions() {
     backgroundColor: string; // <-- stable
     name: string;
     trackStyles?: TrackStylePresetBundle;
+    signalThresholds?: { lowerSignalBound?: number; upperSignalBound?: number };
   }[] = [];
 
   savedOptions.value.forEach((v) =>
@@ -223,7 +224,7 @@ function syncSessionStore() {
     backgroundColor: string;
     name: string;
     trackStyles?: TrackStylePresetBundle;
-    signalThresholds?: { min: number; max: number };
+    signalThresholds?: { lowerSignalBound?: number; upperSignalBound?: number };
   }[] = [];
   savedOptions.value.forEach((v) =>
     values.push({

From 9230b3793d23d47fd769ef463cd2f496374d1c9b Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Tue, 24 Feb 2026 06:10:27 +0400
Subject: [PATCH 19/27] Added priority parameter for tile fetcher, currently
 unused

---
 src/app/core/mapmanagers/ContactMapManager.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/core/mapmanagers/ContactMapManager.ts b/src/app/core/mapmanagers/ContactMapManager.ts
index a6cd760..2389b08 100644
--- a/src/app/core/mapmanagers/ContactMapManager.ts
+++ b/src/app/core/mapmanagers/ContactMapManager.ts
@@ -220,7 +220,9 @@ class ContactMapManager {
       for (let col = 0; col < tilesPerSide; col++) {
         const url = tileUrlFn([0, col, row], pixelRatio, projection);
         if (url) {
-          tiles.push({ col, row, url });
+          const withPriority =
+            url.indexOf("?") >= 0 ? `${url}&priority=low` : `${url}?priority=low`;
+          tiles.push({ col, row, url: withPriority });
         }
       }
     }

From 2cc0903e2786826220682dc3fcb580f5b93217d7 Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Tue, 24 Feb 2026 06:25:49 +0400
Subject: [PATCH 20/27] Debugging frozen UI in jar distribution after opening
 contact map

---
 src/app/core/net/NetworkManager.ts            |  3 +-
 src/app/core/net/api/RequestManager.ts        | 21 ++++++-
 src/app/core/net/dto/dto.ts                   | 41 ++++++++++---
 src/app/ui/MainUIComponent.vue                | 27 +++++++--
 .../sidebar/VisualziationSettingsEditor.vue   | 59 +++++++++++++++----
 5 files changed, 122 insertions(+), 29 deletions(-)

diff --git a/src/app/core/net/NetworkManager.ts b/src/app/core/net/NetworkManager.ts
index b46ab78..f946d75 100644
--- a/src/app/core/net/NetworkManager.ts
+++ b/src/app/core/net/NetworkManager.ts
@@ -25,11 +25,12 @@ import { RequestManager } from "./api/RequestManager";
 class NetworkManager {
   public readonly requestManager: RequestManager;
   constructor(public host: string, public mapManager?: ContactMapManager) {
+    this.host = host.replace(/\/+$/, "");
     this.requestManager = new RequestManager(this);
   }
 
   public onHostChanged(newHost: string): void {
-    this.host = newHost;
+    this.host = newHost.replace(/\/+$/, "");
   }
 }
 
diff --git a/src/app/core/net/api/RequestManager.ts b/src/app/core/net/api/RequestManager.ts
index bec3c88..930fc29 100644
--- a/src/app/core/net/api/RequestManager.ts
+++ b/src/app/core/net/api/RequestManager.ts
@@ -97,13 +97,29 @@ class RequestManager {
   ): Promise<AxiosResponse> {
     const host = this.networkManager.host.replace(/\/+$/, "");
     const path = request.requestPath.replace(/^\/+/, "");
+    const mergedConfig: AxiosRequestConfig = {
+      ...(axiosConfig ?? {}),
+      headers: {
+        Accept: "application/json",
+        ...((axiosConfig ?? {}).headers ?? {}),
+      },
+    };
     return axios
       .post(
         `${host}/${path}`,
         HiCTAPIRequestDTO.toDTOClass(request).toDTO(),
-        axiosConfig ?? undefined
+        mergedConfig
       )
       .then((req) => {
+        if (typeof req.data === "string") {
+          try {
+            req.data = JSON.parse(req.data);
+          } catch (e) {
+            throw new Error(
+              `Invalid response from ${request.requestPath}: ${req.data.slice(0, 200)}`
+            );
+          }
+        }
         if (req instanceof InboundDTO) {
           if (req.error) {
             toast.error(req.error);
@@ -287,8 +303,9 @@ class RequestManager {
   }
 
   public async getBackendVersion(): Promise<{ version: string; webuiVersion?: string } | string> {
+    const host = this.networkManager.host.replace(/\/+$/, "");
     return axios
-      .get(`${this.networkManager.host}/version`)
+      .get(`${host}/version`)
       .then((resp) => resp.data ?? { version: "unknown" })
       .catch(() => "unknown");
   }
diff --git a/src/app/core/net/dto/dto.ts b/src/app/core/net/dto/dto.ts
index ecd2596..f1455f1 100644
--- a/src/app/core/net/dto/dto.ts
+++ b/src/app/core/net/dto/dto.ts
@@ -166,6 +166,17 @@ class OpenFileResponseDTO extends InboundDTO<OpenFileResponse> {
 }
 
 class SimpleLinearGradientDTO extends InboundDTO<SimpleLinearGradient> {
+  private static safeColor(value: unknown, fallback: string): ColorTranslator {
+    if (typeof value !== "string" || value.length > 128) {
+      return new ColorTranslator(fallback, { legacyCSS: true });
+    }
+    try {
+      return new ColorTranslator(value, { legacyCSS: true });
+    } catch {
+      return new ColorTranslator(fallback, { legacyCSS: true });
+    }
+  }
+
   public static fromEntity(e: SimpleLinearGradient) {
     return new SimpleLinearGradientDTO({
       startColorRGBAString: e.startColorRGBA.RGBA,
@@ -176,15 +187,29 @@ class SimpleLinearGradientDTO extends InboundDTO<SimpleLinearGradient> {
   }
 
   public toEntity(): SimpleLinearGradient {
+    const start = SimpleLinearGradientDTO.safeColor(
+      this.json["startColorRGBAString"],
+      "rgba(0,255,0,0.0)"
+    );
+    const end = SimpleLinearGradientDTO.safeColor(
+      this.json["endColorRGBAString"],
+      "rgba(0,96,0,1.0)"
+    );
+    const minSignalRaw = this.json["minSignal"];
+    const maxSignalRaw = this.json["maxSignal"];
+    const minSignal =
+      typeof minSignalRaw === "number" && Number.isFinite(minSignalRaw)
+        ? minSignalRaw
+        : 0;
+    const maxSignal =
+      typeof maxSignalRaw === "number" && Number.isFinite(maxSignalRaw)
+        ? maxSignalRaw
+        : 1;
     return new SimpleLinearGradient(
-      new ColorTranslator(this.json["startColorRGBAString"] as string, {
-        legacyCSS: true,
-      }),
-      new ColorTranslator(this.json["endColorRGBAString"] as string, {
-        legacyCSS: true,
-      }),
-      this.json["minSignal"] as number,
-      this.json["maxSignal"] as number
+      start,
+      end,
+      minSignal,
+      maxSignal
     );
   }
 }
diff --git a/src/app/ui/MainUIComponent.vue b/src/app/ui/MainUIComponent.vue
index 5dc457a..d8d8437 100644
--- a/src/app/ui/MainUIComponent.vue
+++ b/src/app/ui/MainUIComponent.vue
@@ -94,6 +94,17 @@ const htmlElementReferencesStore = usehtmlElementReferencesStore();
 const { mapTarget, miniMapTarget } = storeToRefs(htmlElementReferencesStore);
 const lastAgpFilename: Ref<string> = ref("");
 
+function safeColorTranslator(value: unknown, fallback: string): ColorTranslator {
+  if (typeof value !== "string" || value.length > 128) {
+    return new ColorTranslator(fallback, { legacyCSS: true });
+  }
+  try {
+    return new ColorTranslator(value, { legacyCSS: true });
+  } catch {
+    return new ColorTranslator(fallback, { legacyCSS: true });
+  }
+}
+
 function resetState() {
   mapManager.value?.dispose();
   filename.value = "";
@@ -227,8 +238,8 @@ function applyDefaultVisualizationPreset() {
   const resolutionLinearScaling =
     (opt["resolutionLinearScaling"] as boolean) ?? false;
   const cmapObj = new SimpleLinearGradient(
-    new ColorTranslator(startColor, { legacyCSS: true }),
-    new ColorTranslator(endColor, { legacyCSS: true }),
+    safeColorTranslator(startColor, "rgba(0,255,0,0.0)"),
+    safeColorTranslator(endColor, "rgba(0,96,0,1.0)"),
     minSignal,
     maxSignal
   );
@@ -254,7 +265,9 @@ function applyDefaultVisualizationPreset() {
     )
   );
   const bg = (first["backgroundColor"] as string) ?? "rgba(255,255,255,1)";
-  stylesStore.setMapBackground(new ColorTranslator(bg, { legacyCSS: true }));
+  stylesStore.setMapBackground(
+    safeColorTranslator(bg, "rgba(255,255,255,1)")
+  );
   if (trackStyles && mapManager.value) {
     mapManager.value.getLayersManager().applyTrackStylePreset(trackStyles as never);
   }
@@ -416,8 +429,8 @@ async function onOpenSession(file: File): Promise<void> {
       const resolutionLinearScaling =
         (visRaw["resolutionLinearScaling"] as boolean) ?? false;
       const cmapObj = new SimpleLinearGradient(
-        new ColorTranslator(startColor, { legacyCSS: true }),
-        new ColorTranslator(endColor, { legacyCSS: true }),
+        safeColorTranslator(startColor, "rgba(0,255,0,0.0)"),
+        safeColorTranslator(endColor, "rgba(0,96,0,1.0)"),
         minSignal,
         maxSignal
       );
@@ -435,7 +448,9 @@ async function onOpenSession(file: File): Promise<void> {
 
     const bg = (session["backgroundColor"] as string) ?? null;
     if (bg) {
-      stylesStore.setMapBackground(new ColorTranslator(bg, { legacyCSS: true }));
+      stylesStore.setMapBackground(
+        safeColorTranslator(bg, "rgba(255,255,255,1)")
+      );
     }
 
     const trackStyles = session["trackStyles"] as Record<string, unknown>;
diff --git a/src/app/ui/components/sidebar/VisualziationSettingsEditor.vue b/src/app/ui/components/sidebar/VisualziationSettingsEditor.vue
index 6a0d025..c7c9178 100644
--- a/src/app/ui/components/sidebar/VisualziationSettingsEditor.vue
+++ b/src/app/ui/components/sidebar/VisualziationSettingsEditor.vue
@@ -115,6 +115,7 @@ const toColor = ref(
 ) as Ref<ColorTranslator>;
 const lowerBound: Ref<number> = ref(signalMin.value);
 const upperBound: Ref<number> = ref(signalMax.value);
+const syncingFromColormap: Ref<boolean> = ref(false);
 
 const fromColorFn: Ref<() => ColorTranslator> = ref(
   () => fromColor.value
@@ -145,13 +146,19 @@ watch(
   },
   () => {
     if (colormap.value instanceof SimpleLinearGradient) {
+      syncingFromColormap.value = true;
       // console.log("Colormap type changed and simple linear gradient, was: ", fromColor.value, toColor.value);
       const cmap = colormap.value as SimpleLinearGradient;
-      fromColor.value = cmap.startColorRGBA;
-      toColor.value = cmap.endColorRGBA;
+      if (fromColor.value?.RGBA !== cmap.startColorRGBA?.RGBA) {
+        fromColor.value = cmap.startColorRGBA;
+      }
+      if (toColor.value?.RGBA !== cmap.endColorRGBA?.RGBA) {
+        toColor.value = cmap.endColorRGBA;
+      }
       fromColorFn.value = () => fromColor.value;
       toColorFn.value = () => toColor.value;
       // console.log("Now: ", fromColor.value, toColor.value);
+      syncingFromColormap.value = false;
     }
   }
 );
@@ -160,9 +167,15 @@ watch(
   () => colormap.value,
   () => {
     if (colormap.value instanceof SimpleLinearGradient) {
+      syncingFromColormap.value = true;
       const cmap = colormap.value as SimpleLinearGradient;
-      lowerBound.value = cmap.minSignal;
-      upperBound.value = cmap.maxSignal;
+      if (lowerBound.value !== cmap.minSignal) {
+        lowerBound.value = cmap.minSignal;
+      }
+      if (upperBound.value !== cmap.maxSignal) {
+        upperBound.value = cmap.maxSignal;
+      }
+      syncingFromColormap.value = false;
     }
   },
   { deep: false }
@@ -178,6 +191,9 @@ watch(
     signalMax.value,
   ],
   () => {
+    if (syncingFromColormap.value) {
+      return;
+    }
     gradstyle.value["background-image"] =
       "linear-gradient(to right," +
       fromColor.value +
@@ -186,12 +202,25 @@ watch(
       ")";
     fromColorFn.value = () => fromColor.value;
     toColorFn.value = () => toColor.value;
-    colormap.value = new SimpleLinearGradient(
-      fromColor.value,
-      toColor.value,
-      lowerBound.value,
-      upperBound.value
-    );
+    const nextMin = lowerBound.value;
+    const nextMax = upperBound.value;
+    const existing = colormap.value;
+    const fromRGBA = fromColor.value?.RGBA ?? "";
+    const toRGBA = toColor.value?.RGBA ?? "";
+    if (
+      !(existing instanceof SimpleLinearGradient) ||
+      existing.minSignal !== nextMin ||
+      existing.maxSignal !== nextMax ||
+      existing.startColorRGBA?.RGBA !== fromRGBA ||
+      existing.endColorRGBA?.RGBA !== toRGBA
+    ) {
+      colormap.value = new SimpleLinearGradient(
+        fromColor.value,
+        toColor.value,
+        nextMin,
+        nextMax
+      );
+    }
     // console.log("UpperBound", upperBound.value);
   }
 );
@@ -219,10 +248,16 @@ function updateFromStore() {
   if (cmap) {
     switch (true) {
       case cmap instanceof SimpleLinearGradient: {
+        syncingFromColormap.value = true;
         const grad = cmap as SimpleLinearGradient;
-        fromColor.value = grad.startColorRGBA;
-        toColor.value = grad.endColorRGBA;
+        if (fromColor.value?.RGBA !== grad.startColorRGBA?.RGBA) {
+          fromColor.value = grad.startColorRGBA;
+        }
+        if (toColor.value?.RGBA !== grad.endColorRGBA?.RGBA) {
+          toColor.value = grad.endColorRGBA;
+        }
         console.log("Updated: ", fromColor.value, toColor.value);
+        syncingFromColormap.value = false;
         break;
       }
       default:

From bce170a3601267906016ef5617cd2e9087e67c1c Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Tue, 24 Feb 2026 06:49:02 +0400
Subject: [PATCH 21/27] Hotfix the infinite loop issue

---
 .../components/sidebar/SavedVisualOptions.vue   | 16 ++++++++++++++--
 .../sidebar/VisualziationSettingsEditor.vue     | 17 ++++++++++++-----
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/app/ui/components/sidebar/SavedVisualOptions.vue b/src/app/ui/components/sidebar/SavedVisualOptions.vue
index 293a9c3..bb448b1 100644
--- a/src/app/ui/components/sidebar/SavedVisualOptions.vue
+++ b/src/app/ui/components/sidebar/SavedVisualOptions.vue
@@ -124,9 +124,18 @@ const savedOptions = shallowRef(
     }
   >()
 );
+const syncingFromSession = ref(false);
 
-function bumpSavedOptions() {
+function triggerSavedOptions() {
   triggerRef(savedOptions);
+}
+
+function bumpSavedOptions() {
+  if (syncingFromSession.value) {
+    triggerSavedOptions();
+    return;
+  }
+  triggerSavedOptions();
   syncSessionStore();
 }
 
@@ -240,6 +249,7 @@ function syncSessionStore() {
 }
 
 function loadFromSessionStore() {
+  syncingFromSession.value = true;
   const presets = sessionStore.savedVisualizationPresets;
   savedOptions.value.clear();
   presets.forEach((opt, idx) => {
@@ -256,7 +266,8 @@ function loadFromSessionStore() {
       signalThresholds: opt.signalThresholds,
     });
   });
-  bumpSavedOptions();
+  triggerSavedOptions();
+  syncingFromSession.value = false;
 }
 
 watch(
@@ -268,6 +279,7 @@ watch(
       backgroundColor: colorToString(v.backgroundColor),
       name: v.name,
       trackStyles: v.trackStyles,
+      signalThresholds: v.signalThresholds ?? extractSignalThresholds(v.options),
     }));
     const next = sessionStore.savedVisualizationPresets;
     if (JSON.stringify(current) !== JSON.stringify(next)) {
diff --git a/src/app/ui/components/sidebar/VisualziationSettingsEditor.vue b/src/app/ui/components/sidebar/VisualziationSettingsEditor.vue
index c7c9178..d1e766d 100644
--- a/src/app/ui/components/sidebar/VisualziationSettingsEditor.vue
+++ b/src/app/ui/components/sidebar/VisualziationSettingsEditor.vue
@@ -158,9 +158,12 @@ watch(
       fromColorFn.value = () => fromColor.value;
       toColorFn.value = () => toColor.value;
       // console.log("Now: ", fromColor.value, toColor.value);
-      syncingFromColormap.value = false;
+      queueMicrotask(() => {
+        syncingFromColormap.value = false;
+      });
     }
-  }
+  },
+  { flush: "sync" }
 );
 
 watch(
@@ -175,10 +178,12 @@ watch(
       if (upperBound.value !== cmap.maxSignal) {
         upperBound.value = cmap.maxSignal;
       }
-      syncingFromColormap.value = false;
+      queueMicrotask(() => {
+        syncingFromColormap.value = false;
+      });
     }
   },
-  { deep: false }
+  { deep: false, flush: "sync" }
 );
 
 watch(
@@ -257,7 +262,9 @@ function updateFromStore() {
           toColor.value = grad.endColorRGBA;
         }
         console.log("Updated: ", fromColor.value, toColor.value);
-        syncingFromColormap.value = false;
+        queueMicrotask(() => {
+          syncingFromColormap.value = false;
+        });
         break;
       }
       default:

From 1a023688dacef474ba101fbfda7458c2395e1083 Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Tue, 24 Feb 2026 20:04:48 +0400
Subject: [PATCH 22/27] File open performance degradation fixed

---
 src/app/core/net/api/RequestManager.ts | 12 ++++
 src/app/core/net/api/request.ts        |  6 ++
 src/app/core/net/dto/requestDTO.ts     |  9 +++
 src/app/ui/MainUIComponent.vue         | 86 ++++++++++++++++++++++++++
 4 files changed, 113 insertions(+)

diff --git a/src/app/core/net/api/RequestManager.ts b/src/app/core/net/api/RequestManager.ts
index 930fc29..9089d78 100644
--- a/src/app/core/net/api/RequestManager.ts
+++ b/src/app/core/net/api/RequestManager.ts
@@ -73,6 +73,7 @@ import {
   ReloadTilesRequest,
   AttachSessionRequest,
   CloseFileRequest,
+  OpenProgressRequest,
 } from "./request";
 import {
   ConversionJobResponse,
@@ -165,6 +166,17 @@ class RequestManager {
       .then((json) => new OpenFileResponseDTO(json).toEntity());
   }
 
+  public async getOpenProgress(): Promise<{ stage: string; progress: number }> {
+    return this.sendRequest(new OpenProgressRequest())
+      .then((response) => response.data)
+      .then((json) => {
+        return {
+          stage: String((json as Record<string, unknown>)?.stage ?? "unknown"),
+          progress: Number((json as Record<string, unknown>)?.progress ?? 0),
+        };
+      });
+  }
+
   public async closeFile(): Promise<void> {
     await this.sendRequest(new CloseFileRequest());
   }
diff --git a/src/app/core/net/api/request.ts b/src/app/core/net/api/request.ts
index 5f6a262..6ccfc59 100644
--- a/src/app/core/net/api/request.ts
+++ b/src/app/core/net/api/request.ts
@@ -308,6 +308,11 @@ class LoadAGPRequest implements HiCTAPIRequest {
   ) {}
 }
 
+class OpenProgressRequest implements HiCTAPIRequest {
+  requestPath = "/open_progress";
+  public constructor() {}
+}
+
 class GetVisualizationOptionsRequest implements HiCTAPIRequest {
   requestPath = "/get_visualization_options";
 
@@ -364,6 +369,7 @@ export {
   MoveSelectionRangeRequest,
   ListAGPFilesRequest,
   LoadAGPRequest,
+  OpenProgressRequest,
   GetFastaForSelectionRequest,
   SetNormalizationRequest,
   SetContrastRangeRequest,
diff --git a/src/app/core/net/dto/requestDTO.ts b/src/app/core/net/dto/requestDTO.ts
index 78b160c..68492e3 100644
--- a/src/app/core/net/dto/requestDTO.ts
+++ b/src/app/core/net/dto/requestDTO.ts
@@ -34,6 +34,7 @@ import {
   MoveSelectionRangeRequest,
   ListAGPFilesRequest,
   LoadAGPRequest,
+  OpenProgressRequest,
   GetFastaForSelectionRequest,
   SetNormalizationRequest,
   SetContrastRangeRequest,
@@ -146,6 +147,8 @@ abstract class HiCTAPIRequestDTO<
         return new ListAGPFilesRequestDTO(entity);
       case entity instanceof LoadAGPRequest:
         return new LoadAGPRequestDTO(entity as LoadAGPRequest);
+      case entity instanceof OpenProgressRequest:
+        return new OpenProgressRequestDTO(entity);
       case entity instanceof CloseFileRequest:
         return new CloseFileRequestDTO(entity as CloseFileRequest);
       case entity instanceof AttachSessionRequest:
@@ -186,6 +189,12 @@ class GetVisualizationOptionsRequestDTO extends HiCTAPIRequestDTO<GetVisualizati
   }
 }
 
+class OpenProgressRequestDTO extends HiCTAPIRequestDTO<OpenProgressRequest> {
+  toDTO(): Record<string, unknown> {
+    return {};
+  }
+}
+
 class SetVisualizationOptionsRequestDTO extends HiCTAPIRequestDTO<SetVisualizationOptionsRequest> {
   toDTO(): Record<string, unknown> {
     return {
diff --git a/src/app/ui/MainUIComponent.vue b/src/app/ui/MainUIComponent.vue
index d8d8437..3abc36f 100644
--- a/src/app/ui/MainUIComponent.vue
+++ b/src/app/ui/MainUIComponent.vue
@@ -23,6 +23,44 @@
   <Toaster position="bottom-right" />
   <!-- <button @click="() => toast('My first toast')">Render a toast</button> -->
   <div class="main-ui-component">
+    <div v-if="openProgressVisible">
+      <div class="modal-backdrop fade show open-progress-backdrop"></div>
+      <div
+        class="modal fade show open-progress-modal"
+        style="display: block"
+        tabindex="-1"
+        role="dialog"
+      >
+        <div class="modal-dialog modal-dialog-centered">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">Opening file</h5>
+              <button type="button" class="btn-close" @click="closeOpenProgress"></button>
+            </div>
+            <div class="modal-body">
+              <div class="mb-2">{{ openProgressStage }}</div>
+              <div class="progress">
+                <div
+                  class="progress-bar"
+                  role="progressbar"
+                  :style="{ width: `${openProgressPct}%` }"
+                  :aria-valuenow="openProgressPct"
+                  aria-valuemin="0"
+                  aria-valuemax="100"
+                >
+                  {{ openProgressPct }}%
+                </div>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-secondary" @click="closeOpenProgress">
+                Hide
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <UpperFrame
       :networkManager="networkManager"
       :mapManager="mapManager"
@@ -93,6 +131,44 @@ const sessionStore = useSessionStore();
 const htmlElementReferencesStore = usehtmlElementReferencesStore();
 const { mapTarget, miniMapTarget } = storeToRefs(htmlElementReferencesStore);
 const lastAgpFilename: Ref<string> = ref("");
+let openProgressTimer: number | undefined;
+const openProgressVisible = ref(false);
+const openProgressStage = ref("starting");
+const openProgressPct = ref(0);
+let openProgressInFlight = false;
+
+function startOpenProgress() {
+  if (openProgressTimer !== undefined) {
+    return;
+  }
+  openProgressVisible.value = true;
+  openProgressTimer = window.setInterval(() => {
+    if (openProgressInFlight) return;
+    openProgressInFlight = true;
+    networkManager.requestManager
+      .getOpenProgress()
+      .then((p) => {
+        openProgressStage.value = p.stage ?? "working";
+        openProgressPct.value = Math.max(0, Math.min(100, Math.round((p.progress ?? 0) * 100)));
+      })
+      .catch(() => undefined)
+      .finally(() => {
+        openProgressInFlight = false;
+      });
+  }, 500);
+}
+
+function stopOpenProgress() {
+  if (openProgressTimer !== undefined) {
+    window.clearInterval(openProgressTimer);
+    openProgressTimer = undefined;
+  }
+  openProgressVisible.value = false;
+}
+
+function closeOpenProgress() {
+  openProgressVisible.value = false;
+}
 
 function safeColorTranslator(value: unknown, fallback: string): ColorTranslator {
   if (typeof value !== "string" || value.length > 128) {
@@ -165,6 +241,7 @@ async function openFileWithOptions(
   fname: string,
   ffname: string | undefined
 ): Promise<void> {
+  startOpenProgress();
   const openFileResponse = await networkManager.requestManager.openFile(
     fname,
     ffname
@@ -184,6 +261,7 @@ async function openFileWithOptions(
   networkManager.mapManager = mapManager.value;
   newManager.initializeMap();
   applyDefaultVisualizationPreset();
+  stopOpenProgress();
 }
 
 function displayNewMap() {
@@ -205,6 +283,7 @@ function displayNewMap() {
     .catch((a) => {
       console.log(a);
       toast.error(a);
+      stopOpenProgress();
     });
 }
 
@@ -528,4 +607,11 @@ function onFileSelected(newFilename: string) {
   width: 100%;
   height: 100vh;
 }
+
+.open-progress-modal {
+  z-index: 1055;
+}
+.open-progress-backdrop {
+  z-index: 1050;
+}
 </style>

From e652be6af771b3b795f41765bb041f560e129f6f Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Sat, 21 Mar 2026 01:11:39 +0400
Subject: [PATCH 23/27] Modern attempt to add support for 1D tracks rendering,
 still not working well

---
 src/app/core/controls/RulerControl.ts         |  10 +-
 src/app/core/domain/ContigDescriptor.ts       |   2 +
 src/app/core/mapmanagers/ContactMapManager.ts |  11 +-
 .../core/mapmanagers/ContigDimensionHolder.ts |  83 +++
 .../mapmanagers/HiCViewAndLayersManager.ts    | 100 ++-
 .../core/mapmanagers/LinearTrackManager.ts    | 577 ++++++++++++++++++
 src/app/core/net/api/RequestManager.ts        |  83 ++-
 src/app/core/net/api/request.ts               |  64 ++
 src/app/core/net/api/response.ts              |  88 +++
 src/app/core/net/dto/dto.ts                   |   4 +
 src/app/core/net/dto/requestDTO.ts            |  78 +++
 src/app/core/net/dto/responseDTO.ts           | 113 ++++
 src/app/core/tracks/Track2DAnnotations.ts     | 320 ++++++++++
 src/app/core/tracks/Track2DSymmetric.ts       |   2 +-
 src/app/stores/notificationCenterStore.ts     |  58 ++
 src/app/ui/MainUIComponent.vue                |  34 +-
 .../notifications/NotificationCenterModal.vue | 201 ++++++
 .../toolbar/bottom_blocks/BottomButtons.vue   |  37 +-
 .../components/tracks/HorizontalIGVTrack.vue  | 134 +++-
 .../ui/components/tracks/VerticalIGVTrack.vue | 138 ++++-
 .../upper_ribbon/FastaLinkWarningModal.vue    | 137 +++++
 .../components/upper_ribbon/NavigationBar.vue |  92 ++-
 .../components/upper_ribbon/TrackManager.vue  | 353 +++++++++++
 .../workspace/InteractiveWorkspace.vue        | 138 ++++-
 src/main.ts                                   |  95 ++-
 25 files changed, 2870 insertions(+), 82 deletions(-)
 create mode 100644 src/app/core/mapmanagers/LinearTrackManager.ts
 create mode 100644 src/app/core/tracks/Track2DAnnotations.ts
 create mode 100644 src/app/stores/notificationCenterStore.ts
 create mode 100644 src/app/ui/components/notifications/NotificationCenterModal.vue
 create mode 100644 src/app/ui/components/upper_ribbon/FastaLinkWarningModal.vue
 create mode 100644 src/app/ui/components/upper_ribbon/TrackManager.vue

diff --git a/src/app/core/controls/RulerControl.ts b/src/app/core/controls/RulerControl.ts
index 33498ec..f60e560 100644
--- a/src/app/core/controls/RulerControl.ts
+++ b/src/app/core/controls/RulerControl.ts
@@ -69,7 +69,7 @@ class RulerControl extends Control {
           ? document.getElementById(opt_options.target as string)
           : (opt_options.target as HTMLElement);
       if (parent) {
-        parent?.appendChild(canvas);
+        parent.appendChild(canvas);
       } else {
         throw new Error(
           "Cannot find parent element for RulerControl with target " +
@@ -121,9 +121,11 @@ class RulerControl extends Control {
   render(mapEvent: MapEvent) {
     //this.updateCanvasSize();
     const map = mapEvent.map;
-    // const size = this.canvasSize; //map.getSize() as [number, number];
-    this.canvas.width = this.canvasSize[0];
-    this.canvas.height = this.canvasSize[1];
+    const parent = this.canvas.parentElement;
+    const width = parent ? Math.max(1, Math.floor(parent.clientWidth)) : this.canvasSize[0];
+    const height = parent ? Math.max(1, Math.floor(parent.clientHeight)) : this.canvasSize[1];
+    this.canvas.width = width;
+    this.canvas.height = height;
     const context = this.canvas.getContext("2d");
     console.log("Got context: ", context, "RulerControl: ", this);
     if (!context) return;
diff --git a/src/app/core/domain/ContigDescriptor.ts b/src/app/core/domain/ContigDescriptor.ts
index fdf522b..adcb46c 100644
--- a/src/app/core/domain/ContigDescriptor.ts
+++ b/src/app/core/domain/ContigDescriptor.ts
@@ -25,6 +25,8 @@ interface ContigDescriptor {
   contigId: number;
   contigName: string;
   contigOriginalName: string;
+  contigSourceName: string;
+  contigOffsetInSource: number;
   contigLengthBp: number;
   contigLengthBins: Map<number, number>;
   direction: ContigDirection;
diff --git a/src/app/core/mapmanagers/ContactMapManager.ts b/src/app/core/mapmanagers/ContactMapManager.ts
index 2389b08..e8ac96e 100644
--- a/src/app/core/mapmanagers/ContactMapManager.ts
+++ b/src/app/core/mapmanagers/ContactMapManager.ts
@@ -35,6 +35,7 @@ import { CurrentSignalRangeResponse } from "../net/api/response";
 import { VisualizationManager } from "./VisualizationManager";
 import { Ref } from "vue";
 import { VersionedXYZContactMapSource } from "../VersionedXYZSource";
+import { LinearTrackManager } from "./LinearTrackManager";
 
 class ContactMapManager {
   public readonly map: Map;
@@ -46,6 +47,7 @@ class ContactMapManager {
   public sizeObserver?: ResizeObserver;
   public readonly toastHandlers: (() => void)[] = [];
   public readonly visualizationManager: VisualizationManager;
+  public readonly linearTrackManager: LinearTrackManager;
   public minimap: OverviewMap | null;
 
   constructor(
@@ -77,14 +79,15 @@ class ContactMapManager {
       options.response
     );
 
-    this.visualizationManager = new VisualizationManager(this);
-    this.visualizationManager.fetchVisualizationOptions();
-
     this.map = new Map({
       layers: [],
       interactions: [],
     });
 
+    this.visualizationManager = new VisualizationManager(this);
+    this.visualizationManager.fetchVisualizationOptions();
+    this.linearTrackManager = new LinearTrackManager(this);
+
     this.minimap = null;
   }
 
@@ -101,6 +104,7 @@ class ContactMapManager {
     this.viewAndLayersManager.initializeTracks();
     this.initializeMapInteractions();
     this.initializeMapControls();
+    void this.linearTrackManager.refreshTrackList();
     console.log("Map initialized. Contact map manager: ", this);
   }
 
@@ -577,6 +581,7 @@ class ContactMapManager {
   }
 
   public dispose() {
+    this.linearTrackManager.dispose();
     this.viewAndLayersManager?.dispose?.();
     this.map.setTarget(undefined);
   }
diff --git a/src/app/core/mapmanagers/ContigDimensionHolder.ts b/src/app/core/mapmanagers/ContigDimensionHolder.ts
index 5f003cf..6ae9743 100644
--- a/src/app/core/mapmanagers/ContigDimensionHolder.ts
+++ b/src/app/core/mapmanagers/ContigDimensionHolder.ts
@@ -480,6 +480,20 @@ export default class ContigDimensionHolder {
     return this.contigDescriptors[contig_ord].contigName;
   }
 
+  public isBpVisibleAtResolution(bp: number, resolution: number): boolean {
+    if (this.contig_count <= 0) {
+      return false;
+    }
+    const contigOrd = this.getContigOrderByBp_internal(bp);
+    const hideType = this.contigDescriptors[contigOrd].presenceAtResolution.get(
+      resolution
+    );
+    return (
+      hideType !== ContigHideType.AUTO_HIDDEN &&
+      hideType !== ContigHideType.FORCED_HIDDEN
+    );
+  }
+
   public getContigIdByContigOrder(contig_order: number): number {
     if (0 <= contig_order && contig_order < this.contig_count) {
       return this.contigDescriptors[contig_order].contigId;
@@ -517,4 +531,73 @@ export default class ContigDimensionHolder {
   public binsToPixels(bin_ids: number[], resolution: number): number[] {
     return bin_ids.map((bin_id) => this.binToPixel(bin_id, resolution));
   }
+
+  public getSourceLocusByBp(bp: number): {
+    sourceContig: string;
+    sourceBp: number;
+  } {
+    const contigOrd = this.getContigOrderByBp_internal(bp);
+    const descriptor = this.contigDescriptors[contigOrd];
+    const contigStartBp = this.prefix_sum_bp[contigOrd];
+    const inContigOffset = CommonUtils.clamp(
+      bp - contigStartBp,
+      0,
+      Math.max(0, descriptor.contigLengthBp - 1)
+    );
+    if (descriptor.direction === ContigDirection.FORWARD) {
+      return {
+        sourceContig: descriptor.contigSourceName,
+        sourceBp: descriptor.contigOffsetInSource + inContigOffset,
+      };
+    }
+    return {
+      sourceContig: descriptor.contigSourceName,
+      sourceBp:
+        descriptor.contigOffsetInSource +
+        (descriptor.contigLengthBp - 1 - inContigOffset),
+    };
+  }
+
+  public projectSourceIntervalToAssembly(
+    sourceContig: string,
+    sourceStartBp: number,
+    sourceEndBp: number
+  ): Array<{ startBp: number; endBp: number }> {
+    const start = Math.min(sourceStartBp, sourceEndBp);
+    const end = Math.max(sourceStartBp, sourceEndBp);
+    if (end <= start) {
+      return [];
+    }
+    const result: Array<{ startBp: number; endBp: number }> = [];
+    for (let i = 0; i < this.contigDescriptors.length; i++) {
+      const descriptor = this.contigDescriptors[i];
+      if (descriptor.contigSourceName !== sourceContig) {
+        continue;
+      }
+      const contigSourceStart = descriptor.contigOffsetInSource;
+      const contigSourceEnd = contigSourceStart + descriptor.contigLengthBp;
+      const overlapStart = Math.max(start, contigSourceStart);
+      const overlapEnd = Math.min(end, contigSourceEnd);
+      if (overlapEnd <= overlapStart) {
+        continue;
+      }
+      const assemblyContigStart = this.prefix_sum_bp[i];
+      const localStart = overlapStart - contigSourceStart;
+      const localEnd = overlapEnd - contigSourceStart;
+      if (descriptor.direction === ContigDirection.FORWARD) {
+        result.push({
+          startBp: assemblyContigStart + localStart,
+          endBp: assemblyContigStart + localEnd,
+        });
+      } else {
+        const len = descriptor.contigLengthBp;
+        result.push({
+          startBp: assemblyContigStart + (len - localEnd),
+          endBp: assemblyContigStart + (len - localStart),
+        });
+      }
+    }
+    result.sort((a, b) => a.startBp - b.startBp);
+    return result;
+  }
 }
diff --git a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
index 36d7241..6ac5790 100644
--- a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
+++ b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
@@ -49,6 +49,7 @@ import {
   NamePlacement,
   BorderStyle,
 } from "../tracks/Track2DSymmetric";
+import { AnnotationTrack2D } from "../tracks/Track2DAnnotations";
 import type {
   TrackStylePreset,
   TrackStylePresetBundle,
@@ -98,10 +99,12 @@ interface CurrentHiCViewState {
 interface LayersHolder {
   readonly hicDataLayers: Layer[];
   readonly track2DLayers: Layer[];
+  readonly annotationLayers: Layer[];
   readonly contigBordersLayers: Layer[];
   readonly contigTranslocationArrowsLayers: Layer[];
   readonly scaffoldBordersLayers: Layer[];
   readonly bpResolutionToHiCDataLayer: Map<number, Layer>;
+  readonly bpResolutionToAnnotationLayer: Map<number, Layer>;
   readonly bpResolutionToContigBordersLayer: Map<number, Layer>;
   readonly bpResolutionToContigTranslocationArrowsLayer: Map<number, Layer>;
   readonly bpResolutionToScaffoldBordersLayer: Map<number, Layer>;
@@ -109,6 +112,7 @@ interface LayersHolder {
 
 interface Track2DHolder {
   readonly tracks2D: Track2D[];
+  readonly annotationTrack: AnnotationTrack2D;
   readonly contigBordersTrack: ContigBordersTrack2D;
   readonly contigTranslocationArrowsTrack: TranslocationArrowsTrack2D;
   readonly scaffoldBordersTrack: ScaffoldBordersTrack2D;
@@ -129,10 +133,12 @@ class HiCViewAndLayersManager {
   public readonly layersHolder: LayersHolder = {
     hicDataLayers: [],
     track2DLayers: [],
+    annotationLayers: [],
     contigBordersLayers: [],
     contigTranslocationArrowsLayers: [],
     scaffoldBordersLayers: [],
     bpResolutionToHiCDataLayer: new Map(),
+    bpResolutionToAnnotationLayer: new Map(),
     bpResolutionToContigBordersLayer: new Map(),
     bpResolutionToContigTranslocationArrowsLayer: new Map(),
     bpResolutionToScaffoldBordersLayer: new Map(),
@@ -316,12 +322,14 @@ class HiCViewAndLayersManager {
 
     this.track2DHolder = {
       tracks2D: [],
+      annotationTrack: new AnnotationTrack2D(this.mapManager),
       contigBordersTrack: new ContigBordersTrack2D(this.mapManager),
       contigTranslocationArrowsTrack: new TranslocationArrowsTrack2D(
         this.mapManager
       ),
       scaffoldBordersTrack: new ScaffoldBordersTrack2D(this.mapManager),
     };
+    this.track2DHolder.tracks2D.push(this.track2DHolder.annotationTrack);
 
     this.track2DHolder.contigBordersTrack.setNamePlacement(
       NamePlacement.TOP
@@ -822,6 +830,16 @@ class HiCViewAndLayersManager {
 
   public initializeTracks(): void {
     this.reloadTracks();
+    this.add2DTrackSymmetric(
+      this.track2DHolder.annotationTrack,
+      this.layersHolder.annotationLayers
+    );
+    this.layersHolder.annotationLayers.forEach((layer) => {
+      this.layersHolder.bpResolutionToAnnotationLayer.set(
+        layer.get("bpResolution"),
+        layer
+      );
+    });
     this.add2DTrackSymmetric(
       this.track2DHolder.contigBordersTrack,
       this.layersHolder.contigBordersLayers
@@ -870,24 +888,26 @@ class HiCViewAndLayersManager {
       // position: "top",
       direction: "horizontal",
       mapManager: this.mapManager,
-      target: "horizontal-igv-track-div",
+      target: "horizontal-ruler-div",
     });
     const rulerV = new RulerControl({
       // position: "top",
       direction: "vertical",
       mapManager: this.mapManager,
-      target: "vertical-igv-track-div",
+      target: "vertical-ruler-div",
     });
     try {
       const map = this.mapManager.getMap();
-      map.addControl(rulerH);
-      map.addControl(rulerV);
       map.on("moveend", (event) => {
         rulerH.render(event);
       });
       map.on("moveend", (event) => {
         rulerV.render(event);
       });
+      map.once("postrender", () => {
+        rulerH.render({ map } as never);
+        rulerV.render({ map } as never);
+      });
     } catch (e: unknown) {
       console.log("Error while adding rulers", e);
     }
@@ -903,10 +923,18 @@ class HiCViewAndLayersManager {
       if (hTrack) {
         hTrack.replaceChildren();
       }
+      const hRuler = document.getElementById("horizontal-ruler-div");
+      if (hRuler) {
+        hRuler.replaceChildren();
+      }
       const vTrack = document.getElementById("vertical-igv-track-div");
       if (vTrack) {
         vTrack.replaceChildren();
       }
+      const vRuler = document.getElementById("vertical-ruler-div");
+      if (vRuler) {
+        vRuler.replaceChildren();
+      }
     } catch (e: unknown) {
       console.log("Error while disposing controls", e);
     }
@@ -1171,6 +1199,20 @@ class HiCViewAndLayersManager {
       layer.getSource()?.changed();
       layer.changed();
     }
+    for (const layer of this.layersHolder.annotationLayers) {
+      const source = layer.getSource() as VectorSource | undefined;
+      if (source) {
+        source.clear();
+        const features = this.track2DHolder.annotationTrack.features.get(
+          layer.get("bpResolution")
+        );
+        if (features) {
+          source.addFeatures(features);
+        }
+        source.changed();
+      }
+      layer.changed();
+    }
     for (const layer of this.layersHolder.contigBordersLayers) {
       const source = layer.getSource() as VectorSource | undefined;
       if (source) {
@@ -1238,6 +1280,7 @@ class HiCViewAndLayersManager {
       }
       layer.changed();
     }
+    void this.mapManager.linearTrackManager.render();
   }
 
   public reloadVisuals(): void {
@@ -1278,6 +1321,55 @@ class HiCViewAndLayersManager {
           this.currentViewState.activeTool === ActiveTool.TRANSLOCATION
       );
     }
+
+    for (const layer of this.layersHolder.annotationLayers) {
+      const layerResolution = Number(layer.get("bpResolution"));
+      layer.setVisible(layerResolution === activeResolution);
+    }
+  }
+
+  public addAnnotationMarkerAtCenter(name?: string): void {
+    const center = this.getView().getCenter();
+    if (!center) {
+      return;
+    }
+    const descriptor = this.currentViewState.resolutionDesciptor;
+    const xPx = center[0] / descriptor.pixelResolution;
+    const yPx = -center[1] / descriptor.pixelResolution;
+    const xBp = this.mapManager
+      .getContigDimensionHolder()
+      .getStartBpOfPx(Math.floor(xPx), descriptor.bpResolution);
+    const yBp = this.mapManager
+      .getContigDimensionHolder()
+      .getStartBpOfPx(Math.floor(yPx), descriptor.bpResolution);
+    this.track2DHolder.annotationTrack.addMarkerFromAssemblyBp(
+      xBp,
+      yBp,
+      name ?? `marker_${this.track2DHolder.annotationTrack.getMarkerCount() + 1}`
+    );
+    this.reloadTracks();
+  }
+
+  public addAnnotationRectangleFromSelection(name?: string): void {
+    const left = this.currentViewState.selectionBorders.leftBP;
+    const right = this.currentViewState.selectionBorders.rightBP;
+    if (!left || !right) {
+      return;
+    }
+    this.track2DHolder.annotationTrack.addRectangleFromAssemblyBp(
+      Math.min(left[0], right[0]),
+      Math.max(left[0], right[0]),
+      Math.min(left[1], right[1]),
+      Math.max(left[1], right[1]),
+      name ??
+        `rect_${this.track2DHolder.annotationTrack.getRectangleCount() + 1}`
+    );
+    this.reloadTracks();
+  }
+
+  public clearAnnotations(): void {
+    this.track2DHolder.annotationTrack.clearAll();
+    this.reloadTracks();
   }
 }
 
diff --git a/src/app/core/mapmanagers/LinearTrackManager.ts b/src/app/core/mapmanagers/LinearTrackManager.ts
new file mode 100644
index 0000000..b37bc6d
--- /dev/null
+++ b/src/app/core/mapmanagers/LinearTrackManager.ts
@@ -0,0 +1,577 @@
+/*
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy of
+ this software and associated documentation files (the "Software"), to deal in
+ the Software without restriction, including without limitation the rights to
+ use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ the Software, and to permit persons to whom the Software is furnished to do so,
+ subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import type { EventsKey } from "ol/events";
+import { unByKey } from "ol/Observable";
+import { transform } from "ol/proj";
+import type { ContactMapManager } from "./ContactMapManager";
+import type {
+  TrackQueryResponse,
+  TrackSummaryResponse,
+} from "@/app/core/net/api/response";
+
+type Orientation = "horizontal" | "vertical";
+
+class LinearTrackManager {
+  private horizontalCanvas: HTMLCanvasElement | null = null;
+  private verticalCanvas: HTMLCanvasElement | null = null;
+  private horizontalResizeObserver: ResizeObserver | null = null;
+  private verticalResizeObserver: ResizeObserver | null = null;
+  private tracks: TrackSummaryResponse[] = [];
+  private renderRequestId = 0;
+  private readonly moveEndListener?: EventsKey;
+  private readonly resolutionListener?: EventsKey;
+  private readonly listSubscribers = new Set<
+    (tracks: TrackSummaryResponse[]) => void
+  >();
+  private readonly renderStateSubscribers = {
+    horizontal: new Set<(state: RenderState) => void>(),
+    vertical: new Set<(state: RenderState) => void>(),
+  };
+  private readonly renderStates: Record<Orientation, RenderState> = {
+    horizontal: { statusMessage: "No tracks loaded", trackCount: 0 },
+    vertical: { statusMessage: "No tracks loaded", trackCount: 0 },
+  };
+  private readonly lastTrackErrors = new Map<string, string>();
+
+  constructor(private readonly mapManager: ContactMapManager) {
+    const map = this.mapManager.getMap();
+    this.moveEndListener = map.on("moveend", () => {
+      void this.render();
+    });
+    this.resolutionListener = this.mapManager.getView().on("change:resolution", () => {
+      void this.render();
+    });
+  }
+
+  public dispose(): void {
+    if (this.moveEndListener) {
+      unByKey(this.moveEndListener);
+    }
+    if (this.resolutionListener) {
+      unByKey(this.resolutionListener);
+    }
+    this.horizontalResizeObserver?.disconnect();
+    this.verticalResizeObserver?.disconnect();
+    this.horizontalCanvas = null;
+    this.verticalCanvas = null;
+    this.listSubscribers.clear();
+    this.renderStateSubscribers.horizontal.clear();
+    this.renderStateSubscribers.vertical.clear();
+  }
+
+  public registerCanvas(
+    orientation: Orientation,
+    canvas: HTMLCanvasElement | null
+  ): void {
+    if (orientation === "horizontal") {
+      this.horizontalResizeObserver?.disconnect();
+      this.horizontalCanvas = canvas;
+      this.horizontalResizeObserver = this.createResizeObserver(canvas);
+    } else {
+      this.verticalResizeObserver?.disconnect();
+      this.verticalCanvas = canvas;
+      this.verticalResizeObserver = this.createResizeObserver(canvas);
+    }
+    void this.render();
+    window.requestAnimationFrame(() => {
+      void this.render();
+    });
+    window.setTimeout(() => {
+      void this.render();
+    }, 0);
+    window.setTimeout(() => {
+      void this.render();
+    }, 100);
+  }
+
+  public subscribeRenderState(
+    orientation: Orientation,
+    callback: (state: RenderState) => void
+  ): () => void {
+    this.renderStateSubscribers[orientation].add(callback);
+    queueMicrotask(() => {
+      if (this.renderStateSubscribers[orientation].has(callback)) {
+        callback({ ...this.renderStates[orientation] });
+      }
+    });
+    return () => {
+      this.renderStateSubscribers[orientation].delete(callback);
+    };
+  }
+
+  public subscribeTrackList(
+    callback: (tracks: TrackSummaryResponse[]) => void
+  ): () => void {
+    this.listSubscribers.add(callback);
+    queueMicrotask(() => {
+      if (this.listSubscribers.has(callback)) {
+        callback(this.tracks.slice());
+      }
+    });
+    return () => {
+      this.listSubscribers.delete(callback);
+    };
+  }
+
+  public getTracksSnapshot(): TrackSummaryResponse[] {
+    return this.tracks.slice();
+  }
+
+  public async refreshTrackList(): Promise<TrackSummaryResponse[]> {
+    this.tracks = await this.mapManager.networkManager.requestManager.listTracks();
+    this.notifyTrackListChanged();
+    await this.render();
+    return this.tracks.slice();
+  }
+
+  public async listTrackFiles(): Promise<string[]> {
+    return this.mapManager.networkManager.requestManager.listTrackFiles();
+  }
+
+  public async openTrack(filename: string, name?: string): Promise<void> {
+    await this.mapManager.networkManager.requestManager.openTrack(
+      filename,
+      name
+    );
+    await this.refreshTrackList();
+  }
+
+  public async removeTrack(trackId: string): Promise<void> {
+    await this.mapManager.networkManager.requestManager.removeTrack(trackId);
+    await this.refreshTrackList();
+  }
+
+  public async updateTrack(
+    trackId: string,
+    options: {
+      visible?: boolean;
+      color?: string;
+      name?: string;
+      renderMode?: string;
+      aggregationMode?: string;
+    }
+  ): Promise<void> {
+    await this.mapManager.networkManager.requestManager.updateTrack(
+      trackId,
+      options
+    );
+    await this.refreshTrackList();
+  }
+
+  public async render(): Promise<void> {
+    if (!this.horizontalCanvas && !this.verticalCanvas) {
+      return;
+    }
+    const requestId = ++this.renderRequestId;
+    const horizontalPromise = this.renderOrientation("horizontal", requestId);
+    const verticalPromise = this.renderOrientation("vertical", requestId);
+    await Promise.all([horizontalPromise, verticalPromise]);
+  }
+
+  private notifyTrackListChanged(): void {
+    const snapshot = this.tracks.slice();
+    this.listSubscribers.forEach((fn) => {
+      queueMicrotask(() => {
+        if (this.listSubscribers.has(fn)) {
+          fn(snapshot);
+        }
+      });
+    });
+    const visibleCount = snapshot.filter((track) => track.visible).length;
+    this.setRenderState("horizontal", {
+      statusMessage: visibleCount > 0 ? "" : "No tracks loaded",
+      trackCount: visibleCount,
+    });
+    this.setRenderState("vertical", {
+      statusMessage: visibleCount > 0 ? "" : "No tracks loaded",
+      trackCount: visibleCount,
+    });
+  }
+
+  private createResizeObserver(
+    canvas: HTMLCanvasElement | null
+  ): ResizeObserver | null {
+    const parent = canvas?.parentElement;
+    if (!parent) {
+      return null;
+    }
+    const observer = new ResizeObserver(() => {
+      void this.render();
+    });
+    observer.observe(parent);
+    return observer;
+  }
+
+  private setRenderState(
+    orientation: Orientation,
+    state: RenderState
+  ): void {
+    this.renderStates[orientation] = state;
+    this.renderStateSubscribers[orientation].forEach((callback) => {
+      queueMicrotask(() => {
+        if (this.renderStateSubscribers[orientation].has(callback)) {
+          callback({ ...state });
+        }
+      });
+    });
+  }
+
+  private async renderOrientation(
+    orientation: Orientation,
+    requestId: number
+  ): Promise<void> {
+    const canvas =
+      orientation === "horizontal" ? this.horizontalCanvas : this.verticalCanvas;
+    if (!canvas) {
+      return;
+    }
+
+    const parent = canvas.parentElement;
+    if (!parent) {
+      return;
+    }
+    const parentRect = parent.getBoundingClientRect();
+    const cssWidth = Math.max(1, Math.floor(parentRect.width));
+    const cssHeight = Math.max(1, Math.floor(parentRect.height));
+    if (canvas.width !== cssWidth || canvas.height !== cssHeight) {
+      canvas.width = cssWidth;
+      canvas.height = cssHeight;
+    }
+    if (cssWidth <= 2 || cssHeight <= 2) {
+      this.setRenderState(orientation, {
+        statusMessage: "Track panel is initializing",
+        trackCount: this.tracks.filter((track) => track.visible).length,
+      });
+      return;
+    }
+
+    const viewport = this.getViewportGeometry(orientation);
+    try {
+      const response =
+        await this.mapManager.networkManager.requestManager.queryTracks1D(
+          viewport.startBp,
+          viewport.endBp,
+          viewport.visibleWidthPx
+        );
+      if (requestId !== this.renderRequestId) {
+        return;
+      }
+      response.tracks.forEach((track) => {
+        if (track.error) {
+          const previous = this.lastTrackErrors.get(track.trackId);
+          if (previous !== track.error) {
+            this.lastTrackErrors.set(track.trackId, track.error);
+            console.error(`Track ${track.name}: ${track.error}`);
+          }
+        } else {
+          this.lastTrackErrors.delete(track.trackId);
+        }
+      });
+      this.drawTrackCanvas(
+        canvas,
+        orientation,
+        response,
+        viewport
+      );
+    } catch (error) {
+      if (requestId !== this.renderRequestId) {
+        return;
+      }
+      console.error("Failed to render 1D tracks", error);
+      this.drawTrackCanvas(
+        canvas,
+        orientation,
+        {
+          startBp: viewport.startBp,
+          endBp: viewport.endBp,
+          widthPx: orientation === "horizontal" ? canvas.width : canvas.height,
+          tracks: [],
+        },
+        viewport,
+        "Track query failed"
+      );
+    }
+  }
+
+  private drawTrackCanvas(
+    canvas: HTMLCanvasElement,
+    orientation: Orientation,
+    response: TrackQueryResponse,
+    viewport: ViewportGeometry,
+    statusMessage?: string
+  ): void {
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+    ctx.textBaseline = "top";
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "rgba(248,249,250,0.98)";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    const fallbackTracks = this.tracks
+      .filter((track) => track.visible)
+      .map((track) => ({
+        trackId: track.trackId,
+        name: track.name,
+        type: track.type,
+        color: track.color,
+        bins: [],
+        maxValue: 0,
+        error: null,
+      }));
+    const tracks =
+      (response.tracks ?? []).length > 0 ? response.tracks : fallbackTracks;
+    if (tracks.length === 0) {
+      ctx.fillStyle = "rgba(120,120,120,0.6)";
+      ctx.font = "12px sans-serif";
+      ctx.fillText(statusMessage ?? "No tracks loaded", 8, 8);
+      this.setRenderState(orientation, {
+        statusMessage: statusMessage ?? "No tracks loaded",
+        trackCount: 0,
+      });
+      return;
+    }
+    const descriptor =
+      this.mapManager.getLayersManager().currentViewState.resolutionDesciptor;
+    const bpResolution = descriptor.bpResolution;
+    const laneSize =
+      orientation === "horizontal"
+        ? canvas.height / tracks.length
+        : canvas.width / tracks.length;
+    tracks.forEach((track, trackIndex) => {
+      const laneStart = laneSize * trackIndex;
+      const laneEnd = laneStart + laneSize;
+      const laneInnerStart = laneStart + 2;
+      const laneInnerEnd = laneEnd - 2;
+      const maxValue = Math.max(track.maxValue, 1);
+
+      ctx.fillStyle = "rgba(226,232,240,0.95)";
+      if (orientation === "horizontal") {
+        ctx.fillRect(0, laneStart, canvas.width, laneSize - 1);
+        ctx.strokeStyle = "rgba(120,130,145,0.55)";
+        ctx.strokeRect(0.5, laneStart + 0.5, canvas.width - 1, laneSize - 1);
+      } else {
+        ctx.fillRect(laneStart, 0, laneSize - 1, canvas.height);
+        ctx.strokeStyle = "rgba(120,130,145,0.55)";
+        ctx.strokeRect(laneStart + 0.5, 0.5, laneSize - 1, canvas.height - 1);
+      }
+      ctx.fillStyle = track.color ?? "#4e79a7";
+      for (const bin of track.bins) {
+        const intervalStart = Math.max(0, Math.min(bin.startBp, bin.endBp));
+        const intervalEnd = Math.max(intervalStart + 1, Math.max(bin.startBp, bin.endBp));
+        const intervalProbeEnd = Math.max(intervalStart, intervalEnd - 1);
+        if (
+          !this.mapManager
+            .getContigDimensionHolder()
+            .isBpVisibleAtResolution(intervalStart, bpResolution) &&
+          !this.mapManager
+            .getContigDimensionHolder()
+            .isBpVisibleAtResolution(intervalProbeEnd, bpResolution)
+        ) {
+          continue;
+        }
+        const startPx = this.mapManager
+          .getContigDimensionHolder()
+          .getPxContainingBp(intervalStart, bpResolution);
+        const endPx =
+          this.mapManager
+            .getContigDimensionHolder()
+            .getPxContainingBp(intervalProbeEnd, bpResolution) + 1;
+        const normalizedValue = Math.max(
+          0,
+          Math.min(1, (bin.value ?? 0) / maxValue)
+        );
+        if (orientation === "horizontal") {
+          const x0ByPx = Math.floor(viewport.pxToScreen(startPx));
+          const x1ByPx = Math.max(x0ByPx + 1, Math.ceil(viewport.pxToScreen(endPx)));
+          const x0 = Math.max(0, Math.min(canvas.width - 1, x0ByPx));
+          const x1 = Math.max(x0 + 1, Math.min(canvas.width, x1ByPx));
+          if (x1 <= x0 || x1ByPx === x0ByPx) {
+            continue;
+          }
+          const barHeight =
+            (laneInnerEnd - laneInnerStart) * normalizedValue;
+          const y = laneInnerEnd - barHeight;
+          ctx.fillRect(x0, y, x1 - x0, Math.max(1, barHeight));
+        } else {
+          const y0ByPx = Math.floor(viewport.pxToScreen(startPx));
+          const y1ByPx = Math.max(y0ByPx + 1, Math.ceil(viewport.pxToScreen(endPx)));
+          const y0 = Math.max(0, Math.min(canvas.height - 1, y0ByPx));
+          const y1 = Math.max(y0 + 1, Math.min(canvas.height, y1ByPx));
+          if (y1 <= y0 || y1ByPx === y0ByPx) {
+            continue;
+          }
+          const barWidth = (laneInnerEnd - laneInnerStart) * normalizedValue;
+          const x = laneInnerEnd - Math.max(1, barWidth);
+          ctx.fillRect(x, y0, Math.max(1, barWidth), y1 - y0);
+        }
+      }
+      ctx.fillStyle = "rgba(20,20,20,0.85)";
+      ctx.font = "bold 11px sans-serif";
+      if (orientation === "horizontal") {
+        ctx.fillText(track.name, 6, laneStart + 4);
+        if (track.error) {
+          ctx.fillStyle = "rgba(160, 30, 30, 0.88)";
+          ctx.font = "10px sans-serif";
+          ctx.fillText(track.error, 6, laneStart + 20);
+        } else if (track.bins.length === 0) {
+          ctx.fillStyle = "rgba(90,90,90,0.75)";
+          ctx.font = "10px sans-serif";
+          ctx.fillText(statusMessage ?? "No signal in current view", 6, laneStart + 20);
+        }
+      } else {
+        ctx.save();
+        ctx.translate(laneStart + 12, 6);
+        ctx.rotate(Math.PI / 2);
+        ctx.fillText(track.name, 0, 0);
+        ctx.restore();
+        if (track.error) {
+          ctx.save();
+          ctx.translate(laneStart + 24, 6);
+          ctx.rotate(Math.PI / 2);
+          ctx.fillStyle = "rgba(160, 30, 30, 0.88)";
+          ctx.font = "10px sans-serif";
+          ctx.fillText(track.error, 0, 0);
+          ctx.restore();
+        } else if (track.bins.length === 0) {
+          ctx.save();
+          ctx.translate(laneStart + 24, 6);
+          ctx.rotate(Math.PI / 2);
+          ctx.fillStyle = "rgba(90,90,90,0.75)";
+          ctx.font = "10px sans-serif";
+          ctx.fillText(statusMessage ?? "No signal", 0, 0);
+          ctx.restore();
+        }
+      }
+    });
+    const hasAnySignal = tracks.some((track) => track.bins.length > 0);
+    const firstError = tracks.find((track) => track.error)?.error;
+    this.setRenderState(orientation, {
+      statusMessage: firstError
+        ? firstError
+        : hasAnySignal
+        ? ""
+        : statusMessage ?? "No signal in current view",
+      trackCount: tracks.length,
+    });
+  }
+
+  private getViewportGeometry(orientation: Orientation): ViewportGeometry {
+    const descriptor =
+      this.mapManager.getLayersManager().currentViewState.resolutionDesciptor;
+    const bpResolution = descriptor.bpResolution;
+    const map = this.mapManager.getMap();
+    const view = this.mapManager.getView();
+    const mapSize = map.getSize();
+    const extent = view.calculateExtent(mapSize);
+    const activeHiCLayer =
+      this.mapManager.getLayersManager().getActiveHiCDataLayer();
+    const targetProjection =
+      activeHiCLayer.getSource()?.getProjection() ?? view.getProjection();
+    const pixelResolution = view.getResolution() ?? 1;
+    const layerPixelResolution = Number.isFinite(descriptor.pixelResolution)
+      ? descriptor.pixelResolution
+      : 1;
+    const fraction =
+      layerPixelResolution > 0 ? pixelResolution / layerPixelResolution : 1;
+    const fixedCoordinates = transform(
+      extent,
+      view.getProjection(),
+      targetProjection
+    ).map((coordinate) => coordinate / pixelResolution);
+    const mapBoxPixelCoordinates = {
+      left: Math.round(-fixedCoordinates[0]),
+      right: Math.round(fixedCoordinates[2]),
+      top: Math.round(fixedCoordinates[3]),
+      bottom: Math.round(-fixedCoordinates[1]),
+    };
+    const pixelMapSize =
+      this.mapManager
+        .getContigDimensionHolder()
+        .prefix_sum_px.get(bpResolution)?.[
+        this.mapManager.getContigDimensionHolder().contig_count
+      ] ?? 0;
+    const panelSize =
+      orientation === "horizontal"
+        ? this.horizontalCanvas?.width ?? 1
+        : this.verticalCanvas?.height ?? 1;
+    const offset =
+      orientation === "horizontal"
+        ? mapBoxPixelCoordinates.left
+        : mapBoxPixelCoordinates.top;
+    const visibleStartScreen =
+      orientation === "horizontal"
+        ? Math.round(Math.max(0, mapBoxPixelCoordinates.left))
+        : Math.round(Math.max(0, mapBoxPixelCoordinates.top));
+    const visibleEndScreen =
+      orientation === "horizontal"
+        ? Math.round(
+            Math.min(mapBoxPixelCoordinates.left + pixelMapSize / fraction, panelSize)
+          )
+        : Math.round(
+            Math.min(mapBoxPixelCoordinates.top + pixelMapSize / fraction, panelSize)
+          );
+    const safeFraction = Math.max(fraction, 1e-9);
+    const pxToScreen = (px: number): number => px / safeFraction + offset;
+    const screenToPx = (screen: number): number =>
+      Math.round((screen - offset) * safeFraction);
+    const totalPx = Math.max(0, pixelMapSize);
+    const maxStartPx = Math.max(0, totalPx - 1);
+    const unclampedStartPx = screenToPx(visibleStartScreen);
+    const unclampedEndPx = screenToPx(visibleEndScreen);
+    const startPx = Math.max(0, Math.min(unclampedStartPx, maxStartPx));
+    const endPx = Math.max(startPx + 1, Math.min(unclampedEndPx, totalPx));
+    const startBp = this.mapManager
+      .getContigDimensionHolder()
+      .getStartBpOfPx(startPx, bpResolution);
+    const endBp =
+      this.mapManager
+        .getContigDimensionHolder()
+        .getStartBpOfPx(Math.max(startPx, endPx - 1), bpResolution) + bpResolution;
+    return {
+      startBp,
+      endBp,
+      startPx,
+      endPx,
+      bpResolution,
+      pxToScreen,
+      visibleWidthPx: Math.max(1, visibleEndScreen - visibleStartScreen),
+    };
+  }
+}
+
+export { LinearTrackManager, type Orientation };
+
+type RenderState = {
+  statusMessage: string;
+  trackCount: number;
+};
+
+type ViewportGeometry = {
+  startBp: number;
+  endBp: number;
+  startPx: number;
+  endPx: number;
+  bpResolution: number;
+  pxToScreen: (px: number) => number;
+  visibleWidthPx: number;
+};
diff --git a/src/app/core/net/api/RequestManager.ts b/src/app/core/net/api/RequestManager.ts
index 9089d78..2a12f18 100644
--- a/src/app/core/net/api/RequestManager.ts
+++ b/src/app/core/net/api/RequestManager.ts
@@ -34,7 +34,10 @@ import { HiCTAPIRequestDTO } from "../dto/requestDTO";
 import {
   ConversionJobResponseDTO,
   CurrentSignalRangeResponseDTO,
+  FastaLinkResponseDTO,
   NameMappingResponseDTO,
+  TrackQueryResponseDTO,
+  TrackSummaryResponseDTO,
   TilePOSTResponseDTO,
 } from "../dto/responseDTO";
 import type { OpenFileResponse } from "../netcommon";
@@ -74,11 +77,20 @@ import {
   AttachSessionRequest,
   CloseFileRequest,
   OpenProgressRequest,
+  ListTrackFilesRequest,
+  OpenTrackRequest,
+  ListTracksRequest,
+  UpdateTrackRequest,
+  RemoveTrackRequest,
+  QueryTracks1DRequest,
 } from "./request";
 import {
   ConversionJobResponse,
   CurrentSignalRangeResponse,
+  FastaLinkResponse,
   NameMappingResponse,
+  TrackQueryResponse,
+  TrackSummaryResponse,
 } from "./response";
 import { toast } from "vue-sonner";
 import { useErrorToastStore } from "@/app/stores/errorToastStore";
@@ -181,7 +193,7 @@ class RequestManager {
     await this.sendRequest(new CloseFileRequest());
   }
 
-  public async attachSession(): Promise<{ filename: string; response: OpenFileResponse }> {
+  public async attachSession(): Promise<{ filename: string; fastaFilename: string; response: OpenFileResponse }> {
     return this.sendRequest(new AttachSessionRequest())
       .then((response) => response.data as Record<string, unknown>)
       .then((json) => {
@@ -189,10 +201,11 @@ class RequestManager {
           throw new Error(String((json as Record<string, unknown>).error));
         }
         const filename = (json["filename"] as string) ?? "";
+        const fastaFilename = (json["fastaFilename"] as string) ?? "";
         const response = new OpenFileResponseDTO(
           json["openFileResponse"] as Record<string, unknown>
         ).toEntity();
-        return { filename, response };
+        return { filename, fastaFilename, response };
       });
   }
 
@@ -216,16 +229,74 @@ class RequestManager {
     return response.data as string[];
   }
 
+  public async listTrackFiles(): Promise<string[]> {
+    const response = await this.sendRequest(new ListTrackFilesRequest());
+    return response.data as string[];
+  }
+
+  public async openTrack(
+    filename: string,
+    name?: string,
+    color?: string
+  ): Promise<TrackSummaryResponse> {
+    return this.sendRequest(new OpenTrackRequest({ filename, name, color }))
+      .then((response) => response.data)
+      .then((json) => new TrackSummaryResponseDTO(json).toEntity());
+  }
+
+  public async listTracks(): Promise<TrackSummaryResponse[]> {
+    return this.sendRequest(new ListTracksRequest())
+      .then((response) => response.data as Record<string, unknown>[])
+      .then((items) => items.map((item) => new TrackSummaryResponseDTO(item).toEntity()));
+  }
+
+  public async updateTrack(
+    trackId: string,
+    options: {
+      visible?: boolean;
+      color?: string;
+      name?: string;
+      renderMode?: string;
+      aggregationMode?: string;
+    }
+  ): Promise<TrackSummaryResponse> {
+    return this.sendRequest(
+      new UpdateTrackRequest({
+        trackId,
+        visible: options.visible,
+        color: options.color,
+        name: options.name,
+        renderMode: options.renderMode,
+        aggregationMode: options.aggregationMode,
+      })
+    )
+      .then((response) => response.data)
+      .then((json) => new TrackSummaryResponseDTO(json).toEntity());
+  }
+
+  public async removeTrack(trackId: string): Promise<void> {
+    await this.sendRequest(new RemoveTrackRequest({ trackId }));
+  }
+
+  public async queryTracks1D(
+    startBp: number,
+    endBp: number,
+    widthPx: number
+  ): Promise<TrackQueryResponse> {
+    return this.sendRequest(new QueryTracks1DRequest({ startBp, endBp, widthPx }))
+      .then((response) => response.data)
+      .then((json) => new TrackQueryResponseDTO(json).toEntity());
+  }
+
   public async listFASTAFiles(): Promise<string[]> {
     const response = await this.sendRequest(new ListFASTAFilesRequest());
     return response.data as string[];
   }
 
-  public async linkFASTA(request: LinkFASTARequest): Promise<void> {
+  public async linkFASTA(request: LinkFASTARequest): Promise<FastaLinkResponse> {
     return this.sendRequest(request)
-      .then(() => {
-        return;
-      })
+      .then((response) => response.data)
+      .then((json) => new FastaLinkResponseDTO(json).toEntity())
       .catch((err) => {
         throw new Error("Cannot link FASTA file: " + err);
       });
diff --git a/src/app/core/net/api/request.ts b/src/app/core/net/api/request.ts
index 6ccfc59..3904ea8 100644
--- a/src/app/core/net/api/request.ts
+++ b/src/app/core/net/api/request.ts
@@ -69,6 +69,10 @@ class ListCoolerFilesRequest implements HiCTAPIRequest {
   requestPath = "/list_coolers";
 }
 
+class ListTrackFilesRequest implements HiCTAPIRequest {
+  requestPath = "/tracks/list_files";
+}
+
 class CloseFileRequest implements HiCTAPIRequest {
   requestPath = "/close";
 }
@@ -294,6 +298,7 @@ class LinkFASTARequest implements HiCTAPIRequest {
   public constructor(
     public readonly options: {
       readonly fastaFilename: string;
+      readonly allowMismatch?: boolean;
     }
   ) {}
 }
@@ -329,6 +334,59 @@ class SetVisualizationOptionsRequest implements HiCTAPIRequest {
   ) {}
 }
 
+class OpenTrackRequest implements HiCTAPIRequest {
+  requestPath = "/tracks/open";
+
+  public constructor(
+    public readonly options: {
+      readonly filename: string;
+      readonly name?: string;
+      readonly color?: string;
+    }
+  ) {}
+}
+
+class ListTracksRequest implements HiCTAPIRequest {
+  requestPath = "/tracks/list";
+}
+
+class UpdateTrackRequest implements HiCTAPIRequest {
+  requestPath = "/tracks/update";
+
+  public constructor(
+    public readonly options: {
+      readonly trackId: string;
+      readonly visible?: boolean;
+      readonly color?: string;
+      readonly name?: string;
+      readonly renderMode?: string;
+      readonly aggregationMode?: string;
+    }
+  ) {}
+}
+
+class RemoveTrackRequest implements HiCTAPIRequest {
+  requestPath = "/tracks/remove";
+
+  public constructor(
+    public readonly options: {
+      readonly trackId: string;
+    }
+  ) {}
+}
+
+class QueryTracks1DRequest implements HiCTAPIRequest {
+  requestPath = "/tracks/query_1d";
+
+  public constructor(
+    public readonly options: {
+      readonly startBp: number;
+      readonly endBp: number;
+      readonly widthPx: number;
+    }
+  ) {}
+}
+
 // class TileLoadPOSTRequest implements HiCTAPIRequest {
 //   requestPath = "/get_tile";
 
@@ -380,4 +438,10 @@ export {
   MoveSelectionToDebrisRequest,
   GetVisualizationOptionsRequest,
   SetVisualizationOptionsRequest,
+  ListTrackFilesRequest,
+  OpenTrackRequest,
+  ListTracksRequest,
+  UpdateTrackRequest,
+  RemoveTrackRequest,
+  QueryTracks1DRequest,
 };
diff --git a/src/app/core/net/api/response.ts b/src/app/core/net/api/response.ts
index d57fba7..48f0ca9 100644
--- a/src/app/core/net/api/response.ts
+++ b/src/app/core/net/api/response.ts
@@ -71,9 +71,97 @@ class NameMappingResponse {
   ) {}
 }
 
+class TrackSummaryResponse {
+  public constructor(
+    public readonly trackId: string,
+    public readonly name: string,
+    public readonly type: string,
+    public readonly sourceFile: string,
+    public readonly color: string,
+    public readonly visible: boolean,
+    public readonly featureCount: number,
+    public readonly renderMode: string,
+    public readonly aggregationMode: string
+  ) {}
+}
+
+class TrackBinResponse {
+  public constructor(
+    public readonly startBp: number,
+    public readonly endBp: number,
+    public readonly value: number,
+    public readonly count: number,
+    public readonly label: string | null
+  ) {}
+}
+
+class TrackRenderResponse {
+  public constructor(
+    public readonly trackId: string,
+    public readonly name: string,
+    public readonly type: string,
+    public readonly color: string,
+    public readonly bins: TrackBinResponse[],
+    public readonly maxValue: number,
+    public readonly error: string | null
+  ) {}
+}
+
+class TrackQueryResponse {
+  public constructor(
+    public readonly startBp: number,
+    public readonly endBp: number,
+    public readonly widthPx: number,
+    public readonly tracks: TrackRenderResponse[]
+  ) {}
+}
+
+class FastaLinkMismatchResponse {
+  public constructor(
+    public readonly index: number,
+    public readonly fastaName: string | null,
+    public readonly fastaLengthBp: number,
+    public readonly assemblyCurrentName: string | null,
+    public readonly assemblyOriginalName: string | null,
+    public readonly assemblySourceName: string | null,
+    public readonly assemblyLengthBp: number
+  ) {}
+}
+
+class FastaLinkCompatibilityResponse {
+  public constructor(
+    public readonly fastaRecordCount: number,
+    public readonly assemblyContigCount: number,
+    public readonly sameRecordCount: boolean,
+    public readonly sameOrderAndLength: boolean,
+    public readonly sameOrderLengthAndCurrentNames: boolean,
+    public readonly sameOrderLengthAndOriginalNames: boolean,
+    public readonly sameOrderLengthAndSourceNames: boolean,
+    public readonly sameLengthMultiset: boolean,
+    public readonly mismatches: FastaLinkMismatchResponse[]
+  ) {}
+}
+
+class FastaLinkResponse {
+  public constructor(
+    public readonly fastaFilename: string,
+    public readonly linked: boolean,
+    public readonly requiresConfirmation: boolean,
+    public readonly warnings: string[],
+    public readonly compatibility: FastaLinkCompatibilityResponse
+  ) {}
+}
+
 export {
   CurrentSignalRangeResponse,
   TilePOSTResponse,
   ConversionJobResponse,
   NameMappingResponse,
+  TrackSummaryResponse,
+  TrackBinResponse,
+  TrackRenderResponse,
+  TrackQueryResponse,
+  FastaLinkMismatchResponse,
+  FastaLinkCompatibilityResponse,
+  FastaLinkResponse,
 };
diff --git a/src/app/core/net/dto/dto.ts b/src/app/core/net/dto/dto.ts
index f1455f1..2bbddc5 100644
--- a/src/app/core/net/dto/dto.ts
+++ b/src/app/core/net/dto/dto.ts
@@ -88,6 +88,10 @@ class ContigDescriptorDTO extends InboundDTO<ContigDescriptor> {
       contigId: this.json.contigId as number,
       contigName: this.json.contigName as string,
       contigOriginalName: this.json.contigOriginalName as string,
+      contigSourceName:
+        (this.json.contigSourceName as string) ??
+        (this.json.contigOriginalName as string),
+      contigOffsetInSource: (this.json.contigOffsetInSource as number) ?? 0,
       contigLengthBp: this.json.contigLengthBp as number,
       contigLengthBins: new Map(
         Array.from(
diff --git a/src/app/core/net/dto/requestDTO.ts b/src/app/core/net/dto/requestDTO.ts
index 68492e3..1f909a9 100644
--- a/src/app/core/net/dto/requestDTO.ts
+++ b/src/app/core/net/dto/requestDTO.ts
@@ -42,6 +42,12 @@ import {
   SaveFileRequest,
   GetAGPForAssemblyRequest,
   ListCoolerFilesRequest,
+  ListTrackFilesRequest,
+  OpenTrackRequest,
+  ListTracksRequest,
+  UpdateTrackRequest,
+  RemoveTrackRequest,
+  QueryTracks1DRequest,
   StartConversionJobRequest,
   StartBatchConversionJobsRequest,
   ListConversionJobsRequest,
@@ -121,6 +127,18 @@ abstract class HiCTAPIRequestDTO<
         return new ListFilesRequestDTO(entity);
       case entity instanceof ListCoolerFilesRequest:
         return new ListCoolerFilesRequestDTO(entity);
+      case entity instanceof ListTrackFilesRequest:
+        return new ListTrackFilesRequestDTO(entity);
+      case entity instanceof OpenTrackRequest:
+        return new OpenTrackRequestDTO(entity as OpenTrackRequest);
+      case entity instanceof ListTracksRequest:
+        return new ListTracksRequestDTO(entity);
+      case entity instanceof UpdateTrackRequest:
+        return new UpdateTrackRequestDTO(entity as UpdateTrackRequest);
+      case entity instanceof RemoveTrackRequest:
+        return new RemoveTrackRequestDTO(entity as RemoveTrackRequest);
+      case entity instanceof QueryTracks1DRequest:
+        return new QueryTracks1DRequestDTO(entity as QueryTracks1DRequest);
       case entity instanceof ListConversionJobsRequest:
         return new ListConversionJobsRequestDTO(entity);
       case entity instanceof GetConversionJobRequest:
@@ -343,6 +361,7 @@ class LinkFASTARequestDTO extends HiCTAPIRequestDTO<LinkFASTARequest> {
   toDTO(): Record<string, unknown> {
     return {
       fastaFilename: this.entity.options.fastaFilename,
+      allowMismatch: this.entity.options.allowMismatch,
     };
   }
 }
@@ -419,6 +438,59 @@ class ListCoolerFilesRequestDTO extends HiCTAPIRequestDTO<ListCoolerFilesRequest
   }
 }
 
+class ListTrackFilesRequestDTO extends HiCTAPIRequestDTO<ListTrackFilesRequest> {
+  toDTO(): Record<string, unknown> {
+    return {};
+  }
+}
+
+class OpenTrackRequestDTO extends HiCTAPIRequestDTO<OpenTrackRequest> {
+  toDTO(): Record<string, unknown> {
+    return {
+      filename: this.entity.options.filename,
+      name: this.entity.options.name,
+      color: this.entity.options.color,
+    };
+  }
+}
+
+class ListTracksRequestDTO extends HiCTAPIRequestDTO<ListTracksRequest> {
+  toDTO(): Record<string, unknown> {
+    return {};
+  }
+}
+
+class UpdateTrackRequestDTO extends HiCTAPIRequestDTO<UpdateTrackRequest> {
+  toDTO(): Record<string, unknown> {
+    return {
+      trackId: this.entity.options.trackId,
+      visible: this.entity.options.visible,
+      color: this.entity.options.color,
+      name: this.entity.options.name,
+      renderMode: this.entity.options.renderMode,
+      aggregationMode: this.entity.options.aggregationMode,
+    };
+  }
+}
+
+class RemoveTrackRequestDTO extends HiCTAPIRequestDTO<RemoveTrackRequest> {
+  toDTO(): Record<string, unknown> {
+    return {
+      trackId: this.entity.options.trackId,
+    };
+  }
+}
+
+class QueryTracks1DRequestDTO extends HiCTAPIRequestDTO<QueryTracks1DRequest> {
+  toDTO(): Record<string, unknown> {
+    return {
+      startBp: this.entity.options.startBp,
+      endBp: this.entity.options.endBp,
+      widthPx: this.entity.options.widthPx,
+    };
+  }
+}
+
 class ListFASTAFilesRequestDTO extends HiCTAPIRequestDTO<ListFASTAFilesRequest> {
   toDTO(): Record<string, unknown> {
     return {};
@@ -489,6 +561,12 @@ export {
   SetContrastRangeRequestDTO,
   GetCurrentSignalRangeRequestDTO,
   SaveFileRequestDTO,
+  ListTrackFilesRequestDTO,
+  OpenTrackRequestDTO,
+  ListTracksRequestDTO,
+  UpdateTrackRequestDTO,
+  RemoveTrackRequestDTO,
+  QueryTracks1DRequestDTO,
   ListCoolerFilesRequestDTO,
   SplitContigRequestDTO,
   MoveSelectionToDebrisRequestDTO,
diff --git a/src/app/core/net/dto/responseDTO.ts b/src/app/core/net/dto/responseDTO.ts
index f951a57..3f14b02 100644
--- a/src/app/core/net/dto/responseDTO.ts
+++ b/src/app/core/net/dto/responseDTO.ts
@@ -22,7 +22,14 @@
 import {
   ConversionJobResponse,
   CurrentSignalRangeResponse,
+  FastaLinkCompatibilityResponse,
+  FastaLinkMismatchResponse,
+  FastaLinkResponse,
   NameMappingResponse,
+  TrackBinResponse,
+  TrackQueryResponse,
+  TrackRenderResponse,
+  TrackSummaryResponse,
   TilePOSTResponse,
 } from "../api/response";
 import { InboundDTO } from "./dto";
@@ -109,9 +116,115 @@ class NameMappingResponseDTO extends InboundDTO<NameMappingResponse> {
   }
 }
 
+class TrackSummaryResponseDTO extends InboundDTO<TrackSummaryResponse> {
+  public toEntity(): TrackSummaryResponse {
+    return new TrackSummaryResponse(
+      this.json["trackId"] as string,
+      this.json["name"] as string,
+      this.json["type"] as string,
+      this.json["sourceFile"] as string,
+      this.json["color"] as string,
+      this.json["visible"] as boolean,
+      this.json["featureCount"] as number,
+      (this.json["renderMode"] as string) ?? "COVERAGE",
+      (this.json["aggregationMode"] as string) ?? "MAX"
+    );
+  }
+}
+
+class TrackBinResponseDTO extends InboundDTO<TrackBinResponse> {
+  public toEntity(): TrackBinResponse {
+    return new TrackBinResponse(
+      this.json["startBp"] as number,
+      this.json["endBp"] as number,
+      this.json["value"] as number,
+      this.json["count"] as number,
+      (this.json["label"] as string) ?? null
+    );
+  }
+}
+
+class TrackRenderResponseDTO extends InboundDTO<TrackRenderResponse> {
+  public toEntity(): TrackRenderResponse {
+    return new TrackRenderResponse(
+      this.json["trackId"] as string,
+      this.json["name"] as string,
+      this.json["type"] as string,
+      this.json["color"] as string,
+      ((this.json["bins"] as Record<string, unknown>[]) ?? []).map((bin) =>
+        new TrackBinResponseDTO(bin).toEntity()
+      ),
+      this.json["maxValue"] as number,
+      (this.json["error"] as string) ?? null
+    );
+  }
+}
+
+class TrackQueryResponseDTO extends InboundDTO<TrackQueryResponse> {
+  public toEntity(): TrackQueryResponse {
+    return new TrackQueryResponse(
+      this.json["startBp"] as number,
+      this.json["endBp"] as number,
+      this.json["widthPx"] as number,
+      ((this.json["tracks"] as Record<string, unknown>[]) ?? []).map((track) =>
+        new TrackRenderResponseDTO(track).toEntity()
+      )
+    );
+  }
+}
+
+class FastaLinkMismatchResponseDTO extends InboundDTO<FastaLinkMismatchResponse> {
+  public toEntity(): FastaLinkMismatchResponse {
+    return new FastaLinkMismatchResponse(
+      this.json["index"] as number,
+      (this.json["fastaName"] as string) ?? null,
+      this.json["fastaLengthBp"] as number,
+      (this.json["assemblyCurrentName"] as string) ?? null,
+      (this.json["assemblyOriginalName"] as string) ?? null,
+      (this.json["assemblySourceName"] as string) ?? null,
+      this.json["assemblyLengthBp"] as number
+    );
+  }
+}
+
+class FastaLinkCompatibilityResponseDTO extends InboundDTO<FastaLinkCompatibilityResponse> {
+  public toEntity(): FastaLinkCompatibilityResponse {
+    return new FastaLinkCompatibilityResponse(
+      this.json["fastaRecordCount"] as number,
+      this.json["assemblyContigCount"] as number,
+      this.json["sameRecordCount"] as boolean,
+      this.json["sameOrderAndLength"] as boolean,
+      this.json["sameOrderLengthAndCurrentNames"] as boolean,
+      this.json["sameOrderLengthAndOriginalNames"] as boolean,
+      this.json["sameOrderLengthAndSourceNames"] as boolean,
+      this.json["sameLengthMultiset"] as boolean,
+      ((this.json["mismatches"] as Record<string, unknown>[]) ?? []).map((item) =>
+        new FastaLinkMismatchResponseDTO(item).toEntity()
+      )
+    );
+  }
+}
+
+class FastaLinkResponseDTO extends InboundDTO<FastaLinkResponse> {
+  public toEntity(): FastaLinkResponse {
+    return new FastaLinkResponse(
+      this.json["fastaFilename"] as string,
+      this.json["linked"] as boolean,
+      this.json["requiresConfirmation"] as boolean,
+      (this.json["warnings"] as string[]) ?? [],
+      new FastaLinkCompatibilityResponseDTO(
+        this.json["compatibility"] as Record<string, unknown>
+      ).toEntity()
+    );
+  }
+}
+
 export {
   CurrentSignalRangeResponseDTO,
   TilePOSTResponseDTO,
   ConversionJobResponseDTO,
   NameMappingResponseDTO,
+  TrackSummaryResponseDTO,
+  TrackQueryResponseDTO,
+  FastaLinkResponseDTO,
 };
diff --git a/src/app/core/tracks/Track2DAnnotations.ts b/src/app/core/tracks/Track2DAnnotations.ts
new file mode 100644
index 0000000..8bebd2f
--- /dev/null
+++ b/src/app/core/tracks/Track2DAnnotations.ts
@@ -0,0 +1,320 @@
+/*
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy of
+ this software and associated documentation files (the "Software"), to deal in
+ the Software without restriction, including without limitation the rights to
+ use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ the Software, and to permit persons to whom the Software is furnished to do so,
+ subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import Feature from "ol/Feature";
+import { LineString, Point, Polygon, type Geometry } from "ol/geom";
+import Stroke from "ol/style/Stroke";
+import Style from "ol/style/Style";
+import Fill from "ol/style/Fill";
+import CircleStyle from "ol/style/Circle";
+import type { ContactMapManager } from "../mapmanagers/ContactMapManager";
+import { Track2DSymmetric } from "./Track2DSymmetric";
+import { ContigDirection } from "../domain/common";
+
+interface MarkerAnchor {
+  id: string;
+  name: string;
+  color: string;
+  sourceXContig: string;
+  sourceXBp: number;
+  sourceYContig: string;
+  sourceYBp: number;
+}
+
+interface RectangleAnchor {
+  id: string;
+  name: string;
+  color: string;
+  sourceXContig: string;
+  sourceXStartBp: number;
+  sourceXEndBp: number;
+  sourceYContig: string;
+  sourceYStartBp: number;
+  sourceYEndBp: number;
+}
+
+const makeId = (prefix: string): string =>
+  `${prefix}_${Date.now()}_${Math.floor(Math.random() * 1e9)}`;
+
+const withAlpha = (hexColor: string, alpha: number): string => {
+  const clean = hexColor.replace("#", "");
+  if (clean.length !== 6) {
+    return `rgba(255,0,0,${alpha})`;
+  }
+  const r = Number.parseInt(clean.slice(0, 2), 16);
+  const g = Number.parseInt(clean.slice(2, 4), 16);
+  const b = Number.parseInt(clean.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+class AnnotationTrack2D extends Track2DSymmetric {
+  private readonly markers: MarkerAnchor[] = [];
+  private readonly rectangles: RectangleAnchor[] = [];
+
+  public constructor(private readonly mapManager: ContactMapManager) {
+    super(
+      {
+        name: "Annotations",
+        features: new Map<number, Feature<Geometry>[]>(),
+      },
+      mapManager.getContigDimensionHolder(),
+      {
+        borderColor: "#1f77b4",
+        fillColor: "rgba(31,119,180,0.15)",
+        width: 2,
+        zIndex: 20,
+      }
+    );
+  }
+
+  public addMarkerFromAssemblyBp(
+    xBp: number,
+    yBp: number,
+    name: string,
+    color = "#1f77b4"
+  ): void {
+    const xLocus = this.contigDimensionHolder.getSourceLocusByBp(xBp);
+    const yLocus = this.contigDimensionHolder.getSourceLocusByBp(yBp);
+    this.markers.push({
+      id: makeId("m"),
+      name,
+      color,
+      sourceXContig: xLocus.sourceContig,
+      sourceXBp: xLocus.sourceBp,
+      sourceYContig: yLocus.sourceContig,
+      sourceYBp: yLocus.sourceBp,
+    });
+  }
+
+  public addRectangleFromAssemblyBp(
+    xStartBp: number,
+    xEndBp: number,
+    yStartBp: number,
+    yEndBp: number,
+    name: string,
+    color = "#d62728"
+  ): void {
+    const xMin = Math.min(xStartBp, xEndBp);
+    const xMax = Math.max(xStartBp, xEndBp);
+    const yMin = Math.min(yStartBp, yEndBp);
+    const yMax = Math.max(yStartBp, yEndBp);
+    if (xMax <= xMin || yMax <= yMin) {
+      return;
+    }
+    const xSourceIntervals = this.toSourceIntervals(xMin, xMax);
+    const ySourceIntervals = this.toSourceIntervals(yMin, yMax);
+    for (const xInterval of xSourceIntervals) {
+      for (const yInterval of ySourceIntervals) {
+        this.rectangles.push({
+          id: makeId("r"),
+          name,
+          color,
+          sourceXContig: xInterval.sourceContig,
+          sourceXStartBp: xInterval.startBp,
+          sourceXEndBp: xInterval.endBp,
+          sourceYContig: yInterval.sourceContig,
+          sourceYStartBp: yInterval.startBp,
+          sourceYEndBp: yInterval.endBp,
+        });
+      }
+    }
+  }
+
+  public getMarkerCount(): number {
+    return this.markers.length;
+  }
+
+  public getRectangleCount(): number {
+    return this.rectangles.length;
+  }
+
+  public clearAll(): void {
+    this.markers.length = 0;
+    this.rectangles.length = 0;
+  }
+
+  public recalculateBorders(): void {
+    this.features = new Map();
+    for (const resolution of this.contigDimensionHolder.resolutions) {
+      this.features.set(resolution, []);
+    }
+    const viewManager = this.mapManager.getLayersManager();
+    for (const resolutionTuple of viewManager.resolutionTuples) {
+      const bpResolution = resolutionTuple.bpResolution;
+      const pixelResolution = resolutionTuple.pixelResolution;
+      const targetFeatures = this.features.get(bpResolution);
+      if (!targetFeatures) {
+        continue;
+      }
+
+      for (const marker of this.markers) {
+        const xProjected = this.contigDimensionHolder.projectSourceIntervalToAssembly(
+          marker.sourceXContig,
+          marker.sourceXBp,
+          marker.sourceXBp + 1
+        );
+        const yProjected = this.contigDimensionHolder.projectSourceIntervalToAssembly(
+          marker.sourceYContig,
+          marker.sourceYBp,
+          marker.sourceYBp + 1
+        );
+        for (const xInt of xProjected) {
+          for (const yInt of yProjected) {
+            const xPx = this.contigDimensionHolder.getPxContainingBp(
+              xInt.startBp,
+              bpResolution
+            );
+            const yPx = this.contigDimensionHolder.getPxContainingBp(
+              yInt.startBp,
+              bpResolution
+            );
+            const point = new Point([
+              xPx * pixelResolution,
+              -yPx * pixelResolution,
+            ]);
+            const pointFeature = new Feature({
+              name: marker.name,
+              geometry: point,
+            });
+            pointFeature.setStyle(
+              new Style({
+                image: new CircleStyle({
+                  radius: 5,
+                  fill: new Fill({ color: marker.color }),
+                  stroke: new Stroke({ color: "#111", width: 1 }),
+                }),
+                text: undefined,
+              })
+            );
+            targetFeatures.push(pointFeature);
+
+            const cross = new LineString([
+              [(xPx - 4) * pixelResolution, -(yPx - 4) * pixelResolution],
+              [(xPx + 4) * pixelResolution, -(yPx + 4) * pixelResolution],
+            ]);
+            const crossFeature = new Feature({
+              name: marker.name,
+              geometry: cross,
+            });
+            crossFeature.setStyle(
+              new Style({
+                stroke: new Stroke({ color: marker.color, width: 2 }),
+              })
+            );
+            targetFeatures.push(crossFeature);
+          }
+        }
+      }
+
+      for (const rect of this.rectangles) {
+        const xProjected = this.contigDimensionHolder.projectSourceIntervalToAssembly(
+          rect.sourceXContig,
+          rect.sourceXStartBp,
+          rect.sourceXEndBp
+        );
+        const yProjected = this.contigDimensionHolder.projectSourceIntervalToAssembly(
+          rect.sourceYContig,
+          rect.sourceYStartBp,
+          rect.sourceYEndBp
+        );
+        for (const xInt of xProjected) {
+          for (const yInt of yProjected) {
+            const xFrom = this.contigDimensionHolder.getPxContainingBp(
+              xInt.startBp,
+              bpResolution
+            );
+            const xTo =
+              this.contigDimensionHolder.getPxContainingBp(
+                Math.max(xInt.startBp, xInt.endBp - 1),
+                bpResolution
+              ) + 1;
+            const yFrom = this.contigDimensionHolder.getPxContainingBp(
+              yInt.startBp,
+              bpResolution
+            );
+            const yTo =
+              this.contigDimensionHolder.getPxContainingBp(
+                Math.max(yInt.startBp, yInt.endBp - 1),
+                bpResolution
+              ) + 1;
+            const polygon = new Polygon([
+              [
+                [xFrom * pixelResolution, -yFrom * pixelResolution],
+                [xFrom * pixelResolution, -yTo * pixelResolution],
+                [xTo * pixelResolution, -yTo * pixelResolution],
+                [xTo * pixelResolution, -yFrom * pixelResolution],
+                [xFrom * pixelResolution, -yFrom * pixelResolution],
+              ],
+            ]);
+            const polygonFeature = new Feature({
+              name: rect.name,
+              geometry: polygon,
+            });
+            polygonFeature.setStyle(
+              new Style({
+                stroke: new Stroke({ color: rect.color, width: 2 }),
+                fill: new Fill({ color: withAlpha(rect.color, 0.12) }),
+              })
+            );
+            targetFeatures.push(polygonFeature);
+          }
+        }
+      }
+    }
+  }
+
+  private toSourceIntervals(
+    startBp: number,
+    endBp: number
+  ): Array<{ sourceContig: string; startBp: number; endBp: number }> {
+    const result: Array<{ sourceContig: string; startBp: number; endBp: number }> =
+      [];
+    for (let i = 0; i < this.contigDimensionHolder.contigDescriptors.length; i++) {
+      const descriptor = this.contigDimensionHolder.contigDescriptors[i];
+      const assemblyStart = this.contigDimensionHolder.prefix_sum_bp[i];
+      const assemblyEnd = this.contigDimensionHolder.prefix_sum_bp[i + 1];
+      const overlapStart = Math.max(startBp, assemblyStart);
+      const overlapEnd = Math.min(endBp, assemblyEnd);
+      if (overlapEnd <= overlapStart) {
+        continue;
+      }
+      const localStart = overlapStart - assemblyStart;
+      const localEnd = overlapEnd - assemblyStart;
+      if (descriptor.direction === ContigDirection.FORWARD) {
+        result.push({
+          sourceContig: descriptor.contigSourceName,
+          startBp: descriptor.contigOffsetInSource + localStart,
+          endBp: descriptor.contigOffsetInSource + localEnd,
+        });
+      } else {
+        const len = descriptor.contigLengthBp;
+        result.push({
+          sourceContig: descriptor.contigSourceName,
+          startBp: descriptor.contigOffsetInSource + (len - localEnd),
+          endBp: descriptor.contigOffsetInSource + (len - localStart),
+        });
+      }
+    }
+    return result;
+  }
+}
+
+export { AnnotationTrack2D };
diff --git a/src/app/core/tracks/Track2DSymmetric.ts b/src/app/core/tracks/Track2DSymmetric.ts
index 0a33d8a..20b2cd0 100644
--- a/src/app/core/tracks/Track2DSymmetric.ts
+++ b/src/app/core/tracks/Track2DSymmetric.ts
@@ -45,7 +45,7 @@ type track2DSymmetricBorders = [startIncl: number, endExcl: number];
 
 interface Track2DSymmetricDescriptor {
   name: string;
-  features: Map<[resolution: number], Feature<Geometry>[]>;
+  features: Map<number, Feature<Geometry>[]>;
 }
 
 interface BasePairsTrack2DSymmetricDescriptor {
diff --git a/src/app/stores/notificationCenterStore.ts b/src/app/stores/notificationCenterStore.ts
new file mode 100644
index 0000000..2698ee5
--- /dev/null
+++ b/src/app/stores/notificationCenterStore.ts
@@ -0,0 +1,58 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export type NotificationLevel =
+  | "error"
+  | "warning"
+  | "success"
+  | "info"
+  | "message";
+
+export type NotificationEntry = {
+  id: number;
+  level: NotificationLevel;
+  message: string;
+  createdAt: number;
+};
+
+export const useNotificationCenterStore = defineStore(
+  "notificationCenter",
+  () => {
+    const entries = ref<NotificationEntry[]>([]);
+    const isOpen = ref(false);
+    const keepLast100 = ref(true);
+    const nextId = ref(1);
+
+    const add = (level: NotificationLevel, message: string) => {
+      entries.value.push({
+        id: nextId.value++,
+        level,
+        message,
+        createdAt: Date.now(),
+      });
+      if (keepLast100.value && entries.value.length > 100) {
+        entries.value.splice(0, entries.value.length - 100);
+      }
+    };
+
+    const clear = () => {
+      entries.value = [];
+    };
+
+    const setKeepLast100 = (enabled: boolean) => {
+      keepLast100.value = enabled;
+      if (enabled && entries.value.length > 100) {
+        entries.value = entries.value.slice(-100);
+      }
+    };
+
+    return {
+      entries,
+      isOpen,
+      keepLast100,
+      add,
+      clear,
+      setKeepLast100,
+    };
+  }
+);
diff --git a/src/app/ui/MainUIComponent.vue b/src/app/ui/MainUIComponent.vue
index 3abc36f..30b99a7 100644
--- a/src/app/ui/MainUIComponent.vue
+++ b/src/app/ui/MainUIComponent.vue
@@ -76,6 +76,7 @@
       :mapManager="mapManager"
       :filename="filename"
     ></WorkspaceComponent>
+    <NotificationCenterModal></NotificationCenterModal>
     <div
       class="toast-container position-absolute top-0 end-0 p-3"
       id="toasts-container"
@@ -98,6 +99,8 @@ import SimpleLinearGradient from "@/app/core/visualization/colormap/SimpleLinear
 import VisualizationOptions from "@/app/core/visualization/VisualizationOptions";
 import { ColorTranslator } from "colortranslator";
 import { LoadAGPRequest } from "@/app/core/net/api/request";
+import { LinkFASTARequest } from "@/app/core/net/api/request";
+import NotificationCenterModal from "@/app/ui/components/notifications/NotificationCenterModal.vue";
 
 import WorkspaceComponent from "@/app/ui/components/workspace/WorkspaceComponent.vue";
 import { Toaster, toast } from "vue-sonner";
@@ -190,10 +193,18 @@ function resetState() {
   if (hTrack) {
     hTrack.replaceChildren();
   }
+  const hRuler = document.getElementById("horizontal-ruler-div");
+  if (hRuler) {
+    hRuler.replaceChildren();
+  }
   const vTrack = document.getElementById("vertical-igv-track-div");
   if (vTrack) {
     vTrack.replaceChildren();
   }
+  const vRuler = document.getElementById("vertical-ruler-div");
+  if (vRuler) {
+    vRuler.replaceChildren();
+  }
 }
 
 function onClosed() {
@@ -206,17 +217,18 @@ function onClosed() {
 function onAttached() {
   networkManager.requestManager
     .attachSession()
-    .then(({ filename: attachedName, response }) => {
+    .then(({ filename: attachedName, fastaFilename: attachedFastaName, response }) => {
       if (!attachedName) {
         toast.error("No active session to attach");
         return;
       }
       mapManager.value?.dispose();
       filename.value = attachedName;
+      fastaFilename.value = attachedFastaName ?? "";
       const newManager = new ContactMapManager({
         response,
         filename: attachedName,
-        fastaFilename: fastaFilename.value ?? "",
+        fastaFilename: attachedFastaName ?? "",
         tileSize: tileSize.value,
         contigBorderColor: contigBorderColor.value,
         mapTargetSelector: "hic-contact-map",
@@ -261,6 +273,24 @@ async function openFileWithOptions(
   networkManager.mapManager = mapManager.value;
   newManager.initializeMap();
   applyDefaultVisualizationPreset();
+  if (ffname && ffname.trim() !== "") {
+    try {
+      const linkResponse = await networkManager.requestManager.linkFASTA(
+        new LinkFASTARequest({ fastaFilename: ffname, allowMismatch: true })
+      );
+      linkResponse.warnings.forEach((warning) =>
+        toast(warning, {
+          style: {
+            "background-color": "lightyellow",
+            color: "black",
+          },
+        })
+      );
+    } catch (error) {
+      console.error(error);
+      toast.error("Failed to link FASTA file " + ffname);
+    }
+  }
   stopOpenProgress();
 }
 
diff --git a/src/app/ui/components/notifications/NotificationCenterModal.vue b/src/app/ui/components/notifications/NotificationCenterModal.vue
new file mode 100644
index 0000000..678d3dc
--- /dev/null
+++ b/src/app/ui/components/notifications/NotificationCenterModal.vue
@@ -0,0 +1,201 @@
+<template>
+  <div v-if="notificationStore.isOpen">
+    <div
+      class="modal-backdrop fade show notification-center-backdrop"
+      @click="notificationStore.isOpen = false"
+    ></div>
+    <div
+      class="modal fade show notification-center-modal"
+      style="display: block"
+      tabindex="-1"
+      role="dialog"
+    >
+      <div class="modal-dialog modal-xl modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Notifications</h5>
+            <button
+              type="button"
+              class="btn-close"
+              @click="notificationStore.isOpen = false"
+            ></button>
+          </div>
+          <div class="modal-body">
+            <div class="notification-center-toolbar">
+              <label class="form-check-label notification-limit-toggle">
+                <input
+                  class="form-check-input"
+                  type="checkbox"
+                  :checked="notificationStore.keepLast100"
+                  @change="onToggleKeepLast100"
+                />
+                Keep only the last 100 notifications
+              </label>
+              <button
+                type="button"
+                class="btn btn-outline-secondary btn-sm"
+                @click="notificationStore.clear()"
+              >
+                Clear
+              </button>
+            </div>
+            <div class="notification-list">
+              <div
+                v-for="entry in orderedEntries"
+                :key="entry.id"
+                class="notification-entry"
+                :class="`notification-entry_${entry.level}`"
+              >
+                <div class="notification-entry-header">
+                  <span class="notification-level">{{ formatLevel(entry.level) }}</span>
+                  <span class="notification-time">{{ formatTimestamp(entry.createdAt) }}</span>
+                </div>
+                <div class="notification-message">{{ entry.message }}</div>
+              </div>
+              <div
+                v-if="orderedEntries.length === 0"
+                class="notification-empty-state"
+              >
+                No notifications yet
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button
+              type="button"
+              class="btn btn-secondary"
+              @click="notificationStore.isOpen = false"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  useNotificationCenterStore,
+  type NotificationLevel,
+} from "@/app/stores/notificationCenterStore";
+
+const notificationStore = useNotificationCenterStore();
+
+const orderedEntries = computed(() =>
+  notificationStore.entries.slice().reverse()
+);
+
+const onToggleKeepLast100 = (event: Event) => {
+  notificationStore.setKeepLast100(
+    (event.target as HTMLInputElement).checked
+  );
+};
+
+const formatTimestamp = (createdAt: number): string =>
+  new Date(createdAt).toLocaleString();
+
+const formatLevel = (level: NotificationLevel): string => {
+  switch (level) {
+    case "error":
+      return "Error";
+    case "warning":
+      return "Warning";
+    case "success":
+      return "Success";
+    case "info":
+      return "Info";
+    default:
+      return "Message";
+  }
+};
+</script>
+
+<style scoped>
+.notification-center-backdrop {
+  z-index: 2050;
+}
+
+.notification-center-modal {
+  z-index: 2060;
+}
+
+.notification-center-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.notification-limit-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.notification-list {
+  max-height: min(70vh, 720px);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.notification-entry {
+  border-left: 5px solid transparent;
+  border-radius: 8px;
+  padding: 10px 12px;
+  background: #f8f9fa;
+}
+
+.notification-entry_error {
+  border-left-color: #dc3545;
+  background: #fff5f5;
+}
+
+.notification-entry_warning {
+  border-left-color: #fd7e14;
+  background: #fff7ed;
+}
+
+.notification-entry_success {
+  border-left-color: #198754;
+  background: #f0fff4;
+}
+
+.notification-entry_info,
+.notification-entry_message {
+  border-left-color: #0d6efd;
+  background: #f4f8ff;
+}
+
+.notification-entry-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+
+.notification-level {
+  font-weight: 700;
+}
+
+.notification-time {
+  color: #6c757d;
+  font-size: 12px;
+}
+
+.notification-message {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.notification-empty-state {
+  color: #6c757d;
+  padding: 12px 4px;
+}
+</style>
diff --git a/src/app/ui/components/toolbar/bottom_blocks/BottomButtons.vue b/src/app/ui/components/toolbar/bottom_blocks/BottomButtons.vue
index 2ae1608..9026345 100644
--- a/src/app/ui/components/toolbar/bottom_blocks/BottomButtons.vue
+++ b/src/app/ui/components/toolbar/bottom_blocks/BottomButtons.vue
@@ -21,8 +21,16 @@
 
 <template>
   <div class="block-of-buttons">
-    <button class="btn btn-outline-primary" type="button">
+    <button
+      class="btn btn-outline-primary"
+      type="button"
+      title="Notifications"
+      @click="notificationStore.isOpen = true"
+    >
       <i class="bi bi-chevron-left"></i>
+      <span v-if="notificationCount > 0" class="notification-badge">
+        {{ notificationCount > 99 ? "99+" : notificationCount }}
+      </span>
     </button>
     <button class="btn btn-outline-primary" type="button">
       <i class="bi bi-terminal"></i>
@@ -30,7 +38,13 @@
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { computed } from "vue";
+import { useNotificationCenterStore } from "@/app/stores/notificationCenterStore";
+
+const notificationStore = useNotificationCenterStore();
+const notificationCount = computed(() => notificationStore.entries.length);
+</script>
 
 <style scoped>
 .block-of-buttons {
@@ -38,4 +52,23 @@
   flex-direction: column;
   gap: 4px;
 }
+
+.block-of-buttons button {
+  position: relative;
+}
+
+.notification-badge {
+  position: absolute;
+  right: -4px;
+  top: -4px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: #dc3545;
+  color: white;
+  font-size: 10px;
+  line-height: 18px;
+  text-align: center;
+}
 </style>
diff --git a/src/app/ui/components/tracks/HorizontalIGVTrack.vue b/src/app/ui/components/tracks/HorizontalIGVTrack.vue
index a86520c..96d05c8 100644
--- a/src/app/ui/components/tracks/HorizontalIGVTrack.vue
+++ b/src/app/ui/components/tracks/HorizontalIGVTrack.vue
@@ -20,16 +20,144 @@
  -->
 
 <template>
-  <div id="horizontal-igv-track-div"></div>
+  <div id="horizontal-igv-track-div" class="horizontal-track-canvas-host">
+    <canvas ref="trackCanvas"></canvas>
+    <div ref="chipList" class="track-chip-list"></div>
+    <div ref="statusOverlay" class="track-status-overlay"></div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+const props = defineProps<{
+  mapManager?: ContactMapManager;
+}>();
+
+const trackCanvas = ref<HTMLCanvasElement | null>(null);
+const chipList = ref<HTMLDivElement | null>(null);
+const statusOverlay = ref<HTMLDivElement | null>(null);
+let unsubscribeRenderState: (() => void) | undefined;
+let unsubscribeTrackList: (() => void) | undefined;
+
+const bindCanvas = () => {
+  props.mapManager?.linearTrackManager.registerCanvas(
+    "horizontal",
+    trackCanvas.value
+  );
+};
+
+const bindSubscriptions = () => {
+  unsubscribeRenderState?.();
+  unsubscribeTrackList?.();
+  if (statusOverlay.value) {
+    statusOverlay.value.textContent = props.mapManager ? "No tracks loaded" : "";
+  }
+  if (chipList.value) {
+    chipList.value.replaceChildren();
+  }
+  if (!props.mapManager) {
+    return;
+  }
+  unsubscribeRenderState =
+    props.mapManager.linearTrackManager.subscribeRenderState(
+      "horizontal",
+      (state) => {
+        if (statusOverlay.value) {
+          statusOverlay.value.textContent = state.statusMessage ?? "";
+          statusOverlay.value.style.display = state.statusMessage ? "block" : "none";
+        }
+      }
+    );
+  unsubscribeTrackList = props.mapManager.linearTrackManager.subscribeTrackList(
+    (tracks) => {
+      if (!chipList.value) {
+        return;
+      }
+      const visibleTrackNames = tracks
+        .filter((track) => track.visible)
+        .map((track) => track.name);
+      const chips = visibleTrackNames.map((trackName) => {
+        const chip = document.createElement("span");
+        chip.className = "track-chip";
+        chip.textContent = trackName;
+        return chip;
+      });
+      chipList.value.replaceChildren(...chips);
+      chipList.value.style.display = chips.length > 0 ? "flex" : "none";
+    }
+  );
+};
+
+onMounted(() => {
+  bindCanvas();
+  bindSubscriptions();
+});
+
+watch(
+  () => props.mapManager,
+  () => {
+    bindCanvas();
+    bindSubscriptions();
+  }
+);
+
+onBeforeUnmount(() => {
+  props.mapManager?.linearTrackManager.registerCanvas("horizontal", null);
+  unsubscribeRenderState?.();
+  unsubscribeTrackList?.();
+});
+</script>
 
 <style scoped>
 #horizontal-igv-track-div {
-  /* background-color: blue; */
+  position: relative;
   width: 100%;
   height: 100%;
   border: 1px solid black;
+  overflow: hidden;
+  background: rgba(244, 247, 251, 0.98);
+}
+
+#horizontal-igv-track-div canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.track-chip-list {
+  position: absolute;
+  left: 6px;
+  top: 6px;
+  display: none;
+  flex-wrap: wrap;
+  gap: 4px;
+  max-width: calc(100% - 12px);
+  pointer-events: none;
+}
+
+.track-chip {
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: rgba(40, 48, 66, 0.78);
+  color: white;
+  font-size: 10px;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.track-status-overlay {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  display: none;
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.86);
+  color: rgba(55, 65, 81, 0.92);
+  font-size: 11px;
+  line-height: 1.2;
+  pointer-events: none;
 }
 </style>
diff --git a/src/app/ui/components/tracks/VerticalIGVTrack.vue b/src/app/ui/components/tracks/VerticalIGVTrack.vue
index ee40a48..1525d4b 100644
--- a/src/app/ui/components/tracks/VerticalIGVTrack.vue
+++ b/src/app/ui/components/tracks/VerticalIGVTrack.vue
@@ -20,15 +20,149 @@
  -->
 
 <template>
-  <div id="vertical-igv-track-div"></div>
+  <div id="vertical-igv-track-div" class="vertical-track-canvas-host">
+    <canvas ref="trackCanvas"></canvas>
+    <div ref="chipList" class="track-chip-list"></div>
+    <div ref="statusOverlay" class="track-status-overlay"></div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import type { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+const props = defineProps<{
+  mapManager?: ContactMapManager;
+}>();
+
+const trackCanvas = ref<HTMLCanvasElement | null>(null);
+const chipList = ref<HTMLDivElement | null>(null);
+const statusOverlay = ref<HTMLDivElement | null>(null);
+let unsubscribeRenderState: (() => void) | undefined;
+let unsubscribeTrackList: (() => void) | undefined;
+
+const bindCanvas = () => {
+  props.mapManager?.linearTrackManager.registerCanvas(
+    "vertical",
+    trackCanvas.value
+  );
+};
+
+const bindSubscriptions = () => {
+  unsubscribeRenderState?.();
+  unsubscribeTrackList?.();
+  if (statusOverlay.value) {
+    statusOverlay.value.textContent = props.mapManager ? "No tracks loaded" : "";
+  }
+  if (chipList.value) {
+    chipList.value.replaceChildren();
+  }
+  if (!props.mapManager) {
+    return;
+  }
+  unsubscribeRenderState =
+    props.mapManager.linearTrackManager.subscribeRenderState(
+      "vertical",
+      (state) => {
+        if (statusOverlay.value) {
+          statusOverlay.value.textContent = state.statusMessage ?? "";
+          statusOverlay.value.style.display = state.statusMessage ? "block" : "none";
+        }
+      }
+    );
+  unsubscribeTrackList = props.mapManager.linearTrackManager.subscribeTrackList(
+    (tracks) => {
+      if (!chipList.value) {
+        return;
+      }
+      const visibleTrackNames = tracks
+        .filter((track) => track.visible)
+        .map((track) => track.name);
+      const chips = visibleTrackNames.map((trackName) => {
+        const chip = document.createElement("span");
+        chip.className = "track-chip";
+        chip.textContent = trackName;
+        return chip;
+      });
+      chipList.value.replaceChildren(...chips);
+      chipList.value.style.display = chips.length > 0 ? "flex" : "none";
+    }
+  );
+};
+
+onMounted(() => {
+  bindCanvas();
+  bindSubscriptions();
+});
+
+watch(
+  () => props.mapManager,
+  () => {
+    bindCanvas();
+    bindSubscriptions();
+  }
+);
+
+onBeforeUnmount(() => {
+  props.mapManager?.linearTrackManager.registerCanvas("vertical", null);
+  unsubscribeRenderState?.();
+  unsubscribeTrackList?.();
+});
+</script>
 
 <style scoped>
 #vertical-igv-track-div {
+  position: relative;
   width: 100%;
   height: 100%;
   border: 1px solid black;
+  overflow: hidden;
+  background: rgba(244, 247, 251, 0.98);
+}
+
+#vertical-igv-track-div canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.track-chip-list {
+  position: absolute;
+  left: 6px;
+  top: 6px;
+  display: none;
+  flex-direction: column;
+  gap: 4px;
+  max-height: calc(100% - 12px);
+  pointer-events: none;
+}
+
+.track-chip {
+  padding: 2px 6px;
+  border-radius: 999px;
+  background: rgba(40, 48, 66, 0.78);
+  color: white;
+  font-size: 10px;
+  line-height: 1.2;
+  white-space: nowrap;
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+}
+
+.track-status-overlay {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  max-height: calc(100% - 16px);
+  display: none;
+  padding: 4px 6px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.86);
+  color: rgba(55, 65, 81, 0.92);
+  font-size: 11px;
+  line-height: 1.2;
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  pointer-events: none;
 }
 </style>
diff --git a/src/app/ui/components/upper_ribbon/FastaLinkWarningModal.vue b/src/app/ui/components/upper_ribbon/FastaLinkWarningModal.vue
new file mode 100644
index 0000000..de2b3f1
--- /dev/null
+++ b/src/app/ui/components/upper_ribbon/FastaLinkWarningModal.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="fasta-link-backdrop" @click.self="emit('cancel')">
+    <div class="fasta-link-modal">
+      <div class="fasta-link-header">
+        <h5 class="mb-0">Link FASTA with warnings</h5>
+        <button type="button" class="btn-close" @click="emit('cancel')"></button>
+      </div>
+      <div class="fasta-link-body">
+        <div class="mb-3">
+          <strong>Selected FASTA:</strong> {{ report.fastaFilename }}
+        </div>
+        <ul class="mb-3">
+          <li v-for="(warning, index) in report.warnings" :key="index">
+            {{ warning }}
+          </li>
+        </ul>
+        <div class="compatibility-grid mb-3">
+          <div>FASTA sequences</div>
+          <div>{{ report.compatibility.fastaRecordCount }}</div>
+          <div>Assembly contigs</div>
+          <div>{{ report.compatibility.assemblyContigCount }}</div>
+          <div>Same order and length</div>
+          <div>{{ yesNo(report.compatibility.sameOrderAndLength) }}</div>
+          <div>Same length multiset</div>
+          <div>{{ yesNo(report.compatibility.sameLengthMultiset) }}</div>
+          <div>Names match current names</div>
+          <div>{{ yesNo(report.compatibility.sameOrderLengthAndCurrentNames) }}</div>
+          <div>Names match original names</div>
+          <div>{{ yesNo(report.compatibility.sameOrderLengthAndOriginalNames) }}</div>
+          <div>Names match source names</div>
+          <div>{{ yesNo(report.compatibility.sameOrderLengthAndSourceNames) }}</div>
+        </div>
+        <div v-if="report.compatibility.mismatches.length > 0">
+          <div class="fw-semibold mb-2">First mismatches</div>
+          <div class="mismatch-list">
+            <div
+              v-for="mismatch in report.compatibility.mismatches"
+              :key="mismatch.index"
+              class="mismatch-item"
+            >
+              <div>#{{ mismatch.index + 1 }}</div>
+              <div>
+                FASTA: {{ mismatch.fastaName ?? "missing" }}
+                <span v-if="mismatch.fastaLengthBp >= 0">
+                  ({{ mismatch.fastaLengthBp.toLocaleString() }} bp)
+                </span>
+              </div>
+              <div>
+                Assembly: {{ mismatch.assemblyCurrentName ?? "missing" }}
+                <span v-if="mismatch.assemblyLengthBp >= 0">
+                  ({{ mismatch.assemblyLengthBp.toLocaleString() }} bp)
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="fasta-link-footer">
+        <button type="button" class="btn btn-secondary" @click="emit('cancel')">
+          Cancel
+        </button>
+        <button type="button" class="btn btn-warning" @click="emit('proceed')">
+          Proceed anyway
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { FastaLinkResponse } from "@/app/core/net/api/response";
+
+const props = defineProps<{
+  report: FastaLinkResponse;
+}>();
+
+const emit = defineEmits<{
+  (e: "cancel"): void;
+  (e: "proceed"): void;
+}>();
+
+function yesNo(value: boolean): string {
+  return value ? "Yes" : "No";
+}
+</script>
+
+<style scoped>
+.fasta-link-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2200;
+}
+
+.fasta-link-modal {
+  background: #ffffff;
+  border-radius: 10px;
+  width: min(860px, 92vw);
+  max-height: 90vh;
+  overflow: auto;
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
+  padding: 18px 20px;
+}
+
+.fasta-link-header,
+.fasta-link-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.fasta-link-body {
+  margin: 16px 0;
+}
+
+.compatibility-grid {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 6px 14px;
+}
+
+.mismatch-list {
+  display: grid;
+  gap: 8px;
+}
+
+.mismatch-item {
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  padding: 8px 10px;
+  background: #f8f9fa;
+}
+</style>
diff --git a/src/app/ui/components/upper_ribbon/NavigationBar.vue b/src/app/ui/components/upper_ribbon/NavigationBar.vue
index e35e664..12721f8 100644
--- a/src/app/ui/components/upper_ribbon/NavigationBar.vue
+++ b/src/app/ui/components/upper_ribbon/NavigationBar.vue
@@ -91,9 +91,11 @@
               >View</a
             >
             <ul class="dropdown-menu">
-              <li><a class="dropdown-item" href="#">Choose color scheme</a></li>
-              <li><a class="dropdown-item" href="#">Show borders</a></li>
-              <li><a class="dropdown-item" href="#">Something else</a></li>
+              <li>
+                <a class="dropdown-item" href="#" @click="onOpenTrackManager"
+                  >Tracks and layers...</a
+                >
+              </li>
             </ul>
           </li>
           <!-- Bookmarks -->
@@ -258,7 +260,8 @@
     @selected="linkFASTA"
     @dismissed="onFASTAFileDismissed"
     :error-message="errorMessage"
-    :file-name-predicate="(name: string) => name.endsWith('.fasta') || name.endsWith('.fa')"
+    :title="'Select FASTA file'"
+    :file-name-predicate="isFastaFilename"
   ></UniversalFileSelector>
   <UniversalFileSelector
     :network-manager="props.networkManager"
@@ -274,6 +277,17 @@
     @dismissed="onConvertCoolersDismissed"
   >
   </CoolerConverter>
+  <TrackManager
+    v-if="trackManagerOpen"
+    :map-manager="props.mapManager"
+    @dismissed="trackManagerOpen = false"
+  />
+  <FastaLinkWarningModal
+    v-if="fastaLinkReport"
+    :report="fastaLinkReport"
+    @cancel="cancelFastaLinkWarning"
+    @proceed="proceedFastaLinkWarning"
+  />
   <div
     v-if="aboutOpen"
     class="about-backdrop"
@@ -302,9 +316,6 @@
 
 <script setup lang="ts">
 import type { NetworkManager } from "@/app/core/net/NetworkManager.js";
-import OpenFileSelector from "@/app/ui/components/upper_ribbon/OpenFileSelector.vue";
-import FASTAFileSelector from "@/app/ui/components/upper_ribbon/FASTAFileSelector.vue";
-import AGPFileSelector from "@/app/ui/components/upper_ribbon/AGPFileSelector.vue";
 import { Ref, ref, watch } from "vue";
 import {
   GetAGPForAssemblyRequest,
@@ -315,18 +326,24 @@ import {
 import { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
 import CoolerConverter from "./CoolerConverter.vue";
 import UniversalFileSelector from "@/app/ui/components/upper_ribbon/UniversalFileSelector.vue";
+import TrackManager from "@/app/ui/components/upper_ribbon/TrackManager.vue";
+import FastaLinkWarningModal from "@/app/ui/components/upper_ribbon/FastaLinkWarningModal.vue";
 import { toast } from "vue-sonner";
 import { storeToRefs } from "pinia";
 import { useErrorToastStore } from "@/app/stores/errorToastStore";
 import { useUiSettingsStore } from "@/app/stores/uiSettingsStore";
+import type { FastaLinkResponse } from "@/app/core/net/api/response";
 import pkg from "../../../../../package.json";
 const openingFile = ref(false);
 const openingFASTAFile = ref(false);
 const openingAGPFile = ref(false);
 const convertingCoolers = ref(false);
+const trackManagerOpen = ref(false);
 const saving = ref(false);
 const gatewayAddress: Ref<string> = ref("http://localhost:5000/");
 const aboutOpen = ref(false);
+const pendingFastaFilename = ref<string | null>(null);
+const fastaLinkReport = ref<FastaLinkResponse | null>(null);
 const backendVersion = ref("loading...");
 const webuiVersion = ref(String((pkg as { version?: string })?.version ?? "unknown"));
 const webuiCommit = ref("unknown");
@@ -378,6 +395,10 @@ function onOpenFile() {
   openingFile.value = true;
 }
 
+function onOpenTrackManager() {
+  trackManagerOpen.value = true;
+}
+
 function onLoadAGP() {
   openingAGPFile.value = true;
 }
@@ -449,11 +470,15 @@ function openAbout(): void {
 }
 
 function onOpenFASTAFile() {
+  pendingFastaFilename.value = null;
+  fastaLinkReport.value = null;
   openingFASTAFile.value = true;
 }
 
 function onFASTAFileDismissed() {
   openingFASTAFile.value = false;
+  pendingFastaFilename.value = null;
+  fastaLinkReport.value = null;
 }
 
 function onGatewayChanged() {
@@ -495,14 +520,59 @@ function openAGP(filename: string) {
     });
 }
 
-function linkFASTA(filename: string) {
+function isFastaFilename(name: string): boolean {
+  const lowered = name.toLowerCase();
+  return (
+    lowered.endsWith(".fasta") ||
+    lowered.endsWith(".fa") ||
+    lowered.endsWith(".fna") ||
+    lowered.endsWith(".fas") ||
+    lowered.endsWith(".fasta.gz") ||
+    lowered.endsWith(".fa.gz") ||
+    lowered.endsWith(".fna.gz") ||
+    lowered.endsWith(".fas.gz")
+  );
+}
+
+function cancelFastaLinkWarning(): void {
+  pendingFastaFilename.value = null;
+  fastaLinkReport.value = null;
+}
+
+function proceedFastaLinkWarning(): void {
+  const filename = pendingFastaFilename.value;
+  if (!filename) {
+    cancelFastaLinkWarning();
+    return;
+  }
+  linkFASTA(filename, true);
+}
+
+function linkFASTA(filename: string, allowMismatch = false) {
   props.networkManager.requestManager
-    .linkFASTA(new LinkFASTARequest({ fastaFilename: filename }))
-    .then(() => {
+    .linkFASTA(new LinkFASTARequest({ fastaFilename: filename, allowMismatch }))
+    .then((response) => {
+      if (response.requiresConfirmation && !allowMismatch) {
+        openingFile.value = false;
+        openingFASTAFile.value = false;
+        pendingFastaFilename.value = filename;
+        fastaLinkReport.value = response;
+        return;
+      }
+      pendingFastaFilename.value = null;
+      fastaLinkReport.value = null;
       openingFile.value = false;
       openingFASTAFile.value = false;
-      errorMessage.value = false;
+      errorMessage.value = null;
       emit("fastaLinked", filename);
+      response.warnings.forEach((warning) =>
+        toast(warning, {
+          style: {
+            "background-color": "lightyellow",
+            color: "black",
+          },
+        })
+      );
       toast.message("Linked FASTA file " + filename);
     })
     .catch((e) => {
diff --git a/src/app/ui/components/upper_ribbon/TrackManager.vue b/src/app/ui/components/upper_ribbon/TrackManager.vue
new file mode 100644
index 0000000..fb03a30
--- /dev/null
+++ b/src/app/ui/components/upper_ribbon/TrackManager.vue
@@ -0,0 +1,353 @@
+<!--
+ Copyright (c) 2021-2026 Aleksandr Serdiukov, Anton Zamyatin, Aleksandr Sinitsyn, Vitalii Dravgelis and Computer Technologies Laboratory ITMO University team.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy of
+ this software and associated documentation files (the "Software"), to deal in
+ the Software without restriction, including without limitation the rights to
+ use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ the Software, and to permit persons to whom the Software is furnished to do so,
+ subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ -->
+
+<template>
+  <div class="track-manager-root">
+    <div class="modal-backdrop fade show"></div>
+    <div
+      class="modal fade show"
+      style="display: block"
+      tabindex="-1"
+      role="dialog"
+    >
+      <div class="modal-dialog modal-lg modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Tracks and layers</h5>
+            <button class="btn-close" @click="$emit('dismissed')"></button>
+          </div>
+          <div class="modal-body">
+            <div v-if="!props.mapManager" class="alert alert-warning">
+              Open a HiCT file first.
+            </div>
+            <template v-else>
+              <div class="row g-2 align-items-end mb-3">
+                <div class="col-6">
+                  <label class="form-label">Track file</label>
+                  <select v-model="selectedFile" class="form-select">
+                    <option value="">Select BED/VCF/BigWig/BAM file</option>
+                    <option v-for="file in availableFiles" :key="file" :value="file">
+                      {{ file }}
+                    </option>
+                  </select>
+                </div>
+                <div class="col-4">
+                  <label class="form-label">Display name</label>
+                  <input
+                    v-model="trackDisplayName"
+                    type="text"
+                    class="form-control"
+                    placeholder="Optional"
+                  />
+                </div>
+                <div class="col-2 d-grid">
+                  <button class="btn btn-primary" @click="onAddTrack" :disabled="!selectedFile">
+                    Add
+                  </button>
+                </div>
+              </div>
+
+              <div class="tracks-list">
+                <div
+                  class="track-row d-flex align-items-center gap-2"
+                  v-for="track in tracks"
+                  :key="track.trackId"
+                >
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    :checked="track.visible"
+                    @change="onToggleVisible(track.trackId, ($event.target as HTMLInputElement).checked)"
+                  />
+                  <input
+                    type="color"
+                    class="form-control form-control-color"
+                    :value="normalizeColor(track.color)"
+                    @change="onChangeColor(track.trackId, ($event.target as HTMLInputElement).value)"
+                  />
+                  <input
+                    type="text"
+                    class="form-control"
+                    :value="track.name"
+                    @change="onRename(track.trackId, ($event.target as HTMLInputElement).value)"
+                  />
+                  <span class="badge text-bg-secondary">{{ track.type }}</span>
+                  <select
+                    v-if="track.type === 'BIGWIG'"
+                    class="form-select form-select-sm track-mode-select"
+                    :value="normalizeBigWigAggregation(track.aggregationMode)"
+                    @change="onChangeBigWigAggregation(track.trackId, ($event.target as HTMLSelectElement).value)"
+                  >
+                    <option value="MAX">max</option>
+                    <option value="MEAN">mean</option>
+                    <option value="SUM">sum</option>
+                  </select>
+                  <select
+                    v-if="track.type === 'BAM'"
+                    class="form-select form-select-sm track-mode-select"
+                    :value="normalizeBamMode(track.renderMode)"
+                    @change="onChangeBamMode(track.trackId, ($event.target as HTMLSelectElement).value)"
+                  >
+                    <option value="COVERAGE">coverage</option>
+                    <option value="READ_DENSITY">density</option>
+                  </select>
+                  <small class="text-muted">{{ formatFeatureCount(track.featureCount) }}</small>
+                  <button class="btn btn-sm btn-outline-danger ms-auto" @click="onRemove(track.trackId)">
+                    Remove
+                  </button>
+                </div>
+                <div v-if="tracks.length === 0" class="text-muted">No tracks loaded</div>
+              </div>
+
+              <hr />
+              <div class="d-flex align-items-center gap-2">
+                <button class="btn btn-outline-primary" @click="addMarkerAtCenter">
+                  Add marker at center
+                </button>
+                <button
+                  class="btn btn-outline-primary"
+                  @click="addRectangleFromSelection"
+                >
+                  Add rectangle from selection
+                </button>
+                <button class="btn btn-outline-danger" @click="clearAnnotations">
+                  Clear annotations
+                </button>
+              </div>
+              <small class="text-muted">
+                Rectangles use current selection. Markers and rectangles stay aligned after scaffolding operations.
+              </small>
+            </template>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-secondary" @click="$emit('dismissed')">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
+import type { TrackSummaryResponse } from "@/app/core/net/api/response";
+import { onMounted, ref } from "vue";
+import { toast } from "vue-sonner";
+
+const props = defineProps<{
+  mapManager?: ContactMapManager;
+}>();
+
+defineEmits<{
+  (e: "dismissed"): void;
+}>();
+
+const availableFiles = ref<string[]>([]);
+const selectedFile = ref("");
+const trackDisplayName = ref("");
+const tracks = ref<TrackSummaryResponse[]>([]);
+
+const normalizeColor = (value: string): string => {
+  if (/^#[0-9a-fA-F]{6}$/.test(value)) {
+    return value;
+  }
+  return "#4e79a7";
+};
+
+const formatFeatureCount = (featureCount: number): string => {
+  if (!Number.isFinite(featureCount) || featureCount < 0) {
+    return "streaming";
+  }
+  return `${featureCount} features`;
+};
+
+const normalizeBamMode = (value: string): "COVERAGE" | "READ_DENSITY" => {
+  return value === "READ_DENSITY" ? "READ_DENSITY" : "COVERAGE";
+};
+
+const normalizeBigWigAggregation = (value: string): "MAX" | "MEAN" | "SUM" => {
+  if (value === "MEAN") {
+    return "MEAN";
+  }
+  if (value === "SUM") {
+    return "SUM";
+  }
+  return "MAX";
+};
+
+const refreshFiles = async () => {
+  if (!props.mapManager) {
+    availableFiles.value = [];
+    return;
+  }
+  try {
+    availableFiles.value = await props.mapManager.linearTrackManager.listTrackFiles();
+  } catch (err) {
+    toast.error(String(err));
+  }
+};
+
+const refreshTracks = async () => {
+  if (!props.mapManager) {
+    tracks.value = [];
+    return;
+  }
+  try {
+    tracks.value = await props.mapManager.linearTrackManager.refreshTrackList();
+  } catch (err) {
+    toast.error(String(err));
+  }
+};
+
+const onAddTrack = async () => {
+  if (!props.mapManager || !selectedFile.value) {
+    return;
+  }
+  try {
+    await props.mapManager.linearTrackManager.openTrack(
+      selectedFile.value,
+      trackDisplayName.value.trim() || undefined
+    );
+    trackDisplayName.value = "";
+    await refreshTracks();
+  } catch (err) {
+    toast.error(String(err));
+  }
+};
+
+const onToggleVisible = async (trackId: string, visible: boolean) => {
+  if (!props.mapManager) {
+    return;
+  }
+  try {
+    await props.mapManager.linearTrackManager.updateTrack(trackId, { visible });
+    await refreshTracks();
+  } catch (err) {
+    toast.error(String(err));
+  }
+};
+
+const onChangeColor = async (trackId: string, color: string) => {
+  if (!props.mapManager) {
+    return;
+  }
+  try {
+    await props.mapManager.linearTrackManager.updateTrack(trackId, { color });
+    await refreshTracks();
+  } catch (err) {
+    toast.error(String(err));
+  }
+};
+
+const onRename = async (trackId: string, name: string) => {
+  if (!props.mapManager) {
+    return;
+  }
+  try {
+    await props.mapManager.linearTrackManager.updateTrack(trackId, { name });
+    await refreshTracks();
+  } catch (err) {
+    toast.error(String(err));
+  }
+};
+
+const onRemove = async (trackId: string) => {
+  if (!props.mapManager) {
+    return;
+  }
+  try {
+    await props.mapManager.linearTrackManager.removeTrack(trackId);
+    await refreshTracks();
+  } catch (err) {
+    toast.error(String(err));
+  }
+};
+
+const onChangeBamMode = async (trackId: string, renderMode: string) => {
+  if (!props.mapManager) {
+    return;
+  }
+  try {
+    await props.mapManager.linearTrackManager.updateTrack(trackId, {
+      renderMode: normalizeBamMode(renderMode),
+    });
+    await refreshTracks();
+  } catch (err) {
+    toast.error(String(err));
+  }
+};
+
+const onChangeBigWigAggregation = async (
+  trackId: string,
+  aggregationMode: string
+) => {
+  if (!props.mapManager) {
+    return;
+  }
+  try {
+    await props.mapManager.linearTrackManager.updateTrack(trackId, {
+      aggregationMode: normalizeBigWigAggregation(aggregationMode),
+    });
+    await refreshTracks();
+  } catch (err) {
+    toast.error(String(err));
+  }
+};
+
+const addMarkerAtCenter = () => {
+  props.mapManager?.getLayersManager().addAnnotationMarkerAtCenter();
+};
+
+const addRectangleFromSelection = () => {
+  props.mapManager?.getLayersManager().addAnnotationRectangleFromSelection();
+};
+
+const clearAnnotations = () => {
+  props.mapManager?.getLayersManager().clearAnnotations();
+};
+
+onMounted(async () => {
+  await Promise.all([refreshFiles(), refreshTracks()]);
+});
+</script>
+
+<style scoped>
+.tracks-list {
+  max-height: 45vh;
+  overflow: auto;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  padding: 0.5rem;
+}
+
+.track-row {
+  padding: 0.25rem 0;
+  border-bottom: 1px solid #eee;
+}
+
+.track-row:last-child {
+  border-bottom: none;
+}
+
+.track-mode-select {
+  max-width: 7rem;
+}
+</style>
diff --git a/src/app/ui/components/workspace/InteractiveWorkspace.vue b/src/app/ui/components/workspace/InteractiveWorkspace.vue
index 03bc791..0625c8b 100644
--- a/src/app/ui/components/workspace/InteractiveWorkspace.vue
+++ b/src/app/ui/components/workspace/InteractiveWorkspace.vue
@@ -21,15 +21,16 @@
 
 <template>
   <div :class="iwsClass" :style="iwcStyle">
-    <div class="interactive-workspace_tracknames">
-      <TrackNames></TrackNames>
+    <div class="interactive-workspace_corner_track"></div>
+    <div class="interactive-workspace_corner_ruler"></div>
+    <div class="interactive-workspace_horizontal_tracks">
+      <HorizontalIGVTrack :map-manager="props.mapManager"></HorizontalIGVTrack>
     </div>
-    <div class="interactive-workspace_horizontal">
-      <HorizontalIGVTrack></HorizontalIGVTrack>
-    </div>
-    <div class="interactive-workspace_vertical">
-      <VerticalIGVTrack></VerticalIGVTrack>
+    <div class="interactive-workspace_horizontal_ruler" id="horizontal-ruler-div"></div>
+    <div class="interactive-workspace_vertical_tracks">
+      <VerticalIGVTrack :map-manager="props.mapManager"></VerticalIGVTrack>
     </div>
+    <div class="interactive-workspace_vertical_ruler" id="vertical-ruler-div"></div>
     <div class="interactive-workspace_content">
       <ContactMap :map-manager="props.mapManager"></ContactMap>
     </div>
@@ -41,15 +42,13 @@ import {
   ContactMapManager,
   // type ContactMapManagerOptions,
 } from "@/app/core/mapmanagers/ContactMapManager";
-import TrackNames from "./TrackNames.vue";
 import HorizontalIGVTrack from "../tracks/HorizontalIGVTrack.vue";
 import ContactMap from "../../contactmap/ContactMap.vue";
 import VerticalIGVTrack from "../tracks/VerticalIGVTrack.vue";
 
 import { useStyleStore } from "@/app/stores/styleStore";
-import { ref, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { storeToRefs } from "pinia";
-import { ColorTranslator } from "colortranslator";
 
 const stylesStore = useStyleStore();
 
@@ -71,42 +70,117 @@ const props = defineProps<{
   mapManager: ContactMapManager | undefined;
   filename?: string;
 }>();
+
+const visibleTrackCount = ref(0);
+let unsubscribeTrackList: (() => void) | undefined;
+
+const bindTrackVisibility = () => {
+  unsubscribeTrackList?.();
+  visibleTrackCount.value = 0;
+  if (!props.mapManager) {
+    return;
+  }
+  const syncVisibleCount = () => {
+    visibleTrackCount.value = props.mapManager
+      ?.linearTrackManager.getTracksSnapshot()
+      .filter((track) => track.visible).length ?? 0;
+  };
+  syncVisibleCount();
+  unsubscribeTrackList = props.mapManager.linearTrackManager.subscribeTrackList(
+    () => {
+      syncVisibleCount();
+    }
+  );
+};
+
+onMounted(() => {
+  bindTrackVisibility();
+});
+
+watch(
+  () => props.mapManager,
+  () => {
+    bindTrackVisibility();
+  }
+);
+
+watch(visibleTrackCount, async () => {
+  await nextTick();
+  window.requestAnimationFrame(() => {
+    void props.mapManager?.linearTrackManager.render();
+  });
+});
+
+onBeforeUnmount(() => {
+  unsubscribeTrackList?.();
+});
+
+const trackPanelCssSize = computed(() =>
+  visibleTrackCount.value > 0 ? "140px" : "0px"
+);
+const rulerPanelCssSize = "44px";
 </script>
 
 <style scoped>
 .interactive-workspace {
   width: 100%;
   display: grid;
-  grid-template-rows: 100px 1fr;
-  grid-template-columns: 100px 1fr;
+  grid-template-rows: v-bind(rulerPanelCssSize) v-bind(trackPanelCssSize) 1fr;
+  grid-template-columns: v-bind(rulerPanelCssSize) v-bind(trackPanelCssSize) 1fr;
   grid-template-areas:
-    "tracknames horizontal"
-    "vertical content";
+    "corner-ruler corner-track horizontal-ruler"
+    "corner-ruler corner-track horizontal-tracks"
+    "vertical-ruler vertical-tracks content";
 }
 
-/*
-.interactive-workspace_tracknames {
-  grid-area: tracknames;
-  background-color: red;
+.interactive-workspace_horizontal_tracks,
+.interactive-workspace_vertical_tracks,
+.interactive-workspace_content,
+.interactive-workspace_horizontal_ruler,
+.interactive-workspace_vertical_ruler {
+  min-width: 0;
+  min-height: 0;
 }
-.interactive-workspace_horizontal {
-  grid-area: horizontal;
-  background-color: green;
+
+.interactive-workspace_corner_track {
+  grid-area: corner-track;
+  background: rgba(244, 247, 251, 0.98);
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
 }
-.interactive-workspace_vertical {
-  grid-area: vertical;
-  background-color: yellow;
+
+.interactive-workspace_corner_ruler {
+  grid-area: corner-ruler;
+  background: rgba(255, 255, 255, 0.95);
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
 }
-.interactive-workspace_content {
-  grid-area: content;
-  background-color: magenta;
+
+.interactive-workspace_horizontal_tracks {
+  grid-area: horizontal-tracks;
 }
-*/
 
-.test {
-  width: 100%;
-  height: 100%;
+.interactive-workspace_horizontal_ruler {
+  grid-area: horizontal-ruler;
+  overflow: hidden;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+  background: rgba(255, 255, 255, 0.95);
+}
+
+.interactive-workspace_vertical_tracks {
+  grid-area: vertical-tracks;
+}
 
-  background-color: black;
+.interactive-workspace_vertical_ruler {
+  grid-area: vertical-ruler;
+  overflow: hidden;
+  border-right: 1px solid black;
+  border-bottom: 1px solid black;
+  background: rgba(255, 255, 255, 0.95);
+}
+
+.interactive-workspace_content {
+  grid-area: content;
 }
 </style>
diff --git a/src/main.ts b/src/main.ts
index 53699e8..3815ed8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -32,6 +32,10 @@ import "primeicons/primeicons.css";
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import { useErrorToastStore } from "@/app/stores/errorToastStore";
+import {
+  useNotificationCenterStore,
+  type NotificationLevel,
+} from "@/app/stores/notificationCenterStore";
 import { useUiSettingsStore } from "@/app/stores/uiSettingsStore";
 import { toast } from "vue-sonner";
 import { watch } from "vue";
@@ -81,8 +85,76 @@ const tooltipObserver = new MutationObserver((mutations) => {
 tooltipObserver.observe(document.body, { childList: true, subtree: true });
 
 const errorToastStore = useErrorToastStore(pinia);
+const notificationCenterStore = useNotificationCenterStore(pinia);
 const uiSettingsStore = useUiSettingsStore(pinia);
 
+const originalConsoleError = console.error.bind(console);
+const originalConsoleWarn = console.warn.bind(console);
+const originalConsoleInfo = console.info.bind(console);
+const originalConsoleLog = console.log.bind(console);
+
+const originalToastError = toast.error.bind(toast);
+const originalToastSuccess = toast.success.bind(toast);
+const originalToastMessage = toast.message.bind(toast);
+
+const stringifyNotificationMessage = (value: unknown): string => {
+  if (value instanceof Error) {
+    return value.stack ?? value.message;
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+};
+
+const pushNotification = (
+  level: NotificationLevel,
+  message: string,
+  options?: { skipConsole?: boolean }
+) => {
+  if (!options?.skipConsole) {
+    switch (level) {
+      case "error":
+        originalConsoleError(message);
+        break;
+      case "warning":
+        originalConsoleWarn(message);
+        break;
+      case "success":
+      case "info":
+      case "message":
+        originalConsoleInfo(message);
+        break;
+      default:
+        originalConsoleLog(message);
+        break;
+    }
+  }
+  notificationCenterStore.add(level, message);
+};
+
+toast.error = ((message: unknown, data?: unknown) => {
+  const normalized = stringifyNotificationMessage(message);
+  pushNotification("error", normalized);
+  return originalToastError(normalized, data as never);
+}) as typeof toast.error;
+
+toast.success = ((message: unknown, data?: unknown) => {
+  const normalized = stringifyNotificationMessage(message);
+  pushNotification("success", normalized);
+  return originalToastSuccess(normalized, data as never);
+}) as typeof toast.success;
+
+toast.message = ((message: unknown, data?: unknown) => {
+  const normalized = stringifyNotificationMessage(message);
+  pushNotification("message", normalized);
+  return originalToastMessage(normalized, data as never);
+}) as typeof toast.message;
+
 watch(
   () => uiSettingsStore.customZoomSliderEnabled,
   (enabled) => {
@@ -91,28 +163,26 @@ watch(
   { immediate: true }
 );
 
-const originalConsoleError = console.error.bind(console);
 console.error = (...args: unknown[]) => {
   originalConsoleError(...args);
   if (!errorToastStore.webuiErrorToastsEnabled) return;
   try {
-    const message = args
-      .map((arg) => {
-        if (arg instanceof Error) return arg.message;
-        if (typeof arg === "string") return arg;
-        return JSON.stringify(arg);
-      })
-      .join(" ");
-    toast.error(message);
+    const message = args.map(stringifyNotificationMessage).join(" ");
+    pushNotification("error", message, { skipConsole: true });
+    originalToastError(message);
   } catch (_e) {
-    toast.error("WebUI error (see console for details)");
+    pushNotification("error", "WebUI error (see console for details)", {
+      skipConsole: true,
+    });
+    originalToastError("WebUI error (see console for details)");
   }
 };
 
 window.addEventListener("error", (event) => {
   if (!errorToastStore.webuiErrorToastsEnabled) return;
   const msg = event.error?.message ?? event.message ?? "WebUI error";
-  toast.error(msg);
+  pushNotification("error", msg, { skipConsole: true });
+  originalToastError(msg);
 });
 
 window.addEventListener("unhandledrejection", (event) => {
@@ -124,5 +194,6 @@ window.addEventListener("unhandledrejection", (event) => {
       : typeof reason === "string"
       ? reason
       : "Unhandled promise rejection";
-  toast.error(msg);
+  pushNotification("error", msg, { skipConsole: true });
+  originalToastError(msg);
 });

From f21ba84967da8fe3e82a56b45efb62689b9d7a16 Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Sat, 21 Mar 2026 02:06:27 +0400
Subject: [PATCH 24/27] Intermediate fixes for 1D tracks renderer

---
 .../mapmanagers/HiCViewAndLayersManager.ts    |   8 -
 .../core/mapmanagers/LinearTrackManager.ts    | 140 +++++++++++++++---
 src/app/core/net/api/RequestManager.ts        |   9 +-
 src/app/core/net/api/request.ts               |   5 +-
 src/app/core/net/api/response.ts              |   7 +-
 src/app/core/net/dto/requestDTO.ts            |   5 +-
 src/app/core/net/dto/responseDTO.ts           |   7 +-
 src/app/ui/MainUIComponent.vue                |  16 --
 8 files changed, 139 insertions(+), 58 deletions(-)

diff --git a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
index 6ac5790..404ff4c 100644
--- a/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
+++ b/src/app/core/mapmanagers/HiCViewAndLayersManager.ts
@@ -919,18 +919,10 @@ class HiCViewAndLayersManager {
     }
     try {
       this.mapManager.getMap().getControls().clear();
-      const hTrack = document.getElementById("horizontal-igv-track-div");
-      if (hTrack) {
-        hTrack.replaceChildren();
-      }
       const hRuler = document.getElementById("horizontal-ruler-div");
       if (hRuler) {
         hRuler.replaceChildren();
       }
-      const vTrack = document.getElementById("vertical-igv-track-div");
-      if (vTrack) {
-        vTrack.replaceChildren();
-      }
       const vRuler = document.getElementById("vertical-ruler-div");
       if (vRuler) {
         vRuler.replaceChildren();
diff --git a/src/app/core/mapmanagers/LinearTrackManager.ts b/src/app/core/mapmanagers/LinearTrackManager.ts
index b37bc6d..76b012d 100644
--- a/src/app/core/mapmanagers/LinearTrackManager.ts
+++ b/src/app/core/mapmanagers/LinearTrackManager.ts
@@ -29,6 +29,8 @@ import type {
 } from "@/app/core/net/api/response";
 
 type Orientation = "horizontal" | "vertical";
+const DEFAULT_PREFETCH_EXTENT_SCREENS = 2;
+const CACHE_MAX_AGE_MS = 1500;
 
 class LinearTrackManager {
   private horizontalCanvas: HTMLCanvasElement | null = null;
@@ -51,6 +53,11 @@ class LinearTrackManager {
     vertical: { statusMessage: "No tracks loaded", trackCount: 0 },
   };
   private readonly lastTrackErrors = new Map<string, string>();
+  private readonly prefetchExtentScreens = DEFAULT_PREFETCH_EXTENT_SCREENS;
+  private readonly queryCache: Record<Orientation, TrackQueryCache | null> = {
+    horizontal: null,
+    vertical: null,
+  };
 
   constructor(private readonly mapManager: ContactMapManager) {
     const map = this.mapManager.getMap();
@@ -73,6 +80,8 @@ class LinearTrackManager {
     this.verticalResizeObserver?.disconnect();
     this.horizontalCanvas = null;
     this.verticalCanvas = null;
+    this.queryCache.horizontal = null;
+    this.queryCache.vertical = null;
     this.listSubscribers.clear();
     this.renderStateSubscribers.horizontal.clear();
     this.renderStateSubscribers.vertical.clear();
@@ -138,6 +147,7 @@ class LinearTrackManager {
 
   public async refreshTrackList(): Promise<TrackSummaryResponse[]> {
     this.tracks = await this.mapManager.networkManager.requestManager.listTracks();
+    this.invalidateQueryCache();
     this.notifyTrackListChanged();
     await this.render();
     return this.tracks.slice();
@@ -207,6 +217,11 @@ class LinearTrackManager {
     });
   }
 
+  private invalidateQueryCache(): void {
+    this.queryCache.horizontal = null;
+    this.queryCache.vertical = null;
+  }
+
   private createResizeObserver(
     canvas: HTMLCanvasElement | null
   ): ResizeObserver | null {
@@ -266,12 +281,36 @@ class LinearTrackManager {
 
     const viewport = this.getViewportGeometry(orientation);
     try {
+      const prefetch = this.buildPrefetchViewport(viewport);
+      const cached = this.queryCache[orientation];
       const response =
-        await this.mapManager.networkManager.requestManager.queryTracks1D(
-          viewport.startBp,
-          viewport.endBp,
-          viewport.visibleWidthPx
-        );
+        cached &&
+        Date.now() - cached.fetchedAtMs <= CACHE_MAX_AGE_MS &&
+        cached.bpResolution === viewport.bpResolution &&
+        cached.prefetchStartPx <= viewport.startPx &&
+        cached.prefetchEndPx >= viewport.endPx
+          ? cached.response
+          : await this.mapManager.networkManager.requestManager.queryTracks1D(
+              prefetch.prefetchStartPx,
+              prefetch.prefetchEndPx,
+              prefetch.prefetchWidthPx,
+              viewport.bpResolution
+            );
+      if (
+        !cached ||
+        Date.now() - cached.fetchedAtMs > CACHE_MAX_AGE_MS ||
+        cached.bpResolution !== viewport.bpResolution ||
+        cached.prefetchStartPx > viewport.startPx ||
+        cached.prefetchEndPx < viewport.endPx
+      ) {
+        this.queryCache[orientation] = {
+          bpResolution: viewport.bpResolution,
+          prefetchStartPx: prefetch.prefetchStartPx,
+          prefetchEndPx: prefetch.prefetchEndPx,
+          fetchedAtMs: Date.now(),
+          response,
+        };
+      }
       if (requestId !== this.renderRequestId) {
         return;
       }
@@ -303,7 +342,10 @@ class LinearTrackManager {
         {
           startBp: viewport.startBp,
           endBp: viewport.endBp,
+          startPx: viewport.startPx,
+          endPx: viewport.endPx,
           widthPx: orientation === "horizontal" ? canvas.width : canvas.height,
+          bpResolution: viewport.bpResolution,
           tracks: [],
         },
         viewport,
@@ -376,26 +418,45 @@ class LinearTrackManager {
       }
       ctx.fillStyle = track.color ?? "#4e79a7";
       for (const bin of track.bins) {
-        const intervalStart = Math.max(0, Math.min(bin.startBp, bin.endBp));
-        const intervalEnd = Math.max(intervalStart + 1, Math.max(bin.startBp, bin.endBp));
-        const intervalProbeEnd = Math.max(intervalStart, intervalEnd - 1);
-        if (
-          !this.mapManager
-            .getContigDimensionHolder()
-            .isBpVisibleAtResolution(intervalStart, bpResolution) &&
-          !this.mapManager
-            .getContigDimensionHolder()
-            .isBpVisibleAtResolution(intervalProbeEnd, bpResolution)
-        ) {
-          continue;
+        const hasProjectedPx =
+          typeof bin.startPx === "number" &&
+          Number.isFinite(bin.startPx) &&
+          typeof bin.endPx === "number" &&
+          Number.isFinite(bin.endPx);
+        const startPx = hasProjectedPx
+          ? Math.max(0, Math.min(bin.startPx ?? 0, bin.endPx ?? 0))
+          : this.mapManager
+              .getContigDimensionHolder()
+              .getPxContainingBp(
+                Math.max(0, Math.min(bin.startBp, bin.endBp)),
+                bpResolution
+              );
+        const endPx = hasProjectedPx
+          ? Math.max(startPx + 1, Math.max(bin.startPx ?? startPx, bin.endPx ?? startPx))
+          : this.mapManager
+              .getContigDimensionHolder()
+              .getPxContainingBp(
+                Math.max(
+                  Math.max(0, Math.min(bin.startBp, bin.endBp)),
+                  Math.max(0, Math.max(bin.startBp, bin.endBp) - 1)
+                ),
+                bpResolution
+              ) + 1;
+        if (!hasProjectedPx) {
+          const intervalStart = Math.max(0, Math.min(bin.startBp, bin.endBp));
+          const intervalEnd = Math.max(intervalStart + 1, Math.max(bin.startBp, bin.endBp));
+          const intervalProbeEnd = Math.max(intervalStart, intervalEnd - 1);
+          if (
+            !this.mapManager
+              .getContigDimensionHolder()
+              .isBpVisibleAtResolution(intervalStart, bpResolution) &&
+            !this.mapManager
+              .getContigDimensionHolder()
+              .isBpVisibleAtResolution(intervalProbeEnd, bpResolution)
+          ) {
+            continue;
+          }
         }
-        const startPx = this.mapManager
-          .getContigDimensionHolder()
-          .getPxContainingBp(intervalStart, bpResolution);
-        const endPx =
-          this.mapManager
-            .getContigDimensionHolder()
-            .getPxContainingBp(intervalProbeEnd, bpResolution) + 1;
         const normalizedValue = Math.max(
           0,
           Math.min(1, (bin.value ?? 0) / maxValue)
@@ -557,6 +618,29 @@ class LinearTrackManager {
       visibleWidthPx: Math.max(1, visibleEndScreen - visibleStartScreen),
     };
   }
+
+  private buildPrefetchViewport(viewport: ViewportGeometry): {
+    prefetchStartPx: number;
+    prefetchEndPx: number;
+    prefetchWidthPx: number;
+  } {
+    const visibleSpanPx = Math.max(1, viewport.endPx - viewport.startPx);
+    const paddingPx = Math.ceil(visibleSpanPx * this.prefetchExtentScreens);
+    const totalPx =
+      this.mapManager
+        .getContigDimensionHolder()
+        .prefix_sum_px.get(viewport.bpResolution)?.[
+        this.mapManager.getContigDimensionHolder().contig_count
+      ] ?? viewport.endPx;
+    const prefetchStartPx = Math.max(0, viewport.startPx - paddingPx);
+    const prefetchEndPx = Math.min(Math.max(prefetchStartPx + 1, totalPx), viewport.endPx + paddingPx);
+    const prefetchSpan = Math.max(1, prefetchEndPx - prefetchStartPx);
+    const prefetchWidthPx = Math.max(
+      viewport.visibleWidthPx,
+      Math.ceil((viewport.visibleWidthPx * prefetchSpan) / visibleSpanPx)
+    );
+    return { prefetchStartPx, prefetchEndPx, prefetchWidthPx };
+  }
 }
 
 export { LinearTrackManager, type Orientation };
@@ -575,3 +659,11 @@ type ViewportGeometry = {
   pxToScreen: (px: number) => number;
   visibleWidthPx: number;
 };
+
+type TrackQueryCache = {
+  bpResolution: number;
+  prefetchStartPx: number;
+  prefetchEndPx: number;
+  fetchedAtMs: number;
+  response: TrackQueryResponse;
+};
diff --git a/src/app/core/net/api/RequestManager.ts b/src/app/core/net/api/RequestManager.ts
index 2a12f18..ab256a8 100644
--- a/src/app/core/net/api/RequestManager.ts
+++ b/src/app/core/net/api/RequestManager.ts
@@ -279,11 +279,12 @@ class RequestManager {
   }
 
   public async queryTracks1D(
-    startBp: number,
-    endBp: number,
-    widthPx: number
+    startPx: number,
+    endPx: number,
+    widthPx: number,
+    bpResolution: number
   ): Promise<TrackQueryResponse> {
-    return this.sendRequest(new QueryTracks1DRequest({ startBp, endBp, widthPx }))
+    return this.sendRequest(new QueryTracks1DRequest({ startPx, endPx, widthPx, bpResolution }))
       .then((response) => response.data)
       .then((json) => new TrackQueryResponseDTO(json).toEntity());
   }
diff --git a/src/app/core/net/api/request.ts b/src/app/core/net/api/request.ts
index 3904ea8..960b7da 100644
--- a/src/app/core/net/api/request.ts
+++ b/src/app/core/net/api/request.ts
@@ -380,9 +380,10 @@ class QueryTracks1DRequest implements HiCTAPIRequest {
 
   public constructor(
     public readonly options: {
-      readonly startBp: number;
-      readonly endBp: number;
+      readonly startPx: number;
+      readonly endPx: number;
       readonly widthPx: number;
+      readonly bpResolution: number;
     }
   ) {}
 }
diff --git a/src/app/core/net/api/response.ts b/src/app/core/net/api/response.ts
index 48f0ca9..16c70c4 100644
--- a/src/app/core/net/api/response.ts
+++ b/src/app/core/net/api/response.ts
@@ -91,7 +91,9 @@ class TrackBinResponse {
     public readonly endBp: number,
     public readonly value: number,
     public readonly count: number,
-    public readonly label: string | null
+    public readonly label: string | null,
+    public readonly startPx: number | null,
+    public readonly endPx: number | null
   ) {}
 }
 
@@ -111,7 +113,10 @@ class TrackQueryResponse {
   public constructor(
     public readonly startBp: number,
     public readonly endBp: number,
+    public readonly startPx: number,
+    public readonly endPx: number,
     public readonly widthPx: number,
+    public readonly bpResolution: number,
     public readonly tracks: TrackRenderResponse[]
   ) {}
 }
diff --git a/src/app/core/net/dto/requestDTO.ts b/src/app/core/net/dto/requestDTO.ts
index 1f909a9..a646a2f 100644
--- a/src/app/core/net/dto/requestDTO.ts
+++ b/src/app/core/net/dto/requestDTO.ts
@@ -484,9 +484,10 @@ class RemoveTrackRequestDTO extends HiCTAPIRequestDTO<RemoveTrackRequest> {
 class QueryTracks1DRequestDTO extends HiCTAPIRequestDTO<QueryTracks1DRequest> {
   toDTO(): Record<string, unknown> {
     return {
-      startBp: this.entity.options.startBp,
-      endBp: this.entity.options.endBp,
+      startPx: this.entity.options.startPx,
+      endPx: this.entity.options.endPx,
       widthPx: this.entity.options.widthPx,
+      bpResolution: this.entity.options.bpResolution,
     };
   }
 }
diff --git a/src/app/core/net/dto/responseDTO.ts b/src/app/core/net/dto/responseDTO.ts
index 3f14b02..66084bd 100644
--- a/src/app/core/net/dto/responseDTO.ts
+++ b/src/app/core/net/dto/responseDTO.ts
@@ -139,7 +139,9 @@ class TrackBinResponseDTO extends InboundDTO<TrackBinResponse> {
       this.json["endBp"] as number,
       this.json["value"] as number,
       this.json["count"] as number,
-      (this.json["label"] as string) ?? null
+      (this.json["label"] as string) ?? null,
+      (this.json["startPx"] as number) ?? null,
+      (this.json["endPx"] as number) ?? null
     );
   }
 }
@@ -165,7 +167,10 @@ class TrackQueryResponseDTO extends InboundDTO<TrackQueryResponse> {
     return new TrackQueryResponse(
       this.json["startBp"] as number,
       this.json["endBp"] as number,
+      (this.json["startPx"] as number) ?? 0,
+      (this.json["endPx"] as number) ?? 0,
       this.json["widthPx"] as number,
+      (this.json["bpResolution"] as number) ?? 1,
       ((this.json["tracks"] as Record<string, unknown>[]) ?? []).map((track) =>
         new TrackRenderResponseDTO(track).toEntity()
       )
diff --git a/src/app/ui/MainUIComponent.vue b/src/app/ui/MainUIComponent.vue
index 30b99a7..ea349fd 100644
--- a/src/app/ui/MainUIComponent.vue
+++ b/src/app/ui/MainUIComponent.vue
@@ -189,22 +189,6 @@ function resetState() {
   filename.value = "";
   fastaFilename.value = "";
   mapManager.value = undefined;
-  const hTrack = document.getElementById("horizontal-igv-track-div");
-  if (hTrack) {
-    hTrack.replaceChildren();
-  }
-  const hRuler = document.getElementById("horizontal-ruler-div");
-  if (hRuler) {
-    hRuler.replaceChildren();
-  }
-  const vTrack = document.getElementById("vertical-igv-track-div");
-  if (vTrack) {
-    vTrack.replaceChildren();
-  }
-  const vRuler = document.getElementById("vertical-ruler-div");
-  if (vRuler) {
-    vRuler.replaceChildren();
-  }
 }
 
 function onClosed() {

From ab3d991d79687bbef24ae59a4e47ebf20daabe84 Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Sat, 21 Mar 2026 03:17:03 +0400
Subject: [PATCH 25/27] 1D tracks with precomputing but not smooth

---
 .../core/mapmanagers/LinearTrackManager.ts    | 22 ++++-
 src/app/core/net/api/RequestManager.ts        | 19 ++++
 src/app/core/net/api/request.ts               | 17 ++++
 src/app/core/net/api/response.ts              | 24 +++++
 src/app/core/net/dto/requestDTO.ts            | 23 +++++
 src/app/core/net/dto/responseDTO.ts           | 31 ++++++
 .../components/upper_ribbon/TrackManager.vue  | 97 ++++++++++++++++++-
 7 files changed, 229 insertions(+), 4 deletions(-)

diff --git a/src/app/core/mapmanagers/LinearTrackManager.ts b/src/app/core/mapmanagers/LinearTrackManager.ts
index 76b012d..7f6afc1 100644
--- a/src/app/core/mapmanagers/LinearTrackManager.ts
+++ b/src/app/core/mapmanagers/LinearTrackManager.ts
@@ -26,11 +26,13 @@ import type { ContactMapManager } from "./ContactMapManager";
 import type {
   TrackQueryResponse,
   TrackSummaryResponse,
+  TracksPrecomputeStatusResponse,
 } from "@/app/core/net/api/response";
 
 type Orientation = "horizontal" | "vertical";
 const DEFAULT_PREFETCH_EXTENT_SCREENS = 2;
 const CACHE_MAX_AGE_MS = 1500;
+const MAX_PREFETCH_QUERY_WIDTH_PX = 2048;
 
 class LinearTrackManager {
   private horizontalCanvas: HTMLCanvasElement | null = null;
@@ -187,6 +189,20 @@ class LinearTrackManager {
     await this.refreshTrackList();
   }
 
+  public async startPrecompute(
+    trackId?: string,
+    force = false
+  ): Promise<TracksPrecomputeStatusResponse> {
+    return this.mapManager.networkManager.requestManager.startTracksPrecompute(
+      trackId,
+      force
+    );
+  }
+
+  public async getPrecomputeStatus(): Promise<TracksPrecomputeStatusResponse> {
+    return this.mapManager.networkManager.requestManager.getTracksPrecomputeStatus();
+  }
+
   public async render(): Promise<void> {
     if (!this.horizontalCanvas && !this.verticalCanvas) {
       return;
@@ -639,7 +655,11 @@ class LinearTrackManager {
       viewport.visibleWidthPx,
       Math.ceil((viewport.visibleWidthPx * prefetchSpan) / visibleSpanPx)
     );
-    return { prefetchStartPx, prefetchEndPx, prefetchWidthPx };
+    return {
+      prefetchStartPx,
+      prefetchEndPx,
+      prefetchWidthPx: Math.min(MAX_PREFETCH_QUERY_WIDTH_PX, prefetchWidthPx),
+    };
   }
 }
 
diff --git a/src/app/core/net/api/RequestManager.ts b/src/app/core/net/api/RequestManager.ts
index ab256a8..3d141da 100644
--- a/src/app/core/net/api/RequestManager.ts
+++ b/src/app/core/net/api/RequestManager.ts
@@ -36,6 +36,7 @@ import {
   CurrentSignalRangeResponseDTO,
   FastaLinkResponseDTO,
   NameMappingResponseDTO,
+  TracksPrecomputeStatusResponseDTO,
   TrackQueryResponseDTO,
   TrackSummaryResponseDTO,
   TilePOSTResponseDTO,
@@ -83,12 +84,15 @@ import {
   UpdateTrackRequest,
   RemoveTrackRequest,
   QueryTracks1DRequest,
+  StartTracksPrecomputeRequest,
+  GetTracksPrecomputeStatusRequest,
 } from "./request";
 import {
   ConversionJobResponse,
   CurrentSignalRangeResponse,
   FastaLinkResponse,
   NameMappingResponse,
+  TracksPrecomputeStatusResponse,
   TrackQueryResponse,
   TrackSummaryResponse,
 } from "./response";
@@ -289,6 +293,21 @@ class RequestManager {
       .then((json) => new TrackQueryResponseDTO(json).toEntity());
   }
 
+  public async startTracksPrecompute(
+    trackId?: string,
+    force = false
+  ): Promise<TracksPrecomputeStatusResponse> {
+    return this.sendRequest(new StartTracksPrecomputeRequest({ trackId, force }))
+      .then((response) => response.data)
+      .then((json) => new TracksPrecomputeStatusResponseDTO(json).toEntity());
+  }
+
+  public async getTracksPrecomputeStatus(): Promise<TracksPrecomputeStatusResponse> {
+    return this.sendRequest(new GetTracksPrecomputeStatusRequest())
+      .then((response) => response.data)
+      .then((json) => new TracksPrecomputeStatusResponseDTO(json).toEntity());
+  }
+
   public async listFASTAFiles(): Promise<string[]> {
     const response = await this.sendRequest(new ListFASTAFilesRequest());
     return response.data as string[];
diff --git a/src/app/core/net/api/request.ts b/src/app/core/net/api/request.ts
index 960b7da..02f54de 100644
--- a/src/app/core/net/api/request.ts
+++ b/src/app/core/net/api/request.ts
@@ -388,6 +388,21 @@ class QueryTracks1DRequest implements HiCTAPIRequest {
   ) {}
 }
 
+class StartTracksPrecomputeRequest implements HiCTAPIRequest {
+  requestPath = "/tracks/precompute/start";
+
+  public constructor(
+    public readonly options: {
+      readonly trackId?: string;
+      readonly force?: boolean;
+    } = {}
+  ) {}
+}
+
+class GetTracksPrecomputeStatusRequest implements HiCTAPIRequest {
+  requestPath = "/tracks/precompute/status";
+}
+
 // class TileLoadPOSTRequest implements HiCTAPIRequest {
 //   requestPath = "/get_tile";
 
@@ -445,4 +460,6 @@ export {
   UpdateTrackRequest,
   RemoveTrackRequest,
   QueryTracks1DRequest,
+  StartTracksPrecomputeRequest,
+  GetTracksPrecomputeStatusRequest,
 };
diff --git a/src/app/core/net/api/response.ts b/src/app/core/net/api/response.ts
index 16c70c4..502c69e 100644
--- a/src/app/core/net/api/response.ts
+++ b/src/app/core/net/api/response.ts
@@ -121,6 +121,28 @@ class TrackQueryResponse {
   ) {}
 }
 
+class TrackPrecomputeTrackStatusResponse {
+  public constructor(
+    public readonly trackId: string,
+    public readonly trackName: string,
+    public readonly status: string,
+    public readonly totalTasks: number,
+    public readonly completedTasks: number,
+    public readonly progress: number,
+    public readonly currentTask: string,
+    public readonly error: string | null,
+    public readonly updatedAtMs: number
+  ) {}
+}
+
+class TracksPrecomputeStatusResponse {
+  public constructor(
+    public readonly tracks: TrackPrecomputeTrackStatusResponse[],
+    public readonly runningJobs: number,
+    public readonly processedDirectory: string
+  ) {}
+}
+
 class FastaLinkMismatchResponse {
   public constructor(
     public readonly index: number,
@@ -166,6 +188,8 @@ export {
   TrackBinResponse,
   TrackRenderResponse,
   TrackQueryResponse,
+  TrackPrecomputeTrackStatusResponse,
+  TracksPrecomputeStatusResponse,
   FastaLinkMismatchResponse,
   FastaLinkCompatibilityResponse,
   FastaLinkResponse,
diff --git a/src/app/core/net/dto/requestDTO.ts b/src/app/core/net/dto/requestDTO.ts
index a646a2f..3fe9c51 100644
--- a/src/app/core/net/dto/requestDTO.ts
+++ b/src/app/core/net/dto/requestDTO.ts
@@ -48,6 +48,8 @@ import {
   UpdateTrackRequest,
   RemoveTrackRequest,
   QueryTracks1DRequest,
+  StartTracksPrecomputeRequest,
+  GetTracksPrecomputeStatusRequest,
   StartConversionJobRequest,
   StartBatchConversionJobsRequest,
   ListConversionJobsRequest,
@@ -139,6 +141,10 @@ abstract class HiCTAPIRequestDTO<
         return new RemoveTrackRequestDTO(entity as RemoveTrackRequest);
       case entity instanceof QueryTracks1DRequest:
         return new QueryTracks1DRequestDTO(entity as QueryTracks1DRequest);
+      case entity instanceof StartTracksPrecomputeRequest:
+        return new StartTracksPrecomputeRequestDTO(entity as StartTracksPrecomputeRequest);
+      case entity instanceof GetTracksPrecomputeStatusRequest:
+        return new GetTracksPrecomputeStatusRequestDTO(entity as GetTracksPrecomputeStatusRequest);
       case entity instanceof ListConversionJobsRequest:
         return new ListConversionJobsRequestDTO(entity);
       case entity instanceof GetConversionJobRequest:
@@ -492,6 +498,21 @@ class QueryTracks1DRequestDTO extends HiCTAPIRequestDTO<QueryTracks1DRequest> {
   }
 }
 
+class StartTracksPrecomputeRequestDTO extends HiCTAPIRequestDTO<StartTracksPrecomputeRequest> {
+  toDTO(): Record<string, unknown> {
+    return {
+      trackId: this.entity.options.trackId,
+      force: this.entity.options.force,
+    };
+  }
+}
+
+class GetTracksPrecomputeStatusRequestDTO extends HiCTAPIRequestDTO<GetTracksPrecomputeStatusRequest> {
+  toDTO(): Record<string, unknown> {
+    return {};
+  }
+}
+
 class ListFASTAFilesRequestDTO extends HiCTAPIRequestDTO<ListFASTAFilesRequest> {
   toDTO(): Record<string, unknown> {
     return {};
@@ -568,6 +589,8 @@ export {
   UpdateTrackRequestDTO,
   RemoveTrackRequestDTO,
   QueryTracks1DRequestDTO,
+  StartTracksPrecomputeRequestDTO,
+  GetTracksPrecomputeStatusRequestDTO,
   ListCoolerFilesRequestDTO,
   SplitContigRequestDTO,
   MoveSelectionToDebrisRequestDTO,
diff --git a/src/app/core/net/dto/responseDTO.ts b/src/app/core/net/dto/responseDTO.ts
index 66084bd..cf30e36 100644
--- a/src/app/core/net/dto/responseDTO.ts
+++ b/src/app/core/net/dto/responseDTO.ts
@@ -26,6 +26,8 @@ import {
   FastaLinkMismatchResponse,
   FastaLinkResponse,
   NameMappingResponse,
+  TrackPrecomputeTrackStatusResponse,
+  TracksPrecomputeStatusResponse,
   TrackBinResponse,
   TrackQueryResponse,
   TrackRenderResponse,
@@ -178,6 +180,34 @@ class TrackQueryResponseDTO extends InboundDTO<TrackQueryResponse> {
   }
 }
 
+class TrackPrecomputeTrackStatusResponseDTO extends InboundDTO<TrackPrecomputeTrackStatusResponse> {
+  public toEntity(): TrackPrecomputeTrackStatusResponse {
+    return new TrackPrecomputeTrackStatusResponse(
+      this.json["trackId"] as string,
+      this.json["trackName"] as string,
+      this.json["status"] as string,
+      (this.json["totalTasks"] as number) ?? 0,
+      (this.json["completedTasks"] as number) ?? 0,
+      (this.json["progress"] as number) ?? 0,
+      (this.json["currentTask"] as string) ?? "",
+      (this.json["error"] as string) ?? null,
+      (this.json["updatedAtMs"] as number) ?? 0
+    );
+  }
+}
+
+class TracksPrecomputeStatusResponseDTO extends InboundDTO<TracksPrecomputeStatusResponse> {
+  public toEntity(): TracksPrecomputeStatusResponse {
+    return new TracksPrecomputeStatusResponse(
+      ((this.json["tracks"] as Record<string, unknown>[]) ?? []).map((item) =>
+        new TrackPrecomputeTrackStatusResponseDTO(item).toEntity()
+      ),
+      (this.json["runningJobs"] as number) ?? 0,
+      (this.json["processedDirectory"] as string) ?? ""
+    );
+  }
+}
+
 class FastaLinkMismatchResponseDTO extends InboundDTO<FastaLinkMismatchResponse> {
   public toEntity(): FastaLinkMismatchResponse {
     return new FastaLinkMismatchResponse(
@@ -231,5 +261,6 @@ export {
   NameMappingResponseDTO,
   TrackSummaryResponseDTO,
   TrackQueryResponseDTO,
+  TracksPrecomputeStatusResponseDTO,
   FastaLinkResponseDTO,
 };
diff --git a/src/app/ui/components/upper_ribbon/TrackManager.vue b/src/app/ui/components/upper_ribbon/TrackManager.vue
index fb03a30..dd5ee63 100644
--- a/src/app/ui/components/upper_ribbon/TrackManager.vue
+++ b/src/app/ui/components/upper_ribbon/TrackManager.vue
@@ -65,6 +65,35 @@
                 </div>
               </div>
 
+              <div class="alert alert-secondary py-2">
+                <div class="d-flex align-items-center justify-content-between gap-2 mb-2">
+                  <strong>1D track precompute</strong>
+                  <button class="btn btn-sm btn-outline-primary" @click="onStartPrecomputeAll">
+                    Precompute all
+                  </button>
+                </div>
+                <div v-if="precomputeStatus && precomputeStatus.tracks.length > 0" class="precompute-list">
+                  <div v-for="item in precomputeStatus.tracks" :key="item.trackId" class="precompute-item">
+                    <div class="d-flex justify-content-between align-items-center">
+                      <small>{{ item.trackName }}</small>
+                      <small class="text-muted">
+                        {{ item.status }} {{ Math.round(item.progress * 100) }}%
+                      </small>
+                    </div>
+                    <div class="progress" style="height: 6px">
+                      <div
+                        class="progress-bar"
+                        role="progressbar"
+                        :style="{ width: `${Math.max(0, Math.min(100, Math.round(item.progress * 100)))}%` }"
+                      ></div>
+                    </div>
+                    <small v-if="item.currentTask" class="text-muted">{{ item.currentTask }}</small>
+                    <small v-if="item.error" class="text-danger">{{ item.error }}</small>
+                  </div>
+                </div>
+                <small v-else class="text-muted">No background jobs yet.</small>
+              </div>
+
               <div class="tracks-list">
                 <div
                   class="track-row d-flex align-items-center gap-2"
@@ -148,8 +177,11 @@
 
 <script setup lang="ts">
 import type { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
-import type { TrackSummaryResponse } from "@/app/core/net/api/response";
-import { onMounted, ref } from "vue";
+import type {
+  TrackSummaryResponse,
+  TracksPrecomputeStatusResponse,
+} from "@/app/core/net/api/response";
+import { onBeforeUnmount, onMounted, ref } from "vue";
 import { toast } from "vue-sonner";
 
 const props = defineProps<{
@@ -164,6 +196,8 @@ const availableFiles = ref<string[]>([]);
 const selectedFile = ref("");
 const trackDisplayName = ref("");
 const tracks = ref<TrackSummaryResponse[]>([]);
+const precomputeStatus = ref<TracksPrecomputeStatusResponse | null>(null);
+let precomputePollHandle: number | null = null;
 
 const normalizeColor = (value: string): string => {
   if (/^#[0-9a-fA-F]{6}$/.test(value)) {
@@ -217,6 +251,19 @@ const refreshTracks = async () => {
   }
 };
 
+const refreshPrecomputeStatus = async () => {
+  if (!props.mapManager) {
+    precomputeStatus.value = null;
+    return;
+  }
+  try {
+    precomputeStatus.value =
+      await props.mapManager.linearTrackManager.getPrecomputeStatus();
+  } catch (err) {
+    console.debug("Failed to fetch precompute status", err);
+  }
+};
+
 const onAddTrack = async () => {
   if (!props.mapManager || !selectedFile.value) {
     return;
@@ -228,6 +275,7 @@ const onAddTrack = async () => {
     );
     trackDisplayName.value = "";
     await refreshTracks();
+    await refreshPrecomputeStatus();
   } catch (err) {
     toast.error(String(err));
   }
@@ -324,8 +372,39 @@ const clearAnnotations = () => {
   props.mapManager?.getLayersManager().clearAnnotations();
 };
 
+const onStartPrecomputeAll = async () => {
+  if (!props.mapManager) {
+    return;
+  }
+  try {
+    precomputeStatus.value = await props.mapManager.linearTrackManager.startPrecompute(
+      undefined,
+      true
+    );
+  } catch (err) {
+    toast.error(String(err));
+  }
+};
+
+const startPrecomputePolling = () => {
+  if (precomputePollHandle !== null) {
+    window.clearInterval(precomputePollHandle);
+  }
+  precomputePollHandle = window.setInterval(() => {
+    void refreshPrecomputeStatus();
+  }, 1200);
+};
+
 onMounted(async () => {
-  await Promise.all([refreshFiles(), refreshTracks()]);
+  await Promise.all([refreshFiles(), refreshTracks(), refreshPrecomputeStatus()]);
+  startPrecomputePolling();
+});
+
+onBeforeUnmount(() => {
+  if (precomputePollHandle !== null) {
+    window.clearInterval(precomputePollHandle);
+    precomputePollHandle = null;
+  }
 });
 </script>
 
@@ -350,4 +429,16 @@ onMounted(async () => {
 .track-mode-select {
   max-width: 7rem;
 }
+
+.precompute-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.precompute-item {
+  border: 1px solid #e6e6e6;
+  border-radius: 4px;
+  padding: 0.35rem 0.5rem;
+}
 </style>

From 543dcbb4b09321b771f4006f4e280384f291a6c9 Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Sat, 21 Mar 2026 03:52:18 +0400
Subject: [PATCH 26/27] More interactive 1D tracks.

---
 .../core/mapmanagers/CommonEventManager.ts    |  54 ++--
 src/app/core/mapmanagers/ContactMapManager.ts |   3 +
 .../core/mapmanagers/LinearTrackManager.ts    | 295 +++++++++++++++---
 3 files changed, 281 insertions(+), 71 deletions(-)

diff --git a/src/app/core/mapmanagers/CommonEventManager.ts b/src/app/core/mapmanagers/CommonEventManager.ts
index 04b3ebd..079f5a1 100644
--- a/src/app/core/mapmanagers/CommonEventManager.ts
+++ b/src/app/core/mapmanagers/CommonEventManager.ts
@@ -25,6 +25,7 @@ import {
   NormalizationSettings,
 } from "@/app/ui/components/ComponentCommon";
 import { ContigDescriptor } from "../domain/ContigDescriptor";
+import { type ScaffoldDescriptor } from "../domain/ScaffoldDescriptor";
 import {
   GroupContigsIntoScaffoldRequest,
   UngroupContigsFromScaffoldRequest,
@@ -45,6 +46,14 @@ import { toast } from "vue-sonner";
 class CommonEventManager {
   public constructor(public readonly mapManager: ContactMapManager) {}
 
+  private applyAssemblyInfo(asmInfo: {
+    contigDescriptors: ContigDescriptor[];
+    scaffoldDescriptors: ScaffoldDescriptor[];
+  }): void {
+    this.mapManager.contigDimensionHolder.updateContigData(asmInfo.contigDescriptors);
+    this.mapManager.scaffoldHolder.updateScaffoldData(asmInfo.scaffoldDescriptors);
+  }
+
   public reloadTiles() {
     this.mapManager.reloadTiles();
   }
@@ -289,12 +298,8 @@ class CommonEventManager {
         })
       )
       .then((asmInfo) => {
-        this.mapManager.contigDimensionHolder.updateContigData(
-          asmInfo.contigDescriptors
-        );
-        this.mapManager.scaffoldHolder.updateScaffoldData(
-          asmInfo.scaffoldDescriptors
-        );
+        this.applyAssemblyInfo(asmInfo);
+        void this.mapManager.linearTrackManager.clearCachesAndRender();
         this.resetSelection();
         this.reloadTracks();
       });
@@ -345,12 +350,8 @@ class CommonEventManager {
         })
       )
       .then((asmInfo) => {
-        this.mapManager.contigDimensionHolder.updateContigData(
-          asmInfo.contigDescriptors
-        );
-        this.mapManager.scaffoldHolder.updateScaffoldData(
-          asmInfo.scaffoldDescriptors
-        );
+        this.applyAssemblyInfo(asmInfo);
+        void this.mapManager.linearTrackManager.clearCachesAndRender();
         this.resetSelection();
         this.reloadTracks();
       });
@@ -401,12 +402,8 @@ class CommonEventManager {
         })
       )
       .then((asmInfo) => {
-        this.mapManager.contigDimensionHolder.updateContigData(
-          asmInfo.contigDescriptors
-        );
-        this.mapManager.scaffoldHolder.updateScaffoldData(
-          asmInfo.scaffoldDescriptors
-        );
+        this.applyAssemblyInfo(asmInfo);
+        void this.mapManager.linearTrackManager.clearCachesAndRender();
         this.resetSelection();
         this.reloadTracks();
       });
@@ -456,12 +453,7 @@ class CommonEventManager {
         })
       )
       .then((asmInfo) => {
-        this.mapManager.contigDimensionHolder.updateContigData(
-          asmInfo.contigDescriptors
-        );
-        this.mapManager.scaffoldHolder.updateScaffoldData(
-          asmInfo.scaffoldDescriptors
-        );
+        this.applyAssemblyInfo(asmInfo);
         this.resetSelection();
         this.mapManager.reloadVisuals();
       });
@@ -649,12 +641,7 @@ class CommonEventManager {
         })
       )
       .then((asmInfo) => {
-        this.mapManager.contigDimensionHolder.updateContigData(
-          asmInfo.contigDescriptors
-        );
-        this.mapManager.scaffoldHolder.updateScaffoldData(
-          asmInfo.scaffoldDescriptors
-        );
+        this.applyAssemblyInfo(asmInfo);
       })
       .finally(() => {
         this.onMoveSelectionClicked();
@@ -683,12 +670,7 @@ class CommonEventManager {
         })
       )
       .then((asmInfo) => {
-        this.mapManager.contigDimensionHolder.updateContigData(
-          asmInfo.contigDescriptors
-        );
-        this.mapManager.scaffoldHolder.updateScaffoldData(
-          asmInfo.scaffoldDescriptors
-        );
+        this.applyAssemblyInfo(asmInfo);
       })
       .finally(() => {
         this.mapManager.deactivateScissors();
diff --git a/src/app/core/mapmanagers/ContactMapManager.ts b/src/app/core/mapmanagers/ContactMapManager.ts
index e8ac96e..adc1d67 100644
--- a/src/app/core/mapmanagers/ContactMapManager.ts
+++ b/src/app/core/mapmanagers/ContactMapManager.ts
@@ -181,11 +181,13 @@ class ContactMapManager {
 
   public reloadTiles(): void {
     this.viewAndLayersManager.reloadTiles();
+    void this.linearTrackManager.clearCachesAndRender();
   }
 
   public async reloadTilesFromBackend(): Promise<void> {
     const version = await this.networkManager.requestManager.reloadTilesVersion();
     this.viewAndLayersManager.reloadTiles(version);
+    void this.linearTrackManager.clearCachesAndRender();
   }
 
   private async buildCurrentMapSvg(
@@ -639,6 +641,7 @@ class ContactMapManager {
 
   public reloadVisuals(): void {
     this.viewAndLayersManager.reloadVisuals();
+    void this.linearTrackManager.clearCachesAndRender();
   }
 }
 
diff --git a/src/app/core/mapmanagers/LinearTrackManager.ts b/src/app/core/mapmanagers/LinearTrackManager.ts
index 7f6afc1..5528458 100644
--- a/src/app/core/mapmanagers/LinearTrackManager.ts
+++ b/src/app/core/mapmanagers/LinearTrackManager.ts
@@ -33,6 +33,7 @@ type Orientation = "horizontal" | "vertical";
 const DEFAULT_PREFETCH_EXTENT_SCREENS = 2;
 const CACHE_MAX_AGE_MS = 1500;
 const MAX_PREFETCH_QUERY_WIDTH_PX = 2048;
+const MAX_CACHED_RESOLUTIONS_PER_ORIENTATION = 6;
 
 class LinearTrackManager {
   private horizontalCanvas: HTMLCanvasElement | null = null;
@@ -42,7 +43,9 @@ class LinearTrackManager {
   private tracks: TrackSummaryResponse[] = [];
   private renderRequestId = 0;
   private readonly moveEndListener?: EventsKey;
+  private readonly centerListener?: EventsKey;
   private readonly resolutionListener?: EventsKey;
+  private interactiveRenderFramePending = false;
   private readonly listSubscribers = new Set<
     (tracks: TrackSummaryResponse[]) => void
   >();
@@ -54,20 +57,35 @@ class LinearTrackManager {
     horizontal: { statusMessage: "No tracks loaded", trackCount: 0 },
     vertical: { statusMessage: "No tracks loaded", trackCount: 0 },
   };
+  private cacheEpoch = 0;
   private readonly lastTrackErrors = new Map<string, string>();
   private readonly prefetchExtentScreens = DEFAULT_PREFETCH_EXTENT_SCREENS;
-  private readonly queryCache: Record<Orientation, TrackQueryCache | null> = {
-    horizontal: null,
-    vertical: null,
+  private readonly queryCache: Record<Orientation, Map<number, TrackQueryCache>> = {
+    horizontal: new Map<number, TrackQueryCache>(),
+    vertical: new Map<number, TrackQueryCache>(),
+  };
+  private readonly prefetchInFlight = {
+    horizontal: new Set<string>(),
+    vertical: new Set<string>(),
   };
 
   constructor(private readonly mapManager: ContactMapManager) {
     const map = this.mapManager.getMap();
+    const view = this.mapManager.getView();
     this.moveEndListener = map.on("moveend", () => {
-      void this.render();
+      void this.render({ allowFetch: true });
     });
-    this.resolutionListener = this.mapManager.getView().on("change:resolution", () => {
-      void this.render();
+    this.centerListener = view.on("change:center", () => {
+      if (this.isViewInteracting()) {
+        this.scheduleInteractiveRender();
+      }
+    });
+    this.resolutionListener = view.on("change:resolution", () => {
+      if (this.isViewInteracting()) {
+        this.scheduleInteractiveRender();
+        return;
+      }
+      void this.render({ allowFetch: true });
     });
   }
 
@@ -75,6 +93,9 @@ class LinearTrackManager {
     if (this.moveEndListener) {
       unByKey(this.moveEndListener);
     }
+    if (this.centerListener) {
+      unByKey(this.centerListener);
+    }
     if (this.resolutionListener) {
       unByKey(this.resolutionListener);
     }
@@ -82,8 +103,7 @@ class LinearTrackManager {
     this.verticalResizeObserver?.disconnect();
     this.horizontalCanvas = null;
     this.verticalCanvas = null;
-    this.queryCache.horizontal = null;
-    this.queryCache.vertical = null;
+    this.invalidateQueryCache();
     this.listSubscribers.clear();
     this.renderStateSubscribers.horizontal.clear();
     this.renderStateSubscribers.vertical.clear();
@@ -203,16 +223,44 @@ class LinearTrackManager {
     return this.mapManager.networkManager.requestManager.getTracksPrecomputeStatus();
   }
 
-  public async render(): Promise<void> {
+  public async render(options?: { allowFetch?: boolean }): Promise<void> {
     if (!this.horizontalCanvas && !this.verticalCanvas) {
       return;
     }
+    const allowFetch = options?.allowFetch ?? true;
     const requestId = ++this.renderRequestId;
-    const horizontalPromise = this.renderOrientation("horizontal", requestId);
-    const verticalPromise = this.renderOrientation("vertical", requestId);
+    const horizontalPromise = this.renderOrientation(
+      "horizontal",
+      requestId,
+      allowFetch
+    );
+    const verticalPromise = this.renderOrientation(
+      "vertical",
+      requestId,
+      allowFetch
+    );
     await Promise.all([horizontalPromise, verticalPromise]);
   }
 
+  private isViewInteracting(): boolean {
+    const view = this.mapManager.getView();
+    return view.getInteracting() || view.getAnimating();
+  }
+
+  private scheduleInteractiveRender(): void {
+    if (this.interactiveRenderFramePending) {
+      return;
+    }
+    this.interactiveRenderFramePending = true;
+    window.requestAnimationFrame(() => {
+      this.interactiveRenderFramePending = false;
+      if (!this.isViewInteracting()) {
+        return;
+      }
+      void this.render({ allowFetch: false });
+    });
+  }
+
   private notifyTrackListChanged(): void {
     const snapshot = this.tracks.slice();
     this.listSubscribers.forEach((fn) => {
@@ -234,8 +282,16 @@ class LinearTrackManager {
   }
 
   private invalidateQueryCache(): void {
-    this.queryCache.horizontal = null;
-    this.queryCache.vertical = null;
+    this.cacheEpoch += 1;
+    this.queryCache.horizontal.clear();
+    this.queryCache.vertical.clear();
+    this.prefetchInFlight.horizontal.clear();
+    this.prefetchInFlight.vertical.clear();
+  }
+
+  public async clearCachesAndRender(): Promise<void> {
+    this.invalidateQueryCache();
+    await this.render({ allowFetch: true });
   }
 
   private createResizeObserver(
@@ -268,7 +324,8 @@ class LinearTrackManager {
 
   private async renderOrientation(
     orientation: Orientation,
-    requestId: number
+    requestId: number,
+    allowFetch: boolean
   ): Promise<void> {
     const canvas =
       orientation === "horizontal" ? this.horizontalCanvas : this.verticalCanvas;
@@ -296,36 +353,50 @@ class LinearTrackManager {
     }
 
     const viewport = this.getViewportGeometry(orientation);
+    const cacheEpoch = this.cacheEpoch;
     try {
       const prefetch = this.buildPrefetchViewport(viewport);
-      const cached = this.queryCache[orientation];
-      const response =
-        cached &&
-        Date.now() - cached.fetchedAtMs <= CACHE_MAX_AGE_MS &&
-        cached.bpResolution === viewport.bpResolution &&
+      const orientationCache = this.queryCache[orientation];
+      const cached = orientationCache.get(viewport.bpResolution);
+      const cacheMatchesResolution =
+        !!cached && cached.bpResolution === viewport.bpResolution;
+      const cacheFresh =
+        !!cached && Date.now() - cached.fetchedAtMs <= CACHE_MAX_AGE_MS;
+      const cacheCoversViewport =
+        !!cached &&
+        cacheMatchesResolution &&
         cached.prefetchStartPx <= viewport.startPx &&
-        cached.prefetchEndPx >= viewport.endPx
-          ? cached.response
-          : await this.mapManager.networkManager.requestManager.queryTracks1D(
-              prefetch.prefetchStartPx,
-              prefetch.prefetchEndPx,
-              prefetch.prefetchWidthPx,
-              viewport.bpResolution
-            );
+        cached.prefetchEndPx >= viewport.endPx;
+      let response: TrackQueryResponse;
       if (
-        !cached ||
-        Date.now() - cached.fetchedAtMs > CACHE_MAX_AGE_MS ||
-        cached.bpResolution !== viewport.bpResolution ||
-        cached.prefetchStartPx > viewport.startPx ||
-        cached.prefetchEndPx < viewport.endPx
+        cached &&
+        cacheMatchesResolution &&
+        (cacheCoversViewport ? cacheFresh || !allowFetch : !allowFetch)
       ) {
-        this.queryCache[orientation] = {
+        response = cached.response;
+      } else if (!allowFetch) {
+        return;
+      } else {
+        response = await this.mapManager.networkManager.requestManager.queryTracks1D(
+          prefetch.prefetchStartPx,
+          prefetch.prefetchEndPx,
+          prefetch.prefetchWidthPx,
+          viewport.bpResolution
+        );
+        if (cacheEpoch !== this.cacheEpoch) {
+          return;
+        }
+        orientationCache.set(viewport.bpResolution, {
           bpResolution: viewport.bpResolution,
           prefetchStartPx: prefetch.prefetchStartPx,
           prefetchEndPx: prefetch.prefetchEndPx,
           fetchedAtMs: Date.now(),
           response,
-        };
+        });
+        this.pruneCache(orientation);
+      }
+      if (allowFetch) {
+        this.prefetchNeighborResolutions(orientation, viewport, cacheEpoch);
       }
       if (requestId !== this.renderRequestId) {
         return;
@@ -635,7 +706,7 @@ class LinearTrackManager {
     };
   }
 
-  private buildPrefetchViewport(viewport: ViewportGeometry): {
+  private buildPrefetchViewport(viewport: PrefetchViewport): {
     prefetchStartPx: number;
     prefetchEndPx: number;
     prefetchWidthPx: number;
@@ -661,6 +732,153 @@ class LinearTrackManager {
       prefetchWidthPx: Math.min(MAX_PREFETCH_QUERY_WIDTH_PX, prefetchWidthPx),
     };
   }
+
+  private pruneCache(orientation: Orientation): void {
+    const cache = this.queryCache[orientation];
+    if (cache.size <= MAX_CACHED_RESOLUTIONS_PER_ORIENTATION) {
+      return;
+    }
+    const sortedKeysByRecency = [...cache.entries()]
+      .sort((a, b) => b[1].fetchedAtMs - a[1].fetchedAtMs)
+      .map(([bpResolution]) => bpResolution);
+    const keep = new Set(
+      sortedKeysByRecency.slice(0, MAX_CACHED_RESOLUTIONS_PER_ORIENTATION)
+    );
+    for (const bpResolution of cache.keys()) {
+      if (!keep.has(bpResolution)) {
+        cache.delete(bpResolution);
+      }
+    }
+  }
+
+  private prefetchNeighborResolutions(
+    orientation: Orientation,
+    viewport: ViewportGeometry,
+    cacheEpoch: number
+  ): void {
+    if (cacheEpoch !== this.cacheEpoch) {
+      return;
+    }
+    if (!this.tracks.some((track) => track.visible)) {
+      return;
+    }
+    const orientationCache = this.queryCache[orientation];
+    const inFlight = this.prefetchInFlight[orientation];
+    const neighborBpResolutions = this.getNeighborBpResolutions(
+      viewport.bpResolution
+    );
+    for (const neighborBpResolution of neighborBpResolutions) {
+      const neighborViewport = this.projectViewportToResolution(
+        viewport,
+        neighborBpResolution
+      );
+      if (!neighborViewport) {
+        continue;
+      }
+      const neighborPrefetch = this.buildPrefetchViewport(neighborViewport);
+      const cached = orientationCache.get(neighborBpResolution);
+      const cacheFresh =
+        !!cached && Date.now() - cached.fetchedAtMs <= CACHE_MAX_AGE_MS;
+      const cacheCoversViewport =
+        !!cached &&
+        cached.prefetchStartPx <= neighborViewport.startPx &&
+        cached.prefetchEndPx >= neighborViewport.endPx;
+      if (cacheFresh && cacheCoversViewport) {
+        continue;
+      }
+      const prefetchKey = [
+        neighborBpResolution,
+        neighborPrefetch.prefetchStartPx,
+        neighborPrefetch.prefetchEndPx,
+        neighborPrefetch.prefetchWidthPx,
+      ].join(":");
+      if (inFlight.has(prefetchKey)) {
+        continue;
+      }
+      inFlight.add(prefetchKey);
+      void this.mapManager.networkManager.requestManager
+        .queryTracks1D(
+          neighborPrefetch.prefetchStartPx,
+          neighborPrefetch.prefetchEndPx,
+          neighborPrefetch.prefetchWidthPx,
+          neighborBpResolution
+        )
+        .then((response) => {
+          if (cacheEpoch !== this.cacheEpoch) {
+            return;
+          }
+          orientationCache.set(neighborBpResolution, {
+            bpResolution: neighborBpResolution,
+            prefetchStartPx: neighborPrefetch.prefetchStartPx,
+            prefetchEndPx: neighborPrefetch.prefetchEndPx,
+            fetchedAtMs: Date.now(),
+            response,
+          });
+          this.pruneCache(orientation);
+        })
+        .catch((error) => {
+          console.debug(
+            `Track prefetch for resolution ${neighborBpResolution} failed`,
+            error
+          );
+        })
+        .finally(() => {
+          inFlight.delete(prefetchKey);
+        });
+    }
+  }
+
+  private getNeighborBpResolutions(currentBpResolution: number): number[] {
+    const tuples = this.mapManager.getLayersManager().resolutionTuples;
+    const currentIndex = tuples.findIndex(
+      (tuple) => tuple.bpResolution === currentBpResolution
+    );
+    if (currentIndex < 0) {
+      return [];
+    }
+    const neighbors: number[] = [];
+    if (currentIndex > 0) {
+      neighbors.push(tuples[currentIndex - 1].bpResolution);
+    }
+    if (currentIndex + 1 < tuples.length) {
+      neighbors.push(tuples[currentIndex + 1].bpResolution);
+    }
+    return neighbors;
+  }
+
+  private projectViewportToResolution(
+    viewport: ViewportGeometry,
+    targetBpResolution: number
+  ): PrefetchViewport | null {
+    const contigDimensionHolder = this.mapManager.getContigDimensionHolder();
+    const totalPx =
+      contigDimensionHolder.prefix_sum_px.get(targetBpResolution)?.[
+        contigDimensionHolder.contig_count
+      ] ?? 0;
+    if (totalPx <= 0) {
+      return null;
+    }
+    const startBp = Math.max(0, viewport.startBp);
+    const endBp = Math.max(startBp + 1, viewport.endBp);
+    const startPxRaw = contigDimensionHolder.getPxContainingBp(
+      startBp,
+      targetBpResolution
+    );
+    const endPxRaw =
+      contigDimensionHolder.getPxContainingBp(
+        Math.max(startBp, endBp - 1),
+        targetBpResolution
+      ) + 1;
+    const maxStartPx = Math.max(0, totalPx - 1);
+    const startPx = Math.max(0, Math.min(startPxRaw, maxStartPx));
+    const endPx = Math.max(startPx + 1, Math.min(endPxRaw, totalPx));
+    return {
+      startPx,
+      endPx,
+      bpResolution: targetBpResolution,
+      visibleWidthPx: viewport.visibleWidthPx,
+    };
+  }
 }
 
 export { LinearTrackManager, type Orientation };
@@ -680,6 +898,13 @@ type ViewportGeometry = {
   visibleWidthPx: number;
 };
 
+type PrefetchViewport = {
+  startPx: number;
+  endPx: number;
+  bpResolution: number;
+  visibleWidthPx: number;
+};
+
 type TrackQueryCache = {
   bpResolution: number;
   prefetchStartPx: number;

From a1901037234997bfd76e146765b6aeb60ed0d0b2 Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Sat, 21 Mar 2026 06:09:03 +0400
Subject: [PATCH 27/27] Tracks stability improved, added load-status panel

---
 src/app/core/net/api/RequestManager.ts        |   9 ++
 src/app/core/net/api/request.ts               |   5 +
 src/app/core/net/api/response.ts              |  40 +++++
 src/app/core/net/dto/requestDTO.ts            |  10 ++
 src/app/core/net/dto/responseDTO.ts           |  59 +++++++
 .../components/upper_ribbon/NavigationBar.vue |  17 ++
 .../upper_ribbon/WorkerDiagnosticsModal.vue   | 148 ++++++++++++++++++
 7 files changed, 288 insertions(+)
 create mode 100644 src/app/ui/components/upper_ribbon/WorkerDiagnosticsModal.vue

diff --git a/src/app/core/net/api/RequestManager.ts b/src/app/core/net/api/RequestManager.ts
index 3d141da..3106b37 100644
--- a/src/app/core/net/api/RequestManager.ts
+++ b/src/app/core/net/api/RequestManager.ts
@@ -40,6 +40,7 @@ import {
   TrackQueryResponseDTO,
   TrackSummaryResponseDTO,
   TilePOSTResponseDTO,
+  WorkerSchedulerDiagnosticsResponseDTO,
 } from "../dto/responseDTO";
 import type { OpenFileResponse } from "../netcommon";
 import type { NetworkManager } from "../NetworkManager";
@@ -86,6 +87,7 @@ import {
   QueryTracks1DRequest,
   StartTracksPrecomputeRequest,
   GetTracksPrecomputeStatusRequest,
+  GetWorkerDiagnosticsRequest,
 } from "./request";
 import {
   ConversionJobResponse,
@@ -95,6 +97,7 @@ import {
   TracksPrecomputeStatusResponse,
   TrackQueryResponse,
   TrackSummaryResponse,
+  WorkerSchedulerDiagnosticsResponse,
 } from "./response";
 import { toast } from "vue-sonner";
 import { useErrorToastStore } from "@/app/stores/errorToastStore";
@@ -308,6 +311,12 @@ class RequestManager {
       .then((json) => new TracksPrecomputeStatusResponseDTO(json).toEntity());
   }
 
+  public async getWorkerDiagnostics(): Promise<WorkerSchedulerDiagnosticsResponse> {
+    return this.sendRequest(new GetWorkerDiagnosticsRequest())
+      .then((response) => response.data)
+      .then((json) => new WorkerSchedulerDiagnosticsResponseDTO(json).toEntity());
+  }
+
   public async listFASTAFiles(): Promise<string[]> {
     const response = await this.sendRequest(new ListFASTAFilesRequest());
     return response.data as string[];
diff --git a/src/app/core/net/api/request.ts b/src/app/core/net/api/request.ts
index 02f54de..ee04fc6 100644
--- a/src/app/core/net/api/request.ts
+++ b/src/app/core/net/api/request.ts
@@ -318,6 +318,10 @@ class OpenProgressRequest implements HiCTAPIRequest {
   public constructor() {}
 }
 
+class GetWorkerDiagnosticsRequest implements HiCTAPIRequest {
+  requestPath = "/diagnostics/workers";
+}
+
 class GetVisualizationOptionsRequest implements HiCTAPIRequest {
   requestPath = "/get_visualization_options";
 
@@ -462,4 +466,5 @@ export {
   QueryTracks1DRequest,
   StartTracksPrecomputeRequest,
   GetTracksPrecomputeStatusRequest,
+  GetWorkerDiagnosticsRequest,
 };
diff --git a/src/app/core/net/api/response.ts b/src/app/core/net/api/response.ts
index 502c69e..a1c8683 100644
--- a/src/app/core/net/api/response.ts
+++ b/src/app/core/net/api/response.ts
@@ -143,6 +143,43 @@ class TracksPrecomputeStatusResponse {
   ) {}
 }
 
+class WorkerPoolDiagnosticsResponse {
+  public constructor(
+    public readonly corePoolSize: number,
+    public readonly maxPoolSize: number,
+    public readonly currentPoolSize: number,
+    public readonly largestPoolSize: number,
+    public readonly activeCount: number,
+    public readonly queueSize: number,
+    public readonly queueCapacity: number,
+    public readonly completedTaskCount: number,
+    public readonly taskCount: number
+  ) {}
+}
+
+class WorkerCancellationDomainDiagnosticsResponse {
+  public constructor(
+    public readonly currentGeneration: number,
+    public readonly trackedTaskCount: number,
+    public readonly trackedTasksByGeneration: Record<string, number>
+  ) {}
+}
+
+class WorkerSchedulerDiagnosticsResponse {
+  public constructor(
+    public readonly timestampMs: number,
+    public readonly totalMaxWorkers: number,
+    public readonly reservedMinWorkers: number,
+    public readonly elasticWorkersInUse: number,
+    public readonly elasticWorkersAvailable: number,
+    public readonly pools: Record<string, WorkerPoolDiagnosticsResponse>,
+    public readonly cancellationDomains: Record<
+      string,
+      WorkerCancellationDomainDiagnosticsResponse
+    >
+  ) {}
+}
+
 class FastaLinkMismatchResponse {
   public constructor(
     public readonly index: number,
@@ -190,6 +227,9 @@ export {
   TrackQueryResponse,
   TrackPrecomputeTrackStatusResponse,
   TracksPrecomputeStatusResponse,
+  WorkerPoolDiagnosticsResponse,
+  WorkerCancellationDomainDiagnosticsResponse,
+  WorkerSchedulerDiagnosticsResponse,
   FastaLinkMismatchResponse,
   FastaLinkCompatibilityResponse,
   FastaLinkResponse,
diff --git a/src/app/core/net/dto/requestDTO.ts b/src/app/core/net/dto/requestDTO.ts
index 3fe9c51..fa3c535 100644
--- a/src/app/core/net/dto/requestDTO.ts
+++ b/src/app/core/net/dto/requestDTO.ts
@@ -35,6 +35,7 @@ import {
   ListAGPFilesRequest,
   LoadAGPRequest,
   OpenProgressRequest,
+  GetWorkerDiagnosticsRequest,
   GetFastaForSelectionRequest,
   SetNormalizationRequest,
   SetContrastRangeRequest,
@@ -173,6 +174,8 @@ abstract class HiCTAPIRequestDTO<
         return new LoadAGPRequestDTO(entity as LoadAGPRequest);
       case entity instanceof OpenProgressRequest:
         return new OpenProgressRequestDTO(entity);
+      case entity instanceof GetWorkerDiagnosticsRequest:
+        return new GetWorkerDiagnosticsRequestDTO(entity);
       case entity instanceof CloseFileRequest:
         return new CloseFileRequestDTO(entity as CloseFileRequest);
       case entity instanceof AttachSessionRequest:
@@ -219,6 +222,12 @@ class OpenProgressRequestDTO extends HiCTAPIRequestDTO<OpenProgressRequest> {
   }
 }
 
+class GetWorkerDiagnosticsRequestDTO extends HiCTAPIRequestDTO<GetWorkerDiagnosticsRequest> {
+  toDTO(): Record<string, unknown> {
+    return {};
+  }
+}
+
 class SetVisualizationOptionsRequestDTO extends HiCTAPIRequestDTO<SetVisualizationOptionsRequest> {
   toDTO(): Record<string, unknown> {
     return {
@@ -596,4 +605,5 @@ export {
   MoveSelectionToDebrisRequestDTO,
   GetVisualizationOptionsRequestDTO,
   SetVisualizationOptionsRequestDTO,
+  GetWorkerDiagnosticsRequestDTO,
 };
diff --git a/src/app/core/net/dto/responseDTO.ts b/src/app/core/net/dto/responseDTO.ts
index cf30e36..4737f9b 100644
--- a/src/app/core/net/dto/responseDTO.ts
+++ b/src/app/core/net/dto/responseDTO.ts
@@ -32,6 +32,9 @@ import {
   TrackQueryResponse,
   TrackRenderResponse,
   TrackSummaryResponse,
+  WorkerCancellationDomainDiagnosticsResponse,
+  WorkerPoolDiagnosticsResponse,
+  WorkerSchedulerDiagnosticsResponse,
   TilePOSTResponse,
 } from "../api/response";
 import { InboundDTO } from "./dto";
@@ -208,6 +211,61 @@ class TracksPrecomputeStatusResponseDTO extends InboundDTO<TracksPrecomputeStatu
   }
 }
 
+class WorkerPoolDiagnosticsResponseDTO extends InboundDTO<WorkerPoolDiagnosticsResponse> {
+  public toEntity(): WorkerPoolDiagnosticsResponse {
+    return new WorkerPoolDiagnosticsResponse(
+      (this.json["corePoolSize"] as number) ?? 0,
+      (this.json["maxPoolSize"] as number) ?? 0,
+      (this.json["currentPoolSize"] as number) ?? 0,
+      (this.json["largestPoolSize"] as number) ?? 0,
+      (this.json["activeCount"] as number) ?? 0,
+      (this.json["queueSize"] as number) ?? 0,
+      (this.json["queueCapacity"] as number) ?? 0,
+      (this.json["completedTaskCount"] as number) ?? 0,
+      (this.json["taskCount"] as number) ?? 0
+    );
+  }
+}
+
+class WorkerCancellationDomainDiagnosticsResponseDTO extends InboundDTO<WorkerCancellationDomainDiagnosticsResponse> {
+  public toEntity(): WorkerCancellationDomainDiagnosticsResponse {
+    return new WorkerCancellationDomainDiagnosticsResponse(
+      (this.json["currentGeneration"] as number) ?? 0,
+      (this.json["trackedTaskCount"] as number) ?? 0,
+      ((this.json["trackedTasksByGeneration"] as Record<string, number>) ?? {})
+    );
+  }
+}
+
+class WorkerSchedulerDiagnosticsResponseDTO extends InboundDTO<WorkerSchedulerDiagnosticsResponse> {
+  public toEntity(): WorkerSchedulerDiagnosticsResponse {
+    const poolsJson = (this.json["pools"] as Record<string, Record<string, unknown>>) ?? {};
+    const cancellationJson =
+      (this.json["cancellationDomains"] as Record<string, Record<string, unknown>>) ?? {};
+    const pools = Object.fromEntries(
+      Object.entries(poolsJson).map(([priority, payload]) => [
+        priority,
+        new WorkerPoolDiagnosticsResponseDTO(payload).toEntity(),
+      ])
+    );
+    const cancellationDomains = Object.fromEntries(
+      Object.entries(cancellationJson).map(([domain, payload]) => [
+        domain,
+        new WorkerCancellationDomainDiagnosticsResponseDTO(payload).toEntity(),
+      ])
+    );
+    return new WorkerSchedulerDiagnosticsResponse(
+      (this.json["timestampMs"] as number) ?? 0,
+      (this.json["totalMaxWorkers"] as number) ?? 0,
+      (this.json["reservedMinWorkers"] as number) ?? 0,
+      (this.json["elasticWorkersInUse"] as number) ?? 0,
+      (this.json["elasticWorkersAvailable"] as number) ?? 0,
+      pools,
+      cancellationDomains
+    );
+  }
+}
+
 class FastaLinkMismatchResponseDTO extends InboundDTO<FastaLinkMismatchResponse> {
   public toEntity(): FastaLinkMismatchResponse {
     return new FastaLinkMismatchResponse(
@@ -262,5 +320,6 @@ export {
   TrackSummaryResponseDTO,
   TrackQueryResponseDTO,
   TracksPrecomputeStatusResponseDTO,
+  WorkerSchedulerDiagnosticsResponseDTO,
   FastaLinkResponseDTO,
 };
diff --git a/src/app/ui/components/upper_ribbon/NavigationBar.vue b/src/app/ui/components/upper_ribbon/NavigationBar.vue
index 12721f8..66aee33 100644
--- a/src/app/ui/components/upper_ribbon/NavigationBar.vue
+++ b/src/app/ui/components/upper_ribbon/NavigationBar.vue
@@ -189,6 +189,12 @@
                   Use custom ZoomSlider
                 </label>
               </li>
+              <li><hr class="dropdown-divider" /></li>
+              <li>
+                <a class="dropdown-item px-0 mt-2" href="#" @click="onOpenWorkerDiagnostics">
+                  Worker diagnostics...
+                </a>
+              </li>
             </ul>
           </li>
           <!-- Connection settings -->
@@ -282,6 +288,11 @@
     :map-manager="props.mapManager"
     @dismissed="trackManagerOpen = false"
   />
+  <WorkerDiagnosticsModal
+    v-if="workerDiagnosticsOpen"
+    :network-manager="props.networkManager"
+    @dismissed="workerDiagnosticsOpen = false"
+  />
   <FastaLinkWarningModal
     v-if="fastaLinkReport"
     :report="fastaLinkReport"
@@ -328,6 +339,7 @@ import CoolerConverter from "./CoolerConverter.vue";
 import UniversalFileSelector from "@/app/ui/components/upper_ribbon/UniversalFileSelector.vue";
 import TrackManager from "@/app/ui/components/upper_ribbon/TrackManager.vue";
 import FastaLinkWarningModal from "@/app/ui/components/upper_ribbon/FastaLinkWarningModal.vue";
+import WorkerDiagnosticsModal from "@/app/ui/components/upper_ribbon/WorkerDiagnosticsModal.vue";
 import { toast } from "vue-sonner";
 import { storeToRefs } from "pinia";
 import { useErrorToastStore } from "@/app/stores/errorToastStore";
@@ -339,6 +351,7 @@ const openingFASTAFile = ref(false);
 const openingAGPFile = ref(false);
 const convertingCoolers = ref(false);
 const trackManagerOpen = ref(false);
+const workerDiagnosticsOpen = ref(false);
 const saving = ref(false);
 const gatewayAddress: Ref<string> = ref("http://localhost:5000/");
 const aboutOpen = ref(false);
@@ -399,6 +412,10 @@ function onOpenTrackManager() {
   trackManagerOpen.value = true;
 }
 
+function onOpenWorkerDiagnostics() {
+  workerDiagnosticsOpen.value = true;
+}
+
 function onLoadAGP() {
   openingAGPFile.value = true;
 }
diff --git a/src/app/ui/components/upper_ribbon/WorkerDiagnosticsModal.vue b/src/app/ui/components/upper_ribbon/WorkerDiagnosticsModal.vue
new file mode 100644
index 0000000..2f44216
--- /dev/null
+++ b/src/app/ui/components/upper_ribbon/WorkerDiagnosticsModal.vue
@@ -0,0 +1,148 @@
+<template>
+  <div class="modal-backdrop fade show"></div>
+  <div class="modal fade show" style="display: block" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Worker Diagnostics</h5>
+          <button type="button" class="btn-close" @click="emit('dismissed')"></button>
+        </div>
+        <div class="modal-body">
+          <div v-if="loading" class="text-muted">Loading diagnostics...</div>
+          <div v-else-if="error" class="text-danger">{{ error }}</div>
+          <template v-else-if="diagnostics">
+            <div class="mb-3">
+              <strong>Total workers:</strong> {{ diagnostics.totalMaxWorkers }} |
+              <strong>Reserved:</strong> {{ diagnostics.reservedMinWorkers }} |
+              <strong>Elastic in use:</strong> {{ diagnostics.elasticWorkersInUse }} |
+              <strong>Elastic available:</strong> {{ diagnostics.elasticWorkersAvailable }}
+            </div>
+
+            <div class="table-responsive mb-4">
+              <table class="table table-sm table-striped align-middle">
+                <thead>
+                  <tr>
+                    <th>Priority</th>
+                    <th>Active</th>
+                    <th>Queue</th>
+                    <th>Pool</th>
+                    <th>Completed</th>
+                    <th>Total Tasks</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="row in poolRows" :key="row.priority">
+                    <td>{{ row.priority }}</td>
+                    <td>{{ row.activeCount }}</td>
+                    <td>{{ row.queueSize }}/{{ row.queueCapacity }}</td>
+                    <td>{{ row.currentPoolSize }} (core {{ row.corePoolSize }}, max {{ row.maxPoolSize }})</td>
+                    <td>{{ row.completedTaskCount }}</td>
+                    <td>{{ row.taskCount }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <div class="table-responsive">
+              <table class="table table-sm table-striped align-middle">
+                <thead>
+                  <tr>
+                    <th>Cancellation Domain</th>
+                    <th>Generation</th>
+                    <th>Tracked Tasks</th>
+                    <th>Tracked by Generation</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="row in cancellationRows" :key="row.domain">
+                    <td>{{ row.domain }}</td>
+                    <td>{{ row.currentGeneration }}</td>
+                    <td>{{ row.trackedTaskCount }}</td>
+                    <td>{{ row.byGeneration }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </template>
+          <div v-else class="text-muted">No diagnostics data yet.</div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" @click="emit('dismissed')">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import type { NetworkManager } from "@/app/core/net/NetworkManager";
+import type { WorkerSchedulerDiagnosticsResponse } from "@/app/core/net/api/response";
+
+const emit = defineEmits<{ (e: "dismissed"): void }>();
+
+const props = defineProps<{ networkManager: NetworkManager }>();
+
+const loading = ref(true);
+const error = ref("");
+const diagnostics = ref<WorkerSchedulerDiagnosticsResponse | null>(null);
+let pollTimer: number | undefined;
+let inFlight = false;
+
+const poolRows = computed(() => {
+  const pools = diagnostics.value?.pools ?? {};
+  return Object.entries(pools).map(([priority, payload]) => ({
+    priority,
+    ...payload,
+  }));
+});
+
+const cancellationRows = computed(() => {
+  const domains = diagnostics.value?.cancellationDomains ?? {};
+  return Object.entries(domains).map(([domain, payload]) => {
+    const byGeneration = Object.entries(payload.trackedTasksByGeneration ?? {})
+      .map(([generation, count]) => `${generation}: ${count}`)
+      .join(", ");
+    return {
+      domain,
+      currentGeneration: payload.currentGeneration,
+      trackedTaskCount: payload.trackedTaskCount,
+      byGeneration: byGeneration || "-",
+    };
+  });
+});
+
+async function fetchDiagnostics(): Promise<void> {
+  if (inFlight) {
+    return;
+  }
+  inFlight = true;
+  try {
+    diagnostics.value = await props.networkManager.requestManager.getWorkerDiagnostics();
+    error.value = "";
+  } catch (err) {
+    error.value =
+      (err as { response?: { data?: { error?: string } }; message?: string })
+        ?.response?.data?.error ??
+      (err as { message?: string })?.message ??
+      "Failed to load worker diagnostics";
+  } finally {
+    loading.value = false;
+    inFlight = false;
+  }
+}
+
+onMounted(() => {
+  void fetchDiagnostics();
+  pollTimer = window.setInterval(() => {
+    void fetchDiagnostics();
+  }, 1000);
+});
+
+onBeforeUnmount(() => {
+  if (pollTimer !== undefined) {
+    window.clearInterval(pollTimer);
+    pollTimer = undefined;
+  }
+});
+</script>