Tools and skills required, spotfe mods development environment, Mod development life cycle

Spotfire Mods Developer's Hub
Introduction	Fundamentals	Advanced Topics	Tips & Tricks

Fundamentals

The fundamentals section covers anything from having a Mods Development environment ready to create Mods from scratch or edit existing mods to having Mods ready to market by explaining the Mod development life cycle. The best place to start is directly at the Spotfire Mods official documentation site. I recommend to spend about 10 minutes reading the Getting Started section and then come back here for more details and videos.

Tools and Skills required

You will need to install a code editor and a compiler and know web technologies in order to setup a Mods Development Environment and start coding Mods directly on a Spotfire instance.

Tools

You will need to install a code editor and a compiler and know web technologies in order to setup a Mods Development Environment and start coding Mods directly on a Spotfire instance.

Visual Studio Code: VS Code is a lightweight, cross-platform code editor that you can use in Windows, Linux, or OS X platforms to build modern applications for the Web and cloud alike. This code editor is what we use to develop Mods. Download and Install Visual Studio Code from here. It is free!
node.js: Is an open-source cross-platform, back-end JavaScript runtime environment that runs on a JavaScript engine to execute JavaScript code outside the web browser. Download and install it from here. To check if you have node.js in your machine, open a terminal and type: npm -v
Spotfire: You will need a Spotfire Cloud account or access to a running instance of Spotfire.

Watch this video on how to install Visual Studio Code & Node JS. And in case you do not have Spotfire yet, here is how to get it

Skills

You will need HTML, CSS and JavaScript. TypeScript is a plus because many existing mods are done using this technology. Even the Spotfire Mods API uses TypeScript, but do not worry to much if you know little or nothing about TypeScript because it is a superset of JavaScript. There are many free resources on the Internet to learn this technologies such as W3Schools, codecademy and freeCodeCamp just to name a few.

Spotfire Mods Development Environment

Every time you develop a mod, you will need to start of with this environment, so let's get started setting that up. The Mods Development Environment is not only based on node.js and VSCode. You also need the source code of a Mod to start editing or building a Mod as a starting point. The source code for these Mods are available at the Spotfire GitHub spotfire-mods repository, where you can find many samples and prototypes. These existing Mods can serve as templates for what you are trying to achieve. Some of this have the minimum required code to start building something from scratch (for example, the /examples/js-dev-starter) and some others has the complete code of a fully functioning Mod including the use of JavaScript frameworks such as d3.js

Summary of steps to setup the Spotfire Mod Development Environment

To setup a development environment and start coding a mod from scratch:

Install VSCode and node.js if not done already.
Download the source-code from Spotfire GitHub spotfire-mods repository
Test your environment by extracting a mod. For example, the examples/js-dev-starter folder. (or any other folder to see other complete Mod examples)
Follow the readme.md file instructions. The readme file varies from Mod to Mod, so make sure you follow the setup instructions carefully.
When running npm install command line from the terminal, it installs node dependencies and packages. This will create the node_modules folder
Run the npm run server statement to start the live development server. The mod-manifes.json file should open on a web browser window
Connect Spotfire to the Development Environment live server from tools > development > create visualization mod and follow the prompts.

Mod Development Life Cycle

The Mod Development Life Cycle is useful to understand how a Spotfire Mod Visualization is created and the steps required. This section covers the steps to create a Mod. On the videos I demonstrate how to search for a particular visualization and make sure the code runs outside Spotfire. Then I will replicate the code on the Spotfire Mod development environment to finally wire up the data so the mod can dynamically change with filters and save and share it on the library. This is by no means a complete Mod as it lacks marking data, signing the code to share to others and other cool features covered on other videos.

The life cycle of a mod creation on a high level is:

Find code. There we search for code and test the code runs fine outside Spotfire on a web browser. There are many places to find and test code such as JavaScript frameworks or online code editors
Prepare Development. Setup the live server and connect a blank template to Spotfire
Start Coding: Port the code we found or created and start coding for additional features. Replace hard coded data with Spotfire data, save and share.

1. Searching for code

In this demonstration we will port existing code found on bl.ocks.org to create a difference chart visualization. There are many examples hidden in this site, so a good way to find examples on a specific site like this one is by adding the "site" keyword while searching in google. For example "difference chart site:bl.ocks.org" under google images

There are many places to search from. You can replace the bl.ocks.org with other sites such as codepen.io or anything else. Here is a list of useful resources to find, test and use JavaScript libraries and frameworks to use in your Mod. Most resources are free and open source.

List of websites to find code	Read only	Editable	Toolkit
codepen.io		✔️
Echarts.apache.org	✔️	✔️	✔️
d3js.org / observablehq.com	✔️	✔️	✔️
GitHub	✔️
dojotoolkit.org	✔️		✔️
dygraphs.com	✔️		✔️
Bl.ocks.org	✔️		✔️
Vuejs.org	✔️	✔️	✔️
Chartjs.org	✔️	✔️	✔️
metricsgraphicsjs.org	✔️		✔️
apexcharts.com	✔️		✔️
developers.google.com/chart	✔️	✔️	✔️
jenscript.io	✔️		✔️
plotly.com/javascript	✔️	✔️	✔️
naver.github.io/billboard.js	✔️	✔️	✔️
Nvd3.org	✔️		✔️
codesandbox.io		✔️

The difference chart running outside Spotfire that will be converted to a mod in this example can be found here. Notice that the hard coded data is collapsed in line 2

2. Prepare for Development

Now it is time to have the Spotfire Development Environment ready. At this point you should have VSCode and node.js installed and the spotfire-mods-master.zip that contains the source code from GitHub Spotfire account. Here we start from a blank Mod template and have the Spotfire Mod Development live server up and running connected to our instance of Spotfire.

Extract the examples/js-dev-starter folder from the spotfire-mods-master.zip.
Rename the folder to something meaningful, for example: js-diff-chart and open this folder in VSCode
Open a terminal and run the npm install command. This will download dependencies on a new "node_modules" folder.
Run the npm run server to start the live development server. The mod-manifes.json file should open on a web browser window
Connect Spotfire to the Development Environment live server from tools > development > create visualization mod and follow the prompts.

3. Start Coding

This is the last part of the Spotfire Mod Development Life Cycle. Here we replicate the code with all hard coded parts and then we slowly soft code by connecting the data, configure marking and axes. The coding process is a very iterative process that can take longer than expected. It requires to use the Spotfire Mod API and debugging. Once the Mod is ready, you can save it on the library or sign it if you are planning to place it on another Spotfire environment.

Replicate the code

During coding we replicate the code that runs outside Spotfire into the development environment to make sure it runs exactly as the original source. At this point we are not worry about connecting the underlying data from Spotfire or configure the axis and other settings from the mod-manifest. We simply replicate the code. Make sure you include all the necessary dependencies such as JavaScript files, libraries, CSS files and other dependencies. Please note that references to external sites are not allowed at the moment because of security reasons. Mods run on a sandbox environment, so make sure you copy all those external references locally.

Edit index.html and add a placeholder for the chart inside the mod-container div
Create a new file containing the d3.v3.js code. Open, select all and copy to a file in the src folder called d3.v3.js

Add a reference to d3.v3.js file. index.html should look like this:

<!--
/*
* Copyright © 2020. TIBCO Software Inc.
* This file is subject to the license terms contained
* in the license file that is distributed with this file.
*/
-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Spotfire Mod Example</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" type="text/css" media="all" href="main.css" />
    </head>
    <body>
        <div id="mod-container">
            <div id="myChart">Loading....</div>
        </div>
        <script id="spotfire-loader">var Spotfire=function(e){"use strict";return e.initialize=function(e){var t="sfTemp"+1e4*Math.random()+"Cb",r=window;r[t]=e;var a={subject:"GetUrl",callbackId:-1,options:{cbId:t}};r.addEventListener("message",(function e(t){if(t.source!==r.parent||!t.data.src)return;r.removeEventListener("message",e);var a=document,n=a.createElement("script");n.src=t.data.src,(a.head||a.body).appendChild(n)})),r.parent.postMessage(a,"*")},e}({});</script>
        <script src="main.js"></script>
        <script src="d3.v3.js"></script>
    </body>
</html>

Copy the CSS code from CodePen and append it to src/main.css:

/*
* Copyright © 2020. TIBCO Software Inc.
* This file is subject to the license terms contained
* in the license file that is distributed with this file.
*/

body{
    margin: 0;
    overflow: hidden;
}

#mod-container {
    white-space: pre;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.area.above {
  fill: #7a7a7a;
}

.area.below {
  fill:#ff8833;
}


.line {
  fill: none;
  stroke: #000;
  stroke-width:1.5px;
}

Add the JavaScript code from CodePen to src/main.js

/*
 * Copyright © 2020. TIBCO Software Inc.
 * This file is subject to the license terms contained
 * in the license file that is distributed with this file.
 */

//@ts-check - Get type warnings from the TypeScript language server. Remove if not wanted.

/**
 * Get access to the Spotfire Mod API by providing a callback to the initialize method.
 * @param {Spotfire.Mod} mod - mod api
 */
Spotfire.initialize(async (mod) => {
    /**
     * Create the read function.
     */
    const reader = mod.createReader(mod.visualization.data(), mod.windowSize(), mod.property("myProperty"));

    /**
     * Store the context.
     */
    const context = mod.getRenderContext();

    /**
     * Initiate the read loop
     */
    reader.subscribe(render);

    /**
     * @param {Spotfire.DataView} dataView
     * @param {Spotfire.Size} windowSize
     * @param {Spotfire.ModProperty<string>} prop
     */
    async function render(dataView, windowSize, prop) {
        /**
         * Check the data view for errors
         */
        let errors = await dataView.getErrors();
        if (errors.length > 0) {
            // Showing an error overlay will hide the mod iframe.
            // Clear the mod content here to avoid flickering effect of
            // an old configuration when next valid data view is received.
            mod.controls.errorOverlay.show(errors);
            return;
        }
        mod.controls.errorOverlay.hide();

        /**
         * Get the hierarchy of the categorical X-axis.
         */
        const xHierarchy = await dataView.hierarchy("X");
        const xRoot = await xHierarchy.root();

        if (xRoot == null) {
            // User interaction caused the data view to expire.
            // Don't clear the mod content here to avoid flickering.
            return;
        }

        /**
         * Print out to document
         */

//        const container = document.querySelector("#mod-container");
//        container.textContent = `windowSize: ${windowSize.width}x${windowSize.height}\r\n`;
//        container.textContent += `should render: ${xRoot.rows().length} rows\r\n`;
//        container.textContent += `${prop.name}: ${prop.value()}`;


//DATA
var data = [
    {
      "date": "2011-10-01",
      "New York": 63.4,
      "San Francisco": 62.7
    },
    {
      "date": "2011-10-02",
      "New York": 58,
      "San Francisco": 59.9
    },{ "date": "2011-10-03", "New York": 53.3, "San Francisco": 59.1 }, { "date": "2011-10-04", "New York": 55.7, "San Francisco": 58.8 }, { "date": "2011-10-05", "New York": 64.2, "San Francisco": 58.7 }, { "date": "2011-10-06", "New York": 58.8, "San Francisco": 57 }, { "date": "2011-10-07", "New York": 57.9, "San Francisco": 56.7 }, { "date": "2011-10-08", "New York": 61.8, "San Francisco": 56.8 }, { "date": "2011-10-09", "New York": 69.3, "San Francisco": 56.7 }, { "date": "2011-10-10", "New York": 71.2, "San Francisco": 60.1 }, { "date": "2011-10-11", "New York": 68.7, "San Francisco": 61.1 }, { "date": "2011-10-12", "New York": 61.8, "San Francisco": 61.5 }, { "date": "2011-10-13", "New York": 63, "San Francisco": 64.3 }, { "date": "2011-10-14", "New York": 66.9, "San Francisco": 67.1 }, { "date": "2011-10-15", "New York": 61.7, "San Francisco": 64.6 }, { "date": "2011-10-16", "New York": 61.8, "San Francisco": 61.6 }, { "date": "2011-10-17", "New York": 62.8, "San Francisco": 61.1 }, { "date": "2011-10-18", "New York": 60.8, "San Francisco": 59.2 }, { "date": "2011-10-19", "New York": 62.1, "San Francisco": 58.9 }, { "date": "2011-10-20", "New York": 65.1, "San Francisco": 57.2 }, { "date": "2011-10-21", "New York": 55.6, "San Francisco": 56.4 }, { "date": "2011-10-22", "New York": 54.4, "San Francisco": 60.7 }, { "date": "2011-10-23", "New York": 54.4, "San Francisco": 65.1 }, { "date": "2011-10-24", "New York": 54.8, "San Francisco": 60.9 }, { "date": "2011-10-25", "New York": 57.9, "San Francisco": 56.1 }, { "date": "2011-10-26", "New York": 54.6, "San Francisco": 54.6 }, { "date": "2011-10-27", "New York": 54.4, "San Francisco": 56.1 }, { "date": "2011-10-28", "New York": 42.5, "San Francisco": 58.1 }, { "date": "2011-10-29", "New York": 40.9, "San Francisco": 57.5 }, { "date": "2011-10-30", "New York": 38.6, "San Francisco": 57.7 }, { "date": "2011-10-31", "New York": 44.2, "San Francisco": 55.1 }, { "date": "2011-11-01", "New York": 49.6, "San Francisco": 57.9 }, { "date": "2011-11-02", "New York": 47.2, "San Francisco": 64.6 }, { "date": "2011-11-03", "New York": 50.1, "San Francisco": 56.2 }, { "date": "2011-11-04", "New York": 50.1, "San Francisco": 50.5 }, { "date": "2011-11-05", "New York": 43.5, "San Francisco": 51.3 }, { "date": "2011-11-06", "New York": 43.8, "San Francisco": 52.6 }, { "date": "2011-11-07", "New York": 48.9, "San Francisco": 51.4 }, { "date": "2011-11-08", "New York": 55.5, "San Francisco": 50.6 }, { "date": "2011-11-09", "New York": 53.7, "San Francisco": 54.6 }, { "date": "2011-11-10", "New York": 57.7, "San Francisco": 55.6 }, { "date": "2011-11-11", "New York": 48.5, "San Francisco": 53.9 }, { "date": "2011-11-12", "New York": 46.8, "San Francisco": 54 }, { "date": "2011-11-13", "New York": 51.1, "San Francisco": 53.8 }, { "date": "2011-11-14", "New York": 56.8, "San Francisco": 53.5 }, { "date": "2011-11-15", "New York": 59.7, "San Francisco": 53.4 }, { "date": "2011-11-16", "New York": 56.5, "San Francisco": 52.2 }, { "date": "2011-11-17", "New York": 49.6, "San Francisco": 52.7 }, { "date": "2011-11-18", "New York": 41.5, "San Francisco": 53.1 }, { "date": "2011-11-19", "New York": 44.3, "San Francisco": 49 }, { "date": "2011-11-20", "New York": 54, "San Francisco": 50.4 }, { "date": "2011-11-21", "New York": 54.1, "San Francisco": 51.1 }, { "date": "2011-11-22", "New York": 49.4, "San Francisco": 52.3 }, { "date": "2011-11-23", "New York": 50, "San Francisco": 54.6 }, { "date": "2011-11-24", "New York": 44, "San Francisco": 55.1 }, { "date": "2011-11-25", "New York": 50.3, "San Francisco": 51.5 }, { "date": "2011-11-26", "New York": 52.1, "San Francisco": 53.6 }, { "date": "2011-11-27", "New York": 49.6, "San Francisco": 52.3 }, { "date": "2011-11-28", "New York": 57.2, "San Francisco": 51 }, { "date": "2011-11-29", "New York": 59.1, "San Francisco": 49.5 }, { "date": "2011-11-30", "New York": 50.6, "San Francisco": 49.8 }, { "date": "2011-12-01", "New York": 44.3, "San Francisco": 60.4 }, { "date": "2011-12-02", "New York": 43.9, "San Francisco": 62.2 }, { "date": "2011-12-03", "New York": 42.1, "San Francisco": 58.3 }, { "date": "2011-12-04", "New York": 43.9, "San Francisco": 52.7 }, { "date": "2011-12-05", "New York": 50.2, "San Francisco": 51.5 }, { "date": "2011-12-06", "New York": 54.2, "San Francisco": 49.9 }, { "date": "2011-12-07", "New York": 54.6, "San Francisco": 48.6 }, { "date": "2011-12-08", "New York": 43.4, "San Francisco": 46.4 }, { "date": "2011-12-09", "New York": 42.2, "San Francisco": 49.8 }, { "date": "2011-12-10", "New York": 45, "San Francisco": 52.1 }, { "date": "2011-12-11", "New York": 33.8, "San Francisco": 48.8 }, { "date": "2011-12-12", "New York": 36.8, "San Francisco": 47.4 }, { "date": "2011-12-13", "New York": 38.6, "San Francisco": 47.2 }, { "date": "2011-12-14", "New York": 41.9, "San Francisco": 46.1 }, { "date": "2011-12-15", "New York": 49.6, "San Francisco": 48.8 }, { "date": "2011-12-16", "New York": 50.2, "San Francisco": 47.9 }, { "date": "2011-12-17", "New York": 40.6, "San Francisco": 49.8 }, { "date": "2011-12-18", "New York": 29.1, "San Francisco": 49.1 }, { "date": "2011-12-19", "New York": 33.7, "San Francisco": 48.3 }, { "date": "2011-12-20", "New York": 45.8, "San Francisco": 49.3 }, { "date": "2011-12-21", "New York": 47.4, "San Francisco": 48.4 }, { "date": "2011-12-22", "New York": 54.4, "San Francisco": 53.3 }, { "date": "2011-12-23", "New York": 47.8, "San Francisco": 47.5 }, { "date": "2011-12-24", "New York": 34.9, "San Francisco": 47.9 }, { "date": "2011-12-25", "New York": 35.9, "San Francisco": 48.9 }, { "date": "2011-12-26", "New York": 43.6, "San Francisco": 45.9 }, { "date": "2011-12-27", "New York": 42.9, "San Francisco": 47.2 }, { "date": "2011-12-28", "New York": 46.2, "San Francisco": 48.9 }, { "date": "2011-12-29", "New York": 30.8, "San Francisco": 50.9 }, { "date": "2011-12-30", "New York": 40.8, "San Francisco": 52.9 }, { "date": "2011-12-31", "New York": 49.8, "San Francisco": 50.1 }, { "date": "2012-01-01", "New York": 46.3, "San Francisco": 53.9 }, { "date": "2012-01-02", "New York": 43.2, "San Francisco": 53.1 }, { "date": "2012-01-03", "New York": 30.3, "San Francisco": 49.7 }, { "date": "2012-01-04", "New York": 19.2, "San Francisco": 52.7 }, { "date": "2012-01-05", "New York": 32.1, "San Francisco": 52.6 }, { "date": "2012-01-06", "New York": 41.2, "San Francisco": 49 }, { "date": "2012-01-07", "New York": 47, "San Francisco": 51 }, { "date": "2012-01-08", "New York": 46, "San Francisco": 56.8 }, { "date": "2012-01-09", "New York": 34.7, "San Francisco": 52.3 }, { "date": "2012-01-10", "New York": 39.4, "San Francisco": 51.6 }, { "date": "2012-01-11", "New York": 40.4, "San Francisco": 49.8 }, { "date": "2012-01-12", "New York": 45.4, "San Francisco": 51.9 }, { "date": "2012-01-13", "New York": 40.7, "San Francisco": 53.7 }, { "date": "2012-01-14", "New York": 30.4, "San Francisco": 52.9 }, { "date": "2012-01-15", "New York": 23.9, "San Francisco": 49.7 }, { "date": "2012-01-16", "New York": 22.6, "San Francisco": 45.3 }, { "date": "2012-01-17", "New York": 39.8, "San Francisco": 43.6 }, { "date": "2012-01-18", "New York": 43.2, "San Francisco": 45 }, { "date": "2012-01-19", "New York": 26.3, "San Francisco": 47.3 }, { "date": "2012-01-20", "New York": 32.8, "San Francisco": 51.4 }, { "date": "2012-01-21", "New York": 27.4, "San Francisco": 53.7 }, { "date": "2012-01-22", "New York": 25, "San Francisco": 48.3 }, { "date": "2012-01-23", "New York": 39.4, "San Francisco": 52.9 }, { "date": "2012-01-24", "New York": 48.7, "San Francisco": 49.1 }, { "date": "2012-01-25", "New York": 43, "San Francisco": 52.1 }, { "date": "2012-01-26", "New York": 37.1, "San Francisco": 53.6 }, { "date": "2012-01-27", "New York": 48.2, "San Francisco": 50.4 }, { "date": "2012-01-28", "New York": 43.7, "San Francisco": 50.3 }, { "date": "2012-01-29", "New York": 40.1, "San Francisco": 53.8 }, { "date": "2012-01-30", "New York": 38, "San Francisco": 51.9 }, { "date": "2012-01-31", "New York": 43.5, "San Francisco": 50 }, { "date": "2012-02-01", "New York": 50.4, "San Francisco": 50 }, { "date": "2012-02-02", "New York": 45.8, "San Francisco": 51.3 }, { "date": "2012-02-03", "New York": 37.5, "San Francisco": 51.5 }, { "date": "2012-02-04", "New York": 40.8, "San Francisco": 52 }, { "date": "2012-02-05", "New York": 36.5, "San Francisco": 53.8 }, { "date": "2012-02-06", "New York": 39.1, "San Francisco": 54.6 }, { "date": "2012-02-07", "New York": 43.2, "San Francisco": 54.3 }, { "date": "2012-02-08", "New York": 36.5, "San Francisco": 51.9 }, { "date": "2012-02-09", "New York": 36.5, "San Francisco": 53.8 }, { "date": "2012-02-10", "New York": 38.3, "San Francisco": 53.9 }, { "date": "2012-02-11", "New York": 36.9, "San Francisco": 52.3 }, { "date": "2012-02-12", "New York": 29.7, "San Francisco": 50.1 }, { "date": "2012-02-13", "New York": 33.1, "San Francisco": 49.5 }, { "date": "2012-02-14", "New York": 39.6, "San Francisco": 48.6 }, { "date": "2012-02-15", "New York": 42.3, "San Francisco": 49.9 }, { "date": "2012-02-16", "New York": 39.7, "San Francisco": 52.4 }, { "date": "2012-02-17", "New York": 46, "San Francisco": 49.9 }, { "date": "2012-02-18", "New York": 41.2, "San Francisco": 51.6 }, { "date": "2012-02-19", "New York": 39.8, "San Francisco": 47.8 }, { "date": "2012-02-20", "New York": 38.1, "San Francisco": 48.7 }, { "date": "2012-02-21", "New York": 37.1, "San Francisco": 49.7 }, { "date": "2012-02-22", "New York": 45.5, "San Francisco": 53.4 }, { "date": "2012-02-23", "New York": 50.6, "San Francisco": 54.1 }, { "date": "2012-02-24", "New York": 42.7, "San Francisco": 55.9 }, { "date": "2012-02-25", "New York": 42.6, "San Francisco": 51.7 }, { "date": "2012-02-26", "New York": 36.9, "San Francisco": 47.7 }, { "date": "2012-02-27", "New York": 40.9, "San Francisco": 45.4 }, { "date": "2012-02-28", "New York": 45.9, "San Francisco": 47 }, { "date": "2012-02-29", "New York": 40.7, "San Francisco": 49.8 }, { "date": "2012-03-01", "New York": 41.3, "San Francisco": 48.9 }, { "date": "2012-03-02", "New York": 36.8, "San Francisco": 48.1 }, { "date": "2012-03-03", "New York": 47.6, "San Francisco": 50.7 }, { "date": "2012-03-04", "New York": 44.2, "San Francisco": 55 }, { "date": "2012-03-05", "New York": 38.5, "San Francisco": 48.8 }, { "date": "2012-03-06", "New York": 32.9, "San Francisco": 48.4 }, { "date": "2012-03-07", "New York": 43.3, "San Francisco": 49.9 }, { "date": "2012-03-08", "New York": 51.2, "San Francisco": 49.2 }, { "date": "2012-03-09", "New York": 47.8, "San Francisco": 51.7 }, { "date": "2012-03-10", "New York": 37.2, "San Francisco": 49.3 }, { "date": "2012-03-11", "New York": 42.9, "San Francisco": 50 }, { "date": "2012-03-12", "New York": 48.8, "San Francisco": 48.6 }, { "date": "2012-03-13", "New York": 52.6, "San Francisco": 53.9 }, { "date": "2012-03-14", "New York": 60.5, "San Francisco": 55.2 }, { "date": "2012-03-15", "New York": 47.2, "San Francisco": 55.9 }, { "date": "2012-03-16", "New York": 44.7, "San Francisco": 54.6 }, { "date": "2012-03-17", "New York": 48.2, "San Francisco": 48.2 }, { "date": "2012-03-18", "New York": 48.2, "San Francisco": 47.1 }, { "date": "2012-03-19", "New York": 53.1, "San Francisco": 45.8 }, { "date": "2012-03-20", "New York": 57.8, "San Francisco": 49.7 }, { "date": "2012-03-21", "New York": 57.5, "San Francisco": 51.4 }, { "date": "2012-03-22", "New York": 57.3, "San Francisco": 51.4 }, { "date": "2012-03-23", "New York": 61.7, "San Francisco": 48.4 }, { "date": "2012-03-24", "New York": 55.8, "San Francisco": 49 }, { "date": "2012-03-25", "New York": 48.4, "San Francisco": 46.4 }, { "date": "2012-03-26", "New York": 49.8, "San Francisco": 49.7 }, { "date": "2012-03-27", "New York": 39.6, "San Francisco": 54.1 }, { "date": "2012-03-28", "New York": 49.7, "San Francisco": 54.6 }, { "date": "2012-03-29", "New York": 56.8, "San Francisco": 52.3 }, { "date": "2012-03-30", "New York": 46.5, "San Francisco": 54.5 }, { "date": "2012-03-31", "New York": 42.2, "San Francisco": 56.2 }, { "date": "2012-04-01", "New York": 45.3, "San Francisco": 51.1 }, { "date": "2012-04-02", "New York": 48.1, "San Francisco": 50.5 }, { "date": "2012-04-03", "New York": 51.2, "San Francisco": 52.2 }, { "date": "2012-04-04", "New York": 61, "San Francisco": 50.6 }, { "date": "2012-04-05", "New York": 50.7, "San Francisco": 47.9 }, { "date": "2012-04-06", "New York": 48, "San Francisco": 47.4 }, { "date": "2012-04-07", "New York": 51.1, "San Francisco": 49.4 }, { "date": "2012-04-08", "New York": 55.7, "San Francisco": 50 }, { "date": "2012-04-09", "New York": 58.3, "San Francisco": 51.3 }, { "date": "2012-04-10", "New York": 55, "San Francisco": 53.8 }, { "date": "2012-04-11", "New York": 49, "San Francisco": 52.9 }, { "date": "2012-04-12", "New York": 51.7, "San Francisco": 53.9 }, { "date": "2012-04-13", "New York": 53.1, "San Francisco": 50.2 }, { "date": "2012-04-14", "New York": 55.2, "San Francisco": 50.9 }, { "date": "2012-04-15", "New York": 62.3, "San Francisco": 51.5 }, { "date": "2012-04-16", "New York": 62.9, "San Francisco": 51.9 }, { "date": "2012-04-17", "New York": 69.3, "San Francisco": 53.2 }, { "date": "2012-04-18", "New York": 59, "San Francisco": 53 }, { "date": "2012-04-19", "New York": 54.1, "San Francisco": 55.1 }, { "date": "2012-04-20", "New York": 56.5, "San Francisco": 55.8 }, { "date": "2012-04-21", "New York": 58.2, "San Francisco": 58 }, { "date": "2012-04-22", "New York": 52.4, "San Francisco": 52.8 }, { "date": "2012-04-23", "New York": 51.6, "San Francisco": 55.1 }, { "date": "2012-04-24", "New York": 49.3, "San Francisco": 57.9 }, { "date": "2012-04-25", "New York": 52.5, "San Francisco": 57.5 }, { "date": "2012-04-26", "New York": 50.5, "San Francisco": 55.3 }, { "date": "2012-04-27", "New York": 51.9, "San Francisco": 53.5 }, { "date": "2012-04-28", "New York": 47.4, "San Francisco": 54.7 }, { "date": "2012-04-29", "New York": 54.1, "San Francisco": 54 }, { "date": "2012-04-30", "New York": 51.9, "San Francisco": 53.4 }, { "date": "2012-05-01", "New York": 57.4, "San Francisco": 52.7 }, { "date": "2012-05-02", "New York": 53.7, "San Francisco": 50.7 }, { "date": "2012-05-03", "New York": 53.1, "San Francisco": 52.6 }, { "date": "2012-05-04", "New York": 57.2, "San Francisco": 53.4 }, { "date": "2012-05-05", "New York": 57, "San Francisco": 53.1 }, { "date": "2012-05-06", "New York": 56.6, "San Francisco": 56.5 }, { "date": "2012-05-07", "New York": 54.6, "San Francisco": 55.3 }, { "date": "2012-05-08", "New York": 57.9, "San Francisco": 52 }, { "date": "2012-05-09", "New York": 59.2, "San Francisco": 52.4 }, { "date": "2012-05-10", "New York": 61.1, "San Francisco": 53.4 }, { "date": "2012-05-11", "New York": 59.7, "San Francisco": 53.1 }, { "date": "2012-05-12", "New York": 64.1, "San Francisco": 49.9 }, { "date": "2012-05-13", "New York": 65.3, "San Francisco": 52 }, { "date": "2012-05-14", "New York": 64.2, "San Francisco": 56 }, { "date": "2012-05-15", "New York": 62, "San Francisco": 53 }, { "date": "2012-05-16", "New York": 63.8, "San Francisco": 51 }, { "date": "2012-05-17", "New York": 64.5, "San Francisco": 51.4 }, { "date": "2012-05-18", "New York": 61, "San Francisco": 52.2 }, { "date": "2012-05-19", "New York": 62.6, "San Francisco": 52.4 }, { "date": "2012-05-20", "New York": 66.2, "San Francisco": 54.5 }, { "date": "2012-05-21", "New York": 62.7, "San Francisco": 52.8 }, { "date": "2012-05-22", "New York": 63.7, "San Francisco": 53.9 }, { "date": "2012-05-23", "New York": 66.4, "San Francisco": 56.5 }, { "date": "2012-05-24", "New York": 64.5, "San Francisco": 54.7 }, { "date": "2012-05-25", "New York": 65.4, "San Francisco": 52.5 }, { "date": "2012-05-26", "New York": 69.4, "San Francisco": 52.1 }, { "date": "2012-05-27", "New York": 71.9, "San Francisco": 52.2 }, { "date": "2012-05-28", "New York": 74.4, "San Francisco": 52.9 }, { "date": "2012-05-29", "New York": 75.9, "San Francisco": 52.1 }, { "date": "2012-05-30", "New York": 72.9, "San Francisco": 52.1 }, { "date": "2012-05-31", "New York": 72.5, "San Francisco": 53.3 }, { "date": "2012-06-01", "New York": 67.2, "San Francisco": 54.8 }, { "date": "2012-06-02", "New York": 68.3, "San Francisco": 54 }, { "date": "2012-06-03", "New York": 67.7, "San Francisco": 52.3 }, { "date": "2012-06-04", "New York": 61.9, "San Francisco": 55.3 }, { "date": "2012-06-05", "New York": 58.3, "San Francisco": 53.5 }, { "date": "2012-06-06", "New York": 61.7, "San Francisco": 54.1 }, { "date": "2012-06-07", "New York": 66.7, "San Francisco": 53.9 }, { "date": "2012-06-08", "New York": 68.7, "San Francisco": 54.4 }, { "date": "2012-06-09", "New York": 72.2, "San Francisco": 55 }, { "date": "2012-06-10", "New York": 72.6, "San Francisco": 60 }, { "date": "2012-06-11", "New York": 69.2, "San Francisco": 57.2 }, { "date": "2012-06-12", "New York": 66.9, "San Francisco": 55.1 }, { "date": "2012-06-13", "New York": 66.7, "San Francisco": 53.3 }, { "date": "2012-06-14", "New York": 67.7, "San Francisco": 53.4 }, { "date": "2012-06-15", "New York": 68.5, "San Francisco": 54.6 }, { "date": "2012-06-16", "New York": 67.5, "San Francisco": 57 }, { "date": "2012-06-17", "New York": 64.2, "San Francisco": 55.6 }, { "date": "2012-06-18", "New York": 61.7, "San Francisco": 52.5 }, { "date": "2012-06-19", "New York": 66.4, "San Francisco": 53.9 }, { "date": "2012-06-20", "New York": 77.9, "San Francisco": 55.3 }, { "date": "2012-06-21", "New York": 88.3, "San Francisco": 53.3 }, { "date": "2012-06-22", "New York": 82.2, "San Francisco": 54.1 }, { "date": "2012-06-23", "New York": 77, "San Francisco": 55.2 }, { "date": "2012-06-24", "New York": 75.4, "San Francisco": 55.8 }, { "date": "2012-06-25", "New York": 70.9, "San Francisco": 56.8 }, { "date": "2012-06-26", "New York": 65.9, "San Francisco": 57.5 }, { "date": "2012-06-27", "New York": 73.5, "San Francisco": 57.7 }, { "date": "2012-06-28", "New York": 77.4, "San Francisco": 56.6 }, { "date": "2012-06-29", "New York": 79.6, "San Francisco": 56.4 }, { "date": "2012-06-30", "New York": 84.2, "San Francisco": 58.4 }, { "date": "2012-07-01", "New York": 81.8, "San Francisco": 58.8 }, { "date": "2012-07-02", "New York": 82.5, "San Francisco": 56.4 }, { "date": "2012-07-03", "New York": 80.2, "San Francisco": 56.5 }, { "date": "2012-07-04", "New York": 77.8, "San Francisco": 55.8 }, { "date": "2012-07-05", "New York": 86.1, "San Francisco": 54.8 }, { "date": "2012-07-06", "New York": 79.9, "San Francisco": 54.9 }, { "date": "2012-07-07", "New York": 83.5, "San Francisco": 54.7 }, { "date": "2012-07-08", "New York": 81.5, "San Francisco": 52.8 }, { "date": "2012-07-09", "New York": 77.8, "San Francisco": 53.7 }, { "date": "2012-07-10", "New York": 76.1, "San Francisco": 53.1 }, { "date": "2012-07-11", "New York": 76.3, "San Francisco": 52.7 }, { "date": "2012-07-12", "New York": 75.8, "San Francisco": 52 }, { "date": "2012-07-13", "New York": 77.2, "San Francisco": 53.4 }, { "date": "2012-07-14", "New York": 79.3, "San Francisco": 54 }, { "date": "2012-07-15", "New York": 78.9, "San Francisco": 54 }, { "date": "2012-07-16", "New York": 79.6, "San Francisco": 54.5 }, { "date": "2012-07-17", "New York": 83.3, "San Francisco": 56.7 }, { "date": "2012-07-18", "New York": 84.3, "San Francisco": 57.5 }, { "date": "2012-07-19", "New York": 75.1, "San Francisco": 57.1 }, { "date": "2012-07-20", "New York": 68.4, "San Francisco": 58.1 }, { "date": "2012-07-21", "New York": 68.4, "San Francisco": 57.6 }, { "date": "2012-07-22", "New York": 72.2, "San Francisco": 56 }, { "date": "2012-07-23", "New York": 75.6, "San Francisco": 56.6 }, { "date": "2012-07-24", "New York": 82.6, "San Francisco": 57.8 }, { "date": "2012-07-25", "New York": 78.4, "San Francisco": 57.5 }, { "date": "2012-07-26", "New York": 77, "San Francisco": 56.4 }, { "date": "2012-07-27", "New York": 79.4, "San Francisco": 55.3 }, { "date": "2012-07-28", "New York": 77.4, "San Francisco": 55 }, { "date": "2012-07-29", "New York": 72.5, "San Francisco": 55.6 }, { "date": "2012-07-30", "New York": 72.9, "San Francisco": 55.6 }, { "date": "2012-07-31", "New York": 73.6, "San Francisco": 55.9 }, { "date": "2012-08-01", "New York": 75, "San Francisco": 55.4 }, { "date": "2012-08-02", "New York": 77.7, "San Francisco": 54.4 }, { "date": "2012-08-03", "New York": 79.7, "San Francisco": 53.7 }, { "date": "2012-08-04", "New York": 79.6, "San Francisco": 54.1 }, { "date": "2012-08-05", "New York": 81.5, "San Francisco": 57.8 }, { "date": "2012-08-06", "New York": 80, "San Francisco": 58.2 }, { "date": "2012-08-07", "New York": 75.7, "San Francisco": 58 }, { "date": "2012-08-08", "New York": 77.8, "San Francisco": 57 }, { "date": "2012-08-09", "New York": 78.6, "San Francisco": 55 }, { "date": "2012-08-10", "New York": 77.8, "San Francisco": 54.8 }, { "date": "2012-08-11", "New York": 78.5, "San Francisco": 53 }, { "date": "2012-08-12", "New York": 78.8, "San Francisco": 52.5 }, { "date": "2012-08-13", "New York": 78.6, "San Francisco": 53.3 }, { "date": "2012-08-14", "New York": 76.8, "San Francisco": 53.9 }, { "date": "2012-08-15", "New York": 76.7, "San Francisco": 56.2 }, { "date": "2012-08-16", "New York": 75.9, "San Francisco": 57.1 }, { "date": "2012-08-17", "New York": 77.6, "San Francisco": 55.3 }, { "date": "2012-08-18", "New York": 72.6, "San Francisco": 56.2 }, { "date": "2012-08-19", "New York": 70.4, "San Francisco": 54.3 }, { "date": "2012-08-20", "New York": 71.8, "San Francisco": 53.1 }, { "date": "2012-08-21", "New York": 73.6, "San Francisco": 53.4 }, { "date": "2012-08-22", "New York": 74.7, "San Francisco": 54.5 }, { "date": "2012-08-23", "New York": 74.6, "San Francisco": 55.7 }, { "date": "2012-08-24", "New York": 76, "San Francisco": 54.8 }, { "date": "2012-08-25", "New York": 76.2, "San Francisco": 53.8 }, { "date": "2012-08-26", "New York": 73.4, "San Francisco": 56.5 }, { "date": "2012-08-27", "New York": 74.6, "San Francisco": 58.3 }, { "date": "2012-08-28", "New York": 79.4, "San Francisco": 58.7 }, { "date": "2012-08-29", "New York": 74.7, "San Francisco": 57.5 }, { "date": "2012-08-30", "New York": 73.5, "San Francisco": 55.9 }, { "date": "2012-08-31", "New York": 77.9, "San Francisco": 55.4 }, { "date": "2012-09-01", "New York": 80.7, "San Francisco": 55.7 }, { "date": "2012-09-02", "New York": 75.1, "San Francisco": 53.1 }, { "date": "2012-09-03", "New York": 73.5, "San Francisco": 53.5 }, { "date": "2012-09-04", "New York": 73.5, "San Francisco": 52.5 }, { "date": "2012-09-05", "New York": 77.7, "San Francisco": 54.5 }, { "date": "2012-09-06", "New York": 74.2, "San Francisco": 56.3 }, { "date": "2012-09-07", "New York": 76, "San Francisco": 56.4 }, { "date": "2012-09-08", "New York": 77.1, "San Francisco": 56.5 }, { "date": "2012-09-09", "New York": 69.7, "San Francisco": 56.4 }, { "date": "2012-09-10", "New York": 67.8, "San Francisco": 55.4 }, { "date": "2012-09-11", "New York": 64, "San Francisco": 56.2 }, { "date": "2012-09-12", "New York": 68.1, "San Francisco": 55.7 }, { "date": "2012-09-13", "New York": 69.3, "San Francisco": 54.3 }, { "date": "2012-09-14", "New York": 70, "San Francisco": 55.2 }, { "date": "2012-09-15", "New York": 69.3, "San Francisco": 54.3 }, { "date": "2012-09-16", "New York": 66.3, "San Francisco": 52.9 }, { "date": "2012-09-17", "New York": 67, "San Francisco": 54.8 }, { "date": "2012-09-18", "New York": 72.8, "San Francisco": 54.8 }, { "date": "2012-09-19", "New York": 67.2, "San Francisco": 56.8 }, { "date": "2012-09-20", "New York": 62.1, "San Francisco": 55.4 }, { "date": "2012-09-21", "New York": 64, "San Francisco": 55.8 }, { "date": "2012-09-22", "New York": 65.5, "San Francisco": 55.9 }, { "date": "2012-09-23", "New York": 65.7, "San Francisco": 52.8 }, { "date": "2012-09-24", "New York": 60.4, "San Francisco": 54.5 }, { "date": "2012-09-25", "New York": 63.2, "San Francisco": 53.3 }, { "date": "2012-09-26", "New York": 68.5, "San Francisco": 53.6 }, { "date": "2012-09-27", "New York": 69.2, "San Francisco": 52.1 }, { "date": "2012-09-28", "New York": 68.7, "San Francisco": 52.6 },
    {
      "date": "2012-09-29",
      "New York": 62.5,
      "San Francisco": 53.9
    },
    {
      "date": "2012-09-30",
      "New York": 62.3,
      "San Francisco": 55.1
    }
  ].map(e=>{
      let d=e.date.split("-")
      e.date = new Date(d[0],d[1]-1,d[2]);
      return e;
  }) 
  
  
  //Chart options
  var margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
  
  
  var measure1 = Object.keys(data[0])[1]; //New York
  var measure2 = Object.keys(data[0])[2]; //San Francisco
  
  
  var x = d3.time.scale()
      .range([0, width]);
  
  var y = d3.scale.linear()
      .range([height, 0]);
  
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");
  
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");
  
  var line = d3.svg.area()
      .interpolate("basis")
      .x(function(d) { return x(d.date); })
      .y(function(d) { return y(d[measure1]); });
  
  var area = d3.svg.area()
      .interpolate("basis")
      .x(function(d) { return x(d.date); })
      .y1(function(d) { return y(d[measure1]); });
  
  
  d3.selectAll("#myChart").html("")
  
  
  var svg = d3.select("#myChart").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
    
    
    x.domain(d3.extent(data, function(d) { return d.date; }));
  
    y.domain([
      d3.min(data, function(d) { return Math.min(d[measure1], d[measure2]); }),
      d3.max(data, function(d) { return Math.max(d[measure1], d[measure2]); })
    ]);
  
    svg.datum(data);
  
    svg.append("clipPath")
        .attr("id", "clip-below")
      .append("path")
        .attr("d", area.y0(height));
  
    svg.append("clipPath")
        .attr("id", "clip-above")
      .append("path")
        .attr("d", area.y0(0));
  
    svg.append("path")
        .attr("class", "area above")
        .attr("clip-path", "url(#clip-above)")
        .attr("d", area.y0(function(d) { return y(d[measure2]); }));
  
    svg.append("path")
        .attr("class", "area below")
        .attr("clip-path", "url(#clip-below)")
        .attr("d", area);
  
    svg.append("path")
        .attr("class", "line")
        .attr("d", line);
  
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
  
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Temperature (ºF)");
  
  

        /**
         * Signal that the mod is ready for export.
         */
        context.signalRenderComplete();
    }
});

Check if code renders fine in Spotfire and there are no errors. Open developer tools and see the console to check for any errors

Configure

The Mod schema can be configured on the mod-manifest.json file. It allows to configure aspects of the Mod such as the Mod and name, ID and version you are working on. It also defines the axis selectors you will be using and the files used by the Mod. The complete reference of this file is found here. The mod-manifest should look like this:

{
    "apiVersion": "1.2",
    "version": "1.0",
    "name": "Diff Chart",
    "id": "js-diff-chart",
    "icon": "icon.svg",
    "properties": [
        {
            "name": "myProperty",
            "type": "string",
            "defaultValue": "myValue"
        }
    ],
    "dataViewDefinition": {
        "colorAxis": {
            "mode": "dual",            
            "dropTarget": {
                "icon": "Color",
                "description": "Color by {0}"
            }            
        },
        "axes": [
            {
                "name": "X",
                "mode": "categorical",
                "placement": "bottom",
                "dropTarget": {
                    "icon": "XAxis3D",
                    "description": "Use {0} on the mod's X-axis"
                }
            },
            {
                "name": "Y1",
                "mode": "continuous",
                "placement": "left"
            },
            {
                "name": "Y2",
                "mode": "continuous",
                "placement": "right"
            }
        ]
    },
    "files": [
        "index.html",
        "main.css",
        "main.js",
        "d3.v3.js".
    ]
}

Every time you make changes to the Mod schema, you need to reload it by clicking the mod setting icon while connected to the development server

Connect the data

During the development process you probably noticed that every time you make a change to the code, the Mod on the Spotfire refreshes automatically.

Edit main.js line 1902 chart options to make the mod adjust to the entire screen. Replace lines 1902 - 1905 like this:

//Chart options  var margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = windowSize.width - margin.left - margin.right,
      height = windowSize.height - margin.top - margin.bottom
 
  var measure1 = Object.keys(data[0])[1]; //New York
  var measure2 = Object.keys(data[0])[2]; //San Francisco

Save and make sure the visualization stretches accordingly when resizing the visualization or window.

Right before //chart options section at line 1900, add the following code to parse the data from spotfire to the Mod

:
:
  ].map(e=>{
      let d=e.date.split("-")
      e.date = new Date(d[0],d[1]-1,d[2]);
      return e;
  })

         /**
         * Get the data from spotfire in this format
         * [{"date": "2011-10-01","New York": 63.4,"San Francisco": 62.7},..,{"date":dateN}]
         */
        //

        //get visualization data table, data table column names and data types
        let visDataTable =  await mod.visualization.mainTable();
        let visDataTableColumns = (await visDataTable.columns());
        let visDataTableColNames = visDataTableColumns.map(a=>{return a.name})
        let visDataTableColDataTypes = visDataTableColumns.map(a=>{return a.dataType.name})
        //console.log(visDataTable.name,visDataTableColNames,visDataTableColDataTypes);
        
        let spotfireData = [];
        const rows = await dataView.allRows();

        rows.map(r=>{
             let dataPoint ={} 
             //parse dates
             let aDate = r.categorical("X").value()[0].value() //the .value() method on a categorical axis contains a list of DataViewCategoricalValuePathElement, which each has a value() method. Each level of a hierarchy can have its own data type so that's why it is an array of values

            //create JSON structure
            dataPoint["date"]=aDate;
            dataPoint["Y1"] = r.continuous("Y1").value()??0;
            dataPoint["Y2"] = r.continuous("Y2").value()??0;


            //add structure to array
            spotfireData.push(dataPoint);
        })

        data = spotfireData

  //Chart options
  var margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = windowSize.width - margin.left - margin.right,
      height = windowSize.height - margin.top - margin.bottom;
:
:

Save and share

You will need to disconnect Spotfire from the development live server enabled from VSCode terminal. When disconnecting the mod will be embedded in the analysis. The files defined at the end of the mod-manifest.json file are stored. It is common to miss this step and disconnecting from the server causes the visualization not to render or not to work as expected.

Click on the mod menu icon and click on disconnect you used to reload the manifest and disconnect from the server.
The visualization should work the same way as when the mod was connected to the live server
If you are sharing the code, make sure you do not include the node_modules folder as it is better to recreate it by running the npm install command.

Summary of the Mod Development Life Cycle

To summarize the Mod development server, here is all in one image

The API Documentation

The official API documentation is located here. It consist of the landing page, the documentation, API Overview and API Documentation. Both the landing page and the Documentation contains a link to the GitHub repository

Folder Structure

The folder structure is well described in the Mods API documentation. More information and videos explaining in depth this topic is coming soon.

Reading Spotfire Data

Stay tuned for a video explaining how to read categorical, continuous or hierarchical data. For now, check the Consuming data section from the Mods API Documentation

Marking

There are some examples on marking on the API Documentation tutorials and many examples on many of the Mods source code from GitHub

Signing a Mod

Signing a mod allows you to share your mod to other Spotfire environments outside the instance of Spotfire you developed your Mod in. Some references on how to sign mod are here while we work on a comprehensive video on how to sign your Mod

Sign In

Developer Hub for Spotfire Mods - Fundamentals

Spotfire Mods Developer's Hub