HiPlot integration

Custom Components
1

Hi,

First, thank you for creating this awesome project!

I am a developer of HiPlot (GitHub - facebookresearch/hiplot: HiPlot makes understanding high dimensional data easy), an interactive plotting tool that allows to play with high dimensional data. It currently works on Jupyter notebooks (React code embed in an iframe) and I would love to make it work on streamlit as well :slight_smile:

However, I’m not sure where to start - I’m unable to write iframes with st.write, even with unsafe_allow_html=True [1]. More generally, I don’t see any way to write arbitrary HTML/javascript. I believe the streamlit way of doing it would be to add a function st.hiplot_render, but it seems quite involved to have to modify the framework to render a third party library and wanted to get advises on how to move forward.

Thank you!

[1] Minimal code:

import streamlit as st
import html

page_html = '''<!DOCTYPE html>

<html></html>'''
st.write(f'<iframe style="width: 100%; height: 100vh; border: 0px" srcdoc="{html.escape(page_html)}"></iframe>', unsafe_allow_html=True)
# using st.markdown does the same as the line above

… gets rendered as

<div class="markdown-text-container stMarkdown" style="width: 698px;"><p>&lt;html&gt;&lt;/html&gt;"&gt;<span></span></p>
3 Likes
2

Hey @danthe3rd! I was actually just reading about HiPlot a couple days ago. Looks so awesome. Love the parallel-coordinate charts :100:

Right now the only way to implement support for new visualizations in Streamlit is to actually build it into the standard Streamlit library. So you’d have to implement a new built-in command like st.hiplot(...), write a React component to handle it, and contribute a PR. If this is something you’d like to do, we’d be thrilled to walk you through the steps to get this done.

Looking into the future (i.e. next few months!), we’re currently designing two lighter-weight ways of adding functionality into Streamlit:

  • We’re considering implementing st.html(the_html), which would let users plop in some custom HTML inside an iframe. We have an early prototype here: https://github.com/streamlit/streamlit/pull/968 . The prototype is missing sandboxing and automatic height calculation, but it’s usable if you’d like to play with it.
  • We’re also working on a plugin system for Streamlit. This is something we want to release by July this year, but we’ll share design docs and prototype PRs with the community before we settle on the exact design to make sure people’s needs are accounted for.
1 Like
3

Thanks for the reply :slight_smile:

Unless I have more bandwidth in the coming weeks, I think I’ll wait for st.html function, because adding something to streamlit will require a bit more work, and maintenance

Best

4

Hi,

an integration of hiplot would be great!

I saw that the PR proposing st.html was closed rather than merged. What is the latest take on an easy integration?

1 Like
5

Hi @jml,

Plugin support is under way :slight_smile:

I believe it will land in beta in a month or two.

2 Likes
6

Looks promising, thanks for the update!
Is there a thread, an issue, or a pull request I can follow to be notified of progress?

2 Likes
7

I’d also be curious about progress. Guess the issue to keep track of is this one: https://github.com/streamlit/streamlit/issues/327 (?)

8

Hey @jml
I’m currently working with the Streamlit team to have a HiPlot component available very soon :slight_smile:
You can subscribe yourself to the corresponding HiPlot issue - I’ll let you know when you can try it out

3 Likes
9

That’s great news! Subscribed, will try it out once it’s ready

1 Like
10

Hi @jml -

This is now available as a Streamlit Component:

https://facebookresearch.github.io/hiplot/tuto_streamlit.html

2 Likes