How to add this component to Streamlit?

🧩 Custom Components
1

I am interested in displaying my deep learning results of bioinformatics application by using streamlit. Recent days, I met a problem of how to add a javascript (ProSeqViewer) to streamlit page. Last week I read the documentation of streamlit components and watched some tutorial video, but I think it is still too sophisticated to me. Yes, I am not that familiar with frontend developing.

As far as I know, if I write a html directly, the javascript works. But I don’t know how to embed this to a streamlit page. Anyone can help me?

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="https://rawgithub.com/BioComputingUP/ProSeqViewer/master/dist/assets/proseqviewer.css">
		<script src="https://rawgithub.com/BioComputingUP/ProSeqViewer/master/dist/sqv-bundle.js"></script>
	</head>
	<body>
		<div id="psv"></div>
	</body>
	<script>
		const sequences = [
			{sequence: 'TLRAIENFYISNNKISDIPEFVR', id: 1, label: 'ASPA_ECOLI/13-156'},
			{sequence: 'TLRASENFPITGYKIHEE..MIN', id: 2, label: 'ASPA_BACSU/16-156'},
			{sequence: 'GTKFPRRIIWS............', id: 3, label: 'FUMC_SACS2/1-124'}
		]

		// Input icons
		const icons = [
			{sequenceId: 1, start: 2, end: 2, icon: 'lollipop'},
			{sequenceId: 1, start: 13, end: 13, icon: 'lollipop'}
		]

		// Options and configuration
		const options = {
			chunkSize: 0,
			sequenceColor: 'clustal',
			lateralIndexes: false
		};

		// Initialize the viewer
		const psv = new ProSeqViewer('psv');

		// Generate the HTML
		psv.draw({sequences, options, icons});
	</script>
</html>
2

You can add HTML/JavaScript directly to the page with st.components.v1.html from the components submodule.

Note that your HTML will get wrapped in a body tag within an iframe using st.components.v1.html.

3

Thank you! I tried before but It weirdly failed. Fortunately, I made it just now just using st.components.v1.html

4

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.