How to get that grey block in st.write with copy icon in end?

Custom Components
1

Actually I am getting used to streamlit but there is on thing I still havent understood. I have written a code in which the data is displayed in multiline format. For that I used the fstring.

image
image1870×583 36.6 KB

But as you can see in the last some of the text is outside the gray box, how should I bring that in.

My code"-

import streamlit as st
import pandas as pd
import warnings
warnings.filterwarnings('ignore')


with st.sidebar:
    uploaded_file = st.file_uploader('Upload the Final Annotation File')
    exomeDf = pd.read_csv(uploaded_file,sep="\t")
    st.write('Primary Variants')
    pVariants = st.text_area('Enter the Chr_Position')
    h = exomeDf[exomeDf.Chr_Position.str.contains(pVariants)]
    d = h.to_dict(orient='records')[0]
    l = "\n".join(d['MIM_disease_Name'].split(";"))
    annoDescription = f'''
    \n Variants Details \n
    {d['Gene_symbol']} ({d['Inheritance']})
    {d['canonicalCodon']} - {d['Zygosity']}
    DP :- {d['DP']} ({d['AD']}) {d['Alt_Allele_Percent']}
    ACMG :- 
    gnomAD_MAF(%) :- {f"{d['gnomAD_MAF(%)']}" if f"{d['gnomAD_MAF(%)']}" != "." else "NA"}
    1000G_MAF(%) :- {f"{d['1000G_MAF(%)']}" if f"{d['1000G_MAF(%)']}" != "." else "NA"}
    ClinVar :- {d['ClinVar_annotation']}
    Franklin :- 
    SIFT :- {f"{d['SIFT_score']}" if f"{d['SIFT_score']}" != "." else "NA"}
    MT :- {f"{d['MutationTaster_score']}" if f"{d['MutationTaster_score']}" != "." else "NA"}
    PolyPhen2 :- {f"{d['Polyphen2_HDIV_pred']}" if f"{d['Polyphen2_HDIV_pred']}" != "." else "NA"}
    MCAP :- NA
    {l}
    '''
st.write(annoDescription)
2

If I make any changes in the fstring like removing the \n Variants Details \n line, the whole display changes

image
image1870×583 28.4 KB

I want all the text in that gray box so that I can copy the whole text with that copy icon in the top right corner. Am i making any mistake in the fstring. I tried using st.markdown too but that also didn’t worked.

3

Hi @Nikhil_Panchal ,

is this possible the issue you’re facing?

4

Hi @willhuang, thank you That helped a little

image
image1877×630 42 KB

But still those text are not coming inside the block. I made the changed like the following

l = d['MIM_disease_Name'].replace(";","  \n")
    annoDescription = f'''
    \n Variants Details \n
    {d['Gene_symbol']} ({d['Inheritance']})
    {d['canonicalCodon']} - {d['Zygosity']}
    DP :- {d['DP']} ({d['AD']}) {d['Alt_Allele_Percent']}
    ACMG :- 
    gnomAD_MAF(%) :- {f"{d['gnomAD_MAF(%)']}" if f"{d['gnomAD_MAF(%)']}" != "." else "NA"}
    1000G_MAF(%) :- {f"{d['1000G_MAF(%)']}" if f"{d['1000G_MAF(%)']}" != "." else "NA"}
    ClinVar :- {d['ClinVar_annotation']}
    Franklin :- 
    SIFT :- {f"{d['SIFT_score']}" if f"{d['SIFT_score']}" != "." else "NA"}
    MT :- {f"{d['MutationTaster_score']}" if f"{d['MutationTaster_score']}" != "." else "NA"}
    PolyPhen2 :- {f"{d['Polyphen2_HDIV_pred']}" if f"{d['Polyphen2_HDIV_pred']}" != "." else "NA"}
    MCAP :- NA
    \n{l}  \n'''
st.markdown(annoDescription)
5

What if you put “```” at the beginning and end of your annoDescription string?

so it would end up being:
f’‘’
\n Variants Details \n
```
{d[‘Gene_symbol’]} ({d[‘Inheritance’]})
{d[‘canonicalCodon’]} - {d[‘Zygosity’]}
DP :- {d[‘DP’]} ({d[‘AD’]}) {d[‘Alt_Allele_Percent’]}
ACMG :-
gnomAD_MAF(%) :- {f"{d[‘gnomAD_MAF(%)’]}" if f"{d[‘gnomAD_MAF(%)’]}" != “.” else “NA”}
1000G_MAF(%) :- {f"{d[‘1000G_MAF(%)’]}" if f"{d[‘1000G_MAF(%)’]}" != “.” else “NA”}
ClinVar :- {d[‘ClinVar_annotation’]}
Franklin :-
SIFT :- {f"{d[‘SIFT_score’]}" if f"{d[‘SIFT_score’]}" != “.” else “NA”}
MT :- {f"{d[‘MutationTaster_score’]}" if f"{d[‘MutationTaster_score’]}" != “.” else “NA”}
PolyPhen2 :- {f"{d[‘Polyphen2_HDIV_pred’]}" if f"{d[‘Polyphen2_HDIV_pred’]}" != “.” else “NA”}
MCAP :- NA
\n{l} \n
```‘’’

?

6

Now it is displaying that backticks

image
image1877×781 44.6 KB

7

hi @willhuang, I found a solution
I used st.code instead of st.write
Now the box looks like this

image
image1877×781 42.7 KB

8

Great! I was actually going to suggest that right after haha :sweat_smile: but i happened to go to sleep! Happy streamlitting!