How to enable Full-Screen option for element rendered through components.html?

🎈 Using Streamlit
1

I’m using a st.pydeck object but because of existing confirmed bugs the performance is poor and I’m looking into rendering the component through components.html (streamlit.components.v1)

Example:

import streamlit as st
import streamlit.components.v1 as components
import pydeck as pdk
...
r2 = pdk.Deck(...)
components.html(r2.to_html(as_string=True), height=600)

This somewhat works but I’m trying to figure out how to enable fullscreen, specially the arrow icons ↖↘ that appear when you hover over a streamlit element that allow you to full-screen it.

I see this related issue but I can’t quite figure it out:

Also a similar thread here: Fullscreen mode for components.html() or components.iframe()

2

Hey @kee,

Sharing my comment from the GitHub Issue here as well:

While we don’t prevent st.html components from calling Element.requestFullscreen() (which you can read more about here), we also don’t automatically add a fullscreen button overlay on the st.html component.

As a result, to have a fullscreen option display, you would need to do the following:

  1. The code that you pass to st.html would need to make a call to the Element.requestFullscreen() API.
  2. If you want a button to appear to allow users to select the fullscreen option, you’d need to implement it with HTML + JS in the code passed to st.html.
3

(copied from github thread you replied to)

@Caroline - to confirm would this enable the native streamlit fullscreen ↖↘ icon (top right of the element in question to appear). Are there any examples you could share of how this could work? In my use case I’m rending a pydeck chart into the component as follows

pydeck_element = '...'
components.html(pydeck_element.to_html(as_string=True), height=800)

Looking at a simplified version of what the pydeck_element.to_html(...) yields:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>pydeck</title>
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
    <script src='https://cdn.jsdelivr.net/npm/@deck.gl/jupyter-widget@~8.8.10/dist/index.js'></script>
    <style>
    body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#deck-container {
  width: 100vw;
  height: 100vh;
}

#deck-container canvas {
  z-index: 1;
  background: none;
}
    </style>
  </head>
  <body>
    <div id="deck-container">
    </div>
  </body>
  <script>
    const container = document.getElementById('deck-container');
    const jsonInput = {
  "initialViewState": {
    "bearing": 0,
    "latitude": 38.028549,
    "longitude": -120.181034,
    "maxZoom": 16,
    "pitch": 45,
    "zoom": 5
  },
"layers": [
  // ...
  ],
  "mapProvider": "carto",
  "mapStyle": "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
  "mapboxKey": "",
  "views": [
    {
      "@@type": "MapView",
      "controller": true
    }
  ]
};
    const tooltip = true;
    const customLibraries = null;
    const configuration = null;

    const deckInstance = createDeck({
                  container,
      jsonInput,
      tooltip,
      customLibraries,
      configuration
    });

  </script>
</html>

What would need to be added exactly and where in this HTML to achieve the full-screen icon to appear? Want to make sure I’m understanding things correctly, so if I need to modify this HTML in memory I can replace / inject what I need correctly.

Thanks!