How to Use a Visualization Mod

To get started with visualization mod development:

In the Getting started guide on GitHub, you find complete information about mod development such as prerequisites, how to get started, and technical details.  

The procedure below covers the actions needed to create a new visualization mod. As a starting point, the js-dev-barchart example is used. It is one of the examples, provided by Spotfire, and can be downloaded from GitHub. The procedure describes how to get started with mod development using Visual Studio Code as your code editor.

Note: When you obtain third-party software or services, it is your responsibility to ensure you understand the license terms associated with such third-party software or services and comply with such terms.

1. Make sure data is loaded into an analysis.

2. On the menu bar, select Tools > Development > Create visualization mod.

Response: An area for the visualization mod is allocated. The puzzle icon in the visualization mod title indicates that you can develop the mod.  


3. Click GitHub to access and download a zip archive with the example mod projects to start the development from.

4. Extract the downloaded zip archive locally.

Response: A number of examples are provided.

5. In Visual Studio Code, open the folder containing the example mod project you want to start from (in this case the js-dev-barchart project).

Note: Check the README.md file in the project to get more detailed information.

6. Select Terminal > Run Build Task to start a development server.

7. Copy the server's URL that becomes available in a browser tab.

8. In Spotfire, click Connect to project.
   The development popup opens.
   

9. Select Development server in the popup. This option will enable live previews while developing.
   Response: The popup below is shown.
   

10. Paste the copied URL in the text field Add URL to connect to the development server, and click Connect.
    Response: The visualization mod is shown in the visualization mod area (in this example, a basic bar chart). The puzzle icon gets a green filled circle indicating that the visualization mod is connected to the development server.

11. In Visual Studio Code, start editing the mod example project.
    When you save the changes in Visual Studio Code, the changes  will be reflected in Spotfire automatically.

Comment: If changes are made in the mod-manifest.json file, you must click Reload manifest to update the visualization mod.

 

12. To save the visualization mod, see the procedures below.

Note: The procedure above shows how to connect to a development server to get live previews while developing a visualization mod. Development can also be made without connection to a development server. Click Browse instead of Development server in step 9, locate and open the manifest file for the mod example project. To view the changes made in the manifest, you must click Reload.

To save a visualization mod to the library:

1. Click the puzzle icon in the visualization mod title.

 

Comment: The puzzle icon indicates that mod development is enabled. If the icon is not available, select Tools > Development > Enable development for mods in analysis.
Response: The development popup opens.

2. If the visualization mod is connected to a development server, click Disconnect in the lower part of the development popup.

3. Click Save to library.

Response: The Save as Library Item dialog opens.
Comment: The path in the upper part of the dialog shows your current location in the folder structure of the library.

4. Navigate to the folder where you want to save the visualization mod.

5. Specify a Name for the visualization mod.

6. Click Save.

Comment: You can also save the visualization mod to the library from the Visualization types flyout. First, make sure the visualization mod is disconnected from the server, and then click the button to the right of the visualization mod, and select Save to library.

To find where in the library a visualization mod is located, open the Visualization types flyout, click the button to the right of the visualization mod, and select View in library.

To save a visualization mod as a file:

1. Click the puzzle icon in the visualization mod title.

 

Response: The development popup opens.
Comment: The puzzle icon indicates that mod development is enabled. If the icon is not available, first select Tools > Development > Enable development for mods in analysis.

2. If the visualization mod is connected to a development server, click Disconnect in the lower part of the development popup.

3. Click Save as local file.

4. Specify a name of the visualization mod, and a location for the file, and click Save.

Response: The visualization mod is saved as a .mod file.

Comment: You can also save the visualization mod as a file from the Visualization types flyout. First, make sure the visualization mod is disconnected from the server, and then click the button to the right of the visualization mod, and select Save as.

To open a visualization mod that is saved locally:

1. On the authoring bar, click Files and data .
   Response: The flyout opens.

2. In the flyout, click Browse local file, and locate the .mod file.

3. Select the .mod file, and click Open.
   Response: The visualization mod is added to the analysis page.

Alternatively, drag the .mod file to the analysis page, or, in the Visualization types flyout, click the button to the right of Visualization types and select Browse for visualization.

To add a visualization mod to the visualization flyout:

Visualization mods that have been saved to the library can be pinned, which means that they are added next to the list of native visualizations in the Visualization types flyout. Once a visualization mod is part of  the visualizations list, it becomes available for selection also in future analyses. In addition, the visualization mod will be seen as an option whenever you select a visualization type, for example, when you want to switch to another visualization or create a details visualization.

1. Make sure the visualization mod is saved in the library.

Comment: See 'To save a visualization mod to the library' above.

2. On the authoring bar, click    to open the Visualization types flyout.

Comment: The upper part of the flyout, above the line, lists visualization mods in the analysis that are not yet added to the list of pinned visualizations.

3. Hover with the mouse pointer over the visualization mod, click the button that is shown, and select Pin.

Comment: If the visualization mod is not available in the flyout, you can click the button in the Visualization types search field at the top of the flyout, and select Find visualizations in the library. Locate the wanted visualization mod, click its button, and select Pin to visualizations.

Response: The visualization mod is shown below the line, in the lower part of the flyout.

To turn off/turn on development for visualization mods:

A puzzle icon in the visualization mod title indicates that you are able to develop the mod, and you click it to access the development popup. If the puzzle icon is not visible, development is turned off. You can switch between these two states by selecting Tools > Development > Enable development for mods in analysis or Tools > Development > Disable development for mods in analysis.

Development is enabled automatically when you start the development of a new visualization mod. If you exit Spotfire, development of the mod is disabled by default. Next time the analysis is opened, the puzzle icon will not be shown.