cols_width setting seems to be ignored and dont understand why

General
1

Hi I am loving using the great_tables library after hearing about it on talkpython.fm. I am trying to format some wide text using cols_width, but the setting seems to be ignored.
The "Alignment" column I need to format text represents a Protein Sequence aligment and these are best showed with a fixed width font and with column width larger than the length of the alignment.

In great_tables running inside Jupyter I get


ProtA_MSA 3 efsdeywmreal.lakkaaderevpvgavvv.ndevigegwnra.glhdptaHAeilalr.aalklqnyRLldatl.vtlePcvmcagaiih.rigrvvfGardaktg.agslmdllqepglnh.veitegvladecaa.LseFfrk 140 ef +eywmr+al la++a+de+evpvgav+v n++vigegwnra glhdptaHAei+alr ++l+lqnyRL+d+tl vt+ePcvmc ga++h rig +vfG+r++k g agslm++l++pg+nh v+ gvla ec+ L++F+r+ newseq2_2024_1234_2_1_222_PRT_proc.txt 5 EFTHEYWMRHALtLARRARDEGEVPVGAVLVlNNQVIGEGWNRAiGLHDPTAHAEIMALRqGGLVLQNYRLIDTTLyVTFEPCVMCSGAMVHsRIGTLVFGVRNSKRGaAGSLMNVLNYPGMNHqVKTIGGVLAPECSGlLCDFYRM 151 799*********99**************765167**************************99**********************************************9****************99999********989****96 PP

Here the text does not visually indicate alignment , for eg the text "efsdey" should be on top of "EFTHEY". How do I get the alignment to look right in the tables. I am having a hard time understanding the syntax for cols_width and specifying a fixed-width font.

from great_tables import style,loc
merge_table_retry = (
    GT(df_weird_merge)
    .cols_width(
    cases = {
    "Alignment" : "2000px",
    }
    )
    .tab_header(
        title="LPGID Editor Performance",
        subtitle="Ranked by mean activity"
    )
    .fmt_number(
        columns=['min_activity', 'max_activity', 'mean_activity', 'std_activity','Percent Identity'],
        decimals=2
    )
    .fmt_integer(
        columns=['count']
    )
    .tab_source_note(
        source_note="Data based on activity measurements across different gRNAs"
    )
    .tab_spanner(
        label="Activity Statistics",
        columns=['min_activity', 'max_activity', 'mean_activity', 'std_activity']
    )
    .cols_label(
        editor="LPGID Editor",
        count="Data Points",
        min_activity="Min",
        max_activity="Max",
        mean_activity="Mean",
        std_activity="Std Dev",
        Alignment="Alignment",
    ) 
    .fmt_nanoplot(
        columns="mean_activity",
        plot_type="bar"
    )
     .tab_style(
        style=style.fill(color="lightblue"),
        locations=loc.body(columns=['mean_activity'])
    )
    .tab_style(
        style=style.text(weight="bold"),
        locations=loc.body(columns=['editor'])
    )
     .tab_style(
        style=style.text(font="monospace"),
        locations=loc.body(columns=['Alignment'])
    )
    .tab_style(
        style=style.text(whitespace="monaco"),
        locations=loc.body(columns=['Alignment'])
    )
)

Please can you help with an example. I tried to read the cols_width Reference page , but was not understanding how to get this to look right

Thanks

Addendum: Posted a question on stackoverflow with a gist test case

1 Like
2

Thanks to Stackoverflow user I was able to finally solve this. Final solution is here:

It involves forcing the formatted whitespace sensitive text inside a div tag:

def write_alignment_string_css_ver2(seq_top, seq_bot):
    ref_id_top = create_mock_id()
    ref_id_bot = create_mock_id()
    outstring = f"""
    <div style="font-family: 'Courier New', monospace; white-space: pre-wrap; word-break: break-all; width:100%">
        {ref_id_top}: {seq_top}
        {' '*len(ref_id_top)}: {''.join(['|' if a == b else ' ' for a, b in zip(seq_top, seq_bot)]).lower()}
        {ref_id_bot}: {seq_bot}
    </div>
    """
    return outstring

Following that I was able to get some AI and direct looking through the code help to get the current syntax for styles to work

gt_css_ver2 = (
    GT(df_css_ver2)
    .tab_style(
        style=style.text(  # Correctly calling the style function
                whitespace="pre-wrap",
                font="Roboto",
            ),
        locations=loc.body(columns="Alignment"),
    )
    .tab_style(
        style=style.css(
            "table-layout: fixed; width: 100%;"
        ),
        locations=loc.body(),
    )
    .tab_style(
        style=style.css(
            "min-width: 2000px;"
        ),
        locations=loc.body(columns="Alignment")
    )
)
gt_css_ver2.show()