Align 2 heatmaps vertically by columns with one having image annotations on side

[Julie-Cardin]

Hi,

1. First thanks for PyComplexHeatmap it make so many useful plots with a lot of flexibility it is very appreciated!

-Context: My question is about when we plot 2 heatmaps, using cmlist , it align my 2 heatmap columns very well together when I do not add annot_img on side.

• Problem: When I plot 2 heatmaps together vertically, I want columns of 2 heatmap stay aligned together but when I add Logos images with annot_img on one of the 2 heatmaps, columns of 2 heatmaps are not align anymore because the images annotations Logos on side.
  Or same on top if I do it vertically.

QUESTION: When we plot 2 heatmaps together with image annotations on side of one of them, is there a way to make columns of 2 heatmaps still aligned together while also show annotations images on side for one of them ?

================================================================
Part of my code :

plt.figure(figsize=(30, 8))

def row_annotation_left(df_img):

img Logos

row_ha_l = pch.HeatmapAnnotation(
legend_gap=2,
axis=0,
Logo=anno_img(df_img.path_fi, border_width=5, border_color=255, height=50 ),
verbose=0,
orientation='left' # Prevent Logos flip
)
return row_ha

cm2 = pch.ClusterMapPlotter(
data=df_count,
fmt='.4g',
bottom_annotation=col_ha_bottom,
label=lab_leg_hmp_means,
row_dendrogram=False,
col_dendrogram=False,
row_cluster=False,
col_cluster=False,
show_rownames=True,
show_colnames=False,
col_names_side='top',
cmap='RdBu_r',
xticklabels_kws={'labelrotation': 45,'labelcolor': 'blue'},
legend_hpad=30, # Spacing Legends boxes on side from hmp
plot=False,
verbose=True
)
my_cmap_blck_gry = LinearSegmentedColormap.from_list('my_cmap', [(0, 'lightgray'), (1, 'black')])

cm = pch.ClusterMapPlotter(
data=df_presence,
left_annotation=row_ha_l,
col_cluster=False, row_cluster=False, # keep order as is
show_rownames=False,
show_colnames=False,
row_dendrogram=False,
col_dendrogram=False,
legend_gap=20,
legend_hpad=5,
legend_vpad=30,
label='Motif',
yticklabels_kws = {'labelsize': 6},
verbose=True
)

cmlist = [cm2, cm]
ax, legend_axes = composite(cmlist=cmlist, main=0, legend_hpad=25 ,legend_gap=10,col_gap=0.1, row_gap=0.1,axis=0, width_ratios=[22,30]) # axis – 1 for columns (align the cmlist horizontally), 0 for rows (vertically).
cm2.ax.set_title("Mean half_life")
ax.set_title("Influence of motifs", y=1.03, fontdict={'fontweight': 'bold', 'color': 'black'})

===============================================
2 Examples images:

another image is 2 heatmaps with image annotations Logos on side but columns are not aligned together.
one is 2 heatmaps that columns align correctly together (No Annot img)

[DingWB]

What if you define row_ha_l and row_ha_2, pass them to cm1 and cm2, and try again?
I am not sure whether it is the issue of row_ha_l, the same object was plotted twice?

[Julie-Cardin]

• I think I understand your suggestion, so if I understand correctly : it is to have same size bloc of annotations on left side of the 2 heatmaps to make them align for columns. The idea is not bad, but in my heatmap red and blue, the rows are not realated to logos (row annotations ).
• So I think it might not solve my problem because:
• row_ha_l is for annot_img Logos on l = left side of heatmap "binary" black and gray.
• My example was not perfectly reflecting my reality : logos are all different in my real plot. I just made an example to share here so I used a logo example from yours repeated on left side.
• logos anot_img on left are align with my rows names of the black and gray heatmap, they are all different.
• So there is not correlation between my image annotations logos (row_ha_l that contain 18 logos ) with 2 rows of my red and blue heatmap on top.
  Thanks for this fast relpy but
• redefine new row_ha_2 as you suggest, appears to me that cannot solve my problem because logos images are not related to the top heatmap, unfortunately.

[DingWB]

I see. Then, I need to change the layout of the composited heatmap and align it with ax_heatmap instead of ax.
I am not sure whether it is possible to implement it, but I will try. If you have any idea about how to implement it, please let me know.
For now, You can add the same annotation and align two heat maps first. Then, I manually deleted some parts of the unwanted annotations.

[Julie-Cardin]

Your suggestion make sense! I was actually thinking of doing sometime like you suggest, creating some "empty" annotation same size as the other to use same space.
I understand it is not an easy request.

• suggestion: I can think of defining some spaces around like a header, footer, left space and right space, in which annotations can be put and keep a "heatmap" middle zone in which heatmaps will be fitted in.
  But not sure how complicated it is to code. If I come up with more ideas I will definitely let you know.
  Many thanks for your good answers and if you have a chance, also to try to implement something about it, I am very looking forward to it.

[Julie-Cardin]

I tried to add a white "pad" beside the heatmap that do not have Logos beside and it is a good work around solution!
We can get the 2 heatmaps columns aligned!
Many thanks!

[DingWB]

It's great. What do you mean by "white pad"? Can you share your code?