Save Visualizations in HISE (Tutorial)

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.

Call the SDK

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

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, study_space_id="12345678-1234-1234-1234-123456789abc",
title="Example Plotly visualization",
png_image="/home/workspace/example-plot.png"
)

Path 2: Save a visualization app Use this path when you’ve built an app (for example, using Deck.gl 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 entry point and any required framework or server files, such as app.py, package.json, or other server entry files.

3. Include your Pixi environment file and any other required app configuration files or scripts. In Pixi-based IDEs, save_visualizations_app() uses your Pixi environment file so you don't have to define dependencies separately. Don't use requirements.txt to define your dependencies for Pixi-based visualization builds.

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. Pass this list to the data_source_file_ids 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. For Pixi-based visualization builds, include your app entry point and your Pixi manifest file, such as pixi.toml.
    
    hp.save_visualization_app(

        study_space_id=study_space_id,

        app_name="my-app",

        application_files=[

            "/home/workspace/my-app/app.py"

        ],

     data_source_file_ids=data_source_file_ids,

    )

12. (Optional) If you already know which visualization build template you want to use, such as Dash with Pixi, without pre-installed packages (v3.0), 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.

Review the saved visualization in HISE

Find the saved visualization and share it with your team.

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

   

2. Click the card that represents your study.
   
   

3. In the side navigation menu, click Visualizations. 

   

4. Find the card for your saved visualization, identified by its hero image, and click to open it.

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

6. 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.