How To export a full-size cytoscape graph to image from a dash app?

Question

I am using python's Dash library to build a visual story-plotting app in which a cytoscape graph is used to visualize the scenes (as nodes) and the connections between them (as edges). the result is an interactive flow-chart with various editing capabilities.

I would like to provide the user with an option to export the graph to an image file (such as png) which he can then download and use as he sees fit.

So far I managed to create a process which captures the part of the graph that is on the screen, but that's not enough, as the graph tends to grow bigger than a screen-size. The user can zoom-out to include the whole graph in the screen, but that makes the graph's details too small to be helpful.

my question is: is there a way to export the full graph in full size to an image format, and not just what is on-screen? I mean the whole "canvas".

I have tried the solution described here (https://www.linkedin.com/pulse/test-automation-how-capture-full-page-screenshots-selenium-nir-tal) to capture a screenshot of the full web-page using selenium, but it doesn't work for me either, because the graph's "canvas" is bigger than the web-page as well as the screen.

this is the code I have now for capturing the screen-sized image:

@self.app.callback(
        Output("network", "generateImage"),
        Input('dashboard-export-project-button', 'n_clicks'),
        prevent_initial_call=True
        )
    def get_image(export_clicks):

        # Get the timezone
        local_tz = pytz.timezone('My Country')

        # Get the current time in UTC
        current_time_utc = datetime.utcnow()

        # Convert the UTC time to the Local timezone
        current_time = current_time_utc.replace(tzinfo=pytz.utc).astimezone(local_tz)

        time_stamp = current_time_local.strftime("%d/%m/%Y - %H:%M")

        # File type to output of 'svg, 'png', 'jpg', or 'jpeg' (alias of 'jpg')
        ftype = "png"

        # 'store': Stores the image data in 'imageData' !only jpg/png are supported
        # 'download'`: Downloads the image as a file with all data handling
        # 'both'`: Stores image data and downloads image as file.
        action = 'store'

        if ctx.triggered:
            if ctx.triggered_id == "dashboard-export-project-button":
                action = "download"

        return {
            'type': ftype,
            'action': action,
            'filename': f'{self.project.title} - {time_stamp}',
        }

Answer 1

after checking some options it turns out that the code I posted above does the job perfectly if you add an option to set the height and/or width of the graph per screenshot. the code captures everything within the bounds of the width-height parameters, whether the image is fully shown on the screen or not.

p.s.: after some more digging - the cytoscape documentation (https://js.cytoscape.org/#core/export) provides a simpler solution, which is: 1. adding an "options" dictionary to the callback's return to the 'generateImage' element of the graph. 2. in that dictionary, set 'full' to True. here's how the callback's return to that element looks like now:

{'type': ftype, 'action': action, 'options': {'full': True}, 'filename': f'{self.project.title} - plot outline - {time_stamp}'}