From 13d9b836dc6918ac60219681cba956b643cac98a Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Wed, 22 Apr 2026 02:53:32 +0400
Subject: [PATCH 1/2] Cosmetic fixes

---
 src/App.vue                                   |   4 +-
 src/app/core/net/api/RequestManager.ts        | 182 +++++++++-------
 src/app/ui/MainUIComponent.vue                | 205 +++++++++++-------
 .../ui/components/sidebar/LayerComponent.vue  |  13 +-
 .../components/upper_ribbon/HeaderRibbon.vue  |  44 ++--
 src/assets/base.css                           |   4 +-
 6 files changed, 276 insertions(+), 176 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a62aef3..9adce1e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -35,11 +35,11 @@ import MainUIComponent from "@/app/ui/MainUIComponent.vue";
 
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: var(--hict-font-sans);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
+  color: var(--hict-ui-fg, #2c3e50);
   /* margin-top: 60px; */
 }
 </style>
diff --git a/src/app/core/net/api/RequestManager.ts b/src/app/core/net/api/RequestManager.ts
index cc5e8f1..3288288 100644
--- a/src/app/core/net/api/RequestManager.ts
+++ b/src/app/core/net/api/RequestManager.ts
@@ -19,14 +19,10 @@
  CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import assert from "assert";
 import axios, { type AxiosRequestConfig, type AxiosResponse } from "axios";
-import { ImageTile, Tile } from "ol";
-import TileState from "ol/TileState";
 import type { AssemblyInfo } from "../../domain/AssemblyInfo";
 import {
   AssemblyInfoDTO,
-  InboundDTO,
   OpenFileResponseDTO,
   VisualizationOptionsDTO,
 } from "../dto/dto";
@@ -43,7 +39,6 @@ import {
   TrackFeatureSearchResponseDTO,
   TrackQueryResponseDTO,
   TrackSummaryResponseDTO,
-  TilePOSTResponseDTO,
   WorkerSchedulerDiagnosticsResponseDTO,
 } from "../dto/responseDTO";
 import type { OpenFileResponse } from "../netcommon";
@@ -148,41 +143,78 @@ export type SecondarySourceStatusResponse = {
 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;
+  private notifyInboundPayload(payload: unknown): void {
+    if (!payload || typeof payload !== "object") {
+      return;
+    }
+    const json = payload as Record<string, unknown>;
+    if (typeof json.error === "string" && json.error.trim().length > 0) {
+      toast.error(json.error);
+    }
+    if (typeof json.info === "string" && json.info.trim().length > 0) {
+      toast.success(json.info);
+    }
+    if (typeof json.message === "string" && json.message.trim().length > 0) {
+      toast(json.message);
+    }
+    if (typeof json.warning === "string" && json.warning.trim().length > 0) {
+      toast(json.warning, {
+        style: {
+          "background-color": "lightyellow",
+          color: "black",
+        },
+      });
+    }
+  }
+
+  private normalizeAssemblyInfo(
+    json: Record<string, unknown>
+  ): Record<string, unknown> {
+    const assemblyInfo = json["assemblyInfo"] as
+      | Record<string, unknown>
+      | undefined;
     return assemblyInfo ?? json;
   }
 
-  private parseSecondarySourceStatus(json: Record<string, unknown>): SecondarySourceStatusResponse {
+  private parseSecondarySourceStatus(
+    json: Record<string, unknown>
+  ): SecondarySourceStatusResponse {
     if (typeof json.error === "string" && json.error.trim().length > 0) {
       throw new Error(json.error);
     }
     const compatibilityRaw =
       (json.compatibility as Record<string, unknown> | undefined) ?? undefined;
-    const compatibility: SecondarySourceCompatibility | undefined = compatibilityRaw
-      ? {
-          sameResolutions: Boolean(compatibilityRaw.sameResolutions ?? false),
-          sameMatrixSizes: Boolean(compatibilityRaw.sameMatrixSizes ?? false),
-          exactMatch: Boolean(compatibilityRaw.exactMatch ?? false),
-          primaryMaxBins: Number(compatibilityRaw.primaryMaxBins ?? 0),
-          secondaryMaxBins: Number(compatibilityRaw.secondaryMaxBins ?? 0),
-          primaryBinsByResolution: Array.isArray(compatibilityRaw.primaryBinsByResolution)
-            ? (compatibilityRaw.primaryBinsByResolution as unknown[]).map((value) =>
-                Number(value ?? 0)
-              )
-            : [],
-          secondaryBinsByResolution: Array.isArray(compatibilityRaw.secondaryBinsByResolution)
-            ? (compatibilityRaw.secondaryBinsByResolution as unknown[]).map((value) =>
-                Number(value ?? 0)
-              )
-            : [],
-          mismatchedResolutionOrders: Array.isArray(compatibilityRaw.mismatchedResolutionOrders)
-            ? (compatibilityRaw.mismatchedResolutionOrders as unknown[]).map((value) =>
-                Number(value ?? 0)
-              )
-            : [],
-        }
-      : undefined;
+    const compatibility: SecondarySourceCompatibility | undefined =
+      compatibilityRaw
+        ? {
+            sameResolutions: Boolean(compatibilityRaw.sameResolutions ?? false),
+            sameMatrixSizes: Boolean(compatibilityRaw.sameMatrixSizes ?? false),
+            exactMatch: Boolean(compatibilityRaw.exactMatch ?? false),
+            primaryMaxBins: Number(compatibilityRaw.primaryMaxBins ?? 0),
+            secondaryMaxBins: Number(compatibilityRaw.secondaryMaxBins ?? 0),
+            primaryBinsByResolution: Array.isArray(
+              compatibilityRaw.primaryBinsByResolution
+            )
+              ? (compatibilityRaw.primaryBinsByResolution as unknown[]).map(
+                  (value) => Number(value ?? 0)
+                )
+              : [],
+            secondaryBinsByResolution: Array.isArray(
+              compatibilityRaw.secondaryBinsByResolution
+            )
+              ? (compatibilityRaw.secondaryBinsByResolution as unknown[]).map(
+                  (value) => Number(value ?? 0)
+                )
+              : [],
+            mismatchedResolutionOrders: Array.isArray(
+              compatibilityRaw.mismatchedResolutionOrders
+            )
+              ? (compatibilityRaw.mismatchedResolutionOrders as unknown[]).map(
+                  (value) => Number(value ?? 0)
+                )
+              : [],
+          }
+        : undefined;
     return {
       attached: Boolean(json.attached ?? false),
       filename: String(json.filename ?? ""),
@@ -227,38 +259,21 @@ class RequestManager {
             req.data = JSON.parse(req.data);
           } catch (e) {
             throw new Error(
-              `Invalid response from ${request.requestPath}: ${req.data.slice(0, 200)}`
+              `Invalid response from ${request.requestPath}: ${req.data.slice(
+                0,
+                200
+              )}`
             );
           }
         }
-        if (req instanceof InboundDTO) {
-          if (req.error) {
-            toast.error(req.error);
-          }
-          if (req.info) {
-            toast.success(req.info);
-          }
-          if (req.message) {
-            toast(req.message);
-          }
-          if (req.warning) {
-            toast(req.warning, {
-              style: {
-                "background-color": "lightyellow",
-                color: "black",
-              },
-            });
-          }
-        }
+        this.notifyInboundPayload(req.data);
         return req;
       })
       .catch((err) => {
         const errorToastStore = useErrorToastStore();
         if (errorToastStore.requestErrorToastsEnabled) {
           const message =
-            err?.response?.data?.error ??
-            err?.message ??
-            "Request failed";
+            err?.response?.data?.error ?? err?.message ?? "Request failed";
           toast.error(message);
         }
         throw err;
@@ -297,7 +312,9 @@ class RequestManager {
     filename: string,
     allowMismatch = false
   ): Promise<SecondarySourceStatusResponse> {
-    return this.sendRequest(new OpenSecondarySourceRequest({ filename, allowMismatch }))
+    return this.sendRequest(
+      new OpenSecondarySourceRequest({ filename, allowMismatch })
+    )
       .then((response) => response.data as Record<string, unknown>)
       .then((json) => this.parseSecondarySourceStatus(json));
   }
@@ -314,7 +331,9 @@ class RequestManager {
     assemblySource: "PRIMARY" | "SECONDARY";
     assemblyInfo: AssemblyInfo;
   }> {
-    return this.sendRequest(new SetAssemblyInfoSourceRequest({ assemblySource }))
+    return this.sendRequest(
+      new SetAssemblyInfoSourceRequest({ assemblySource })
+    )
       .then((response) => response.data as Record<string, unknown>)
       .then((json) => ({
         assemblySource:
@@ -331,7 +350,11 @@ class RequestManager {
     await this.sendRequest(new CloseFileRequest());
   }
 
-  public async attachSession(): Promise<{ filename: string; fastaFilename: 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) => {
@@ -365,7 +388,9 @@ class RequestManager {
   public async listFilesDetailed(): Promise<FileEntryResponse[]> {
     return this.sendRequest(new ListFilesDetailedRequest())
       .then((response) => response.data as Record<string, unknown>[])
-      .then((items) => items.map((item) => new FileEntryResponseDTO(item).toEntity()));
+      .then((items) =>
+        items.map((item) => new FileEntryResponseDTO(item).toEntity())
+      );
   }
 
   public async listCoolers(): Promise<string[]> {
@@ -408,7 +433,9 @@ class RequestManager {
   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()));
+      .then((items) =>
+        items.map((item) => new TrackSummaryResponseDTO(item).toEntity())
+      );
   }
 
   public async updateTrack(
@@ -570,7 +597,9 @@ class RequestManager {
     trackId?: string,
     force = false
   ): Promise<TracksPrecomputeStatusResponse> {
-    return this.sendRequest(new StartTracksPrecomputeRequest({ trackId, force }))
+    return this.sendRequest(
+      new StartTracksPrecomputeRequest({ trackId, force })
+    )
       .then((response) => response.data)
       .then((json) => new TracksPrecomputeStatusResponseDTO(json).toEntity());
   }
@@ -584,24 +613,29 @@ class RequestManager {
   public async getWorkerDiagnostics(): Promise<WorkerSchedulerDiagnosticsResponse> {
     return this.sendRequest(new GetWorkerDiagnosticsRequest())
       .then((response) => response.data)
-      .then((json) => new WorkerSchedulerDiagnosticsResponseDTO(json).toEntity());
+      .then((json) =>
+        new WorkerSchedulerDiagnosticsResponseDTO(json).toEntity()
+      );
   }
 
   public async getRenderPipelineConfig(): Promise<Record<string, unknown>> {
-    return this.sendRequest(new GetRenderPipelineRequest())
-      .then((response) => response.data as Record<string, unknown>);
+    return this.sendRequest(new GetRenderPipelineRequest()).then(
+      (response) => response.data as Record<string, unknown>
+    );
   }
 
   public async setRenderPipelineConfig(
     config: Record<string, unknown>
   ): Promise<Record<string, unknown>> {
-    return this.sendRequest(new SetRenderPipelineRequest(config))
-      .then((response) => response.data as Record<string, unknown>);
+    return this.sendRequest(new SetRenderPipelineRequest(config)).then(
+      (response) => response.data as Record<string, unknown>
+    );
   }
 
   public async resetRenderPipelineConfig(): Promise<Record<string, unknown>> {
-    return this.sendRequest(new ResetRenderPipelineRequest())
-      .then((response) => response.data as Record<string, unknown>);
+    return this.sendRequest(new ResetRenderPipelineRequest()).then(
+      (response) => response.data as Record<string, unknown>
+    );
   }
 
   public async listFASTAFiles(): Promise<string[]> {
@@ -609,7 +643,9 @@ class RequestManager {
     return response.data as string[];
   }
 
-  public async linkFASTA(request: LinkFASTARequest): Promise<FastaLinkResponse> {
+  public async linkFASTA(
+    request: LinkFASTARequest
+  ): Promise<FastaLinkResponse> {
     return this.sendRequest(request)
       .then((response) => response.data)
       .then((json) => new FastaLinkResponseDTO(json).toEntity())
@@ -667,9 +703,7 @@ class RequestManager {
     scaffoldId: number,
     newName: string | null
   ): Promise<AssemblyInfo> {
-    return this.sendRequest(
-      new RenameScaffoldRequest({ scaffoldId, newName })
-    )
+    return this.sendRequest(new RenameScaffoldRequest({ scaffoldId, newName }))
       .then((response) => response.data)
       .then((json) =>
         new AssemblyInfoDTO(this.normalizeAssemblyInfo(json)).toEntity()
@@ -701,7 +735,9 @@ class RequestManager {
       .then((json) => Number(json.version ?? 0));
   }
 
-  public async getBackendVersion(): Promise<{ version: string; webuiVersion?: string } | string> {
+  public async getBackendVersion(): Promise<
+    { version: string; webuiVersion?: string } | string
+  > {
     const host = this.networkManager.host.replace(/\/+$/, "");
     return axios
       .get(`${host}/version`)
diff --git a/src/app/ui/MainUIComponent.vue b/src/app/ui/MainUIComponent.vue
index 706a0d5..080f355 100644
--- a/src/app/ui/MainUIComponent.vue
+++ b/src/app/ui/MainUIComponent.vue
@@ -35,7 +35,11 @@
           <div class="modal-content">
             <div class="modal-header">
               <h5 class="modal-title">Opening file</h5>
-              <button type="button" class="btn-close" @click="closeOpenProgress"></button>
+              <button
+                type="button"
+                class="btn-close"
+                @click="closeOpenProgress"
+              ></button>
             </div>
             <div class="modal-body">
               <div class="mb-2">{{ openProgressStage }}</div>
@@ -53,7 +57,11 @@
               </div>
             </div>
             <div class="modal-footer">
-              <button type="button" class="btn btn-secondary" @click="closeOpenProgress">
+              <button
+                type="button"
+                class="btn btn-secondary"
+                @click="closeOpenProgress"
+              >
                 Hide
               </button>
             </div>
@@ -90,7 +98,7 @@ import {
   ContactMapManager,
   // type ContactMapManagerOptions,
 } from "@/app/core/mapmanagers/ContactMapManager";
-import { onMounted, ref, watch, type Ref } from "vue";
+import { onMounted, onUnmounted, 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";
@@ -132,7 +140,7 @@ const { mapBackgroundColor } = storeToRefs(stylesStore);
 const sessionStore = useSessionStore();
 
 const htmlElementReferencesStore = usehtmlElementReferencesStore();
-const { mapTarget, miniMapTarget } = storeToRefs(htmlElementReferencesStore);
+const { miniMapTarget } = storeToRefs(htmlElementReferencesStore);
 const lastAgpFilename: Ref<string> = ref("");
 let openProgressTimer: number | undefined;
 const openProgressVisible = ref(false);
@@ -144,6 +152,8 @@ function startOpenProgress() {
   if (openProgressTimer !== undefined) {
     return;
   }
+  openProgressStage.value = "starting";
+  openProgressPct.value = 0;
   openProgressVisible.value = true;
   openProgressTimer = window.setInterval(() => {
     if (openProgressInFlight) return;
@@ -152,7 +162,10 @@ function startOpenProgress() {
       .getOpenProgress()
       .then((p) => {
         openProgressStage.value = p.stage ?? "working";
-        openProgressPct.value = Math.max(0, Math.min(100, Math.round((p.progress ?? 0) * 100)));
+        openProgressPct.value = Math.max(
+          0,
+          Math.min(100, Math.round((p.progress ?? 0) * 100))
+        );
       })
       .catch(() => undefined)
       .finally(() => {
@@ -166,6 +179,7 @@ function stopOpenProgress() {
     window.clearInterval(openProgressTimer);
     openProgressTimer = undefined;
   }
+  openProgressInFlight = false;
   openProgressVisible.value = false;
 }
 
@@ -173,7 +187,10 @@ function closeOpenProgress() {
   openProgressVisible.value = false;
 }
 
-function safeColorTranslator(value: unknown, fallback: string): ColorTranslator {
+function safeColorTranslator(
+  value: unknown,
+  fallback: string
+): ColorTranslator {
   if (typeof value !== "string" || value.length > 128) {
     return new ColorTranslator(fallback, { legacyCSS: true });
   }
@@ -224,29 +241,35 @@ function onClosed() {
 function onAttached() {
   networkManager.requestManager
     .attachSession()
-    .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,
+    .then(
+      ({
         filename: attachedName,
-        fastaFilename: attachedFastaName ?? "",
-        tileSize: tileSize.value,
-        contigBorderColor: contigBorderColor.value,
-        mapTargetSelector: "hic-contact-map",
-        networkManager: networkManager,
-        minimapTarget: miniMapTarget,
-      });
-      mapManager.value = newManager;
-      networkManager.mapManager = mapManager.value;
-      newManager.initializeMap();
-      toast.success("Attached to session " + 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: attachedFastaName ?? "",
+          tileSize: tileSize.value,
+          contigBorderColor: contigBorderColor.value,
+          mapTargetSelector: "hic-contact-map",
+          networkManager: networkManager,
+          minimapTarget: miniMapTarget,
+        });
+        mapManager.value = newManager;
+        networkManager.mapManager = mapManager.value;
+        newManager.initializeMap();
+        toast.success("Attached to session " + attachedName);
+      }
+    )
     .catch((err) => {
       const message =
         err?.response?.data?.error ??
@@ -261,44 +284,47 @@ async function openFileWithOptions(
   ffname: string | undefined
 ): Promise<void> {
   startOpenProgress();
-  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();
-  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);
+  try {
+    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();
+    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);
+      }
     }
+  } finally {
+    stopOpenProgress();
   }
-  stopOpenProgress();
 }
 
 function displayNewMap() {
@@ -326,12 +352,19 @@ 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 ??
+    (
+      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;
@@ -341,9 +374,12 @@ function applyDefaultVisualizationPreset() {
   const signalThresholds = first["signalThresholds"] as
     | { lowerSignalBound?: number; upperSignalBound?: number }
     | undefined;
-  const trackStyles = first["trackStyles"] as Record<string, unknown> | 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 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;
@@ -360,7 +396,10 @@ function applyDefaultVisualizationPreset() {
     maxSignal
   );
   let finalCmap = cmapObj;
-  if (signalThresholds && typeof signalThresholds.lowerSignalBound === "number") {
+  if (
+    signalThresholds &&
+    typeof signalThresholds.lowerSignalBound === "number"
+  ) {
     finalCmap = new SimpleLinearGradient(
       cmapObj.startColorRGBA,
       cmapObj.endColorRGBA,
@@ -381,15 +420,17 @@ function applyDefaultVisualizationPreset() {
     )
   );
   const bg = (first["backgroundColor"] as string) ?? "rgba(255,255,255,1)";
-  stylesStore.setMapBackground(
-    safeColorTranslator(bg, "rgba(255,255,255,1)")
-  );
+  stylesStore.setMapBackground(safeColorTranslator(bg, "rgba(255,255,255,1)"));
   if (trackStyles && mapManager.value) {
-    mapManager.value.getLayersManager().applyTrackStylePreset(trackStyles as never);
+    mapManager.value
+      .getLayersManager()
+      .applyTrackStylePreset(trackStyles as never);
   }
-  mapManager.value?.visualizationManager.sendVisualizationOptionsToServer().then(() => {
-    mapManager.value?.reloadTiles();
-  });
+  mapManager.value?.visualizationManager
+    .sendVisualizationOptionsToServer()
+    .then(() => {
+      mapManager.value?.reloadTiles();
+    });
 }
 
 function onAgpLoaded(filename: string): void {
@@ -639,6 +680,10 @@ onMounted(() => {
   syncUiChromePalette();
 });
 
+onUnmounted(() => {
+  stopOpenProgress();
+});
+
 function onFileSelected(newFilename: string) {
   if (newFilename !== filename.value) {
     resetState();
diff --git a/src/app/ui/components/sidebar/LayerComponent.vue b/src/app/ui/components/sidebar/LayerComponent.vue
index fce3b97..eac6873 100644
--- a/src/app/ui/components/sidebar/LayerComponent.vue
+++ b/src/app/ui/components/sidebar/LayerComponent.vue
@@ -147,7 +147,10 @@
             <button class="btn btn-sm btn-success" @click="applyStyle">
               Apply
             </button>
-            <button class="btn btn-sm btn-outline-secondary" @click="resetStyle">
+            <button
+              class="btn btn-sm btn-outline-secondary"
+              @click="resetStyle"
+            >
               Reset
             </button>
           </div>
@@ -183,9 +186,9 @@ function getBaseColor(): ColorTranslator {
   try {
     if (props.getDefaultColor) {
       const style = props.getDefaultColor();
-      const olColorString = style
-        ?.getStroke()
-        ?.getColor() as ColorLike as string | undefined;
+      const olColorString = style?.getStroke()?.getColor() as ColorLike as
+        | string
+        | undefined;
       if (olColorString) {
         return new ColorTranslator(olColorString, { legacyCSS: true });
       }
@@ -344,7 +347,7 @@ function resetStyle() {
   height: 20px;
 
   /* Body/Small */
-  font-family: "Roboto", ui-sans-serif;
+  font-family: var(--hict-font-sans);
   font-style: normal;
   font-weight: 400;
   font-size: 13px;
diff --git a/src/app/ui/components/upper_ribbon/HeaderRibbon.vue b/src/app/ui/components/upper_ribbon/HeaderRibbon.vue
index 7843bcd..19fc0a4 100644
--- a/src/app/ui/components/upper_ribbon/HeaderRibbon.vue
+++ b/src/app/ui/components/upper_ribbon/HeaderRibbon.vue
@@ -42,11 +42,18 @@
           </button>
         </div>
         <div
-          v-if="(searchResults.length > 0 || searchLoadingRemote) && searchQuery.length >= 3"
+          v-if="
+            (searchResults.length > 0 || searchLoadingRemote) &&
+            searchQuery.length >= 3
+          "
           class="search-dropdown"
         >
           <div v-if="searchLoadingRemote" class="search-loading">
-            <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+            <span
+              class="spinner-border spinner-border-sm me-2"
+              role="status"
+              aria-hidden="true"
+            ></span>
             Searching genome features...
           </div>
           <button
@@ -133,7 +140,9 @@
           @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-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) }}%
@@ -147,7 +156,9 @@
           @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-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) }}%
@@ -161,7 +172,9 @@
           @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-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) }}%
@@ -429,7 +442,8 @@ function selectResult(idx: number): void {
 
 function goToSelection(): void {
   if (!props.mapManager) return;
-  const item = searchResults.value[selectedIndex.value] ?? searchResults.value[0];
+  const item =
+    searchResults.value[selectedIndex.value] ?? searchResults.value[0];
   if (!item) return;
   if (item.type === "Contig") {
     const contig =
@@ -453,7 +467,9 @@ function goToSelection(): void {
     view.animate({ center: [midPx, -midPx] });
     scheduleFeatureContextPrefetch(startBp, endBp);
   } else if (item.type === "Scaffold") {
-    const scaffold = props.mapManager.scaffoldHolder.getScaffoldById(Number(item.id));
+    const scaffold = props.mapManager.scaffoldHolder.getScaffoldById(
+      Number(item.id)
+    );
     const borders = scaffold.scaffoldBordersBP;
     if (!borders) {
       toast.error("Scaffold has no borders in the current assembly");
@@ -756,7 +772,7 @@ function onNormalizationChanged() {
   gap: 16px;
 
   width: auto;
-  height: 29px;
+  height: 30px;
 
   /* Inside auto layout */
   flex: 1 1 auto;
@@ -782,7 +798,7 @@ function onNormalizationChanged() {
   gap: 10px;
 
   width: 216px;
-  height: 29px;
+  height: 30px;
 
   /* Inside auto layout */
   flex: none;
@@ -803,7 +819,7 @@ function onNormalizationChanged() {
   padding: 0px;
 
   width: 200px;
-  height: 29px;
+  height: 30px;
 
   /* Global/09. White */
   /*background: #FFFFFF;*/
@@ -887,7 +903,7 @@ function onNormalizationChanged() {
   align-items: center;
   padding: 4px 8px;
 
-  font-family: "Roboto", ui-sans-serif;
+  font-family: var(--hict-font-sans);
   font-style: normal;
   font-weight: 100;
   font-size: 14px;
@@ -895,8 +911,8 @@ function onNormalizationChanged() {
 
   text-align: center;
 
-  width: 90px;
-  height: 29px;
+  width: 115px;
+  height: 30px;
 
   /* Global/07. Light */
   border: 1px solid #f8f9fa;
@@ -923,7 +939,7 @@ function onNormalizationChanged() {
   padding: 4px 8px;
 
   min-width: 140px;
-  height: 29px;
+  height: 30px;
 
   /* Global/07. Light */
   border: 1px solid #f8f9fa;
diff --git a/src/assets/base.css b/src/assets/base.css
index b1b3a6e..0b2387a 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -21,6 +21,7 @@
 
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
+  --hict-font-sans: Avenir, Helvetica, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
   --vt-c-white: #ffffff;
   --vt-c-white-soft: #f8f8f8;
   --vt-c-white-mute: #f2f2f2;
@@ -86,8 +87,7 @@ body {
   background: var(--color-background);
   transition: color 0.5s, background-color 0.5s;
   line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family: var(--hict-font-sans);
   font-size: 15px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;

From a8690dfcb005fa90a87746e82d0782817b42baf6 Mon Sep 17 00:00:00 2001
From: Alexander Serdyukov <ntwwwnt@gmail.com>
Date: Wed, 22 Apr 2026 03:53:39 +0400
Subject: [PATCH 2/2] Added pixel overlay capabilities

---
 src/App.vue                                   |   6 -
 src/app/core/mapmanagers/ContactMapManager.ts |  35 +-
 .../notifications/NotificationCenterModal.vue |   7 +
 .../upper_ribbon/RenderingPipelineModal.vue   | 536 +++++++++++++++++-
 src/assets/base.css                           |  81 +++
 5 files changed, 622 insertions(+), 43 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9adce1e..e5147df 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,12 +20,6 @@
  -->
 
 <template>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
-    rel="stylesheet"
-  />
   <MainUIComponent></MainUIComponent>
 </template>
 
diff --git a/src/app/core/mapmanagers/ContactMapManager.ts b/src/app/core/mapmanagers/ContactMapManager.ts
index d26dd98..7cdeaf7 100644
--- a/src/app/core/mapmanagers/ContactMapManager.ts
+++ b/src/app/core/mapmanagers/ContactMapManager.ts
@@ -296,6 +296,20 @@ class ContactMapManager {
     this.scheduleMinimapViewportSync();
   }
 
+  private resolveExportMapSizePx(
+    bpResolution: number,
+    configuredMapSizePx: number
+  ): number {
+    const safeConfiguredSize = Math.max(1, Math.round(configuredMapSizePx || 1));
+    const prefixPx = this.contigDimensionHolder.prefix_sum_px.get(bpResolution);
+    const assemblyMapSizePx =
+      prefixPx?.[this.contigDimensionHolder.contig_count] ?? safeConfiguredSize;
+    return Math.max(
+      1,
+      Math.min(safeConfiguredSize, Math.round(assemblyMapSizePx))
+    );
+  }
+
   private async buildCurrentMapSvg(
     progressCallback?: (progress: number) => void,
     options?: {
@@ -331,8 +345,10 @@ class ContactMapManager {
 
     const descriptor =
       this.viewAndLayersManager.currentViewState.resolutionDesciptor;
-    const imageSize =
-      this.viewAndLayersManager.imageSizes[descriptor.imageSizeIndex];
+    const mapSizePx = this.resolveExportMapSizePx(
+      descriptor.bpResolution,
+      this.viewAndLayersManager.imageSizes[descriptor.imageSizeIndex] ?? 1
+    );
     const tileSize = this.options.tileSize;
 
     const layer =
@@ -352,7 +368,7 @@ class ContactMapManager {
     const tileUrlFn = source.getTileUrlFunction();
     const projection = this.map.getView().getProjection();
     const pixelRatio = window.devicePixelRatio ?? 1;
-    const tilesPerSide = Math.ceil(imageSize / tileSize);
+    const tilesPerSide = Math.ceil(mapSizePx / tileSize);
     const tiles: { col: number; row: number; url: string }[] = [];
     for (let row = 0; row < tilesPerSide; row++) {
       for (let col = 0; col < tilesPerSide; col++) {
@@ -365,8 +381,8 @@ class ContactMapManager {
       }
     }
 
-    const width = imageSize;
-    const height = imageSize;
+    const width = mapSizePx;
+    const height = mapSizePx;
     const backgroundColor = options?.backgroundColor ?? "rgba(255,255,255,0)";
     const escapeAttr = ContactMapManager.escapeXml;
     const svgImages: string[] = [];
@@ -756,12 +772,9 @@ class ContactMapManager {
     const bpResolution = descriptor.bpResolution;
     const configuredMapSizePx =
       this.viewAndLayersManager.imageSizes[descriptor.imageSizeIndex] ?? 1;
-    const prefixPx = this.contigDimensionHolder.prefix_sum_px.get(bpResolution);
-    const assemblyMapSizePx =
-      prefixPx?.[this.contigDimensionHolder.contig_count] ?? configuredMapSizePx;
-    const mapSizePx = Math.max(
-      1,
-      Math.min(configuredMapSizePx, assemblyMapSizePx)
+    const mapSizePx = this.resolveExportMapSizePx(
+      bpResolution,
+      configuredMapSizePx
     );
     const visibleTrackCount = this.linearTrackManager
       .getTracksSnapshot()
diff --git a/src/app/ui/components/notifications/NotificationCenterModal.vue b/src/app/ui/components/notifications/NotificationCenterModal.vue
index 678d3dc..be199d1 100644
--- a/src/app/ui/components/notifications/NotificationCenterModal.vue
+++ b/src/app/ui/components/notifications/NotificationCenterModal.vue
@@ -122,6 +122,10 @@ const formatLevel = (level: NotificationLevel): string => {
   z-index: 2060;
 }
 
+.modal-content {
+  color: var(--hict-surface-fg);
+}
+
 .notification-center-toolbar {
   display: flex;
   align-items: center;
@@ -149,6 +153,7 @@ const formatLevel = (level: NotificationLevel): string => {
   border-radius: 8px;
   padding: 10px 12px;
   background: #f8f9fa;
+  color: rgba(18, 25, 35, 0.95);
 }
 
 .notification-entry_error {
@@ -182,6 +187,7 @@ const formatLevel = (level: NotificationLevel): string => {
 
 .notification-level {
   font-weight: 700;
+  color: inherit;
 }
 
 .notification-time {
@@ -192,6 +198,7 @@ const formatLevel = (level: NotificationLevel): string => {
 .notification-message {
   white-space: pre-wrap;
   word-break: break-word;
+  color: inherit;
 }
 
 .notification-empty-state {
diff --git a/src/app/ui/components/upper_ribbon/RenderingPipelineModal.vue b/src/app/ui/components/upper_ribbon/RenderingPipelineModal.vue
index 3b4ce6e..462b5c6 100644
--- a/src/app/ui/components/upper_ribbon/RenderingPipelineModal.vue
+++ b/src/app/ui/components/upper_ribbon/RenderingPipelineModal.vue
@@ -56,6 +56,26 @@
                 <input id="pipeline-swap" v-model="swapUpperLower" class="form-check-input" type="checkbox" />
                 <label class="form-check-label" for="pipeline-swap">Swap upper/lower diagonal branches</label>
               </div>
+              <select
+                v-model="selectedPresetId"
+                class="form-select form-select-sm pipeline-preset-select"
+                :disabled="loading || saving"
+              >
+                <option
+                  v-for="preset in RENDERING_PRESETS"
+                  :key="preset.id"
+                  :value="preset.id"
+                >
+                  {{ preset.label }}
+                </option>
+              </select>
+              <button
+                class="btn btn-sm btn-outline-primary"
+                :disabled="loading || saving"
+                @click="loadSelectedPreset"
+              >
+                Load preset
+              </button>
               <button class="btn btn-sm btn-outline-secondary ms-auto" :disabled="loading || saving" @click="loadConfig">
                 Reload
               </button>
@@ -69,7 +89,7 @@
               </div>
             </div>
             <small class="text-muted d-block mb-2">
-              Right-click to add HiCT nodes only. Upper/Lower sinks accept color outputs; keep a colormap node before each sink.
+              Right-click to add HiCT nodes only. Upper/Lower sinks accept color outputs; use the same full-map graph on both sinks for overlays.
             </small>
 
             <div v-if="loading" class="py-2">
@@ -95,6 +115,17 @@
               Import graph
             </button>
             <button class="btn btn-secondary" @click="dismissModal">Close</button>
+            <button
+              class="btn btn-outline-primary"
+              :disabled="saving || previewing"
+              @click="previewConfig"
+            >
+              <span
+                v-if="previewing"
+                class="spinner-border spinner-border-sm me-2"
+              ></span>
+              Preview
+            </button>
             <button class="btn btn-primary" :disabled="saving" @click="saveConfig">
               <span v-if="saving" class="spinner-border spinner-border-sm me-2"></span>
               Apply
@@ -110,6 +141,9 @@
 import type { ContactMapManager } from "@/app/core/mapmanagers/ContactMapManager";
 import { VisualizationManager } from "@/app/core/mapmanagers/VisualizationManager";
 import type { TrackSummaryResponse } from "@/app/core/net/api/response";
+import SimpleLinearGradient from "@/app/core/visualization/colormap/SimpleLinearGradient";
+import { useStyleStore } from "@/app/stores/styleStore";
+import { useVisualizationOptionsStore } from "@/app/stores/visualizationOptionsStore";
 import { nextTick, onBeforeUnmount, onMounted, ref } from "vue";
 import { toast } from "vue-sonner";
 import { LGraph, LGraphCanvas, LGraphNode, LiteGraph } from "litegraph.js";
@@ -135,6 +169,16 @@ type DynamicField =
   | "BP_RESOLUTION";
 type TrackAxis = "ROW" | "COL";
 type ColorSpaceNodeType = "rgb" | "hsl" | "hsv";
+type PixelBlendMode =
+  | "OVER"
+  | "ADD"
+  | "SUBTRACT"
+  | "MULTIPLY"
+  | "SCREEN"
+  | "DIFFERENCE"
+  | "LIGHTEN"
+  | "DARKEN"
+  | "XOR";
 
 type PipelineExpression =
   | { type: "source"; source: SourceName }
@@ -179,6 +223,14 @@ type PipelineExpression =
       c2: PipelineExpression;
       c3: PipelineExpression;
       alpha: PipelineExpression;
+    }
+  | {
+      type: "pixel_blend";
+      mode: PixelBlendMode;
+      top: PipelineExpression;
+      bottom: PipelineExpression;
+      topOpacity: number;
+      bottomOpacity: number;
     };
 
 const SOURCE_NODE_TYPE = "hict/source";
@@ -194,6 +246,7 @@ const COLORMAP_NODE_TYPE = "hict/colormap";
 const RGB_NODE_TYPE = "hict/rgb";
 const HSL_NODE_TYPE = "hict/hsl";
 const HSV_NODE_TYPE = "hict/hsv";
+const PIXEL_BLEND_NODE_TYPE = "hict/pixel_blend";
 const SINK_NODE_TYPE = "hict/sink";
 
 const DYNAMIC_FIELDS: DynamicField[] = [
@@ -215,6 +268,17 @@ const DYNAMIC_FIELDS: DynamicField[] = [
 
 const UNARY_OPS: UnaryOp[] = ["ABS", "LOG1P", "EXP", "NEG"];
 const BINARY_OPS: BinaryOp[] = ["ADD", "SUB", "MUL", "DIV", "MAX", "MIN"];
+const PIXEL_BLEND_MODES: PixelBlendMode[] = [
+  "OVER",
+  "ADD",
+  "SUBTRACT",
+  "MULTIPLY",
+  "SCREEN",
+  "DIFFERENCE",
+  "LIGHTEN",
+  "DARKEN",
+  "XOR",
+];
 const HICT_PIPELINE_FILTER = "hict_pipeline_graph";
 const BUILTIN_COOLER_WEIGHTS_TRACK_ID = "__builtin_cooler_weights__";
 const NODE_MENU_CATEGORY_ORDER = [
@@ -222,6 +286,7 @@ const NODE_MENU_CATEGORY_ORDER = [
   "Constants",
   "Math",
   "Colormaps",
+  "Compositing",
   "Outputs",
 ] as const;
 const NODE_MENU_NODE_TYPES_BY_CATEGORY: Record<(typeof NODE_MENU_CATEGORY_ORDER)[number], string[]> = {
@@ -229,9 +294,16 @@ const NODE_MENU_NODE_TYPES_BY_CATEGORY: Record<(typeof NODE_MENU_CATEGORY_ORDER)
   Constants: [CONSTANT_NODE_TYPE],
   Math: [UNARY_NODE_TYPE, LOG_NODE_TYPE, LOG_INPUT_NODE_TYPE, BINARY_NODE_TYPE, CLAMP_NODE_TYPE],
   Colormaps: [COLORMAP_NODE_TYPE, RGB_NODE_TYPE, HSL_NODE_TYPE, HSV_NODE_TYPE],
+  Compositing: [PIXEL_BLEND_NODE_TYPE],
   Outputs: [SINK_NODE_TYPE],
 };
 
+const RENDERING_PRESETS = [
+  { id: "primary_only", label: "Default Primary only" },
+  { id: "dotplot_overlay", label: "Dotplot overlay" },
+] as const;
+type RenderingPresetId = (typeof RENDERING_PRESETS)[number]["id"];
+
 const emit = defineEmits<{
   (e: "dismissed"): void;
 }>();
@@ -244,7 +316,9 @@ const enabled = ref(false);
 const swapUpperLower = ref(false);
 const loading = ref(false);
 const saving = ref(false);
+const previewing = ref(false);
 const previewMode = ref(false);
+const selectedPresetId = ref<RenderingPresetId>("primary_only");
 const graphHost = ref<HTMLDivElement | null>(null);
 const graphCanvasRef = ref<HTMLCanvasElement | null>(null);
 const importInputRef = ref<HTMLInputElement | null>(null);
@@ -270,6 +344,9 @@ let originalGetNodeTypesInCategory:
   | ((category: string, filter?: string) => Array<{ type: string }>)
   | null = null;
 
+const visualizationOptionsStore = useVisualizationOptionsStore();
+const styleStore = useStyleStore();
+
 const defaultSignalExpression = (): PipelineExpression => ({
   type: "source",
   source: "PRIMARY",
@@ -292,6 +369,9 @@ const defaultColorExpression = (input?: PipelineExpression): PipelineExpression
   maxSignal: 1,
 });
 
+const cloneExpression = <T extends PipelineExpression>(expression: T): T =>
+  JSON.parse(JSON.stringify(expression)) as T;
+
 const ensureMapManager = (): ContactMapManager => {
   if (!props.mapManager) {
     throw new Error("Map manager is unavailable");
@@ -307,6 +387,202 @@ const sanitizeColor = (value: unknown, fallback: string): string => {
   return fallback;
 };
 
+const toPixelBlendMode = (value: unknown): PixelBlendMode => {
+  const normalized = String(value ?? "OVER").trim().toUpperCase();
+  return PIXEL_BLEND_MODES.includes(normalized as PixelBlendMode)
+    ? (normalized as PixelBlendMode)
+    : "OVER";
+};
+
+const getVisualizationGradient = (): SimpleLinearGradient | null => {
+  const gradient = visualizationOptionsStore.colormap;
+  return gradient instanceof SimpleLinearGradient ? gradient : null;
+};
+
+const buildSignalExpressionFromVisualizationOptions = (
+  source: SourceName,
+  overrides?: {
+    preLogBase?: number;
+    postLogBase?: number;
+    applyCoolerWeights?: boolean;
+    resolutionScaling?: boolean;
+    resolutionLinearScaling?: boolean;
+  }
+): PipelineExpression => {
+  const preLogBase =
+    overrides?.preLogBase ?? visualizationOptionsStore.preLogBase;
+  const postLogBase =
+    overrides?.postLogBase ?? visualizationOptionsStore.postLogBase;
+  const applyCoolerWeights =
+    overrides?.applyCoolerWeights ??
+    visualizationOptionsStore.applyCoolerWeights;
+  const resolutionScaling =
+    overrides?.resolutionScaling ??
+    visualizationOptionsStore.resolutionScaling;
+  const resolutionLinearScaling =
+    overrides?.resolutionLinearScaling ??
+    visualizationOptionsStore.resolutionLinearScaling;
+
+  let expression: PipelineExpression = {
+    type: "source",
+    source,
+  };
+  if (Number.isFinite(preLogBase) && preLogBase > 0 && Math.abs(preLogBase - 1) > 1e-9) {
+    expression = {
+      type: "log",
+      input: expression,
+      base: preLogBase,
+    };
+  }
+  if (resolutionScaling) {
+    expression = {
+      type: "binary",
+      op: "MUL",
+      left: expression,
+      right: { type: "dynamic", field: "RESOLUTION_SCALING_COEFF" },
+    };
+  }
+  if (resolutionLinearScaling) {
+    expression = {
+      type: "binary",
+      op: "MUL",
+      left: expression,
+      right: { type: "dynamic", field: "RESOLUTION_LINEAR_SCALING_COEFF" },
+    };
+  }
+  if (applyCoolerWeights) {
+    expression = {
+      type: "binary",
+      op: "MUL",
+      left: expression,
+      right: {
+        type: "binary",
+        op: "MUL",
+        left: {
+          type: "track1d",
+          trackId: BUILTIN_COOLER_WEIGHTS_TRACK_ID,
+          axis: "ROW",
+        },
+        right: {
+          type: "track1d",
+          trackId: BUILTIN_COOLER_WEIGHTS_TRACK_ID,
+          axis: "COL",
+        },
+      },
+    };
+  }
+  if (Number.isFinite(postLogBase) && postLogBase > 0 && Math.abs(postLogBase - 1) > 1e-9) {
+    expression = {
+      type: "log",
+      input: expression,
+      base: postLogBase,
+    };
+  }
+  return expression;
+};
+
+const buildColorExpressionFromVisualizationOptions = (
+  source: SourceName,
+  overrides?: {
+    preLogBase?: number;
+    postLogBase?: number;
+    applyCoolerWeights?: boolean;
+    resolutionScaling?: boolean;
+    resolutionLinearScaling?: boolean;
+    startColor?: string;
+    endColor?: string;
+    minSignal?: number;
+    maxSignal?: number;
+  }
+): PipelineExpression => {
+  const gradient = getVisualizationGradient();
+  const minSignal = gradient?.minSignal;
+  const maxSignal = gradient?.maxSignal;
+  return {
+    type: "colormap",
+    mode: "LINEAR",
+    input: buildSignalExpressionFromVisualizationOptions(source, overrides),
+    startColor: sanitizeColor(
+      overrides?.startColor ?? gradient?.startColorRGBA?.HEXA,
+      "#ffffff00"
+    ),
+    endColor: sanitizeColor(
+      overrides?.endColor ?? gradient?.endColorRGBA?.HEXA,
+      "#006000ff"
+    ),
+    minSignal:
+      overrides?.minSignal ??
+      (typeof minSignal === "number" && Number.isFinite(minSignal)
+        ? minSignal
+        : 0),
+    maxSignal:
+      overrides?.maxSignal ??
+      (typeof maxSignal === "number" && Number.isFinite(maxSignal)
+        ? maxSignal
+        : 1),
+  };
+};
+
+const buildPrimaryOnlyPreset = (): {
+  enabled: boolean;
+  swapUpperLower: boolean;
+  upperExpression: PipelineExpression;
+  lowerExpression: PipelineExpression;
+} => {
+  const expression = buildColorExpressionFromVisualizationOptions("PRIMARY");
+  return {
+    enabled: true,
+    swapUpperLower: false,
+    upperExpression: expression,
+    lowerExpression: cloneExpression(expression),
+  };
+};
+
+const buildDotplotOverlayPreset = (): {
+  enabled: boolean;
+  swapUpperLower: boolean;
+  upperExpression: PipelineExpression;
+  lowerExpression: PipelineExpression;
+} => {
+  const darkBackground = styleStore.mapBackgroundColor.L <= 55;
+  const top = buildColorExpressionFromVisualizationOptions("PRIMARY", {
+    preLogBase: -1,
+    postLogBase: -1,
+    applyCoolerWeights: true,
+    resolutionScaling: false,
+    resolutionLinearScaling: false,
+    startColor: "#ffffffff",
+    endColor: "#e80000ff",
+    minSignal: 0,
+    maxSignal: 0.003,
+  });
+  const bottom = buildColorExpressionFromVisualizationOptions("SECONDARY", {
+    preLogBase: -1,
+    postLogBase: -1,
+    applyCoolerWeights: false,
+    resolutionScaling: false,
+    resolutionLinearScaling: false,
+    startColor: "#00000000",
+    endColor: darkBackground ? "#00ff66ff" : "#000000ff",
+    minSignal: 0,
+    maxSignal: 200,
+  });
+  const overlay: PipelineExpression = {
+    type: "pixel_blend",
+    mode: "OVER",
+    top,
+    bottom,
+    topOpacity: 0.4,
+    bottomOpacity: 1,
+  };
+  return {
+    enabled: true,
+    swapUpperLower: false,
+    upperExpression: overlay,
+    lowerExpression: cloneExpression(overlay),
+  };
+};
+
 const normalizeHexaColor = (value: unknown, fallback: string): string => {
   const sanitized = sanitizeColor(value, fallback).toLowerCase();
   if (/^#[0-9a-f]{8}$/.test(sanitized)) {
@@ -420,7 +696,8 @@ const isColorExpression = (expression: PipelineExpression): boolean => {
     expression.type === "colormap" ||
     expression.type === "rgb" ||
     expression.type === "hsl" ||
-    expression.type === "hsv"
+    expression.type === "hsv" ||
+    expression.type === "pixel_blend"
   );
 };
 
@@ -516,6 +793,18 @@ const parseExpression = (raw: unknown): PipelineExpression => {
       alpha: parseExpression(node.alpha ?? node.a ?? { type: "constant", value: 255 }),
     };
   }
+  if (type === "pixel_blend") {
+    return {
+      type: "pixel_blend",
+      mode: toPixelBlendMode(node.mode),
+      top: ensureColorRootExpression(parseExpression(node.top ?? node.foreground ?? node.upper)),
+      bottom: ensureColorRootExpression(
+        parseExpression(node.bottom ?? node.background ?? node.lower ?? { type: "source", source: "SECONDARY" })
+      ),
+      topOpacity: toFiniteNumber(node.topOpacity ?? node.topOpacityValue ?? 1, 1),
+      bottomOpacity: toFiniteNumber(node.bottomOpacity ?? node.bottomOpacityValue ?? 1, 1),
+    };
+  }
   return {
     type: "source",
     source: toSourceName(node.source),
@@ -919,6 +1208,42 @@ const ensureNodeTypesRegistered = (): void => {
     }
   }
 
+  class PixelBlendNode extends LGraphNode {
+    constructor() {
+      super();
+      this.title = "Pixel Blend";
+      this.addInput("top", "color");
+      this.addInput("bottom", "color");
+      this.addOutput("color", "color");
+      this.properties = {
+        mode: "OVER",
+        topOpacity: 1,
+        bottomOpacity: 1,
+      };
+      this.addWidget(
+        "combo",
+        "mode",
+        this.properties.mode,
+        (value: unknown) => {
+          this.properties.mode = toPixelBlendMode(value);
+        },
+        { values: PIXEL_BLEND_MODES }
+      );
+      this.addWidget("number", "top opacity", this.properties.topOpacity, (value: unknown) => {
+        this.properties.topOpacity = toFiniteNumber(value, 1);
+      });
+      this.addWidget(
+        "number",
+        "bottom opacity",
+        this.properties.bottomOpacity,
+        (value: unknown) => {
+          this.properties.bottomOpacity = toFiniteNumber(value, 1);
+        }
+      );
+      this.size = [232, 120];
+    }
+  }
+
   class SinkNode extends LGraphNode {
     constructor() {
       super();
@@ -945,6 +1270,7 @@ const ensureNodeTypesRegistered = (): void => {
     [RGBNode, "RGB", "Colormaps"],
     [HSLNode, "HSL", "Colormaps"],
     [HSVNode, "HSV", "Colormaps"],
+    [PixelBlendNode, "Pixel Blend", "Compositing"],
     [SinkNode, "Sink", "Outputs"],
   ] as Array<[unknown, string, string]>) {
     (ctor as { filter?: string }).filter = HICT_PIPELINE_FILTER;
@@ -991,6 +1317,12 @@ const ensureNodeTypesRegistered = (): void => {
   if (!LiteGraph.registered_node_types[HSV_NODE_TYPE]) {
     LiteGraph.registerNodeType(HSV_NODE_TYPE, HSVNode as unknown as { new (): LGraphNode });
   }
+  if (!LiteGraph.registered_node_types[PIXEL_BLEND_NODE_TYPE]) {
+    LiteGraph.registerNodeType(
+      PIXEL_BLEND_NODE_TYPE,
+      PixelBlendNode as unknown as { new (): LGraphNode }
+    );
+  }
   if (!LiteGraph.registered_node_types[SINK_NODE_TYPE]) {
     LiteGraph.registerNodeType(SINK_NODE_TYPE, SinkNode as unknown as { new (): LGraphNode });
   }
@@ -1057,6 +1389,16 @@ const syncNodeWidgetsFromProperties = (node: LGraphNode): void => {
     setWidgetValue(node, "c2", toFiniteNumber(node.properties?.c2, 1));
     setWidgetValue(node, "c3", toFiniteNumber(node.properties?.c3, 1));
     setWidgetValue(node, "alpha", toFiniteNumber(node.properties?.alpha, 255));
+    return;
+  }
+  if (node.type === PIXEL_BLEND_NODE_TYPE) {
+    setWidgetValue(node, "mode", toPixelBlendMode(node.properties?.mode));
+    setWidgetValue(node, "top opacity", toFiniteNumber(node.properties?.topOpacity, 1));
+    setWidgetValue(
+      node,
+      "bottom opacity",
+      toFiniteNumber(node.properties?.bottomOpacity, 1)
+    );
   }
 };
 
@@ -1176,6 +1518,7 @@ const GRAPH_TOP_PADDING = 44;
 const GRAPH_BRANCH_GAP = 150;
 const GRAPH_LEFT_PADDING = 60;
 const GRAPH_RIGHT_PADDING = 120;
+const GRAPH_SINK_STACK_GAP = 18;
 
 const estimateNodeHeight = (expression: PipelineExpression): number => {
   switch (expression.type) {
@@ -1201,6 +1544,8 @@ const estimateNodeHeight = (expression: PipelineExpression): number => {
     case "hsl":
     case "hsv":
       return 148;
+    case "pixel_blend":
+      return 120;
     case "source":
     default:
       return 72;
@@ -1247,6 +1592,10 @@ const measureExpressionHeight = (
         GRAPH_VERTICAL_GAP +
         alphaHeight
     );
+  } else if (expression.type === "pixel_blend") {
+    const topHeight = measureExpressionHeight(expression.top, cache);
+    const bottomHeight = measureExpressionHeight(expression.bottom, cache);
+    height = Math.max(height, topHeight + GRAPH_VERTICAL_GAP + bottomHeight);
   }
 
   cache.set(expression as object, height);
@@ -1292,6 +1641,13 @@ const measureExpressionDepth = (
         measureExpressionDepth(expression.c3, cache),
         measureExpressionDepth(expression.alpha, cache)
       );
+  } else if (expression.type === "pixel_blend") {
+    depth =
+      1 +
+      Math.max(
+        measureExpressionDepth(expression.top, cache),
+        measureExpressionDepth(expression.bottom, cache)
+      );
   }
 
   cache.set(expression as object, depth);
@@ -1381,6 +1737,14 @@ const createNodeForExpression = (expression: PipelineExpression): LGraphNode | n
     case "hsv":
       node = LiteGraph.createNode(HSV_NODE_TYPE) as LGraphNode | null;
       break;
+    case "pixel_blend":
+      node = LiteGraph.createNode(PIXEL_BLEND_NODE_TYPE) as LGraphNode | null;
+      if (node) {
+        node.properties.mode = expression.mode;
+        node.properties.topOpacity = expression.topOpacity;
+        node.properties.bottomOpacity = expression.bottomOpacity;
+      }
+      break;
   }
   if (graph && node) {
     graph.add(node);
@@ -1526,6 +1890,29 @@ const positionExpressionTree = (
     alphaNode?.connect(0, node, 3);
   }
 
+  if (expression.type === "pixel_blend") {
+    const topHeight = measureExpressionHeight(expression.top, heightCache);
+    const bottomHeight = measureExpressionHeight(expression.bottom, heightCache);
+    const childrenTop =
+      topY + Math.max(0, (subtreeHeight - (topHeight + GRAPH_VERTICAL_GAP + bottomHeight)) / 2);
+    const topNode = positionExpressionTree(
+      expression.top,
+      depth + 1,
+      childrenTop,
+      sinkX,
+      heightCache
+    );
+    const bottomNode = positionExpressionTree(
+      expression.bottom,
+      depth + 1,
+      childrenTop + topHeight + GRAPH_VERTICAL_GAP,
+      sinkX,
+      heightCache
+    );
+    topNode?.connect(0, node, 0);
+    bottomNode?.connect(0, node, 1);
+  }
+
   return node;
 };
 
@@ -1543,6 +1930,8 @@ const buildGraphFromExpressions = (
   const lowerSink = lowerSinkId != null ? graph.getNodeById(lowerSinkId) : null;
   const upperColorExpression = ensureColorRootExpression(upperExpression);
   const lowerColorExpression = ensureColorRootExpression(lowerExpression);
+  const sharedPipeline =
+    JSON.stringify(upperColorExpression) === JSON.stringify(lowerColorExpression);
   const heightCache = new WeakMap<object, number>();
   const depthCache = new WeakMap<object, number>();
 
@@ -1559,33 +1948,62 @@ const buildGraphFromExpressions = (
 
   if (upperSink) {
     const sinkHeight = Number(upperSink.size?.[1] ?? 62);
-    upperSink.pos = [sinkX, upperCenterY - sinkHeight * 0.5];
+    if (sharedPipeline) {
+      const sharedCenterY = GRAPH_TOP_PADDING + upperHeight * 0.5;
+      upperSink.pos = [
+        sinkX,
+        sharedCenterY - sinkHeight - GRAPH_SINK_STACK_GAP * 0.5,
+      ];
+    } else {
+      upperSink.pos = [sinkX, upperCenterY - sinkHeight * 0.5];
+    }
   }
   if (lowerSink) {
     const sinkHeight = Number(lowerSink.size?.[1] ?? 62);
-    lowerSink.pos = [sinkX, lowerCenterY - sinkHeight * 0.5];
+    if (sharedPipeline) {
+      const sharedCenterY = GRAPH_TOP_PADDING + upperHeight * 0.5;
+      lowerSink.pos = [sinkX, sharedCenterY + GRAPH_SINK_STACK_GAP * 0.5];
+    } else {
+      lowerSink.pos = [sinkX, lowerCenterY - sinkHeight * 0.5];
+    }
   }
 
-  const upperNode = positionExpressionTree(
-    upperColorExpression,
-    0,
-    GRAPH_TOP_PADDING,
-    sinkX,
-    heightCache
-  );
-  const lowerNode = positionExpressionTree(
-    lowerColorExpression,
-    0,
-    lowerTopY,
-    sinkX,
-    heightCache
-  );
+  if (sharedPipeline) {
+    const sharedNode = positionExpressionTree(
+      upperColorExpression,
+      0,
+      GRAPH_TOP_PADDING,
+      sinkX,
+      heightCache
+    );
+    if (sharedNode && upperSink) {
+      sharedNode.connect(0, upperSink, 0);
+    }
+    if (sharedNode && lowerSink) {
+      sharedNode.connect(0, lowerSink, 0);
+    }
+  } else {
+    const upperNode = positionExpressionTree(
+      upperColorExpression,
+      0,
+      GRAPH_TOP_PADDING,
+      sinkX,
+      heightCache
+    );
+    const lowerNode = positionExpressionTree(
+      lowerColorExpression,
+      0,
+      lowerTopY,
+      sinkX,
+      heightCache
+    );
 
-  if (upperNode && upperSink) {
-    upperNode.connect(0, upperSink, 0);
-  }
-  if (lowerNode && lowerSink) {
-    lowerNode.connect(0, lowerSink, 0);
+    if (upperNode && upperSink) {
+      upperNode.connect(0, upperSink, 0);
+    }
+    if (lowerNode && lowerSink) {
+      lowerNode.connect(0, lowerSink, 0);
+    }
   }
 
   updateTrackNodeWidgets();
@@ -1595,7 +2013,9 @@ const buildGraphFromExpressions = (
     Number(lowerSink?.size?.[0] ?? 190)
   );
   const totalWidth = sinkX + sinkWidth + GRAPH_RIGHT_PADDING;
-  const totalHeight = lowerTopY + lowerHeight + GRAPH_TOP_PADDING;
+  const totalHeight = sharedPipeline
+    ? GRAPH_TOP_PADDING + upperHeight + GRAPH_TOP_PADDING
+    : lowerTopY + lowerHeight + GRAPH_TOP_PADDING;
   fitGraphView(totalWidth, totalHeight);
   graphCanvas?.draw(true, true);
 };
@@ -1729,6 +2149,26 @@ const expressionFromNode = (
     return { type: "hsv", c1, c2, c3, alpha };
   }
 
+  if (node.type === PIXEL_BLEND_NODE_TYPE) {
+    const topFallback = defaultColorExpression();
+    const bottomFallback = defaultColorExpression({
+      type: "source",
+      source: "SECONDARY",
+    });
+    return {
+      type: "pixel_blend",
+      mode: toPixelBlendMode(node.properties?.mode),
+      top: node.getInputNode(0)
+        ? ensureColorRootExpression(expressionFromNode(node.getInputNode(0), visited))
+        : topFallback,
+      bottom: node.getInputNode(1)
+        ? ensureColorRootExpression(expressionFromNode(node.getInputNode(1), visited))
+        : bottomFallback,
+      topOpacity: toFiniteNumber(node.properties?.topOpacity, 1),
+      bottomOpacity: toFiniteNumber(node.properties?.bottomOpacity, 1),
+    };
+  }
+
   return defaultSignalExpression();
 };
 
@@ -1804,6 +2244,24 @@ const buildConfigPayload = (): Record<string, unknown> => ({
   lowerExpression: expressionFromSink("LOWER"),
 });
 
+const loadSelectedPreset = (): void => {
+  if (!graph) {
+    return;
+  }
+  const preset =
+    selectedPresetId.value === "dotplot_overlay"
+      ? buildDotplotOverlayPreset()
+      : buildPrimaryOnlyPreset();
+  enabled.value = preset.enabled;
+  swapUpperLower.value = preset.swapUpperLower;
+  buildGraphFromExpressions(preset.upperExpression, preset.lowerExpression);
+  toast.success(
+    selectedPresetId.value === "dotplot_overlay"
+      ? "Dotplot overlay preset loaded"
+      : "Primary-only preset loaded"
+  );
+};
+
 const persistConfig = async (
   reloadTiles: boolean,
   successMessage?: string
@@ -1898,6 +2356,28 @@ const togglePreviewMode = (): void => {
   void restoreGraphRuntime();
 };
 
+const previewConfig = async (): Promise<void> => {
+  if (!graph || previewMode.value) {
+    return;
+  }
+  previewing.value = true;
+  try {
+    previewSnapshot.value = {
+      enabled: enabled.value,
+      swapUpperLower: swapUpperLower.value,
+      upperExpression: expressionFromSink("UPPER"),
+      lowerExpression: expressionFromSink("LOWER"),
+    };
+    await persistConfig(true);
+    previewMode.value = true;
+    destroyGraphRuntime();
+  } catch (error) {
+    toast.error(String(error));
+  } finally {
+    previewing.value = false;
+  }
+};
+
 const onVisualizationOptionsUpdated = (): void => {
   if (previewMode.value || loading.value || saving.value) {
     pendingVisualizationSync.value = true;
@@ -1982,7 +2462,7 @@ onMounted(() => {
   window.addEventListener("resize", fitGraphCanvas);
   window.addEventListener(
     VisualizationManager.VISUALIZATION_OPTIONS_UPDATED_EVENT,
-    onVisualizationOptionsUpdated as EventListener
+    onVisualizationOptionsUpdated
   );
   void loadConfig();
 });
@@ -1993,7 +2473,7 @@ onBeforeUnmount(() => {
   window.removeEventListener("resize", fitGraphCanvas);
   window.removeEventListener(
     VisualizationManager.VISUALIZATION_OPTIONS_UPDATED_EVENT,
-    onVisualizationOptionsUpdated as EventListener
+    onVisualizationOptionsUpdated
   );
   restoreNodeTypeFilterOverrides();
   destroyGraphRuntime();
@@ -2024,6 +2504,10 @@ onBeforeUnmount(() => {
   overflow: hidden;
 }
 
+.pipeline-preset-select {
+  max-width: 240px;
+}
+
 .pipeline-root .modal-content {
   height: 100%;
   display: flex;
diff --git a/src/assets/base.css b/src/assets/base.css
index 0b2387a..5056fc2 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -22,6 +22,12 @@
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
   --hict-font-sans: Avenir, Helvetica, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
+  --hict-surface-bg: rgba(255, 255, 255, 0.98);
+  --hict-surface-bg-muted: rgba(248, 250, 252, 0.98);
+  --hict-surface-fg: rgba(18, 25, 35, 0.96);
+  --hict-surface-muted: rgba(73, 84, 99, 0.88);
+  --hict-surface-border: rgba(15, 23, 38, 0.18);
+  --hict-surface-shadow: 0 20px 55px rgba(15, 23, 38, 0.18);
   --vt-c-white: #ffffff;
   --vt-c-white-soft: #f8f8f8;
   --vt-c-white-mute: #f2f2f2;
@@ -93,3 +99,78 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.modal-content,
+.dropdown-menu,
+.popover,
+.offcanvas,
+.card:not(.pipeline-graph) {
+  background: var(--hict-surface-bg);
+  color: var(--hict-surface-fg);
+  border-color: var(--hict-surface-border);
+  box-shadow: var(--hict-surface-shadow);
+}
+
+.modal-header,
+.modal-footer,
+.dropdown-divider {
+  border-color: var(--hict-surface-border);
+}
+
+.modal-title,
+.modal-body,
+.modal-footer,
+.dropdown-item,
+.dropdown-header,
+.form-label,
+.form-check-label,
+.card-title,
+.card-text,
+.popover-body,
+.offcanvas-title,
+.offcanvas-body {
+  color: var(--hict-surface-fg);
+}
+
+.text-muted,
+.modal-content .text-muted,
+.dropdown-menu .text-muted,
+.card .text-muted {
+  color: var(--hict-surface-muted) !important;
+}
+
+.dropdown-item:hover,
+.dropdown-item:focus,
+.dropdown-item.active,
+.dropdown-item:active {
+  color: var(--hict-surface-fg);
+  background: var(--hict-surface-bg-muted);
+}
+
+.form-control,
+.form-select {
+  background: rgba(255, 255, 255, 0.98);
+  color: var(--hict-surface-fg);
+  border-color: var(--hict-surface-border);
+}
+
+.form-control::placeholder {
+  color: var(--hict-surface-muted);
+}
+
+.form-control:focus,
+.form-select:focus {
+  background: rgba(255, 255, 255, 1);
+  color: var(--hict-surface-fg);
+  border-color: rgba(37, 99, 235, 0.42);
+  box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.16);
+}
+
+.form-select option {
+  background: #ffffff;
+  color: var(--hict-surface-fg);
+}
+
+.btn-close {
+  filter: none;
+}