@flourish/sdk 3.19.0 → 4.1.0

package/README.md

@@ -168,6 +168,22 @@ document.body.style.fontFamily = state.body_font.url;
 #### `hidden`
 This type is for documenting state properties which should not be editable from the settings panel in the visualisation editor. Any property with a `hidden` type will not be editable within the visualisation editor interface.
 
+#### Text editor settings
+For `html` type settings, text editing functionality will automatically be added, such as making text bold or italic, adding a link, or referring to column headers from the data. You can add the `editor` property to override which editor functionalities to show. It accepts an object like this:
+
+```yaml
+- property: popup_text
+  name: Popup text
+  type: html
+  editor: # An object specifying the different text editor functions (omitting `editor` will only load style, url and flourish_embed settings)
+    style: true # bold/italic/title buttons
+    url: true # "Add a link" button
+    flourish_embed: true # Add flourish iframe
+    bindings: [ data.name, data.values ] # Adds buttons for column headers from dataset. Use `true` to add all data bindings
+    bindings_custom: # A list of custom bindings that don't appear in the columns (e.g. {{VALUE}} for dynamic values)
+      - ["Current value", "VALUE"] # The first item in array is display label, the second item is what is added to the text
+```
+
 #### Conditional settings
 Sometimes you might want to simplify the user experience for Flourish users by hiding some settings depending on whether they are needed or not. You can use the `show_if` and `hide_if` properties to control whether or not a setting should be displayed based on another setting’s value.
 
@@ -471,3 +487,24 @@ Called whenever the user changes a data table or setting in the visualisation ed
 An object into which Flourish will put the data from user-editable data tables. Usually your code will initialise `data` as an empty object `{}`, and read from it in the `draw()` and `update()` functions.
 
 Each property is a `dataset`: an array containing an object for each row in the relevant data table. The structure of each `dataset` is defined in the [data bindings of the `template.yml`](#data-bindings), and the data is loaded from the tables in the [`data/`](#data) directory.
+
+### `.screenshot(opts, takeScreenshot)`
+Called whenever the user has clicked "Download image" in the visualisation editor. This function gets called just before the image is downloaded and allows you to prepare the visualisation to be downloaded as an image. This is useful for example for disabling a template's animation, or converting HTML elements to SVG elements for SVG export.
+
+The method has 2 arguments:
+- `opts` – an object with information about the image to be downloaded
+```js
+{
+  download: true
+  filename: ""
+  format: "png" // can be png, svg or jpeg
+  height: "575"
+  scale: 1
+  width: "796"
+}
+```
+- `takeScreenshot` – the Flourish screenshot function. This can be called after you've made amendments to your visualisation. Returns a promise which gets fired when the screenshot is finished, the callback takes two arguments for when the screenshot has succeeded or failed respectively, which can be used to undo any changes you made for the screenshot.
+
+```js
+takeScreenshot().then(onSuccess, onFail)
+```

package/RELEASE_NOTES.md

@@ -1,3 +1,19 @@
+# 4.1.0
+* Allow SDK CLI token based authentication.
+
+# 4.0.0
+* This is purely a Node.js compatibility break; it’s a major version change, because the SDK is
+  no longer compatible with old versions of Node.js: it now requires at least version 13.2.
+  There are no functional changes in this release.
+
+# 3.20.1
+* Use version 1.7.3 of the shell-quote package, to avoid a security issue that doesn’t
+  really affect us in this context, but could trigger spurious security warnings
+  (https://snyk.io/test/npm/shell-quote/1.6.1)
+
+# 3.20.0
+* Add the `html` setting type, which gives you a rich text editor for a settings value
+
 # 3.19.0
 * Add the `is_premium` top level property in template.yml to indicate that this is a premium template
 

package/bin/flourish.js

@@ -20,6 +20,9 @@ const OPTS = {
 
 		// Only relevant for admin users
 		"as",
+
+		// Login option
+		"token",
 	],
 
 	default: {

package/lib/cmd/help.js

@@ -28,7 +28,7 @@ Commands:
 	flourish [-h|--help|help] [topic]
 	flourish history [--full] template_id
 	flourish list [--full] [template id]
-	flourish login [email_address]
+	flourish login ( [email_address] | --token [token] )
 	flourish logout
 	flourish new directory_name
 	flourish publish [template_directory]

package/lib/cmd/login.js

@@ -34,6 +34,19 @@ exports.command = function login(args) {
 		});
 	}
 
+	function getToken() {
+		return new Promise(function(resolve, reject) {
+			if (args.token) {
+				resolve(args.token);
+				return;
+			}
+			read({ prompt: "SDK Token: ", silent: true }, function(error, token) {
+				if (error) return reject(error);
+				resolve(token);
+			});
+		});
+	}
+
 	function login(email, password) {
 		return sdk.request(args, "user/login", { email: email, password: password })
 			.then((response) => {
@@ -47,6 +60,24 @@ exports.command = function login(args) {
 					.catch((error) => log.die("Failed to save SDK token", error.message));
 			});
 	}
+	async function loginWithToken(sdk_token) {
+		try {
+			await sdk.setSdkToken(args, sdk_token);
+			const user_info = await sdk.request(args, "user/whoami", {});
+			return user_info;
+		}
+		catch (e) {
+			log.die("Failed to save SDK token", e.message);
+		}
+	}
+	if ("token" in args) {
+		getToken().then((token) => {
+			loginWithToken(token).then(user_info => {
+				log.victory("Logged in as " + user_info.email);
+			}).catch(error => log.die("Failed to save SDK token", error.message));
+		});
+		return;
+	}
 
 	getEmail()
 		.then((email) => Promise.all([email, getPassword()]))
@@ -55,7 +86,9 @@ exports.command = function login(args) {
 };
 
 exports.help = `
-flourish login [email_address]
+Usage: 
+	flourish login [email]
+	flourish login --token [token]
 
 Log in to Flourish. You will be prompted for a password.
 

package/lib/sdk.js

@@ -21,6 +21,7 @@ const sdk_tokens_file = path.join(process.env.HOME || process.env.USERPROFILE, "
 const YAML_DUMP_OPTS = { flowLevel: 4 };
 const SDK_VERSION = require("../package.json").version;
 const SDK_MAJOR_VERSION = semver.parse(SDK_VERSION)[0];
+const SDK_MAJOR_VERSION_COMPAT = 3; // Flourish templates built for SDK version 3 are compatible with the current version
 
 function getSdkToken(server_opts) {
 	return new Promise(function(resolve, reject) {
@@ -525,7 +526,7 @@ function checkTemplateVersion(template_dir) {
 		if (!template_sdk_version) {
 			throw new Error("Template does not specify an sdk_version");
 		}
-		if (template_sdk_version < SDK_MAJOR_VERSION) {
+		if (template_sdk_version < SDK_MAJOR_VERSION_COMPAT) {
 			throw new Error("This template was built for an older version of Flourish. Try running 'flourish upgrade'");
 		}
 		if (template_sdk_version > SDK_MAJOR_VERSION) {

package/lib/validate_config.js

@@ -175,7 +175,7 @@ function validateImport(template_directory, setting) {
 	}
 }
 
-const VALID_SETTING_TYPES = new Set(["number", "string", "text", "code", "boolean", "color", "colors", "url", "font", "hidden"]);
+const VALID_SETTING_TYPES = new Set(["number", "string", "text", "html", "code", "boolean", "color", "colors", "url", "font", "hidden"]);
 function validateSetting(template_directory, conditional_settings, setting) {
 	if (typeof setting !== "object" || Array.isArray(setting)) {
 		throw new Error("template.yml: setting must be a mapping");
@@ -228,9 +228,12 @@ function validateSetting(template_directory, conditional_settings, setting) {
 		throw new Error(`template.yml setting “${property}” has unsupported width property: must be “full”, “half”, “quarter” or “three quarters”`);
 	}
 	if ("size" in setting) {
-		const can_set_size = setting.type == "code" || setting.type == "text" || (setting.type == "string" && setting.style == "buttons");
-		if (!can_set_size) throw new Error(`template.yml setting “${property}” has a “size” property; this requires type “text” or “code”, or type “string” with ”style: buttons”`);
-		else if (setting.size !== "large") throw new Error(`template.yml setting “${property}” has unsupported size property: must be “large”`);
+		const can_set_size = setting.type == "code" || setting.type == "text" || setting.type == "html" || (setting.type == "string" && setting.style == "buttons");
+		if (!can_set_size) throw new Error(`template.yml setting “${property}” has a “size” property; this requires type “text”, “code” or “html”, or type “string” with ”style: buttons”`);
+		else if (setting.size !== "large" && setting.size !== "small") throw new Error(`template.yml setting “${property}” has unsupported size property: must be “large” or “small”`);
+	}
+	if ("editor" in setting && setting.type != "html") {
+		throw new Error(`template.yml setting “${property}” has an “editor” field, but is not of type “html”`);
 	}
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flourish/sdk",
-  "version": "3.19.0",
+  "version": "4.1.0",
   "description": "The Flourish SDK",
   "module": "src/index.js",
   "scripts": {
@@ -16,42 +16,42 @@
   "license": "SEE LICENSE IN LICENSE.md",
   "repository": "kiln/flourish-sdk",
   "dependencies": {
-    "@flourish/interpreter": "^6.0.4",
+    "@flourish/interpreter": "^8.0.0",
     "@flourish/semver": "^1.0.1",
     "@flourish/transform-data": "^2.1.0",
     "@handlebars/allow-prototype-access": "^1.0.3",
     "@rollup/plugin-commonjs": "^17.1.0",
     "archiver": "^5.0.2",
-    "chokidar": "^3.4.3",
+    "chokidar": "^3.5.3",
     "cross-spawn": "^7.0.3",
     "d3-dsv": "^2.0.0",
     "express": "^4.17.1",
     "form-data": "^4.0.0",
     "handlebars": "^4.7.6",
     "js-yaml": "^3.14.0",
-    "minimist": "^1.2.5",
+    "minimist": "^1.2.6",
     "ncp": "^2.0.0",
     "node-fetch": "^2.6.7",
-    "parse5": "^6.0.1",
+    "parse5": "^7.1.2",
     "picocolors": "^1.0.0",
     "read": "^1.0.7",
     "resolve": "^1.18.1",
     "rewrite-links": "^1.1.0",
     "rollup-plugin-terser": "^7.0.2",
-    "shell-quote": "^1.7.2",
+    "shell-quote": "^1.7.3",
     "tmp": "^0.2.1",
     "ws": "^7.4.6"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^9.0.0",
     "d3-request": "^1.0.6",
-    "mocha": "^9.2.0",
-    "npm-audit-resolver": "^2.3.0",
+    "mocha": "^10.0.0",
+    "npm-audit-resolver": "^3.0.0-7",
     "rollup": "^2.32.1",
     "sinon": "^9.2.0",
-    "tempy": "^1.0.0"
+    "tempy": "^3.0.0"
   },
   "engines": {
-    "node": ">=8.3"
+    "node": ">=13.2"
   }
 }

package/server/columns.js

@@ -1,7 +1,7 @@
 /* * * * * * GENERATED FILE - DO NOT EDIT * * * * * *
  * * * * * * GENERATED FILE - DO NOT EDIT * * * * * *
  * * * * * * GENERATED FILE - DO NOT EDIT * * * * * */
- 
+
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/server/comms_js.js

@@ -1,7 +1,7 @@
+"use strict";
 const BEFORE = `
 window.addEventListener("message", function(event) {
 `;
-
 const CHECK_ORIGIN = `
 	var a = document.createElement("a");
 	a.href = event.origin;
@@ -12,8 +12,9 @@ const CHECK_ORIGIN = `
 		|| (a.hostname.match(/\\.flourish\\.rocks$/) && window.location.hostname.match(/\\.flourish\\.rocks$/))
 		|| (a.hostname.match(/\\.flourish\\.studio$/) && window.location.hostname.match(/\\.flourish\\.studio$/))
 		|| (a.hostname == "app.flourish.studio" && window.location.hostname == "flourish-user-templates.com")
+		|| (a.hostname == "flourish-user-preview.com" && window.location.hostname == "flourish-user-templates.com")
 		|| (${"" /* Cope with previously-published stories, that are still on the old domain,
-			     that have been republished (hence rerendered to use the new template URLs) */}
+         that have been republished (hence rerendered to use the new template URLs) */}
 			(a.hostname == "public.flourish.studio" && window.location.hostname == "flo.uri.sh")
 			|| (a.hostname == "public.flourish.rocks" && window.location.hostname == "staging-flo.uri.sh")
 			|| (a.hostname == "public.dev.flourish.rocks" && window.location.hostname == "dev-flo.uri.sh")
@@ -21,7 +22,6 @@ const CHECK_ORIGIN = `
 
 	if (!origin_okay) return;
 `;
-
 const AFTER = `
 	var message = event.data;
 	var port = event.ports[0];
@@ -122,7 +122,6 @@ const AFTER = `
 	}
 }, false);
 `;
-
 const VALIDATE = `
 if (template && template.draw && template.draw.length != 0) {
 	console.warn("The draw() function should be declared with no parameters");
@@ -131,7 +130,7 @@ if (template && template.update && template.update.length != 0) {
 	console.warn("The update() function should be declared with no parameters");
 }
 `;
-
 exports.withOriginCheck = BEFORE + CHECK_ORIGIN + AFTER;
 exports.withoutOriginCheck = BEFORE + AFTER;
 exports.validate = VALIDATE;
+//# sourceMappingURL=comms_js.js.map

package/server/data.js

@@ -6,11 +6,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var createInterpreter = require('@flourish/interpreter');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var createInterpreter__default = /*#__PURE__*/_interopDefaultLegacy(createInterpreter);
+var interpreter$1 = require('@flourish/interpreter');
 
 // Polyfills for IE11 and Edge
 
@@ -61,7 +57,7 @@ function extractData(data_binding, data_by_id, column_types_by_id, template_data
 
 	function getInterpreter(data_table_id, column_index) {
 		const { type_id } = getInterpretationIds(data_table_id, column_index);
-		if (type_id) return createInterpreter__default["default"].getInterpretation(type_id);
+		if (type_id) return interpreter$1.createInterpreter.getInterpretation(type_id);
 	}
 
 	for (var data_table_id in column_types_by_id) {
@@ -143,6 +139,7 @@ function extractData(data_binding, data_by_id, column_types_by_id, template_data
 	function parse(b, column_index, string_value) {
 		if (!b.template_data_binding.data_type) return string_value;
 		var interpreter = getInterpreter(b.data_table_id, column_index);
+		if (interpreter && interpreter.type == "number") string_value = stripCommonFixes(string_value);
 		var result = interpreter ? interpreter.parse(string_value) : string_value;
 
 		// We require our marshalled data to be JSON-serialisable,
@@ -246,7 +243,7 @@ function trimWhitespace(data) {
 
 
 var ERROR_STRINGS = ["#DIV/0", "#N/A", "#NAME?", "#NULL!", "#NUM!", "#REF!", "#VALUE!", "#ERROR!"];
-var interpreter = createInterpreter__default["default"]().nMax(Infinity).nFailingValues(8).failureFraction(0.1);
+var interpreter = interpreter$1.createInterpreter().nMax(Infinity).nFailingValues(8).failureFraction(0.1);
 
 
 function stripCommonFixes(str) {
@@ -257,7 +254,7 @@ function stripCommonFixes(str) {
 
 function transposeNestedArray(nested_array) {
 	var n_inner = nested_array.length;
-	var n_outer = nested_array[0].length;
+	var n_outer = n_inner > 0 ? nested_array[0].length : 0;
 	var transposed_array = [];
 
 	for (var i = 0; i < n_outer; i++) {
@@ -299,6 +296,7 @@ exports.getRandomSeededSample = getRandomSeededSample;
 exports.getSlicedData = getSlicedData;
 exports.interpretColumn = interpretColumn;
 exports.mulberry32 = mulberry32;
+exports.stripCommonFixes = stripCommonFixes;
 exports.transposeNestedArray = transposeNestedArray;
 exports.trimTrailingEmptyRows = trimTrailingEmptyRows;
 exports.trimWhitespace = trimWhitespace;

package/server/index.js

@@ -25,7 +25,7 @@ const crypto = require("crypto"),
 const { allowInsecurePrototypeAccess } = require("@handlebars/allow-prototype-access");
 const handlebars = allowInsecurePrototypeAccess(require("handlebars"));
 
-const TA = require("parse5/lib/tree-adapters/default.js");
+const { defaultTreeAdapter: TA } = require("parse5");
 
 // Generate a static prefix randomly
 //

package/server/index_html.js

@@ -1,100 +1,86 @@
 "use strict";
-
 const URL = require("url");
-
-const parse5 = require("parse5"),
-      RewriteLinks = require("rewrite-links");
-
-const TA = require("parse5/lib/tree-adapters/default.js");
-
+const parse5 = require("parse5"), RewriteLinks = require("rewrite-links");
+const { defaultTreeAdapter: TA } = require("parse5");
 function findChild(node, nodeName, ok_if_not_found) {
-	for (const child of TA.getChildNodes(node)) {
-		if (child.nodeName == nodeName) return child;
-	}
-	if (ok_if_not_found) return null;
-	throw new Error("Node not found: " + nodeName);
+    for (const child of TA.getChildNodes(node)) {
+        if (child.nodeName == nodeName)
+            return child;
+    }
+    if (ok_if_not_found)
+        return null;
+    throw new Error("Node not found: " + nodeName);
 }
-
 function findHtmlNode(document) {
-	return findChild(document, "html");
+    return findChild(document, "html");
 }
-
 function findHead(document) {
-	return findChild(findHtmlNode(document), "head");
+    return findChild(findHtmlNode(document), "head");
 }
-
 function findBody(document) {
-	return findChild(findHtmlNode(document), "body");
+    return findChild(findHtmlNode(document), "body");
 }
-
 function replaceTitle(document, title) {
-	const head = findHead(document);
-	let title_node = findChild(head, "title", true);
-
-	if (title_node) {
-		for (const child of TA.getChildNodes(title_node)) {
-			TA.detachNode(child);
-		}
-	}
-	else {
-		title_node = TA.createElement("title", head.namespaceURI, []);
-		TA.appendChild(head, title_node);
-	}
-
-	TA.insertText(title_node, title);
+    const head = findHead(document);
+    let title_node = findChild(head, "title", true);
+    if (title_node) {
+        for (const child of TA.getChildNodes(title_node)) {
+            TA.detachNode(child);
+        }
+    }
+    else {
+        title_node = TA.createElement("title", head.namespaceURI, []);
+        TA.appendChild(head, title_node);
+    }
+    TA.insertText(title_node, title);
 }
-
 function appendFragmentToBody(document, fragment) {
-	const body = findBody(document);
-	for (const child of TA.getChildNodes(fragment)) {
-		TA.appendChild(body, child);
-	}
+    const body = findBody(document);
+    for (const child of TA.getChildNodes(fragment)) {
+        TA.appendChild(body, child);
+    }
 }
-
 function insertOembedLink(document, oembed_url) {
-	const head = findHead(document);
-	const link_node = TA.createElement("link", head.namespaceURI, [
-		{ name: "rel", value: "alternate" },
-		{ name: "type", value: "application/json+oembed" },
-		{ name: "href", value: oembed_url }
-	]);
-	TA.appendChild(head, link_node);
+    const head = findHead(document);
+    const link_node = TA.createElement("link", head.namespaceURI, [
+        { name: "rel", value: "alternate" },
+        { name: "type", value: "application/json+oembed" },
+        { name: "href", value: oembed_url }
+    ]);
+    TA.appendChild(head, link_node);
 }
-
 function insertCanonicalLink(document, canonical_url) {
-	const head = findHead(document);
-	const link_node = TA.createElement("link", head.namespaceURI, [
-		{ name: "rel", value: "canonical" },
-		{ name: "href", value: canonical_url }
-	]);
-	TA.appendChild(head, link_node);
+    const head = findHead(document);
+    const link_node = TA.createElement("link", head.namespaceURI, [
+        { name: "rel", value: "canonical" },
+        { name: "href", value: canonical_url }
+    ]);
+    TA.appendChild(head, link_node);
 }
-
 function rewriteLinks(document, static_prefix) {
-	if (!static_prefix.endsWith("/")) static_prefix += "/";
-	const rewriter = new RewriteLinks(function(url) {
-		// We don’t want to rewrite URLs that are just fragment identifiers
-		if (url.startsWith("#")) return url;
-
-		// ... or relative self-links
-		if (url == "" || url == ".") return url;
-
-		return URL.resolve(static_prefix, url); // eslint-disable-line node/no-deprecated-api
-	});
-
-	return rewriter.rewriteDocument(document);
+    if (!static_prefix.endsWith("/"))
+        static_prefix += "/";
+    const rewriter = new RewriteLinks(function (url) {
+        // We don’t want to rewrite URLs that are just fragment identifiers
+        if (url.startsWith("#"))
+            return url;
+        // ... or relative self-links
+        if (url == "" || url == ".")
+            return url;
+        return URL.resolve(static_prefix, url); // eslint-disable-line node/no-deprecated-api
+    });
+    return rewriter.rewriteDocument(document);
 }
-
-function render(template_text, params) {
-	const document = parse5.parse(template_text),
-	      script_fragment = params.parsed_script || parse5.parseFragment(params.script);
-
-	replaceTitle(document, params.title);
-	if (params.canonical_url) insertCanonicalLink(document, params.canonical_url);
-	if (params.oembed_url) insertOembedLink(document, params.oembed_url);
-	appendFragmentToBody(document, script_fragment);
-	return rewriteLinks(document, params.static)
-		.then(parse5.serialize.bind(parse5));
+async function render(template_text, params) {
+    const document = parse5.parse(template_text), script_fragment = params.parsed_script || parse5.parseFragment(params.script);
+    replaceTitle(document, params.title);
+    if (params.canonical_url)
+        insertCanonicalLink(document, params.canonical_url);
+    if (params.oembed_url)
+        insertOembedLink(document, params.oembed_url);
+    appendFragmentToBody(document, script_fragment);
+    const rewritten_document = await rewriteLinks(document, params.static);
+    return parse5.serialize(rewritten_document);
 }
-
 exports.render = render;
+//# sourceMappingURL=index_html.js.map

package/server/json.js

@@ -1,7 +1,7 @@
 /* * * * * * GENERATED FILE - DO NOT EDIT * * * * * *
  * * * * * * GENERATED FILE - DO NOT EDIT * * * * * *
  * * * * * * GENERATED FILE - DO NOT EDIT * * * * * */
- 
+
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/server/views/index.html

@@ -3,13 +3,25 @@
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
-	<title>Flourish | Data Visualisation &amp; Storytelling</title>
+
+	<script type="text/javascript">
+		function OptanonWrapper() {
+			OneTrust.OnConsentChanged(() => {
+				document.cookie = `OptanonAlertBoxClosed=${new Date().toISOString()};`
+					+ "SameSite=None;"
+					+ "Secure;"
+					+ `expires=${new Date(Date.now() + 1000 * 60 * 60 * 24 * 365).toUTCString()};`;
+			});
+		}
+	</script>
+
+	<title>Flourish | Data Visualization &amp; Storytelling</title>
 
 	<script>if ("ontouchstart" in window) { document.documentElement.classList.add("is-touch"); }</script>
 
 
 	<link rel="stylesheet" type="text/css" href="/sdk.css">
-	<script src="/script.js" charset="utf-8"></script>
+	<script data-ot-ignore src="/script.js" charset="utf-8"></script>
 </head>
 <body class="sdk">
 	<div class="row header no-select" style="padding-left:10px">
@@ -17,10 +29,9 @@
 	</div>
 	<div class="row editor-bar">
 	<div id="preview-menu" class="row-menu left no-select">
-		
-		<a id="full-preview" href="preview" target="_blank" class="menu-item clickable popup" data-popup-head="Full preview in new window" aria-label="Full preview in new window">
-			<i class="fa fa-expand"></i>
-		</a>
+			<a id="full-preview" href="preview" target="_blank" class="menu-item clickable popup" data-popup-head="Full preview in new window" aria-label="Full preview in new window">
+				<i class="fa fa-expand"></i>
+			</a>
 		<div id="editor-previews">
 			<span id="editor-auto" data-target="auto" class="menu-item preview-mode clickable selected popup" data-popup-head="Preview using available width">
 				<i class="fa fa-tv"></i>
@@ -55,7 +66,7 @@
 								<p class="empty-label"></p>
 								<p class="empty-details"></p>
 							</div>
-							<iframe id="preview" sandbox="allow-same-origin allow-scripts allow-downloads" src="about:blank" data-testid="visualisation-iframe" aria-label="Visualisation preview"></iframe>
+							<iframe id="preview" sandbox="allow-same-origin allow-scripts allow-downloads" src="about:blank" data-testid="visualisation-iframe" aria-label="Visualization preview"></iframe>
 							<div id="resize-overlay"></div>
 							<div id="resize-handle-container">
 								<div id="resize-handle"></div>