Save Visualizations in HISE (Tutorial)

Prepare your visualization in an IDE

1. Navigate to HISE, and use your organizational email address to sign in.

2. Open an IDE. For instructions, see Create Your First HISE IDE (Tutorial) .

3. To import hisepy, enter the following code into a new cell in your IDE.

# Import the Python SDK to enable programmatic access to HISE functions
import hisepy as hp

4. Load your data and generate a visualization, according to the needs of your study.

A. For simple visualizations, create a Plotly figure.

i. To make sure your code runs end to end in the IDE, run the following code in a new IDE cell: 
fig.show()

ii. To save the visualization, store it in a Plotly figure object to pass in later, as shown in the following block:

fig = px.scatter(
    x=[1, 2, 3, 4],
    y=[10, 15, 13, 20],
    title="Plotly example"
) 
# Create scatter plot
# Define values on x axis
# Define values on y axis
# Set chart title

B. For complex visualizations, build an app (for example, a DeckGL app) in your IDE workspace (for example, /home/workspace).

Create and save a hero image

Each saved visualization in HISE includes a static image visible to users who are browsing among the saved visualizations.

1. From your IDE, export or otherwise save a PNG that represents your visualization (for example, a Plotly figure export or a screenshot of your app’s main view).

2. Save the image somewhere in your IDE workspace (for example, /home/workspace), so the SDK can access it.

Path 1: Save a Plotly visualization As a starting point, you can use the sample Plotly notebooks in the IDE’s examples folder.

1. Import the HISE SDK module. 

   import hisepy as hp

2. Import Plotly Express.


   import plotly.express as px

3. Confirm and note the file path to this PNG. You’ll need this path later, when you make the SDK call to save the visualization.
   fig.write_image("/home/workspace/example-plot.png")

4. Call the SDK. Call save_visualization() with its required and optional parameters. The SDK saves your Plotly figure into the selected study as a saved visualization. HISE links that saved visualization to the IDE run that produced it, including input data, code, and environment.
   
   hp.save_visualization(
figure=fig, studyspaceid="12345678-1234-1234-1234-123456789abc",
title="Example Plotly visualization",
png_image="/home/workspace/example-plot.png"
)

# SDK call
# Plotly figure object
# Study space ID
# Descriptive title
# Path of hero image

Path 2: Save a visualization app Use this path when you’ve built an app (for example, using DeckGL or Dash) and want HISE to build and deploy it using a visualization build template.

1. Note your file path. Place your app files and directories in a location HISE can package. You’ll pass in these file and directory paths to save_visualization_app().

   /home/workspace/my-app

2. Include your app’s main entrypoint and any framework-specific files (for example, DeckGL, package.json, server entry files).

3. Any necessary configuration files or scripts for your app (for example, requirements.txt, config scripts).

4. Do not include large input data files. Instead, upload those separately to your study space for your app to use when you run it.

5. Capture your input file IDs. Before you call save_visualization_app(), save your input data files in HISE, since the app must read from those files.

6. If your app uses files already present in your study space, capture their file IDs from HISE and have them ready to pass in.

7. If your app uses files generated in the IDE that aren’t yet in HISE, upload them using the upload_files() (Python) | uploadFiles() (R) SDK method, and wait until those files become available.

8. Collect the file IDs you want to include in your app, and keep them in a list (for example data_source_fileids()). You pass in these IDs to the data_source_fileids parameter.

9. Select the data mount path. Choose a path (for example /data or /input) as the directory in which your input data is stored, so your app can read it at runtime. You pass in this path as the data_mount_path argument. If you forget the leading /, HISE adds it for you.

10. Import the HISE SDK module. 


    import hisepy as hp

11. Call the SDK. Call save_visualization_app() with the required parameters:

(Optional) If you already know which visualization build template you want to use (for example a specific DeckGL template version), you can also pass in the following additional parameters:

i. build_template_name ii. build_template_major_version iii. build_template_minor_version iv. build_template_parameters  /* A map of framework-specific arguments, such as app entrypoint paths, which must match the build variables for that visualization build template / v. infer_build_template_arguments  /* Parameter that tells HISE whether to infer framework-specific arguments from your files and directories if you don’t supply them directly */

The save_visualization_app() SDK then packages your app files, applies the selected visualization build template, and starts a build workflow to deploy your app. It also creates a saved visualization in your study that points to the deployed app.

Call the SDK

Review the saved visualization in HISE

1. Find the saved visualization, and share it with your team.

2. From the top navigation menu, click COLLABORATION SPACE.

3. Click the card that represents your study.

4. In the side navigation menu, click Visualizations. 

5. Find the card that represents your saved visualization (the one with your hero image on it), and click to open it.

6. Review your saved Plotly figure or app-based visualization in Draft mode. 

7. If you like, confirm the output with your collaborators. For instructions on adding collaborators to your study, see Work with Studies (Tutorial) . When you're satisfied with the saved visualization, mark it as Final.